# WAI原则

**Repository Path**: LITONGTONG/wai_principle

## 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**: 2020-03-22
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# WAI指导原则翻译中文版

## 编写Web可访问性
##### 关于如何开始的建议

#### 摘要
#### 本页面介绍了一些基本注意事项，以帮助您开始编写对残障人士来说更容易访问的web内容。这些建议是帮助您满足Web可访问性指南（WCAG）要求的良好实践。遵循相关WCAG要求的链接，“理解”文档中的详细背景，教程指导，用户故事等等。
#### 页面内容
* 提供信息丰富，独特的页面标题
* 使用标题以传达网页意义和大致结构
* 使链接文本有意义
* 为图像编写有意义的文本替代
* 为多媒体创建文字记录和字幕
* 提供明确的指示
* 保持页面内容简洁明了

### 提供信息丰富，独特的页面标题
对于每个网页页面，提供一个简短的标题来描述页面内容以区别于其它页面。页面标题通常与页面的主标题一致。把独特且最相关的信息放在开头；例如，把页面名称放在组织名称的前面。对于级别繁多的页面，请在页面标题中显示当前位置。
![例子：页面标题](https://images.gitee.com/uploads/images/2020/0322/125504_c8b9073b_2230727.png "图片1.png")

### 使用标题以传达网页意义和大致结构
使用简短标题来将相关段落分组并清晰地描述概括各部分内容。好的标题表达了内容的大纲。
![例子：使用标题组织内容](https://images.gitee.com/uploads/images/2020/0322/125628_e3a83b09_2230727.png "图片2.png")

### 使链接文本有意义
编写链接文本以描述链接目标的内容。避免使用模糊的链接文本，如“点击这里”或“阅读更多”。指明链接目标相关信息，例如文档类型和大小，例如，“建议文档（RTF，20MB）”。
![例子：使用链接文本描述目标页面](https://images.gitee.com/uploads/images/2020/0322/125721_8b2d99f6_2230727.png "图片3.png")

### 为图像编写有意义的文本替代
对于每个图像，编写文本替代来提供图像的信息和功能。对于纯装饰性的图像，无需编写替代文本。
![例子：使用替代文本传达重要信息](https://images.gitee.com/uploads/images/2020/0322/125919_c05f0044_2230727.png "图片4.png")

### 创建多媒体文字记录和字幕
对于纯音频内容（例如播客），请提供文字本。对于音频和视频内容（例如培训视频），也提供字幕。在文字本和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频文字本，还包括重要视觉内容的描述，例如“ Athan离开房间”。

### 提供明确的指示
确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。
![例子：说明传达用户应提供的信息/错误指示问题所在，并可能指示如何解决问题](https://images.gitee.com/uploads/images/2020/0322/130215_0aac8e7b_2230727.png "图片5.png")

### 保持页面内容简洁明了
视情况而定，使用简单的语言和格式。
* 撰写简洁明了的句子和段落。
* 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。
* 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。
* 考虑为读者可能不知道的术语提供词汇表。
* 适当使用列表格式。
* 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。
![使内容可读和易懂](https://images.gitee.com/uploads/images/2020/0322/130447_9cd27548_2230727.png "图片6.png")

## 根据WAI原则点评网站——[小红书](https://www.xiaohongshu.com/)

### 优点
* 小红书网站的页面标题为“_小红书_标记我的生活_”，简短明了，同时展现了产品的slogan，**突出产品核心特点，增强用户对该产品的记忆点**。  
其次，**导航栏内容明确，层级分明**，用户可直观清晰地找到所需了解的信息内容。
![小红书网站页面](https://images.gitee.com/uploads/images/2020/0322/130936_0b4b367a_2230727.png "图片7.png")

* 在大标题下有**小标题将信息内容分组并清晰描述各部分内容**，体现各部分内容大纲。
![小标题](https://images.gitee.com/uploads/images/2020/0322/131202_e6d61a21_2230727.png "图片8.png")

* 对于网站中的视频内容，旁边**有文本标注视频的主要内容及想要传递的信息意义，视频中也提供了字幕和视觉内容描述方便观看者理解**。
![为多媒体创建文字记录和字幕](https://images.gitee.com/uploads/images/2020/0322/131601_be845399_2230727.png "图片11.png")

* **有明确易于理解的指示**，清晰描述输入要求，并提供其它登录方式操作手册。
![登录界面](https://images.gitee.com/uploads/images/2020/0322/131728_5fd2848d_2230727.png "图片12.png")

* 句子段落**简洁明了**，有插图**帮助读者更好理解文字内容**，并减轻阅读压力。
![图文结合](https://images.gitee.com/uploads/images/2020/0322/131807_21ac5285_2230727.png "图片13.png") 
 
* 首次使用时进行**缩写**。
![词汇注释](https://images.gitee.com/uploads/images/2020/0322/131905_f12de984_2230727.png "图片14.png")

### 缺点

* 链接文本比较模糊，**使用了“查看更多”**作为链接文本。
![“查看更多”链接文本](https://images.gitee.com/uploads/images/2020/0322/131247_73c3a371_2230727.png "图片9.png")

* **缺乏对图像编写有意义的文本替代**，没有十分清晰地传达图像所表达的信息内容或功能。
![图像无文本替代](https://images.gitee.com/uploads/images/2020/0322/131346_2c6f77e5_2230727.png "图片10.png")