许多人会使用键盘或其他模仿 (例如开关设备)作为键盘的主要功能 导航。暂时性身体限制(如手腕扭伤)的人士 或腕管等细小的运动障碍者, 出于个人原因,可能会选择使用键盘浏览网页 性能、性能或硬件损坏等问题
弱视或盲人用户可以使用键盘和 放大功能或屏幕阅读器软件。不过,它们可能会使用不同的 与视力正常的用户相比,使用键盘快捷键命令浏览屏幕。
为所有这些残障情况和情况提供键盘支持至关重要。答 键盘无障碍功能在很大一部分上 focus。焦点是指屏幕上的哪个元素 可接收键盘的输入
在本单元中,我们主要介绍 键盘和可聚焦的元素。通过 JavaScript 模块包含更多 有关交互元素的焦点管理和按键的信息。
焦点顺序
键盘用户可以导航到的元素称为可聚焦元素 元素。焦点顺序。 (也称为 Tab 键或导航顺序)是指元素接收元素的顺序, 关注度。默认焦点顺序必须自然、直观,并与视觉内容相一致 网页的顺序。
对于大多数语言,焦点顺序从页面顶部开始,到底部结束,按照从左到右的顺序排列。不过,有些语言是从右向左阅读的,因此网页的主要语言可能需要采用不同的焦点顺序。
默认情况下,焦点顺序包含自然可聚焦的 HTML 元素,例如 链接、复选框和文本输入。自然可聚焦的 HTML 元素包括 内置 Tab 键顺序支持和基本的键盘事件处理功能。
您可以更新焦点顺序,以纳入所有通常不符合该顺序的元素 获得焦点,例如非交互式 HTML 元素、自定义组件或 带有 ARIA 替换 自然焦点语义。
Tabindex
焦点顺序从具有正数的元素开始: tabindex 属性(如果有),并从最小的正数移到 最大(如 1、2、3)。然后继续遍历 Tabindex 为 它们在 DOM 中的顺序相同。所有具有负 tabindex 的元素 从自然焦点顺序中删除。
tabindex
零 (tabindex="0"
) 会应用于通常不可聚焦的元素,它们会
按照它们的显示方式添加到网页的自然焦点顺序中,
在 DOM 中。不过,与自然的可聚焦 HTML 元素不同,
提供额外的键盘支持
使其完全可供访问
同样,如果您的某个元素通常可聚焦,但处于
非活动状态 - 例如,在输入字段被填满前将一直处于无效状态的按钮
in - 您应为此元素添加负 Tabindex (tabindex="-1"
)。正在添加
负 Tabindex 会指示辅助技术和键盘,
按钮应从自然焦点顺序中删除。但不必担心,
根据需要使用 JavaScript 将焦点重新添加到元素上。
在本例中,未将 tabindex
属性添加到
就能自然而然地获得焦点这些元素的顺序是使用
tabindex
来说明它在对焦顺序方面的作用。这是一个
正确做法的示例!
![新的焦点顺序会反映 HTML。](https://web.dev/static/learn/accessibility/focus/image/new-focus-order-reflects-451c5c700368b.gif?authuser=0000&hl=zh-cn)
跳过链接
如今大多数网站的网页主标题中都有一个很长的菜单链接列表 确保网页间的一致性这非常适合常规导航 只使用键盘的用户很难轻松访问网站的主要 而不必多次按 Tab 键。
跳过多余或无用链接组的一种方法是添加 跳过链接。跳转链接是锚标记 使用相应部分的 而无需将用户转到网站上的其他网页或外部 资源。跳转链接通常作为用户的第一个可聚焦元素添加 会在到达相应网站时遇到并且可以看到或隐藏起来的情况 具体取决于设计需要的内容。
当用户按 Tab 键且存在有效的跳过链接时,它会发送 将键盘焦点移至“跳过”链接。用户可以点击跳过链接 (位于标题部分和主导航栏下方)。如果他们选择不点击 跳过链接并继续按 Tab 键向下点击 DOM,它们会发送到下一个 可聚焦元素。
与所有链接一样,跳转链接包含有关
链接的用途。添加短语“跳至主要内容”让用户知道
链接指向的位置有多种代码选项可供选择
为您的链接提供更多背景信息,例如
aria-labelledby、
aria-label 添加标签
添加到 <a>
元素的文本内容中,如示例所示。
![预览获得键盘焦点的 CodePen。](https://web.dev/static/learn/accessibility/focus/image/preview-codepen-keyboard-ae708e66afbe9.gif?authuser=0000&hl=zh-cn)
焦点指示标志
正如您刚刚了解到的,焦点顺序是键盘的一个重要方面 无障碍功能。决定焦点的样式也很重要。因为 即使焦点顺序极佳,用户如何得知自己所处的位置 样式错误?
一个可见的焦点指示器 是告诉用户他们始终在 页面。这对于视力正常且仅使用键盘的用户来说尤为重要。
浏览器默认样式
如今,每个现代网络浏览器都有一个不同的默认视觉样式 适用于您网站或应用中可聚焦的元素,某些元素更容易被用户看到 相较之下当用户在页面中循环浏览时,系统会将此样式作为 元素获得键盘焦点。
如果您允许浏览器处理焦点样式,请务必查看
确认主题不会替换浏览器的默认主题
样式。在下列示例中,替换项通常写为 "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 */ }
自定义样式
当然,您可以在默认浏览器样式的基础上进一步创建自定义 与您的主题形成补充的焦点指示标志。创建自定义焦点时 你有很大的自由发挥创意!
焦点指示器形状可以有多种形式,包括轮廓、边框、 下划线、框、背景变化或一些其他明显的样式变化 不只依赖颜色来指示键盘的焦点在 该元素。
您可以更改焦点指示器样式,以确保它不会在 背景。例如,当网页背景为白色时,您可以将 按钮焦点指示器显示为蓝色背景。当页面颜色变为蓝色时 您可以将同一按钮焦点样式设置为白色背景。
您可以根据元素类型更改焦点元素样式。例如: 您可以针对正文链接使用虚线下划线,但为正文链接选择圆角边框 按钮元素。
![聚焦样式,如 CSS 中所示。](https://web.dev/static/learn/accessibility/focus/image/focus-style-demonstrated-9dce0f0e29ee1.gif?authuser=0000&hl=zh-cn)
对于同一焦点指示器样式的数量,并没有规定 但请务必将其控制在合理的范围内 造成混淆。
小结
为了让网站或应用被视为具有无障碍性 也必须使用键盘访问。本单元 侧重于键盘无障碍功能的视觉方面,尤其是焦点 顺序和焦点指示器。
检查您的理解情况
测试您对 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;
跳过链接的用途是什么?