我们在设计HTML时要考虑到无障碍性，这一点很重要。
拥有无障碍的HTML意味着有残疾的人可以使用网络。有完全失明或视力受损的用户，有听力损失问题的人，以及其他众多不同的残疾。
不幸的是，这个话题并没有得到应有的重视，它似乎没有像其他话题那样酷。
如果一个人看不到你的页面，但仍然想消费它的内容，怎么办？首先，他们怎么做呢？他们不能使用鼠标，他们使用一种叫做屏幕阅读器的东西。你不必去想象这个。你现在就可以试一试。谷歌提供免费的ChromeVox浏览器扩展。可访问性还必须照顾到允许工具轻松地选择元素或在页面中导航。
网页和网络应用程序并不总是以无障碍性作为其首要目标之一，也许第一版发布时没有无障碍性，但事后有可能使网页无障碍。越早越好，但永远不会太晚。
这很重要，在我国，由政府或其他公共组织建立的网站必须是可访问的。
这对使HTML无障碍意味着什么？让我说明一下你需要考虑的主要事项。
注意：还有其他一些需要注意的事情，可能要放在CSS主题里，比如颜色、对比度和字体。或者如何使SVG图像无障碍。我在这里就不谈这些了。
使用语义化的HTML
语义化HTML非常重要，它是你需要注意的主要事项之一。让我举例说明几个常见的情况。
对标题标签使用正确的结构很重要。最重要的是h1 ，你用更高的数字来表示不太重要的，但所有同级的标题应该有相同的含义（想想看，就像一个树状结构一样）
使用strong 和em 而不是b 和i 。从视觉上看，它们看起来是一样的，但前两个有更多的意义与它们相关联。b 和i 是更多的视觉元素。
列表很重要。屏幕阅读器可以检测到一个列表并提供一个概述，然后让用户选择是否进入列表。
一个表格应该有一个caption 标签，描述其内容。
<table>
<caption>Dogs age</caption>
<tr>
<th>Dog</th>
<th>Age</th>
</tr>
<tr>
<td>Roger</td>
<td>7</td>
</tr>
</table>
对图像使用alt 属性
所有图像必须有一个描述图像内容的alt 标签。这不仅仅是一个好的做法，它是HTML标准所要求的，你的HTML如果没有这个标签就不能被验证。
<img src="dog.png" alt="picture of my dog">
它对搜索引擎也有好处，如果这也是促使你添加它的原因的话。
使用role 属性
role 属性让你为你的页面中的各种元素指定特定的角色。
你可以分配很多不同的角色：补充、列表、列表项、主、导航、区域、标签、警报、应用、文章、横幅、按钮、单元格、复选框、内容信息、对话框、文档、饲料、数字、表格、网格、网格单元格、标题、img、列表框、行、行组、搜索、开关、表、标签面板、文本框、计时器。
这是一个很大的问题，为了全面了解它们，我给你这个MDN链接。但是，你不需要为页面中的每个元素都分配一个角色。在大多数情况下，屏幕阅读器可以从HTML标签中推断出来。 例如，你不需要为像nav,button,form 这样的语义标签添加一个角色标签。
让我们以nav 标签为例。您可以像这样用它来定义页面导航。
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
如果你被迫使用div 标签而不是nav ，你会使用navigation 角色。
<div role="navigation">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</div>
所以在这里你得到了一个实际的例子：role ，当标签已经不能表达意思时，就用它来分配一个有意义的值。
使用tabindex 属性
tabindex 属性允许你改变按Tab键选择 "可选择 "元素的顺序。默认情况下，只有链接和表单元素可以通过使用Tab键导航来 "选择"（而且你不需要对它们设置tabindex ）。
添加tabindex="0" 可以使一个元素成为可选择的。
<div tabindex="0">
...
</div>
使用tabindex="-1" ，则可以将一个元素从这种基于Tab的导航中移除，而且它可以很有用。
使用aria 属性
ARIA是一个缩写，意思是可访问的富互联网应用，定义了可应用于元素的语义。
aria-label
这个属性是用来添加一个字符串来描述一个元素。
例子。
<p aria-label="The description of the product">...</p>
我在我的博客侧边栏上使用了这个属性，那里有一个用于搜索的输入框，没有明确的标签，因为它有一个占位符属性。
aria-labelledby
这个属性在当前元素和标注它的元素之间设置了一个关联。
如果你知道一个input 元素如何与一个label 元素相关联，这也是类似的。
我们传递描述当前元素的项目ID。
例子。
<h3 id="description">The description of the product</h3>
<p aria-labelledby="description">
...
</p>
aria-describedby
这个属性让我们把一个元素和另一个作为描述的元素联系起来。
例子。
<button aria-describedby="payNowDescription" >Pay now</button>
<div id="payNowDescription">Clicking the button will send you to our Stripe form!</div>
使用 aria-hidden 来隐藏内容
我喜欢在我的网站中采用极简的设计。例如，我的博客大部分都是内容，在侧边栏有一些链接。但是，边栏中的一些东西只是视觉元素，对于一个看不到页面的人来说，并不能增加其体验。比如我的标志图片，或者黑暗/明亮的主题选择器。
添加aria-hidden="true" 属性将告诉屏幕阅读器忽略该元素。
