# WAI

**Repository Path**: NFUNM100/WAI

## Basic Information

- **Project Name**: WAI
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-03
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WAI指导原则中文版

## [原网页](https://www.w3.org/WAI/tips/writing/#keep-content-clear-and-concise)
***
![总结](https://images.gitee.com/uploads/images/2019/0303/134225_c3cc9d24_1831537.png "1.png")

## 总结
本页介绍了一些基本注意事项，可帮助您开始编写残障人士更容易访问的Web内容。这些提示是帮助您满足Web内容可访问性指南（WCAG）要求的良好实践。请点击相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户故事等。

### 此页内容
- 信息丰富，标题独特
- 合理使用标题以表达意义和结构
- 使链接文本具有意义
- 为图片编写有意义的文本
- 为多媒体创建表单和标题
- 提供明确说明
- 内容清晰简洁

***

![信息丰富，标题独特](https://images.gitee.com/uploads/images/2019/0303/135321_806d791a_1831537.png "2.png")

## 信息丰富，标题独特
对于每个网页，提供描述页面内容的简短标题，并将其与其他页面区分开来。页面标题通常与页面的主标题相同。首先提供独特和最相关的信息; 例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包含当前步骤。

**示例：页面标题**
- 主页标题

  Space Teddy Inc.
- 页面名称后面跟组织名称

  Latest News-Space Teddy Inc.
- 页面名称包括进程中的步骤

  Buy Your Bear(Step 1 of 3)-Space Teddy Inc.

***

![合理使用标题以表达意义和结构](https://images.gitee.com/uploads/images/2019/0303/140526_a59fcda4_1831537.png "3.png")\

## 合理使用标题以表达意义和结构
使用简短标题对相关段落进行分组，并清楚地描述各个部分。好的标题提供了内容的概述。

**示例：使用标题来组织内容**
- **× 缺乏标题**

### 标题和副标题
HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于传达辅助技术的其他意义。在许多情况下，这样做也会使您的文档更容易编辑。
对于长度超过三或四段的文档，标题和副标题对于可用性和可访问性非常重要。它们帮助读者确定文档的整体轮廓并导航到感兴趣的特定信息。
标题分为1到6个等级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别来继续。数字越小，部分越小，越详细。
可视阅读器通过扫描页面来查找更大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此改变风格并不是一个充分的线索。
相反，标题必须在语义上“标记”，以便辅助技术可以识别标题。这可以作为导航辅助提供给用户。
这使得添加标题成为屏幕阅读器用户最重要的工具之一，以便他或她可以了解页面上的内容。请注意，标记通常会直观地触发格式更改，可以在许多文档中进行调整。
- **√ 使用标题和副标题**

### 标题和副标题
HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于传达辅助技术的其他意义。在许多情况下，这样做也会使您的文档更容易编辑。

**标题的用途**
对于长度超过三或四段的文档，标题和副标题对于可用性和可访问性非常重要。它们帮助读者确定文档的整体轮廓并导航到感兴趣的特定信息。

**标题级别**
标题分为1到6个等级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别来继续。数字越小，部分越小，越详细。

**含义与格式**
可视阅读器通过扫描页面来查找更大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此改变风格并不是一个充分的线索。

相反，标题必须在语义上“标记”，以便辅助技术可以识别标题。这可以作为导航辅助提供给用户。

这使得添加标题成为屏幕阅读器用户最重要的工具之一，以便他或她可以了解页面上的内容。请注意，标记通常会直观地触发格式更改，可以在许多文档中进行调整。

***

![使链接文本具有意义](https://images.gitee.com/uploads/images/2019/0303/142146_2d876710_1831537.png "4.png")

## 使链接文本具有意义
编写链接文本，以便描述链接目标的内容。避免使用含糊不清的链接文本，例如“点击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“提案文档（RTF，20MB）”。

**示例：使用链接文本描述目标页面**
- **× 无意义**                         
有关设备独立性的更多信息， _请单击此处_ 。
- **√ 有意义**
详细了解 _设备独立性_ 。

***

![为图片编写有意义的文本](https://images.gitee.com/uploads/images/2019/0303/143458_99f3cdfc_1831537.png "5.png")

## 为图片编写有意义的文本
对于每张图片，编写提供图片信息或功能的替代文本。对于纯装饰图片，不需要编写替代文本。

**示例：使用替代文本来表达重要信息**
- **× 无信息**                                         
为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。
图片的替代文字：“充电电话。”
- **√ 信息化**
为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。
图像的替代文字：“将电缆插入手机的底部边缘。”
                 
替代文字通常不可见; 它包含在这个例子中，所以你可以看到它是什么。
***
![为多媒体创建表单和标题](https://images.gitee.com/uploads/images/2019/0303/144336_ae281e96_1831537.png "6.png")

## 为多媒体创建表单和标题
对于纯音频内容，这样的播客提供成绩单。对于音频和视频内容，例如培训视频，还提供字幕。在成绩单和标题中包含对理解内容很重要的口头信息和声音，例如“门吱的一声”。对于视频脚本，还包括重要视觉内容的描述，例如“Athan离开房间”。

***

![提供明确说明](https://images.gitee.com/uploads/images/2019/0303/144457_6f2b4262_1831537.png "7.png")

## 提供明确说明
确保说明，指导和错误消息清晰，易于理解，并避免使用不必要的术语。描述输入要求，例如日期格式。

**示例：说明传达用户应提供的信息**
密码至少应为六个字符，且至少有一个数字（0-9）。
密码：_____________

**示例：错误表示问题是什么，可能还有如何解决问题**
1.用户名'superbear'已在使用中。
2.密码至少需要包含一个号码。

***

![内容清晰简洁](https://images.gitee.com/uploads/images/2019/0303/145155_004f6f8d_1831537.png "8.png")

## 内容清晰简洁
- 根据上下文使用简单的语言和格式。
- 写一些简短明了的句子和段落。
- 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。
- 首次使用时扩展首字母缩略词。例如，Web内容可访问性指南（WCAG）。
- 考虑为读者可能不知道的术语提供词汇表。
- 根据需要使用列表格式。
- 考虑使用图片、插图、视频、音频和符号来帮助澄清意义。

**示例：使内容可读且易于理解**
**× 不必要的复杂**
CPP：如果发生车辆碰撞，指定代表的公司将寻求确定属于所有相关方财产的损害程度和原因。一旦我们的代表获得允许我们理解因果关系的信息，我们可能会或可能不会分配适当的货币补偿。由此产生的决定可能会出现以下选项之一：索赔未获批准并被指定为拒绝状态，索赔状态不明确，并且在进一步处理之前需要其他信息，索赔部分批准并减少付款是已分配和签发，或索赔已完全批准，并且已分配和发放索赔总额。
**√ 更易于理解**
索赔处理程序（CPP）：如果您发生车祸，我们的代理人将进行调查。调查结果将确定任何索赔付款。这可能导致：
- 批准的索赔 - 全额付款
- 部分批准的索赔 - 减少付款
- 未确定的声明 - 需要更多信息
- 被拒绝的索赔 - 没有付款

***
## 网络用户的故事

![网络用户的故事](https://images.gitee.com/uploads/images/2019/0304/111725_33b4417c_1831537.png "a.png")

## 网络用户的故事
### 摘要
以下关于使用网络的残疾人的故事突出了可访问性障碍的影响以及可访问网站和Web工具的更广泛的好处。
注意：以下方案不是真实的人。他们没有解决各种残疾问题。

### 页面内容
- 李，色盲的网购者
- 亚历克斯，重复压力损伤的记者
- 马丁，有听力障碍的线上学生
- 伊利亚，高级盲人职员
- 佩里提，中学生注意力缺陷，多动障碍和阅读障碍的中学生
- 芸，视力低下，手部震颤，轻度短期记忆丧失的退休人员
- 路易斯，唐氏综合症超市助理
- 卡辛，聋哑盲的少年

***

![李，色盲的网购者](https://images.gitee.com/uploads/images/2019/0304/112252_8a3f2623_1831537.png "b.png")

## 李，色盲的网购者
李是色盲，在网上购物时遇到障碍。他是影响男性的最常见的视力障碍之一：红色和绿色色盲。Lee经常在网上购物，有时在网站和应用上遇到问题，其中文字和图像的颜色对比不充分，仅使用颜色来表示必填字段和销售价格。当使用红色和绿色组合时，Lee无法区分这两者，因为两者看起来都是棕色的。当颜色样本没有用颜色名称标记时，他也很难做出产品选择。

Lee拥有更好的在线内容和使用足够对比度的应用程序的经验，并允许他在浏览器中调整对比度设置。当使用星号时，他也能更好地识别何时需要信息。当颜色标签名称包含在选择选项中而不是单独使用颜色样本时，Lee可以更容易地识别他想要购买的产品，尤其是服装。

***

![亚历克斯，重复压力损伤的记者](https://images.gitee.com/uploads/images/2019/0304/112440_ffac2e90_1831537.png "c.png")

## 亚历克斯，重复压力损伤的记者
亚历克斯已经作为记者工作了20多年，并且已经发展出重复性劳损，这使得使用鼠标和长时间打字变得很痛苦。

虽然花了大量的研究，时间和学习的承诺，但他能够通过以下对工作环境的修改来减轻痛苦：
- 使用符合人体工程学的键盘
- 不使用鼠标使用键盘命令
- 他的电脑和手机上的语音识别软件
- 在他的手机上的辅助触摸

当网站和其他在线内容无法单独通过键盘命令导航时，Alex会遇到问题。他经常遇到没有键盘等效的Web表单。有时，在不使用许多键盘命令的情况下跳过内容并导航到网页上的部分也很困难，这非常累人并且限制了他可以舒适地工作的时间。他最近也开始探索在他的手机上使用辅助触摸，这也有助于他使用更少的手势和更长时间的工作。作为临时解决方案，Alex的雇主已经构建了几个定制工作，为他使用公司的内部内容管理系统提供键盘支持，旨在实现改进的键盘支持，使下一版软件的所有用户受益。

***

![马丁，有听力障碍的线上学生](https://images.gitee.com/uploads/images/2019/0304/112553_cd3534bb_1831537.png "d.png")

## 马丁，有听力障碍的线上学生
Martine今年62岁，自出生以来一直很难听。她可以听到一些声音，但还不足以理解语音。小时候，她学习手语，并在早年学习书面语言。她现在又是一名学生，参加在线大学课程。

她所在的大学提供手语翻译和通信访问实时翻译（CART）作家，为她的课程提供口头语言的书面逐字解释。但是，当视频和其他媒体内容没有标题时，Martine遇到了障碍。大学开始意识到提供音频内容的标题媒体和成绩单的必要性和要求，现在正与字幕提供商合作，为大学网站上发布的所有内容提供标题，包括学习管理系统中的所有课程内容。除了为失聪或有听力障碍的学生提供内容访问外，该大学还发现使用字幕和成绩单增加了好处。成绩单有助于更容易地生成多种语言的字幕，并且还可以改进在线内容的索引。改进的索引提供了改进的搜索引擎优化和改进的大学在线内容的可发现性。该大学遵循WCAG指南提供标题内容。

***

![伊利亚，高级盲人职员](https://images.gitee.com/uploads/images/2019/0304/112711_a09d87f9_1831537.png "e.png")

## 伊利亚，高级盲人职员
伊利亚是盲人。她是一家保险公司的总会计师，该公司在公司内部网上使用基于网络的文件和表格，与许多其他盲人计算机用户一样，她不读盲文。

伊利亚使用屏幕阅读器和手机访问网络。她的屏幕阅读器和她的手机可访问性功能都以语音输出形式向她提供有关设备操作系统，应用程序和文本内容。

访问Web内容时，屏幕阅读器会大声显示网页上的结构信息，例如表格中的标题，列和行标题，列表项，链接，表单控件等，使她能够更好地浏览页面，完成和提交表单，并以有效的方式访问信息。她能够以非常高的速度收听和理解语音输出。当网站没有正确编码并且不在图像上包含替代文字描述时，伊利亚会遇到问题。这些网站无法通行，并且需要大量时间才能从页面顶部向底部读取文本，而无需导航提示。有时她发现自己被困在网页上无法移动到另一个区域的区域，必须完全放弃该页面。

作为其组织的高级成员，伊利亚通过使用视频会议应用程序，文档和幻灯片共享应用程序以及聊天室为在线环境中的员工提供培训。伊利亚和她的员工在找到具有可访问性功能的有效应用程序之前评估了许多培训工具，以满足具有不同能力的不同员工的需求。

***

![佩里提，注意力缺陷，多动障碍和阅读障碍的中学生](https://images.gitee.com/uploads/images/2019/0304/112909_420d1bd2_1831537.png "f.png")

## 佩里提，注意力缺陷，多动障碍和阅读障碍的中学生
佩里提是一名患有注意力缺陷，多动障碍与阅读障碍的中学生。虽然她读书很困难，但她特别喜欢她的文学课。

佩里提的学校最近开始使用在线数字教科书。佩里提最初担心使用这种新格式，但是通过使用文本到语音转换软件突出显示屏幕上的文字，她发现她可以更轻松地专注于内容而不是挣扎每一个字。文本转语音软件对其他在线文本也很有帮助; 但是，佩里提对网站的体验因站点而异。有些网站使用图形和插图，以帮助她专注于她想要阅读的部分和内容，而其他网站有很多广告和移动内容，这是非常分散注意力。当导航不明显时，她也会遇到在线内容的问题。

佩里提的学校还使用新的在线图书馆目录，提高了可访问性。在新目录实施之前，Preety必须亲自访问图书馆，以获得搜索和查找材料方面的帮助。现在，她可以使用手机，平板电脑或笔记本电脑自行搜索目录。佩里提仍在努力解决拼写问题，但发现建议替代拼写并提供错误更正的搜索功能非常有用，并且极大地改善了她的体验。

***

![芸，视力低下，手部震颤，轻度短期记忆丧失的退休人员](https://images.gitee.com/uploads/images/2019/0304/113055_926b030b_1831537.png "g.png")

## 芸，视力低下，手部震颤，轻度短期记忆丧失的退休人员
芸是一名85岁的患者，视力下降，手震颤，记忆力减退; 与他年龄相关的年龄相关的常见损伤。芸经常浏览网页阅读新闻网站。近年来，他也开始使用社交媒体与家人和朋友保持联系。他维护自己的博客，发表有关艺术史和他喜欢的其他主题的文章。

像许多老年人一样，芸难以阅读小文本并点击小链接和表单元素。他的女儿向他展示了如何在网络浏览器中放大文字，这在许多网站上运行良好。当文本在放大时不回流并且他被迫来回滚动以阅读放大的内容时，他会遇到问题，这意味着他很容易失去对他的位置的追踪。他还在许多社交媒体网站上发现了CAPTCHA图像问题。文本是如此扭曲，即使他扩大它，他经常无法准确地输入文本。他在使用替代CAPTCHA选项的网站上有更好的体验，不幸的是目前只有少数人使用。

芸的女儿给了他一只特别的老鼠，用手颤抖更容易控制。他还使用网络浏览器保存他经常访问的网站的缩略图，这使他更容易跟踪他最常去的网站。

***
![路易斯，唐氏综合症超市助理](https://images.gitee.com/uploads/images/2019/0304/113407_16b32d2e_1831537.png "h.png")

## 路易斯，唐氏综合症超市助理

路易斯患有唐氏综合症，并且在抽象概念，阅读和数学计算方面存在困难。

路易斯在市场上工作，为顾客提供杂货包装。通常他会在他工作的同一个市场买他的杂货，但他有时会被大量的产品选择所困惑，有时在商店布局改变时找到他最喜欢的商品时会遇到问题。

最近，一位朋友向他展示了一个购买在线杂货的应用程序，该应用程序具有一致且易于使用的导航，具有清晰直接的指示。路易斯能够将他最常购买的商品列表添加到应用程序中并保存以供额外购买。他还喜欢为错误输入或拼写错误的单词提供建议的搜索功能。该应用程序还在他的虚拟购物车中保留了总计的项目，这有助于他跟上他的消费量。

他的朋友还向他展示了他的手机中的几个辅助功能，他发现这非常有用，包括单词预测，根据他输入的第一个字符和文本到语音功能提供了一系列可能的单词选择，这使他能够听取评论由其他用户发布在杂货店应用程序上。通过使用这些工具，路易斯已经开始发布他自己对已购买商品的评论。

路易斯现在每月使用购物应用程序几次购买经常购买的商品，并定期从他工作的商店购买一些新鲜商品。

***

![卡辛，聋哑盲的少年](https://images.gitee.com/uploads/images/2019/0304/113556_e745b24c_1831537.png "i.png")

## 卡辛，聋哑盲的少年
卡辛是一个聋哑的少年，最近也变得合法失明，这意味着她只能看到屏幕的一小部分，并且在显着放大时阅读文字。

卡辛使用：
- 屏幕放大软件将网站上的文字放大到合适的字体大小;
- 屏幕阅读器软件，可在可刷新的盲文设备上显示文字;
- 大型电脑屏幕，高分辨率和高亮度（亮度）。

卡辛的便携式电子盲文记事本包括日历，电子邮件，网页浏览和记笔记功能。她的移动设备包括GPS，可帮助她定位自己并在城市中导航。卡辛使用公共交通在线网站来规划她的旅行和查看公交时刻表，但是当她放大文本并且没有回流或正确包裹时遇到问题，使得地图非常难以使用。她可以更好地查看已正确标记并允许文本重排的列车时刻表。卡辛找到了公共交通网站上列出的网络团队联系信息，并向团队发送了一条消息，通知他们使用他们的网站遇到的问题。她还向火车网站发送了链接，并描述了该网站如何更好地为她服务。