许多人使用键盘或其他模仿键盘功能的软件/硬件(例如开关设备)作为他们的主要导航方式。存在暂时性身体限制(例如扭伤手腕或腕管等精细运动障碍)以及一些残障人士可能会出于个人偏好、效率或硬件损坏而选择使用键盘浏览网页。
弱视或盲人用户可以结合使用键盘与放大功能或屏幕阅读器软件进行导航。不过,他们使用键盘快捷键命令浏览屏幕的方式可能与视力正常的用户不同。
为所有这些残障人士和情况提供键盘支持至关重要。键盘无障碍功能的大部分集中在焦点上。焦点是指屏幕上的哪个元素当前从键盘接收输入。
在本单元中,我们将重点介绍键盘和可聚焦元素的 HTML 结构和 CSS 样式。JavaScript 模块包含有关互动元素的焦点管理和按键的更多信息。
焦点顺序
键盘用户可以导航到的元素称为可聚焦元素。焦点顺序(也称为 Tab 键或导航顺序)是元素获得焦点的顺序。默认焦点顺序必须逻辑清晰、直观,并与页面的视觉顺序相匹配。
对于大多数语言,焦点顺序从页面顶部开始,到底部结束,从左向右移动。不过,某些语言是从右向左阅读,因此网页的主要语言可能需要不同的焦点顺序。
默认情况下,焦点顺序包括自然可聚焦的 HTML 元素,例如链接、复选框和文本输入。可自然聚焦的 HTML 元素包括内置的 Tab 键顺序支持和基本的键盘事件处理。
您可以更新焦点顺序,以包括任何通常不会获得焦点的元素,例如非交互式 HTML 元素、自定义组件,或使用可替换自然焦点语义的 ARIA 元素。
制表符索引
聚焦顺序从具有正 tabindex 属性(如有)的元素开始,并从最小正数向最大(如 1、2、3)移动。然后,根据这些元素在 DOM 中的顺序,逐一检查 tabindex 为零的元素。任何具有负数 tabindex 的元素都将从自然焦点顺序中移除。
将零 (tabindex="0"
) 的 tabindex 应用到通常不可聚焦的元素时,系统会按照这些元素在 DOM 中的显示方式将这些元素添加到页面的自然焦点顺序中。不过,与自然可聚焦的 HTML 元素不同,您必须提供额外的键盘支持,才能使这些元素完全可供访问。
同样,如果您有一个通常可聚焦但处于非活动状态的元素(例如,某个按钮在填充输入字段前处于非活动状态),则应为此元素添加负的 tabindex (tabindex="-1"
)。向辅助技术和键盘添加负的 tabindex 信号,表明应从自然焦点顺序中移除该按钮。不过别担心,您可以根据需要使用 JavaScript 将焦点重新添加到元素上。
在此示例中,我们向自然不会获得焦点的元素添加了 tabindex
属性。系统使用 tabindex
操纵这些元素的顺序,以说明它在焦点顺序方面的作用。这是一个错误做法的示例!
跳过链接
目前,大多数网站的页面主标题中都有长长的菜单链接列表,而且每个页面都是一致的。这对于一般导航来说非常棒,但对于仅使用键盘的用户来说,很难轻松转到网站的主要内容,而无需多次按 Tab 键。
如需跳过冗余或无用的链接组,一种方法是添加跳过链接。跳转链接是一种锚定链接,它使用相应部分的 ID 跳转到同一网页的其他部分,而不是将用户转到网站上的其他网页或外部资源。跳转链接通常会添加为用户到达网站时遇到的第一个可聚焦元素,并且在用户点按链接之前可以显示或隐藏,具体取决于设计要求。
当用户按 Tab 键且有效的跳过链接存在后,系统会将键盘焦点发送到跳过链接。用户可以点击“跳过”链接并跳转至标题部分和主导航栏。如果他们选择不点击跳过链接而继续在 DOM 中向下按 Tab 键,系统会将其转到下一个可聚焦元素。
与所有链接一样,跳过链接必须包含有关链接用途的背景信息,这一点非常重要。添加“跳至主要内容”短语可让用户知道点击链接后会转到何处。在为链接提供其他上下文(如 aria-labelledby、aria-label)或将其添加到 <a>
元素的文本内容时,有多个代码选项可供选择,如示例所示。
焦点指示标志
正如您刚刚所学,焦点顺序是键盘无障碍功能的一个重要方面。确定如何设置焦点的样式也很重要。因为即使焦点顺序非常棒,如果没有适当的样式,用户如何知道自己在网页上的位置呢?
可见的焦点指示标志是让用户始终了解自己在网页上的位置的重要工具。对于视力正常的键盘用户来说,这项功能尤为重要。
浏览器默认样式设置
如今,每个现代网络浏览器都有不同的默认视觉样式,适用于您的网站或应用中的可聚焦元素,有些元素比其他浏览器更容易可见。当用户按 Tab 键浏览页面时,系统会在相应元素获得键盘焦点时应用此样式。
如果您允许浏览器处理焦点样式,请务必检查您的代码,以确认主题不会替换浏览器的默认样式。替换项通常在样式表中写为 "outline: 0"
或 "outline: none"
。这小段代码可能会移除浏览器的默认焦点指示器样式,导致用户很难浏览您的网站或应用。
a:focus { outline: none; /* don't do this! */ }
a:focus { outline: auto 5px Highlight; /* for non-webkit browsers */ outline: auto 5px -webkit-focus-ring-color; /* for webkit browsers */ }
自定义样式
当然,您可以在默认浏览器样式的基础上,创建一个与您的主题相得益彰的自定义焦点指示标志。创建自定义焦点指示器时,您可以自由发挥创意!
焦点指示标志形状可以有多种形式,包括轮廓、边框、下划线、方框、背景更改或一些其他不依赖于颜色来表示键盘焦点在该元素上的明显样式更改。
您可以更改焦点指示器样式,确保它不会在后台丢失。例如,当页面采用白色背景时,您可以将按钮焦点指示器设置为蓝色背景。当页面使用蓝色背景时,您可以将同一按钮焦点样式设置为白色背景。
您可以根据元素类型更改焦点元素样式。例如,您可以为正文链接使用虚线下划线,但为按钮元素选择圆角边框。
对于一个页面上的焦点指示器样式数量没有限制,但请务必将其控制在合理的数量内,以避免不必要的混淆。
小结
为使网站或应用具备无障碍功能,可使用鼠标访问的所有内容也必须通过键盘访问。此模块侧重于键盘无障碍功能的视觉方面,尤其是焦点顺序和焦点指示器。
检查您的掌握程度
测试您对 ARIA 和 HTML 知识的掌握情况
以下哪个 :focus
CSS 样式示例在白色背景上最易于访问?
outline: 0.5rem solid yellow;
background-color:black;
text-decoration: dotted underline 2px blue;
outline: none; text-decoration:none; background:none;
跳过链接有什么用途?