前端最佳实践（四）—— Lighthouse 应用可用性

[wengjq]

1、按钮必须具有可识别的文字

没有名称的按钮对于依赖屏幕阅读器的用户不可用。

建议：

对于 元素和具有 role = "button" 的元素：

• 设置元素的内部文本。
• 设置 aria-label 属性。
• 将该 aria-labelledby 属性设置为屏幕阅读器可见的文本元素。

<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>

对于 的元素：

• 设置 value 属性
• 设置 aria-label 属性
• 设置 aria-labelledby 属性

对于 和 ：

• 设置 value 属性，或省略它。浏览器在 value 省略时赋予 "submit" 或 "reset" 的默认值
• 设置 aria-label 属性
• 设置 aria-labelledby 属性

2、文档必须具有标题元素

文档标题提供页面用途的概述。对于依靠屏幕阅读器的用户而言，标题尤其重要，因为他们对页面的了解较少。

建议：

• 描述性和简洁性。避免使用模糊的描述，例如“首页”。
• 避免关键字填充。这对用户没有帮助，搜索引擎可能会将页面标记为垃圾。
• 避免重复标题。
• 可以为标题加上商标，但要简洁。

3、每个表单元素都有一个标签元素

标签阐明了表单元素的用途。尽管每个元素对于有视力的用户而言都是显而易见的，但对于依赖屏幕阅读器的用户而言，情况往往并非如此。

将标签与每个表单元素相关联。有四种方法可以这样做：

• 隐式的标签：

<label>First Name <input type="text"/></label>

• 明确的标签：

<label for="first">First Name <input type="text" id="first"/></label>

• aria-label:

<button class="hamburger-menu" aria-label="menu">...</button>

• aria-labelledby:

<span id="foo">Select seat:</span>
<custom-dropdown aria-labelledby="foo">...</custom-dropdown>

4、每个图像都有一个 alt 属性

信息性图像应具有 alt 属性，该属性应包含该图像内容的文本描述。 屏幕阅读器通过将文本内容转换为他们可以使用的形式（例如合成语音或盲文），使视障用户可以使用您的网站。 屏幕阅读器无法转换图像。 因此，如果您的图像包含重要信息，则视障用户将无法访问该信息。

可以在 DevTools 的 Console 选项卡中使用以下命令来查找没有 alt 属性的图片

$$('img:not([alt])');

5、元素的 tabindex 属性小于等于 0

tabindex 属性使元素可以通过键盘导航。正值表示元素的明确导航顺序。 尽管这是有效的，但实际上很难正确地进行操作，并且会给依赖辅助技术的用户带来无法使用的体验。

有关更多信息，请参见 使用 tabindex。

将这些元素中的每一个的 tabindex 设置为 -1（对于不应通过键盘导航的元素）或 0（对于应通过键盘进行导航的元素）。 如果您需要元素在 Tab 键顺序中更早出现，请考虑将在 DOM 中去移动他们的顺序。