键盘辅助功能

介绍

重要

确保仅使用键盘即可访问所有内容。

键盘可访问性是Web可访问性最重要的方面之一许多运动障碍用户依赖键盘盲人用户通常也使用键盘进行导航有些人有震颤,不允许精细的肌肉控制其他人很少或根本没有使用他们的手有些人根本没有手,无论是出生缺陷,意外事故还是截肢除了传统的键盘之外,一些用户可以使用修改的键盘或模仿键盘功能的其他硬件。

潜在问题

网页可以通过多种方式为依赖键盘导航的用户带来困难以下是一些最常见的问题。

重点指标

键盘用户通常使用标签用于浏览网页上的交互元素的键 - 链接,按钮,用于输入文本的字段等When an item has keyboard "focus", it can be activated or manipulated with the keyboard必须为视力正常的键盘用户提供一个视觉当前具有键盘焦点的元素的指示符基本焦点指示器由Web浏览器自动提供,通常显示为聚焦元素周围的边框(称为轮廓)但是,可以通过应用隐藏这些轮廓概要:0要么概述:无CSS可聚焦元素。

重要

避免概要:0链接和其他可以接收键盘焦点的元素上的类似样式。

除了默认大纲之外,您还可以使用CSS通过向链接添加背景颜色或其他视觉样式以及将接收键盘焦点的其他控件来使焦点指示器在视觉上更加明显和键盘友好可以设置轮廓以符合您的网站设计。

无法接收键盘焦点的项目

默认情况下,用户只能使用键盘导航到链接,按钮和表单控件应尽可能使用这些本地元素如果无法做到这一点,您可能需要使用的tabindex = “0”确保元素可以接收键盘焦点。

注意

注意:一个<A>元素只有键盘时才具有非空的href属性。<A><a href="">不应该用于链接。

在万博体育官网网站定制小部件

尽管应该尽可能使用原生键盘元素,但有时HTML不足并且需要自定义“小部件”复杂的菜单,滑块,对话框,选项卡面板等必须全部构建以支持键盘可访问性这意味着必须发生以下情况:

  • 交互以直观和可预测的方式呈现
  • JavaScript事件处理程序使用键盘和鼠标。
  • 交互使用标准化击键。

ARIA设计模式描述许多常见小部件的标准键盘交互。

冗长的导航

有视力的鼠标用户可以直观地扫描网页并直接点击任何项目键盘用户必须按标签键或其他导航键,用于浏览用户想要激活的项目之前的交互式元素对于有运动障碍的用户来说,通过漫长的导航进行切换可能特别苛刻。

长链接列表或其他可导航项可能会给仅限键盘的用户带来负担以下最佳实践可以促进高效的键盘导航:

键盘测试

使用键盘进行测试是任何辅助功能评估的重要组成部分键盘测试的基础很简单 -标签key可用于浏览链接和表单控件,输入(而有时空格键)选择一个元素,箭头键有时用于其他导航但是,使用键盘进行测试时,您不仅要尝试与页面成功交互,还要确保所有交互都是可预测的This requires an understanding of common keyboard interactions.

下表包括许多最常见的在线交互,交互的标准按键以及有关测试期间要考虑的事项的其他信息。

相互作用 击键 笔记
导航到大多数元素
  • 标签
  • 转移+标签- 向后导航
  • 必须存在键盘焦点指示符。
  • 导航顺序应该是逻辑和直观的。
链接 输入
按键 输入要么空格键 确保ARIA元素角色=“按钮”可以使用两个键命令激活。
复选框 空格键- 选中/取消选中一个复选框 如果可以选择一个或多个选项,则应使用复选框。
单选按钮
  • /要么/- 选择一个选项。
  • 标签- 转到下一个元素。
当只能选择一个组中的一个选项时,应使用单选按钮。
选择(下拉菜单)菜单
  • /- 在菜单选项之间导航
  • 空格键- 扩大
您也可以通过键入字母进行筛选,但此行为因浏览器而异有些会在您输入时进行过滤,例如自动填充其他人只会按第一个字母排序例如,在美国国家名单中,打击一个然后[R可能会带你去一个rizona,或者它可能会带你去阿拉巴马然后[R霍德岛。
自动完成
  • 输入以开始过滤
  • /- 导航到一个选项
  • 输入- 选择一个选项
对话 退出- 关
  • 模态对话框应保持键盘焦点。
  • 非模态对话框在失去焦点时应自动关闭。
  • 当对话框关闭时,焦点通常应返回打开对话框的元素。
滑块
  • /要么/- 增加或减少滑块值
  • /结束- 开始或结束
  • 对于双滑块(设置范围),标签/转移+标签应该在每一端之间切换。
  • 在一些滑块上一页/向下翻页可以移动更大的增量(例如,10)。
菜单栏
  • /- 上一个/下一个菜单选项
  • 输入- 展开菜单(可选)并选择一个选项。
  • /- 展开/折叠子菜单
  • 并非所有菜单都应具有这些控件更简单的菜单通常应该依赖标签/输入
标签面板
  • 标签- 一次导航到选项卡组,一次导航到选项卡组
  • /要么/- 上一个/下一个标签。
  • 这适用于在不加载新页面的情况下更改的“应用程序”选项卡如果菜单看起来像一组标签,但实际上是一组指向不同页面的链接,标签输入更合适。
  • 按箭头键时,选项卡内容应自动更新您不应按Enter键以激活选项卡。
'树'菜单
  • /- 导航上一个/下一个菜单选项
  • /- 展开/折叠子菜单,向上/向下移动一级。
滚动
  • /- 垂直滚动
  • /- 水平滚动
  • 空格键/转移+空格键- 逐页滚动

最小化水平滚动。

注意

ARIA创作实践文件提供有关这些和其他常见交互的其他信息。