什么是无障碍？
无障碍是一种让尽可能多的用户可以使用你的网站的做法。传统上我们认为这只与残疾人士有关，但提升网站的无障碍也可以让其他用户群体受益。比如使用移动设备的人群，那些使用低速网络连接的人群。
无障碍性是一种关注包容性的设计方法，它旨在消除物理、认知和技术上的障碍，以确保所有人都能平等地参与社会和获得相同的机会。
在设计和开发网站、应用程序、文档和其他数字内容时，无障碍性应该被视为一项重要的考虑因素。通过使用无障碍性最佳实践，可以确保尽可能多的人能够访问和使用这些内容，促进包容性和平等的社会环境。
此文章主要以视力受损或盲人用户常用的屏幕阅读器为例子。屏幕阅读器能够解析网页内容，并将其转换成声音或以其他方式呈现给用户。
尽管如此，但我们仍然要知道“100% 的无障碍”是一个无法实现的理想。
HTML标签语义化
对于屏幕阅读器用户来讲，最佳辅助功能之一是拥有标题，段落，列表等内容的良好结构。 可以看一下下面的代码
<h1>这是H1标签</h1>
<p>这是第一个p标签</p>
<p>这是第二个p标签</p>
<ol>
<li>这是第一个li标签</li>
<li>这是第一个li标签</li>
<li>这是第一个li标签</li>
</ol>
<h2>这是h2标签</h2>
<p>这是第三个p标签</p>
当你在使用屏幕阅读器来查看时，你会发现
- 屏幕阅读器会在您浏览内容时读取每个标题，通知您标题是什么，段落是什么等。
- 它在每个元素之后停止，让你以任何适合你的速度前进。
- 你可以在许多屏幕阅读器中跳到下一个/上一个标题。
- 你还可以在许多屏幕阅读器中显示所有标题的列表，使您可以像使用便利的目录一样使用它们以查找特定内容。
以strong和b标签为例
在屏幕阅读器中，strong标签和类似的标签（如b标签）在语义上有一些差别。
strong标签：strong标签用于表示文本的重要性或强调。屏幕阅读器通常会以更强调的语气读出strong标签内的文本。这有助于用户更好地理解文本的重要性或关键信息。例如，屏幕阅读器可能会以更大的音量或更慢的速度读出strong标签内的文本。b标签：b标签用于设置文本的粗体样式，但它并没有强调文本的语义含义。屏幕阅读器通常会以正常的语气读出b标签内的文本，而不会特别强调。对于屏幕阅读器用户来说，b标签只是表示文本的视觉样式，而没有特殊的语义含义。
strong标签在屏幕阅读器中具有更强的语义含义，用于强调文本的重要性或关键信息，而b标签仅用于设置文本的粗体样式，没有特殊的语义含义。在编写网页时，应根据文本的语义含义来选择使用strong标签还是b标签，以确保屏幕阅读器用户能够正确理解文本的重要性。
常用标签
通过html标签语义化，屏幕阅读器就会更加准确的识别相关内容，采用更加准确的语气告诉障碍者，在一些标签上，屏幕阅读器可能会有一些差异，并表现出不同的行为方式，比如说：
-
标题标签（h1-h6）：屏幕阅读器通常会将标题标签视为页面的重要组成部分。它们可以帮助用户快速了解页面的结构和内容。屏幕阅读器可能会根据标题的级别进行不同的语调和语速调整，以突出显示页面的层次结构。
-
链接标签（a）：屏幕阅读器会将链接标签视为导航元素，并通常会读出链接的文本内容。它会告诉用户该链接指向的位置或目标。屏幕阅读器还可能提供一些功能，如通过快捷键跳转到链接目标或在新标签页中打开链接。
-
图像标签（img）：屏幕阅读器无法直接读取图像内容，但它可以读取图像标签中的替代文本（alt属性）。替代文本应提供对图像的描述或相关信息，以便用户了解图像的内容。屏幕阅读器还可以提供一个功能，允许用户查看图像的详细描述或原始图像。
-
表格标签（table）：屏幕阅读器可以将表格内容按行和列进行读取，以帮助用户理解表格的结构和数据。它可以读取表头（th）和单元格（td）中的文本内容，并提供一些功能，如跳转到表格的开头或结尾。
-
表单标签（form）：屏幕阅读器可以读取表单元素，如输入框、复选框和按钮，并提供一些功能，如将焦点移动到下一个表单元素或提交表单。它还可以读取表单标签中的说明文本，以帮助用户了解表单的目的和使用方式。
总体而言，屏幕阅读器的具体行为取决于其品牌和版本，以及用户的个人设置和偏好。不同屏幕阅读器可能会有不同的语音合成引擎、快捷键和设置选项。
我们应该怎么做呢？
作为前端开发者，养成良好的开发行为和习惯不仅有助于我们自己，也有可能帮助到一些有障碍的人群。
