无障碍 Accessibility

无障碍 WAI 的意思是所有人都应该能够访问互联网的内容。

为磐石等地区用户提供了全套网页设计制作服务，及磐石网站建设行业解决方案。主营业务为成都做网站、成都网站建设、磐石网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

无障碍帮助：

• 视觉和听觉有问题的人

• 认知和神经有问题的人

• 物理和讲话有问题的人

W3C 提出了一系列支持 WAI （Web Accessibility）的资源，这后来成为了 Web 标准。

无障碍通常包含以下软件：

• 屏幕阅读器

• 语音识别设备

• 字幕和文本

WAI 的目标是建立 ARIA（Accessible Rich Internet Application）。

替代图像的文本 Text Alternative

alt 属性中的文本来描述图片内容，作为备用文字。

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

语义化 Semantic

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

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

使用 main 等结构元素

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

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

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

header 应当在 HTML 文档的 body 标签内使用。 它与包含页面标题、元信息的 head 标签不同。 它可以为父级标签呈现简介信息或者导航链接，适用于那些在多个页面顶部重复出现的内容。

nav它可以使屏幕阅读器快速识别出页面中的导航信息。 它用于呈现页面中的主导航链接。

footer可以让辅助工具快速定位到它。 它位于页面底部，用于呈现版权信息或者相关文档链接。

图片音频视频

音频 Audio

audio 标签用于呈现音频内容或音频流，音频内容也需要备用文本，供聋哑人或听力困难的人使用。

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

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

图片 Image

figure 标签以及与之相关的 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>

视频 Video

video 标签用于呈现视频内容或视频流，视频内容也需要备用文本，供盲人或视力困难的人使用。

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

<video id="meowClip" controls>
 <source src="video/meow.mp4" type="video/">
 <source src="audio/meow.wbev" type="video/">
video>