无障碍小技巧

Posted 2020-08-02 csdn_csdn__AI

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了无障碍小技巧相关的知识，希望对你有一定的参考价值。

原文：https://bitsofco.de/the-accessibility-cheatsheet/

翻译：CSDN

众所周知，无障碍访问是很重要的。问题是，我们并不确切地知道究竟怎么做才能使我们的网站实现无障碍访问。

无障碍网页倡议（Web Accessibility Initiative）为我们这些Web内容开发者提供了网页内容无障碍指南（Web Content Accessibility Guidelines）（WCAG），帮助我们开发出更多可以无障碍访问的网页。WCAG涵盖了很多非常有用的信息。在此，我将简要地介绍其中可广泛应用的指导原则，并强调一些可操作的实例，以帮助开发人员设计出更易于被访问的网页。

概述

无障碍指南有四个主要原则，每个原则都包含了具体的准则。点击链接可转到本文中的相关内容。
　1 - “可感知性”- 信息和用户界面组件必须以可感知的方式呈现给用户。
　　1.1 - 替代文本
　　1.2 - 为时基媒体提供替代
　　1.3 - 适应性的内容
　　1.4 - 可辨别性
　2 - “可操作性”- 用户界面组件和导航必须可操作。
　　2.1 - 键盘可访问
　　2.2 - 充足的时间
　　2.3 - 癫痫
　　2.4 - 可导航性
　3 - “可理解性”- 信息和用户界面操作必须是可理解的。
　　3.1 - 可读性
　　3.2 - 可预测性
　　3.3 - 辅助输入
　4 - “鲁棒性”- 内容必须健壮到可信地被种类繁多的用户代理（包括辅助技术）所解释。
　　4.1 - 兼容

原则1 -“可感知性”

1.1 替代文本

“为所有呈现给用户的非文本内容都提供相同目的替代文本”

纯文本是表达任何内容的最佳格式。这是因为在不同格式中都可以使用纯文本来满足各类残障人士的需求。因此，对所有传递信息的内容提供纯文本替代格式十分重要，也就是非装饰性内容。

对于图像，使用alt属性。图像的替代文本应尽可能具有描述性，从而可以传达相同的信息。

<span style="font-size:14px;"><span style="font-family:Microsoft YaHei;"><span style="font-size:18px;"><img src=“资讯.gif" alt=“免费资讯。获取免费食谱、新闻及更多内容。" />  </span></span></span>

对于音频和视频组件，提供文本转写。可以使用轨道（track）元素为这些媒体元素指定定时文本轨道。

<span style="font-family:Microsoft YaHei;"><!-- 轨道元素的格式 -->  
<track kind=“字幕 | 标题 | 说明” src=“文件路径.vtt" srclang="" label="">
 
<!-- 以音频文件的标题为例 -->  
<audio controls>  
  <source src=“我的音频.ogg" type=“音频/ogg">
  <track src=“标题_en.vtt" kind=“标题” srclang="en" label=“英语”>
</audio>
 
<!-- 以视频文件的英语和德语说明为例 -->  
<video poster=“我的视频.png" controls>  
  <source src=“我的视频.mp4" srclang="en" type=“视频/mp4">
  <track src=“说明_en.vtt" kind=“说明” srclang="en" label=“英语”>
  <track src=“说明_de.vtt" kind=“说明” srclang="de" label=“德语”>
</video>  </span>

对于用户界面元素，使用标签（label）。标签可以被用来为那些通过视觉可以清楚传达的信息提供文本描述。例如，初级和二级导航区域可能有不同的样式，可以使用aria-label来区分。

<span style="font-family:Microsoft YaHei;"><div role=“导航” aria-label=“初级”>  
  <ul><li>...此处为链接列表 ...</li></ul> 
</div>  
<div role=“导航” aria-label=“二级”>  
  <ul><li>...此处为链接列表 ...</li> </ul>
</div>  <span style="color: inherit; font-family: "Source Code Pro", monospace; white-space: pre-wrap; font-size: 13px; line-height: 1.45; background-color: transparent;"> </span></span>

1.2 为时基媒体提供替代

“为时基媒体提供替代。”
访问时基媒体（音频和视频）对听障和视障用户来说特别困难。另外，提供纯文本替代，也有助于提供替代的时基媒体版本。例如

手语作为视频文件的部分
为视频文件提供替代音频
手语视频文件作为音频文件的替代

1.3 适应性的内容

“创建可用不同方式呈现的内容（例如简单的布局），而不会丢失信息或结构。”

以上是关于无障碍小技巧的主要内容，如果未能解决你的问题，请参考以下文章