author

第7节应用无障碍

回到目录
回到项目首页
上一节

❤️💕💕HTML和CSS高级教程。更多的文章请移步博客Myblog:http://nsddd.top

[TOC]

什么是应用无障碍？

在网页开发中，可访问性是指网页内容和用户界面可以被用户理解、浏览并与之交互。这里的用户包括有视觉障碍、听觉障碍或认知障碍的用户。

为视觉障碍提供替代图像的文本

alt 属性中的文本来描述图片内容，作为备用文字。 alt 属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容，搜索引擎也通过它来理解图片内容，并将其加入到搜索结果中。例如：

<img src="importantLogo.jpeg" alt="Company logo">

视觉障碍用户无法通过视觉获取信息，而是通过屏幕阅读器将网页内容转换为音频以获取信息。他们无法通过直观的呈现理解信息。屏幕阅读器可以识别 alt 属性，朗读其中的内容，来告知用户图片包含的关键信息。

alt 文本可以为屏幕阅读器提供图片的描述信息，所以你应始终为图片添加 alt 属性。另外，根据最新的 HTML5 标准，为图片添加这个属性是必须的。

alt显示空字符串

即使图片无法正常显示，用户也察觉不出来。

有时图像通过它们的描述文本被归类，或者只用于装饰。在这些情况下， alt 文本可能是多余的或没有必要的。

在图片已经有了文字说明，或者仅仅为了美化页面的情况下，img 仍然需要一个 alt 属性，但可以设置为空字符串。例如：

<img src="visualDecoration.jpeg" alt="">

比如，背景图片通常起装饰作用。但这些图片通常都是通过 CSS 规则而非 HTML 引入的，因此屏幕阅读器毋需读取。

注意： 对于有标题的图片，依然需要添加 alt 文本，因为这样有助于搜索引擎记录图片内容。

使用标题显示内容的层次关系

标题标签（包括 h1 到 h6）有很高的使用率，它们用于描述内容的主题。在屏幕阅读器中，用户为了快速了解页面纲要，可以设置让阅读器只朗读页面标题。这意味着我们不应仅仅为了设置不同字号而使用标题，而应让标签本身具有语义化和实质性的含义，同时不同标题之间也应关联（具有层级关系）。

语义化的意思是，标签名能准确地表达它所含内容的信息类型。

如果你正在撰写带有导言、主体和结论的论文，在你的概要中把结论作为主体的一部分是没有意义的。结论应该是单独的一个部分。类似地，页面中的标题标签也应该是有序的，并且能表明内容的层次关系。

在使用中，相同级别（或者更高级别）的标题标签用于开启新的章节，低一级别的标题标签用于开启上一级标题标签的子小节。

例如，一个页面带有一个 h2 元素，后面跟着几个用 h4 元素标记的小节，这会使屏幕阅读器用户感到困惑。尽管在浏览器所显示的页面中，错误地使用这六个标题标签依然可以让它们在视觉效果上看起来很合理。但此时，我们应该按照层级正确地使用标签，然后用 CSS 来调整样式。

最后一点，每个页面应只有一个 h1 标签，用来概括说明页面的主题。另外，这六个标题标签可以让搜索引擎获取页面的大纲。

使用 main 元素包裹主题内容

HTML5 引入了一些新元素，给予开发者更多的选择，也包含辅助功能。 HTML5 引入了诸如 main、header、footer、nav、article、section 等大量新标签。

默认情况下，浏览器呈现这些元素的方式类似于普通的 div。但是，在适当的地方使用它们会让标记文本具有更多的含义。仅标签名称就可以表示它所包含的信息类型，这给内容增加了语义含义。辅助技术可以获取这种信息，为用户提供更好的页面摘要或导航选项。

main 标签用于呈现网页的主体内容，且每个页面应只有一个。这是为了围绕与页面中心主题相关的信息，而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。

main 标签也有一个内嵌的特性，以便辅助技术快速定位到页面的主体。如果你在页面顶部看到过“跳转到主要内容”链接，那么使用 main 标签会自动让辅助设备具有这个跳转的功能。

使用 article 元素包裹文章内容

article 是另一个具有语义化特性的 HTML5 新标签。 article 是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客、论坛帖子或者新闻文章。

确定内容是否可以单独作为一部分，通常是个人的判断，但你可以使用几个简单的测试。如果删除了所有周围的上下文，这个内容是否仍然有意义？类似地，对于文本内容，可否把这些内容放到一个 RSS 推送里？

请牢记，辅助设备依赖组织良好、语义化的标签来获取页面中的信息。

注意： section 元素也是 HTML5 引入的新元素，其语义与 article 略有不同。 article 用于独立且完整的内容，而 section 用于对与主题相关的内容进行分组。它们可以根据需要来嵌套使用。举个例子：如果一本书是一个 article 的话，那么每个章节就是 section。当内容组之间没有联系时，我们可以使用 div。

- 一组内容

- 几组相关的内容 - 几组独立的内容

使用 header 元素来让屏幕阅读器更容易进行导航

header 也是一个具有语义化的、可以提升页面可访问性的 HTML5 标签。它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

与 main 类似，header 的语义化特性也可以让辅助工具快速定位到它的内容。

注意： header 应当在 HTML 文档的 body 标签内使用。它与包含页面标题、元信息的 head 标签不同。

使用 nav 元素使屏幕阅读器更容易导航

nav 也是一个具有语义化特性的 HTML5 标签，它可以使屏幕阅读器快速识别出页面中的导航信息。它用于呈现页面中的主导航链接。

对于在多个页面底部出现的站点链接，我们不需要使用 nav 标签。我们将会学习 footer 标签的使用。

使用 footer 元素来让屏幕阅读器更容易进行导航

与 header 和 nav 类似，footer 元素也具有语义化的特性，可以让辅助工具快速定位到它。它位于页面底部，用于呈现版权信息或者相关文档链接。

  <footer>&copy; 2018 Camper Cat</footer>

使用 audio 元素提高音频内容的可访问性

HTML5 的 audio 标签用于呈现音频内容或音频流，它也具有语义化特性。音频内容也需要备用文本，供聋哑人或听力困难的人使用。这可以通过页面上的文本或与字幕链接来实现。

audio 标签支持 controls 属性，用于显示浏览器默认播放、停止和其他控制，以及支持键盘功能。这是一个布尔值属性，意味着它不需要一个值，它在标签上存在即开启设置。

举个例子：

<audio id="meowClip" controls>
  <source src="audio/meow.mp3" type="audio/mpeg">
  <source src="audio/meow.ogg" type="audio/ogg">
</audio>

注意： 多媒体内容通常同时包含音频与视频部分，它需要同步的字幕，使视觉或听觉障碍用户可以获取它的内容。一般情况下，网页开发者不负责创建字幕或逐字稿，但是需要将它们添加到多媒体中。

案例：

<audio controls>
<source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg">
</audio>

使用 figure 元素提高图表的可访问性

HTML5 引入了 figure 标签以及与之相关的 figcaption 标签。它们一起用于展示可视化信息（如：图片、图表）及其标题。这样通过语义化对内容进行分组并配以用于解释 figure 的文字，可以极大地提升内容的可访问性。

对于图表之类的可视化数据，标题可以为屏幕阅读器用户提供简要的说明。但是这里有一个难点，如何为屏幕阅读器用户展示那些超出屏幕可视范围（使用 CSS）的表格所表现的图表数据。

举个例子，注意 figcaption 包含在 figure 标签中，并且可以与其他标签组合使用：

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

使用 label 元素提高表单的可访问性

合理地使用语义化的 HTML 标签和属性可以提升页面可访问性。

label 标签的文本内容通常会是表单组件的名称或标签。这些文本表明了组件的意义，也提升了表单的可访问性。 label 标签的 for 属性将标签与表单组件绑定；同时，屏幕阅读器也会读取 for 属性的属性值。

在 HTML 基础章节中，我们已经学习使用了单选按钮标签。在那个挑战中，为了让标签可以在点击的时候也选中输入框，我们将单选按钮 input 标签嵌套在了 label 标签里面。在本节课程中，我们介绍了另外一种实现这个功能的方法，那就是使用 for 属性。

for 的属性值必须与表单组件的 id 属性值相同。举个例子：

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
</form>

将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

接下来的表单主题是关于单选按钮的可访问性。在上一个挑战中，每个单选按钮都有一个包含 for 属性的 label 标签，这些属性值指向相关选项的 id。然而单选按钮通常成组出现，而且用户必须选择其中一项。

fieldset 标签包裹整组单选按钮，实现这个功能。它经常使用 legend 标签来提供分组的描述，以便屏幕阅读器用户会阅读 fieldset 元素中的每个选项。

当选项的含义很明确时，如“性别选择”，fieldset 与 legend 标签可以省略。这时，使用包含 for 属性的 label 标签就足够了。

举个例子：

Choose one of these three items: Choice One
Choice Two
Choice Three

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

当用户使用邮件注册时，Camper Cat 想知道他们的忍者等级。他添加了一组单选按钮，并从我们之前的课程中吸取了教训，为每个选项使用带有 for 属性的 label 标签。 Camper Cat 加油！然而，他仍然需要一些帮助。请将包含单选按钮组的 div 标签替换为 fieldset 标签；将 p 标签替换为 legend 标签。

<body>
  <header>
    <h1>Deep Thoughts with Master Camper Cat</h1>
  </header>
  <section>
    <form>
      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
      <label for="email">Email:</label>
      <input type="text" id="email" name="email">


      <!-- 只修改这一行下面的代码 -->
      <fieldset>
        <legend>What level ninja are you?</legend>
        <input id="newbie" type="radio" name="levels" value="newbie">
        <label for="newbie">Newbie Kitten</label><br>
        <input id="intermediate" type="radio" name="levels" value="intermediate">
        <label for="intermediate">Developing Student</label><br>
        <input id="master" type="radio" name="levels" value="master">
        <label for="master">Master</label>
      </fieldset>
      <!-- 只修改这一行上面的代码 -->


      <input type="submit" name="submit" value="Submit">
    </form>
  </section>
  <article>
    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
  </article>
  <img src="samuraiSwords.jpeg" alt="">
  <article>
    <h2>Is Chuck Norris a Cat Person?</h2>
    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
  </article>
  <footer>&copy; 2018 Camper Cat</footer>
</body>

关键代码

<fieldset>
  <legend>What level ninja are you?</legend>
  <input id="newbie" type="radio" name="levels" value="newbie">
  <label for="newbie">Newbie Kitten</label><br>
  <input id="intermediate" type="radio" name="levels" value="intermediate">
  <label for="intermediate">Developing Student</label><br>
  <input id="master" type="radio" name="levels" value="master">
  <label for="master">Master</label>
</fieldset>

添加可访问的日期选择器

表单中经常出现 input 标签，它可以用来创建多种表单控件。它的 type 属性指定了所要创建的 input 标签类型。

在以前的挑战中，我们已经见过 text 与 submit 类型的 input 标签。 HTML5 规范添加了 date 类型来创建日期选择器。如果浏览器支持，在点击 input 标签时，日期选择器会显示出来，这让用户填写表单变得更加容易。

对于较老的浏览器，类型将默认为 text，这样它可以通过 label 或 placeholder 文本向用户显示预期的日期格式。

举个例子：

Enter a date:

<form>
    <label for="input1">Enter a date:</label>
	<input type="date" id="input1" name="input1">
</form>

案例

 <form>
        <p>Tell us the best date for the competition</p>
        <label for="pickdate">Preferred Date:</label>
        <!-- 只修改这一行下面的代码 -->
      <input type="date" id="pickdate" name="date">
        <!-- 只修改这一行上面的代码 -->

        <input type="submit" name="submit" value="Submit">
 </form>

使用 HTML5 的 datetime 属性标准化时间

继续日期主题。 HTML5 还引入了 time 标签与 datetime 属性来标准化时间。 time 元素是一个行内元素，用于在一个页面上显示日期或时间。 datetime 属性包含的有效格式。辅助设备可以获取这个值。这个属性也有助于避免混乱，因为它规定了时间的标准化版本，甚至可以在文本中以非正式的方式或学术方式使用它。

举个例子：

<p>Master Camper Cat officiated the cage match between Goro and Scorpion 
    <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>

使用自定义 CSS 让元素仅对屏幕阅读器可见

到目前为止，所有关于可访问性的挑战都没有使用 CSS。这是为了在介绍视觉设计方面之前强调使用逻辑结构和有语义意义的标签的重要性。

但如果我们想在页面中添加一些只对屏幕阅读器可见的内容，可以用 CSS 来实现。当信息为视觉格式（例如图表）时，但屏幕阅读器用户需要备用文稿（例如表格）来访问数据，在这种情况下，使用 CSS 将屏幕的只读元素放到浏览器窗口可视区域之外。

举个例子：

.sr-only {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  top: auto;
  overflow: hidden;
}

注意： 以下的 CSS 解决方案与上面的结果不同：

display: none; 或 visibility: hidden; 会把内容彻底隐藏起来，屏幕阅读器也无法获取这些内容。
如果把值设置为 0px，如 width: 0px; height: 0px;，意味着让元素脱离文档流，这样做同样也会让屏幕阅读器忽略此元素。

为链接添加描述性的文本

屏幕阅读器用户可以选择其设备读取的内容的类型，包括表示“跳转到”（或“跳过”）的元素，跳转到主要内容，或者从标题中获取页面摘要。用户还可以选择只听取页面中的超链接内容。

屏幕阅读器通过阅读链接文本（即 a 标签的内容文本）来完成这个操作。如果我们只在链接中写上 "click here"（点击这里）或者 "read more"（阅读更多），显然帮助有限。相反地，应该在 a 标签中使用简洁的描述性语言来为用户提供更多的信息。

通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航

HTML 提供 accesskey 属性，用于指定激活元素或者使元素获得焦点的快捷键。添加 accesskey 属性可以让使用键盘的用户更高效率地导航。

HTML5 允许在任何标签上使用这个属性。该属性尤其适用于链接、按钮、表单组件等元素。

举个例子：

<button accesskey="b">Important Button</button>
<h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>

使用 tabindex 将键盘焦点添加到元素中

HTML 的 tabindex 属性有三种与标签焦点相关的功能。当它在一个元素上时，表示该元素可以获得焦点。 tabindex 的值（可以是零、负整数或正整数）定义了行为。

当用户使用键盘浏览页面时，诸如链接、表单控件等元素可以自动获得焦点。它们获得焦点的顺序与它们出现在 HTML 文档流中的顺序一致。我们可以通过将其他标签（如 div、span、p 等）的 tabindex 属性值设为 0 来让它们实现类似的效果。比如：

<div tabindex="0">I need keyboard focus!</div>

注意： tabindex 属性值为负整数（通常为 -1）的标签也是可以获得焦点的，只是不可以通过键盘操作（如 tab 键）来获得焦点。这种方法通常用于以编程的方式使内容获得焦点（如：将焦点设置到用 div 实现的弹出框上）的场景。只是这部分内容已经超出了当前挑战的范围。

使用 tabindex 指定多个元素的键盘焦点顺序

tabindex 属性还可以指定元素的 tab 键焦点顺序，将它的值设置为大于等于 1 的整数，就可以实现这个功能。

给元素设置 tabindex="1"，键盘将首先把焦点放在这个元素上。然后它按照指定的 tabindex 值（2、3 等等）顺序循环，再移动到默认值和 tabindex="0" 项目。

需要注意的是，使用这种方式设置 tab 键焦点顺序会覆盖默认顺序，其中默认顺序为标签在文档流中出现的顺序。这可能会让那些希望从页面顶部开始导航的用户感到困惑。使用 tabindex 在某些情况下是必要的，但在使用时要充分考虑到页面的可访问性。

举个例子：

<div tabindex="1">I get keyboard focus, and I get it first!</div>
<div tabindex="2">I get keyboard focus, and I get it second!</div>

Camper Cat 在他的励志名言页面中有一个搜索区域，他打算使用 CSS 把这个区域定位在页面的右上角。 Camper Cat 希望他的搜索（search）input 与提交（submit）input 表单控件是 tab 键焦点顺序的前两项。请给 search input 添加 tabindex 属性，将属性值设置为 1；给 submit input 添加一个 tabindex 属性，将属性值设置为 2。

另一件需要注意的事情是，单击元素时，某些浏览器可能会将你置于 tab 键焦点顺序的中间位置。页面上已添加一个元素，以确保你始终从 tab 键焦点顺序的开头开始。

END 链接

参与贡献❤️💕💕

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

7.md

7.md

第7节应用无障碍

什么是应用无障碍？

为视觉障碍提供替代图像的文本

alt显示空字符串

使用标题显示内容的层次关系

使用 main 元素包裹主题内容

使用 article 元素包裹文章内容

使用 header 元素来让屏幕阅读器更容易进行导航

使用 nav 元素使屏幕阅读器更容易导航

使用 footer 元素来让屏幕阅读器更容易进行导航

使用 audio 元素提高音频内容的可访问性

使用 figure 元素提高图表的可访问性

使用 label 元素提高表单的可访问性

将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

添加可访问的日期选择器

使用 HTML5 的 datetime 属性标准化时间

使用自定义 CSS 让元素仅对屏幕阅读器可见

为链接添加描述性的文本

通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航

使用 tabindex 将键盘焦点添加到元素中

使用 tabindex 指定多个元素的键盘焦点顺序

END 链接

Files

7.md

Latest commit

History

7.md

File metadata and controls

第7节 应用无障碍

什么是应用无障碍？

为视觉障碍提供替代图像的文本

alt显示空字符串

使用标题显示内容的层次关系

使用 main 元素包裹主题内容

使用 article 元素包裹文章内容

使用 header 元素来让屏幕阅读器更容易进行导航

使用 nav 元素使屏幕阅读器更容易导航

使用 footer 元素来让屏幕阅读器更容易进行导航

使用 audio 元素提高音频内容的可访问性

使用 figure 元素提高图表的可访问性

使用 label 元素提高表单的可访问性

将单选按钮包裹在 fieldset 元素中以获得更好的可访问性

添加可访问的日期选择器

使用 HTML5 的 datetime 属性标准化时间

使用自定义 CSS 让元素仅对屏幕阅读器可见

为链接添加描述性的文本

通过给元素添加 accesskey 属性来让用户可以在链接之间快速导航

使用 tabindex 将键盘焦点添加到元素中

使用 tabindex 指定多个元素的键盘焦点顺序

END 链接

第7节应用无障碍