无障碍 Accessibility
html" class="superseo">无障碍 WAI 的意思是所有人都应该能够访问互联网的内容。
无障碍帮助:
- 视觉和听觉有问题的人
- 认知和神经有问题的人
- 物理和讲话有问题的人
W3C 提出了一系列支持 WAI (Web Accessibility)的资源,这后来成为了 Web 标准。
无障碍通常包含以下软件:
- 屏幕阅读器
- 语音识别设备
- 字幕和文本
WAI 的目标是建立 ARIA(Accessible Rich Internet Application)。
替代图像的文本 Text Alternative
alt
属性中的文本来描述图片内容,作为备用文字。
alt
属性可以帮助用户在图片加载失败或者不可见的情况下理解图片内容, 搜索引擎也通过它来理解图片内容,并将其加入到搜索结果中。
语义化 Semantic
语义化 的意思是,标签名能准确地表达它所含内容的信息类型。
在使用中,相同级别(或者更高级别)的标题标签用于开启新的章节,低一级别的标题标签用于开启上一级标题标签的子小节。
使用 main 等结构元素
main
标签用于呈现网页的主体内容,且每个页面应只有一个。 这是为了围绕与页面中心主题相关的信息, 而不应包含如导航连接、网页横幅等需要在多个页面中重复出现的内容。
article
是一个分段标签,用于呈现独立及完整的内容。 这个标签适用于博客、论坛帖子或者新闻文章。
section
article
略有不同。 article
section
article
的话,那么每个章节就是 section
。 当内容组之间没有联系时,可以使用 div
。
header
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>
accesskey 属性在链接之间快速导航
HTML 提供 accesskey
accesskey
属性可以让使用键盘的用户更高效率地导航。
<a href="" accesskey="g"></a>
tabindex 将键盘焦点添加到元素中
HTML 的 tabindex
div
、span
、p
tabindex
属性值设为 0 来让它们实现类似的效果。
tabindex
div
实现的弹出框上)的场景。
<p tabindex="0">
something
</p>
tabindex
属性还可以指定元素的 tab 键焦点顺序, 将它的值设置为大于等于 1 的整数,就可以实现这个功能。
给元素设置 tabindex="1"
,键盘将首先把焦点放在这个元素上。 然后它按照指定的 tabindex
tabindex="0"
项目。
需要注意的是,使用这种方式设置 tab 键焦点顺序会覆盖默认顺序,其中默认顺序为标签在文档流中出现的顺序。 这可能会让那些希望从页面顶部开始导航的用户感到困惑。 使用 tabindex 在某些情况下是必要的,但在使用时要充分考虑到页面的可访问性。