Being unconscious is the ultimate disability.
— Jessa Gamble
Being unconscious is the ultimate disability.
要解决问题首先得知道问题是怎样的，体验屏幕阅读器：
校验
调试
chrome://flags/#enable-devtools-experiments颜色
有什么问题查规范准没错。在自行实现支持 ARIA 的元素时很有用。
对于纯键盘使用者来说， Tab 键承担了重要责任。
要点： Tab 顺序是按照 DOM 结构，而不是 CSSOM 结构。
所以通过 CSS 将元素提前（如 flex order）并不会影响 tab 顺序。在排版的时候需要考虑。
Tab 默认只会识别部分元素，如果需要让其它元素也被识别，加上 tabindex="0" 属性。
不鼓励使用大于 0 的其它数字，除了会造成混乱，一些屏幕阅读器也不一定会遵循。应该用 DOM 顺序来体现 tab 顺序。
要让 tab 忽略一个元素，即直接跳过去，设置 tabindex="-1" 属性。
或者用还在草稿阶段的 inert 属性 (polyfill)。
在一些响应式的网页，侧导航栏在宽度变小时可能会隐藏起来，这时用户如果使用 tab 跳转可能会发现焦点突然不见了，怎么按也没反应。其实是因为 tab 跳到导航栏的链接去了。
解决方式要么改变 DOM 结构，将导航栏移到最后；要么使用前面提到的 inert 属性。
将导航的每个项目绝对定位到屏幕之上，再设置 :focus 样式移下来。就可以实现用户按 tab 时一次只显示一个导航链接，用户再按回车即可跳到该位置。可以参考 Github 网页。
尽可能使用原生支持的元素，如 <button> ，而不是用 <span> 或 <div> 模拟。原因：
使用符合语义的标签，辅助设备会自动理解。
<article>：完整、独立的内容。
<article> 应该包含一个标题（<h1>-<h6>）。<article> 主题应该跟父 <article> 相关联。<article> 应该看其内容是否会出现在文档的提纲（outline）中。<section>：按主题归在一起的部分内容。
<section> 应该包含一个标题（<h1>-<h6>）。<article>。<section> 当 <div> 使用，只为样式时应该用 <div> 。<article> 应该看其内容是否会出现在文档的提纲（outline）中。<nav>：包含一系列链接可以跳转到其它页面或者本页面的某部分。
<aside>：侧边栏，其内容应该不属于主体内容的一部分。
<h1>-<h6>：一个块或子块的标题。
<header>：对最近的父 sectioning content 或 sectioning root 的介绍。
<body>，辅助设备会将其 role 理解为“banner”，见下方。<footer>：代表其最近的父 sectioning content 或 sectioning root 的页脚。
<body>，辅助设备会将其 role 理解为“content information”，见下方。<address>：为其最近的父 <article> 或 <body> 元素提供联系信息。
sectioning root 包括 <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>.
Sectioning content 包括 <article>, <aside>, <nav>, <section>.
Landmark roles 定义网页的几个主要部分，可以让辅助设备快速跳转。
总共有八个。
banner：唯一。跟网站相关的内容，如 logo 、赞助商、站内搜索等。complementary：对主体内容的补充。与主体内容相关，但本身独立。如相关文章。contentinfo：唯一。版权信息、隐私声明等。form：表单。应该设置可见的标题，并用 aria-labelledby 引用标题来告知辅助设备这个表单是干什么的。如果用 JS 提交表单，没有触发 onsubmit 事件，则应该用其它方式通知表单提交。main：唯一。主体内容。navigation：导航栏。region：认为用户可能会感兴趣的，需要让用户可以快速跳转的内容。辅助设备会收集它来生成一个概要页面。每个 region 必须有可见的标题，并用 aria-labelledby 引用。search：搜索框。使用视觉隐藏而不是 display: none; 来隐藏元素同时让辅助设备识别。
.visually-hidden {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
border: 0;
clip: rect(0 0 0 0);
}【完】
评论没有加载，检查你的局域网
Cannot load comments. Check you network.