一、文字对比度低

1、 影响

文字对比度过低，对弱视群体、手机用户以及老年人不友好

2、修正方法

(1) 使用 lighthouse 评估文字对比度

(2) 使用相关工具，根据 WCAG 规定，比较适合的文字对比度是 4.5:1

二、图片没有替代文字

1、影响

对于一些弱视或者盲人群体，阅读网站可能需要播放文字信息，屏幕阅读器是无法识别图片信息的

2、修正方法

(1) 使用 img 元素，直接在 alt 属性里添加图片描述信息

(2) 如果图片在 background 属性里，可以在 aria-label 属性里添加相应的描述信息

(3) 如果图片描述的是其他元素的信息，可以在 aria-labelledby 属性里添加对应的描述

(4) 若图片本身没有意义，可以加一个空的 alt 属性，屏幕阅读器会略过，继续往下阅读

三、空链接和空按钮

1、影响

链接个按钮的文字应该能被屏幕阅读器识别，这也包括作为按钮或链接的图片替换文字。在网页中我们经常会使用一些图标作为按钮或者链接，比如下面这样：

<button>+</button>
<a href="...">
  <img src="twitter.svg" />
</a>

以上 demo 中的按钮和链接确实描述信息，屏幕阅读器会理解为”加按钮”, 链接可能会被阅读为图片的文件名或者链接名，这会让不懂该网站的人感到很迷惑

2、修正方法

在按钮或链接元素的 aria-label 属性中加上描述信息，比如这样

<button aria-label="Add a playlist">+</button>

<a href="..." aria-label="View our Twitter page">
  <img src="twitter.svg" />
</a>

四、缺少表单输入标签

1、影响

一个缺少表单输入标签的栗子：

<label>Name</label>
<input />

<div>Name</div>
<input />

(1) 提升屏幕阅读体验

(2) 扩大小屏幕可点击范围

2、修正方法

(1) 把 input 元素放到 label 元素里

(2) 给 label 元素一个 for 属性，指向 input 元素的 id

(3) 给 input 元素添加 aria-labelledby 属性，写入描述信息元素的 id

这是栗子：

<label>Name: <input /></label>

<label for="name">Name</label>
<input id="name" />

<div id="name">Name</div>
<input aria-labelledby="name" />

五、缺少文档语言描述

1、影响

如果一个网页没有在文档元素中加 lang 属性，屏幕阅读器会把网页的语言默认为阅读器的默认配置语言。若用户是多语言者，可能并不会用屏幕阅读器的默认语言去阅读网页，若使用了错误的语言库阅读发音可能会很奇怪，可能会造成网页不可用

2、修正方法

给 html 元素添加 lang 属性,可以在这里 或这里 查找所有的语言描述

参考文档:

The 6 Most Common Accessibility Problems (and How to Fix Them)