轮播由圆形排列的部分(或幻灯片)组成,这些部分(或幻灯片)会在短时间后“滑入视图”。轮播主要用于起始页以展示关键内容。
常见轮播案例
- 用户切换到预告片内容,然后切换到暂停按钮
- 使用 ENTER 激活暂停按钮。
- 这会停止旋转木马的运动。
- 然后用户跳回“MEHR”链接并激活它。
- 打开有关业务计划的页面。
轮播的典型可用性问题
轮播有一般的易用性问题和更具体的可用性问题,应该小心使用它们。
自动活动扰乱了用户的活动
轮播通常会在页面打开后显示内容的变化。它们通常用在起始页上并覆盖屏幕的很大一部分。通常,他们会让新内容以固定的时间间隔滑入可见区域,通常是在 5-20 秒之后。
这意味着刚开始阅读轮播幻灯片中的标题或预告文本的用户会发现该内容意外消失了。它被别的东西取代了。这可能非常恼人。对于将注意力集中在屏幕上其他内容的用户,旋转木马移动也可能会分散他们的注意力。
运动通常是不可能或很难停止的
通常,轮播没有停止运动的元素。有时,当用户将光标移到轮播图上或当他们切换到轮播图内容时,动作会停止,但许多用户并不知道或不希望发生这种情况。
当轮播有停止运动的元素时,它通常隐藏在下角。它通常对比度不足。它通常无法通过键盘访问或对比度和焦点指示较弱。对于可能最受旋转木马影响的低视力用户来说,这个元素通常很难追踪。
视频示例
- 低视力使用:寻找暂停旋转木马的方法
- 屏幕阅读器使用:自动输出轮播阻碍用户界面输出
旋转木马的辅助功能提示
如果你确实想拥有一个:
- 提供一个清晰可见的按钮来暂停靠近轮播内容的轮播。通常,暂停按钮在激活后会变成播放按钮。一种选择是将暂停按钮放在幻灯片的顶部(保证足够的对比度)。
- 确保暂停/播放按钮具有反映状态的可访问名称。当暂停按钮可见且动画处于活动状态时,屏幕阅读器用户应该听到类似“暂停动画”的声音,而当播放按钮可见且轮播暂停时,屏幕阅读器用户应该听到类似“播放动画”的声音。
- 不要太快地交换幻灯片。与用户操作无关的内容移动和变化可能会让人迷失方向,尤其是对于经常只能看到一小部分屏幕内容的弱视用户而言。
- 一旦轮播内容获得焦点(键盘或鼠标),就停止动画。这使用户可以轻松阅读预告文本并跟踪内容链接,而不会被轮播动画打断。
- 确保前进到下一张或上一张幻灯片的按钮具有良好的对比度。用户可能希望按照自己的节奏探索轮播内容。旋转木马边缘典型的左右箭头按钮应该很大并且具有良好的对比度。
- 确保幻灯片中的交互式内容可通过键盘操作。可以聚焦和激活下一张或上一张幻灯片的箭头,或者使用 Tab 键聚焦幻灯片内容并在焦点移动到下一张/上一张幻灯片的内容时自动推进轮播。幻灯片中的链接也可以通过键盘操作。
- 考虑是否可以使用轮播的非动画状态作为默认状态。如果用户选择自动播放幻灯片,他们仍然可以点击“播放”。
延展阅读
-
Should I use a carousel? Jared Smith, Webaim (no date). A critical look at carousels.
-
A content slider, Heydon Pickering, Inclusive Components, November 2017. An elegant, low-weight implementation.
-
Simple Swipe With Vanilla JavaScript - Ana Tudor, CSS Tricks, April 2018. About using touch event handlers for sliding content / carousels.
Note: This would need a static alternative to meet WCAG 2.1 Success Criterion 2.5.1 Pointer Gestures