a11y 小点

[anjia]

目录：

[anjia]

ARIA

• Roles
  • role="link"（几乎不用）
  • role="button"
  • role="menu"
  • role="menuitem"
• States
  • aria-pressed="false" 切换按钮
  • aria-disabled="true" 是否禁用
  • aria-expanded="true" 菜单按钮
• Properties
  • aria-label="text"
  • aria-labelledby="IDREF"
  • aria-describedby="IDREF"
  • aria-haspopup="true" 菜单按钮（配合role="button"）
  • aria-controls="IDREF" 菜单按钮控制的菜单
• 其它
  • tabindex="0"
  • tabindex="-1" JS 可以访问到，但是不在 tab 序列里了

https://www.w3.org/TR/wai-aria-1.1/

[anjia]

键盘交互

• <a>: enter键
• role="button"：enter和space键
• role="button" aria-haspopup="true" 菜单按钮
  • enter和space和down arrow键
  • up arrow键

BACKSPACE: 8,
TAB: 9,
RETURN: 13,
ESC: 27,
SPACE: 32,
PAGE_UP: 33,
PAGE_DOWN: 34,
END: 35,
HOME: 36,
LEFT: 37,
UP: 38,
RIGHT: 39,
DOWN: 40,
DELETE: 46

[anjia]

焦点管理

[anjia]

番外

https://www.deque.com/, digital equality, ann arbor, mi（安阿伯, 密歇根州, 美国） https://webaim.org, web accessibility in mind

其中，https://www.deque.com/

• UX、HTML5、JS
• WCAG、ARIA
• 508

https://www.epa.gov/accessibility, Section 508: Accessibility EPA, Environmental Protection Agency, 美国环境保护署 United States, 美国政府的官方网站

法律条文，第508节 由1998年的《劳动力投资法》修订的，《康复法案》的第508节规定了：信息和通信技术对残疾人要是可访问的。美国访问委员会，建立了 Section 508 标准，实施相关法律，并提供无障碍要求。

• 第508节：信息和通信技术，ICT，Information and Communications Technology
• 第501节：合理的住宿

《康复法案》第508条是几项伤残法律之一

[anjia]

屏幕阅读器

• Windows
  • 内置的：Narrator
  • 免费产品：NVDA、ChromeVox
  • 付费产品：JAWS、Dolphin
• Mac OS X
  • 内置的：VoiceOver
  • 插件：ChromeVox
• Android 内置的：TalkBack
• Chrome OS 内置的：ChromeVox
• Linux：免费的 Orca

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility

VoiceOver

VO 键，是 VoiceOver 激活键，control+option

1. 阅读
   • VO + A 开始阅读
   • control 停止阅读
   • VO + → 阅读下一项
   • VO + ← 阅读上一项
   • VO + P 阅读段落
   • VO + S 朗读句子
   • VO + W 读取单词（多次按W可以按字母和语音拼写单词）
   • VO + B 从顶部读取到当前位置
   • VO + Home 跳到页面顶部（在笔记本电脑键盘上，fn+← 是Home）
   • VO + End 跳至页面底部（在笔记本电脑键盘上，fn+→为“结束”）
2. 快速导航
   • VO+L 跳到地址栏，可输入URL
   • VO + U：打开 Web Router 导航面板
     • headings
     • form controls
     • links
     • landmarks
     • articles ?
     • web spots 类似收藏夹
     • window spots
   • 在打开 Web Router 的情况下：
     • VO + ← ↑ ↓ →：浏览内容
     • VO + CMD + H：逐个标题向前移动
     • VO + CMD + H + Shift：逐个标题向后移动

在运行 VoiceOver 时，普通的键盘操作保持不变。比如TAB Shift+TAB 箭头键 空格键 Enter等

https://webaim.org/articles/voiceover/ https://help.apple.com/voiceover/mac/10.15/ https://www.apple.com/voiceover/info/guide/_1134.html