Open wengjq opened 5 years ago
没有名称的按钮对于依赖屏幕阅读器的用户不可用。
建议：
对于 元素和具有 role = "button" 的元素：
<button id="text">Name</button> <button id="al" aria-label="Name"></button> <button id="alb" aria-labelledby="labeldiv"></button> <div id="labeldiv">Button label</div>
对于 的元素：
对于 和 ：
文档标题提供页面用途的概述。对于依靠屏幕阅读器的用户而言，标题尤其重要，因为他们对页面的了解较少。
标签阐明了表单元素的用途。尽管每个元素对于有视力的用户而言都是显而易见的，但对于依赖屏幕阅读器的用户而言，情况往往并非如此。
将标签与每个表单元素相关联。有四种方法可以这样做：
<label>First Name <input type="text"/></label>
<label for="first">First Name <input type="text" id="first"/></label>
<button class="hamburger-menu" aria-label="menu">...</button>
<span id="foo">Select seat:</span> <custom-dropdown aria-labelledby="foo">...</custom-dropdown>
信息性图像应具有 alt 属性，该属性应包含该图像内容的文本描述。 屏幕阅读器通过将文本内容转换为他们可以使用的形式（例如合成语音或盲文），使视障用户可以使用您的网站。 屏幕阅读器无法转换图像。 因此，如果您的图像包含重要信息，则视障用户将无法访问该信息。
可以在 DevTools 的 Console 选项卡中使用以下命令来查找没有 alt 属性的图片
$$('img:not([alt])');
tabindex 属性使元素可以通过键盘导航。正值表示元素的明确导航顺序。 尽管这是有效的，但实际上很难正确地进行操作，并且会给依赖辅助技术的用户带来无法使用的体验。
有关更多信息，请参见 使用 tabindex。
将这些元素中的每一个的 tabindex 设置为 -1（对于不应通过键盘导航的元素）或 0（对于应通过键盘进行导航的元素）。 如果您需要元素在 Tab 键顺序中更早出现，请考虑将在 DOM 中去移动他们的顺序。
1、按钮必须具有可识别的文字
没有名称的按钮对于依赖屏幕阅读器的用户不可用。
建议：
对于
对于 的元素：
对于 和 ：
2、文档必须具有标题元素
文档标题提供页面用途的概述。对于依靠屏幕阅读器的用户而言，标题尤其重要，因为他们对页面的了解较少。
建议：
3、每个表单元素都有一个标签元素
标签阐明了表单元素的用途。尽管每个元素对于有视力的用户而言都是显而易见的，但对于依赖屏幕阅读器的用户而言，情况往往并非如此。
将标签与每个表单元素相关联。有四种方法可以这样做：
4、每个图像都有一个 alt 属性
信息性图像应具有 alt 属性，该属性应包含该图像内容的文本描述。 屏幕阅读器通过将文本内容转换为他们可以使用的形式（例如合成语音或盲文），使视障用户可以使用您的网站。 屏幕阅读器无法转换图像。 因此，如果您的图像包含重要信息，则视障用户将无法访问该信息。
可以在 DevTools 的 Console 选项卡中使用以下命令来查找没有 alt 属性的图片
5、元素的 tabindex 属性小于等于 0
tabindex 属性使元素可以通过键盘导航。正值表示元素的明确导航顺序。 尽管这是有效的，但实际上很难正确地进行操作，并且会给依赖辅助技术的用户带来无法使用的体验。
有关更多信息，请参见 使用 tabindex。
将这些元素中的每一个的 tabindex 设置为 -1（对于不应通过键盘导航的元素）或 0（对于应通过键盘进行导航的元素）。 如果您需要元素在 Tab 键顺序中更早出现，请考虑将在 DOM 中去移动他们的顺序。