5 步构建可访问 Web 应用

为了让有困难使用页面的用户也能使用，需要Stark 原则。这应该也是创建网络应用的一般原则。

• Semantic HTML
  • Use buttons for actions
  • 使用 <a> 时, 需要提供 href
  • 适用 <img> 时, 需要提供 alt
  • 不要使用 CSS 来冒充 heading <h1> 之类的。
  • 适用 semantic HTML 标签, 例如 nav, header, main
  • <select>可以使用空格选择
  • <button> 可以使用回车选择，使用 tab 聚焦
  • <nav> 可以使用方向键选择
• tabindex
  • 控制用户使用 tab 时聚焦的顺序
  • 0 是默认的，不要使用正整数，要使用负整数，负数可以标记不在页面上的元素。正数可能会让用户混淆，正确的方式应该是使内容按照用户使用习惯排列。
• Aria Tags
  • aria-label <button aria-label="Close" onclick="myDialog.close()">{a svg for example}</button> 对没有文本的按钮进行标记。
• role
  • 能使用正规的 HTML 标签的时候就不要使用 role
  • alert, button, row checkbox 等
• Keyboard Navigation & screen reader
  • 只使用 tab, 空格, 方向键来正常访问页面

• 文字有明显的对比色