写给Web开发者使用的无障碍设计指南

这一年多来一直在探讨Web可访问性相关的知识，在小站上也陆续输出了一些有关于Web可访问性相关的技术文章。构建Web可访问性应用或页面涉及到的知识领域绝不仅是某个方面，从设计开始，到Web开发中的HTML、CSS、JavaScript各方面都有，甚至领域还可以更小，比如颜色，工具，ARIA以及一些属性的使用。但是对于很多从未接触过Web可访问性开发的同学来说，他还是会感到困惑。那么今天这篇访问就是来帮助开发者解惑的。因为文章主要就是和大家一起探讨，Web开发者可以根据下面提到的内容或者说手段来对Web可访问性进行优化。如果你对这方面感兴趣的话，请继续往下阅读。

给图像提供可替代文本

构建Web应用或页面时，需要确保图像的替代文本添加到所有信息笔功能图像中。在Web中使用图像主要有两种方式，其一是HTML中使用<img>标签引入图像，其二是CSS给元素添加背景图像。

如果我们使用<img>标签给Web应用添加图像的话，需要使用alt属性给无法看到图像的人，包括使用屏幕阅读器或盲文输出设备的人，提供访问图像内容的途径。大多数文档格式都支持alt文本，比如：

<img src="figure1.png" alt="Figure 1. Percentages of images with alt text" longdesc="figure1-longdesc.html" />

但在Web应用中，有些图像是纯装饰的。如果一个图像是纯装饰的，可以考虑下面几种方式来告诉屏幕阅读器：

• 避免使用HTML的<img>，更建议使用CSS的background-image将图像引入到Web应用中
• 如果在HTML中使用了<img>，应该给alt属性添加一个空字符串，比如alt=" "
• 如果在HTML中使用了<img>，并且给alt设置了具体的描述信息，应该在<img>元素上或其父容器上显式设置role="presentation"或aria-hidden="true"

有关于这方面更深入的探讨还可以阅读：

• WCAG: Non-text Content 1.1.1
• Describes the value of text alternatives to a blind user

在Web中除了使用<img>或CSS的background-image引入图像之外，还有图标的应用。Web中图标的使用除了img和background-image引入之外，还有其他的使用方式，比如说：Icon Font图标 和 SVG图标。那么在使用这些方式构建Web图标的时候，我们也需要为其可访问性做考虑，只不过处理方式有多种，比如字体图标：

<!-- Font Awesome -->
<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
    <i aria-hidden="true" class="fas fa-shopping-cart"></i>
</a>

<a href="path/to/shopping/cart">
    <i aria-hidden="true" class="fas fa-shopping-cart"></i>
    <span class="sr-only">View 3 items in your shopping cart</span>
</a>

/* CSS */
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

.sr-only-focusable:focus,
.sr-only-focusable:active {
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    margin: auto !important;
    overflow: visible !important;
    width: auto !important;
    white-space: normal !important;
}

对于SVG图标，我们可以在<svg>中引入<title>元素，甚至也可以像上面的字体图标一样给SVG图标添加可替代文本信息：

<!-- SVG -->
<svg  class="svg-inline--fa fa-magic fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <title id="svg-inline--fa-title-magic">Magic is included!</title>
    <path fill="currentColor" d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"></path>
</svg>

<!-- aria-label -->
<svg  class="svg-inline--fa fa-magic fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-label="Magic is included!">
    <path fill="currentColor" d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"></path>
</svg>

<!-- aria-label -->
<svg  class="svg-inline--fa fa-magic fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-labelledby="svg-title">
    <title id="svg-title">Magic is included!</title>
    <path fill="currentColor" d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"></path>
</svg>

<button>
    <svg  class="svg-inline--fa fa-magic fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" focusable="true" aria-hidden="true">
        <path fill="currentColor" d="M101.1 505L7 410.9c-9.4-9.4-9.4-24.6 0-33.9L377 7c9.4-9.4 24.6-9.4 33.9 0l94.1 94.1c9.4 9.4 9.4 24.6 0 33.9L135 505c-9.3 9.3-24.5 9.3-33.9 0zM304 159.2l48.8 48.8 89.9-89.9-48.8-48.8-89.9 89.9zM138.9 39.3l-11.7 23.8-26.2 3.8c-4.7.7-6.6 6.5-3.2 9.8l19 18.5-4.5 26.1c-.8 4.7 4.1 8.3 8.3 6.1L144 115l23.4 12.3c4.2 2.2 9.1-1.4 8.3-6.1l-4.5-26.1 19-18.5c3.4-3.3 1.5-9.1-3.2-9.8L160.8 63l-11.7-23.8c-2-4.1-8.1-4.1-10.2.1zm97.7-20.7l-7.8 15.8-17.5 2.6c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L240 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm-192 0l-7.8 15.8L19.3 37c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4L48 69l15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-3-5.4-3-6.8-.1zm416 223.5l-7.8 15.8-17.5 2.5c-3.1.5-4.4 4.3-2.1 6.5l12.6 12.3-3 17.4c-.5 3.1 2.8 5.5 5.6 4l15.6-8.2 15.6 8.2c2.8 1.5 6.1-.9 5.6-4l-3-17.4 12.6-12.3c2.3-2.2 1-6.1-2.1-6.5l-17.5-2.5-7.8-15.8c-1.4-2.8-5.4-2.8-6.8 0z"></path>
    </svg>
    <span class="sr-only">Magic is included!</span>
</button>

正确使用标题

Web页面的大纲很多时候是有HTML中的标题标签（<h1> ~ <h6>）来组建，文档大纲可以用来划分文档并使用这些划分创建具有清晰层次结构。如下图所示：

创建一个健全的文档大纲对于构建可访问性Web应用很重要。这是因为屏幕阅读器并不只是通过从上到下阅读页面上的内容，还有其他的导航方式，例如列出所有的标题，然后直接跳到一个特定的标题。换句话说，屏幕阅读器可以获得所有标题的列表，级别是用标题的文本来宣布的，以便用户更易于理解页面层次结构。

因此，我们在构建Web应用的时候应该正确的使用标题。WCAG 2.1为标题的wgett提供了相应的指南：

• A级标准：确保现有可见标题被正确使用，其级别反映了标题在标题层次结构中的相对顺序
• AA级标准：确保标题的描述性文字的质量，而不是标题的存在
• AAA级标准：确保网页的章节在被组织成章节时有标题

因此，如果我们只是想达到AA级别，已有的文本在视觉上允当标题的话，我们就应该使用正确的标题标签，并确保标题文本是描述性的。另外，在使用标题标签时，应该遵循两个基本原则：

• 同一个页面只有一个<h1>
• 不能在上升的过程中跳过一级

对于第一条规则很好理解，这里来解释一下第二条规则。

正如前面的截图所示，标题的层次是一级一级往下的，比如说，你要到达<h4>，就必须先从<h1>到<h2>到<h3>，不能直接从<h2>跳到<h4>。比如：

上图中橙色标注的都是丢失的标题，即标题有跳级现象，也就是违背了第二条规则。而且有的有多个<h1>标题，这也违背了原则一。

比如说，我们从<h1>到<h2>到<h3>再到<h4>这是正常的也是符合构建文档大纲的结构，但是，你可以从<h4>跳过<h3>直接跳到<h3>，如下图所示：

我一向提倡构建Web应用的时候，应该尽可能的使用具有语义化的标签元素。如果你因为某种元素未使用语义化标签又想让用户代理（比如屏幕阅读器）也能向用户呈现标题级别，那就需要使用ARIA中的role="heading"和aria-level属性来声明：

<div role="heading" aria-level="1"></div> › <h1></h1> 
<div role="heading" aria-level="2"></div> › <h2></h2> 
<div role="heading" aria-level="3"></div> › <h3></h3> 
<div role="heading" aria-level="4"></div> › <h4></h4> 
<div role="heading" aria-level="5"></div> › <h5></h5> 
<div role="heading" aria-level="6"></div> › <h6></h6>

如果你想深入的了解文档大纲相关的内容，还可以阅读下面这些教程：

• The Document Outline Dilemma
• Using the HTML document outline
• Document Outlines
• HTML5 And The Document Outlining Algorithm
• Using HTML sections and outlines
• How to Section Your HTML

避免使用空链接和按钮

链接 和 按钮 是Web中常见的交互元素。在某些情况之下，Web上的链接看上去像按钮，按钮像是链接：

不过我们这里不讨论它是按钮还是链接这个话题，如果你对该话题感兴趣的话，可以花点时间阅读《它是按钮还是链接？》一文。我们要讨论的是，关于链接和按钮的可访问性的一个更具有挑战性的问题，即 链接和按钮文本本身。

我们以链接为例吧。好的链接文本可以帮助个人理解每个链接的目的，这样就可以帮助用户做出相应的决策。这不是一个简单的可访问性问题，而是一个全面的可用性问题。然而，我们经常看到链接的文本是“更多”，“点击这里”，“了解更多”，“阅读全文”等，而没有附加的上下文内容。

为了确保链接或文本更具可访问性（或更具可用性），那么我们在构建链接或按钮时，就需要提供更具上下文的文本信息，以确保符合WCAG规范：

• A级：每个链接（或按钮）的目的可以单独从链接（或按钮）文本和通过程序确定的链接（或按钮）上下文来确定，除非链接（或按钮）的目的对一般用户来说是不明确的
• AAA级：每个链接（或按钮）的目的只能从链接文本中分辩出来，断章取义的链接（或按钮）也能被理解

在我看来，A级的成功标准还不足以确保一个链接（或按钮）的上下文能够被有效地表述出来，以达到正确的理解。

比如在博客列表中，相邻标题提供了附加的链接上下文，但没有任何程序性关联：

对应的结构很简单：

<h2>文章标题</h2>
<p>文章摘要描述</p>
<a href="">阅读全文</a>

就该示例而言，当一个使用屏幕阅读器的盲人在链接上获得焦点时，没有合适的上下文，他们需要浏览和阅读周围的文本，或者在这种情况下，浏览到前面的标题，以确定这个“阅读全文”链接的上下文。如果这个模式在页面中重复多次，那么对于使用屏幕阅读器的用户来说就会变得非常沮丧。

要真正使链接（或按钮）可访问，我们需要在链接（或按钮）中默认提供上下文。最简单的方法是在<a>（或<button>）元素内添加描述链接（或按钮）的文本的上下文信息：

<a href="">阅读全文 <span class="sr-only">关于《A11Y：如何使用WAI-ARIA增强Web可访问性》一文</span></a>
<button>阅读全文 <span class="sr-only">关于《A11Y：如何使用WAI-ARIA增强Web可访问性》一文</span></button>

虽然这是首选的方法，但是在某些情况下，这可能会在视觉上让人难以承受。在这种情况之下，可以简单地在.sr-only使用CSS，用于视觉上隐藏，但屏幕阅读器上不隐藏。

注意，Web上使用CSS或者其他姿势隐藏元素有很多种，不同的姿势对用户代理可视上有较大差异，如果你对这方面感兴趣的话，可以阅读《Web隐藏术》一文。

示例中，在链接（或按钮）前面有标题，比如<h1>，我们还可以使用aria-labelledby属性将链接（或按钮）关联起来。当使用现有文本来构建上下文链接（或按钮）文本时，你将需要考虑措辞的质量。因此，我们可以像下面这样给链接（或按钮）添加相关联的上下文描述信息：

<section>
    <h2 id="a11y__headding">A11Y：如何使用WAI-ARIA增强Web可访问性</h2>
    <p>很多Web开发者一直都认为使用WAI-ARIA是增强Web可访问性的最佳方式，但是对于了解或者说经常构建可访问性Web应用的开发同学来说，WAI-ARIA其实对于Web可访问性来说是一种“毒药”。</p>
    <p><a id="a11y__link" class="btn btn-success" href="#" aria-labelledby="a11y__link a11y__headding">阅读全文</a></p>
</section>

iOS的“VoiceOver”会像下面这个视频一样给用户呈现信息：

在ARIA中，除了aria-labelledby属性之外，还有aria-label和aria-describedby可以增强文本上下文信息，有关于这方面更详细的介绍，可以阅读《聊聊aria-label、aria-labelledby和aria-describedby》一文。

在Web应用的开发中，很多时候，链接（或按钮）除了纯文本之外，还会有纯图标的链接（或按钮），也还会有文本和图标同时出现在链接（或按钮）的场景。对于Web可访问性来说，不同的方式有着不同的处理方式，有些细节也有所不同。前面我们一起聊了纯文本的链接（或按钮）我们应该有更具上下文的文本信息，对于纯图标链接（或按钮）或文本和图标都有的链接（按钮），我们需要稍做差异性的处理：

• 对于纯图标的链接（或按钮），需要提供一定的文本信息
• 对于文本加图标的链接（或按钮），需要对图标做相应的隐藏处理

对于很多不关注Web可访问性的开发者而言，他们并不会太关注这方面的细节，因此在构建的时候也不会考虑Web可访问性方面的细节。很多时候你看到的会像下面这样：

<a href="/">
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <path d="M640 790.528H297.504v-0.096l86.496 0.032v-118.88c0-0.8 0.224-1.536 0.224-2.304 1.28-69.6 57.984-125.888 127.776-125.888s126.496 56.32 127.776 125.888c0 0.768 0.224 1.504 0.224 2.304v118.944z m240.896-427.68L800 309.856V207.168a32 32 0 1 0-64 0v60.8l-206.464-135.328A31.296 31.296 0 0 0 511.424 128a31.168 31.168 0 0 0-17.6 4.64L142.464 362.88a32 32 0 0 0 35.072 53.536L192 406.912V800c0 30.08 27.168 54.592 60.576 54.592h518.848C804.832 854.56 832 830.08 832 800V407.36l13.856 9.056a31.968 31.968 0 0 0 35.04-53.536z" fill="currentColor"></path>
    </svg>
</a>

<!-- 或 -->
<a href="/">
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <path d="M640 790.528H297.504v-0.096l86.496 0.032v-118.88c0-0.8 0.224-1.536 0.224-2.304 1.28-69.6 57.984-125.888 127.776-125.888s126.496 56.32 127.776 125.888c0 0.768 0.224 1.504 0.224 2.304v118.944z m240.896-427.68L800 309.856V207.168a32 32 0 1 0-64 0v60.8l-206.464-135.328A31.296 31.296 0 0 0 511.424 128a31.168 31.168 0 0 0-17.6 4.64L142.464 362.88a32 32 0 0 0 35.072 53.536L192 406.912V800c0 30.08 27.168 54.592 60.576 54.592h518.848C804.832 854.56 832 830.08 832 800V407.36l13.856 9.056a31.968 31.968 0 0 0 35.04-53.536z" fill="currentColor"></path>
    </svg>
    首页
</a>

第一个链接没有任何的上下文文本信息，用户并不知道他是一个代表“首页”，第二个链接虽然有“首页”上下文相关的描述信息，但<svg>图标也能得到相应的焦点，会造成焦点冗余，对于依赖于屏幕阅读器的用户而言，体验也不好。

注意，示例中的<svg>有可能也是<img>元素，也有可能是字体图标，比如<i class="fa fa-home"></i>。

就上面的示例而言，为了让带有图标（或纯图标）的链接（或按钮），我们需要给使用ARIA让它更具可访问性，比如：

<a href="/" aria-label="首页">
    <svg focusable="true" aria-hidden="true" role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <path d="M640 790.528H297.504v-0.096l86.496 0.032v-118.88c0-0.8 0.224-1.536 0.224-2.304 1.28-69.6 57.984-125.888 127.776-125.888s126.496 56.32 127.776 125.888c0 0.768 0.224 1.504 0.224 2.304v118.944z m240.896-427.68L800 309.856V207.168a32 32 0 1 0-64 0v60.8l-206.464-135.328A31.296 31.296 0 0 0 511.424 128a31.168 31.168 0 0 0-17.6 4.64L142.464 362.88a32 32 0 0 0 35.072 53.536L192 406.912V800c0 30.08 27.168 54.592 60.576 54.592h518.848C804.832 854.56 832 830.08 832 800V407.36l13.856 9.056a31.968 31.968 0 0 0 35.04-53.536z" fill="currentColor"></path>
    </svg>
</a>

<!-- 或 -->
<a href="/">
    <svg focusable="true" aria-hidden="true" role="img" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
        <path d="M640 790.528H297.504v-0.096l86.496 0.032v-118.88c0-0.8 0.224-1.536 0.224-2.304 1.28-69.6 57.984-125.888 127.776-125.888s126.496 56.32 127.776 125.888c0 0.768 0.224 1.504 0.224 2.304v118.944z m240.896-427.68L800 309.856V207.168a32 32 0 1 0-64 0v60.8l-206.464-135.328A31.296 31.296 0 0 0 511.424 128a31.168 31.168 0 0 0-17.6 4.64L142.464 362.88a32 32 0 0 0 35.072 53.536L192 406.912V800c0 30.08 27.168 54.592 60.576 54.592h518.848C804.832 854.56 832 830.08 832 800V407.36l13.856 9.056a31.968 31.968 0 0 0 35.04-53.536z" fill="currentColor"></path>
    </svg>
    首页
</a>

也就是说要在<svg>，<img>或<i class="fa fa-home">元素上显式的添加focusable="true" aria-hidden="true"相关的属性设置。另外，对于<svg>和<i class="fa fa-home">设置role="img"会更适合一点。

使用ARIA地标

在WAI-ARIA中角色 role 的介绍中就有地标角色，即 Landmark ，他们和HTML5的 <main> 、 <header> 、 <nav> 、 <aside> 和 <footer> 有着相应的对应关系。

这允许我们给站点中的元素增加我们想要的语义属性。第一个主要区域便是用于为屏幕阅读器提供信息，以便用户可以找到常见的页面元素。

<header>
    <h1>标题</h1>
    <nav>
        <ul>
            <li>
                <a href="">CSS</a>
            </li>
            <li>
                <a href="">HTML</a>
            </li>
        </ul>
        <form>
            <label for="search">搜索</label>
            <input type="search" id="search" />
        </form>
    </nav>
</header>

<main>
    <article>
        <h2>文章标题</h2>
    </article>
    <aside>
        <h2>AD</h2>
    </aside>
</main>

<footer>
    <p>版本归属</p>
</footer>

“VoiceOver”呈现给用户的效果如下：

如果你转到VoiceOver的地标菜单（使用VoiceOver 绑定键（你可以在VoiceOver Utility 中设置） + U 访问，然后使用光标或者键盘来选择菜单选项），你将看到大部分元素都已很好地列出，因此可以快速访问它们。

尽管如此，我们可以做的更好。这个搜索表单是一个人们愿意找到的重要的地标，我们可以设置 input 的类别为 search (<input type="search">)。 另外，在一些老的浏览器（尤其是IE8） 是无法识别的这些HTML5 的元素语义化的。

让我们来优化上文代码并且用上无障碍特性。首先我们给HTML 的结构加上角色。

<header role="banner">
    <h1>标题</h1>
    <nav role="navigation">
        <ul>
            <li>
                <a href="">CSS</a>
            </li>
            <li>
                <a href="">HTML</a>
            </li>
        </ul>
        <form role="search">
            <input type="search" name="search" placeholder="搜索查询" aria-label="通过网站内容进行搜索" />
        </form>
    </nav>
</header>

<main role="main">
    <article role="article">
        <h2>文章标题</h2>
    </article>
    <aside role="complementary">
        <h2>AD</h2>
    </aside>
</main>

<footer role="contentinfo">
    <p>版本归属</p>
</footer>

我们用了一个额外的功能：input元素用了属性 aria-label, 它给它一个描述性标签，可以由屏幕阅读器读出，尽管我们没有 label 元素。在这些情况下，这非常有用——像这样的搜索表单是一个非常常见的，易于识别的功能，添加 label 会破坏页面设计。

再用VoiceOver时，呈现给用户的效果如下：

如果由于某种原因，你的网站仅使用

<fieldset>
    <legend>My favorite foods</legend>
    <label>
        <input type="checkbox" name="foods" value="pizza"> Pizza
    </label>
    <label>
        <input type="checkbox" name="foods" value="burger"> Burger
    </label>
    <label>
        <input type="checkbox" name="foods" value="pasta"> Pasta
    </label>
</fieldset>

<label for="firstname">First name:</label> 
<input type="text" id="firstname" />

<label id="firstname">First name:</label> 
<input type="text" aria-labelledby="firstname" />

<fieldset>
    <legend>My favorite foods</legend>
    <label>
        <input type="checkbox" name="foods" value="pizza"> Pizza
    </label>
    <label>
        <input type="checkbox" name="foods" value="burger"> Burger
    </label>
    <label>
        <input type="checkbox" name="foods" value="pasta"> Pasta
    </label>
</fieldset>

<html lang="zh-CN"> </html> 

<p>There's a certain <span lang="fr">je ne sais quoi</span> in the air.</p>

<p class="visually-hidden">Expressionist architecture is one of the three dominant styles of Modern…</p>    
<p aria-hidden="true">Expressionismus in einer der drei dominanten Stile der modernen Architektur…</p>

*,
*:focus {
    outline: none 0;
}

<header>
    <span class="sr-only">组队赢红包</span>
    <img src="path" alt="组队赢红包" aria-hidden="true" />
</header>

<!-- 不好的 -->
<header style="background-image: url(path)"></header>

<!-- 好的 -->
<header style="background-image: url(path)">
    <span class="sr-only">组队赢红包</span>
</header>

<ul role="tablist">   
    <li role="presentation">     
        <a role="tab" href="#">Tab 1</a>   
    </li>   
    <li role="presentation">     
        <a role="tab" href="#">Tab 2</a>   
    </li>   
    <li role="presentation">     
        <a role="tab" href="#">Tab 3</a>   
    </li> 
</ul>

<div class="deck">
    <div class="slide" aria-hidden="true">
        Sales Targets
    </div>
    <div class="slide">
        Quarterly Sales
    </div>
    <div class="slide" aria-hidden="true">
        Action Items
    </div>
</div>

<div class="status">你的信息已经发送了。</div>

<div class="status" aria-live="polite">你的信息已经发送了。</div>