# WAI-Translate

**Repository Path**: NFUNM039/WAI-Translate

## Basic Information

- **Project Name**: WAI-Translate
- **Description**: 网站运营与管理课程，翻译WAI原则
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# STEP1：翻译WAI原则
## 编写Web可访问性
#### 本篇文章介绍基本事项能更好地帮助你编写网站，使残障人士更好地访问该网站.  

![](https://images.gitee.com/uploads/images/2020/0318/203803_7220a0d1_1648212.png)
### 1. 提供内容丰富，独特的页面标题
- 对于每个页面，请提供一个简短的标题来描述页面内容并将其与其他页面区分开来.
- 页面标题通常与页面的主标题相同.把独特且相关性最强的的信息放在首位.
- 例如，将页面的名称放在组织的名称之前.对于属于多步骤流程的页面，请把当前步骤写在页面标题中.  

![](https://images.gitee.com/uploads/images/2020/0318/204317_f4607259_1648212.png)

### 2. 使用标题表达主要内容与结构
- 使用短标题将相关的段落分组，并清晰表达章节内容.好的标题为文章提供了大纲内容.  

![](https://images.gitee.com/uploads/images/2020/0318/204551_0cfcdc25_1648212.png)

### 3. 使链接文本有意义
- 编写链接文本，描述链接目标的内容.
- 避免使用有歧义的链接文本，例如“单击此处”或“了解更多”.
- 指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”.  

![](https://images.gitee.com/uploads/images/2020/0318/204801_22fc1653_1648212.png)

### 4. 用有意义的文本标记图片
- 对于每个图像，编写提供图像信息或功能的替代文本.对于纯装饰性图像，无需编写替代文本.  

![](https://images.gitee.com/uploads/images/2020/0318/204946_c7778934_1648212.png)

### 5. 为多媒体创建文字记录和字幕
- 对于纯音频的内容，例如播客，请提供文字记录.
- 对于音频和视频内容要提供字幕，例如培训视频.包括一些对于理解内容很重要的语言和声音的信息，例如‘门吱吱作响’.
- 对于视频而言，要包含视觉内容描述，例如‘Athan离开了房间’.  

![](https://images.gitee.com/uploads/images/2020/0318/205128_913bf0bc_1648212.png)

### 6. 提供清晰的指示
- 确保指示，引导以及错误提示都是简单易懂，避免不必要的技术性语言.描述输入需求，例如日期格式.  

![](https://images.gitee.com/uploads/images/2020/0318/205254_ca3407c9_1648212.png)

### 7. 保持内容的简洁  
#### 根据情况，使用简单的语言和格式.
- 书写简短易懂的句子和段落.
- 避免使用不必要的复杂词汇和短语.考虑到为读者提供所不了解的词汇表.
- 注意首字母缩略词的首次使用.例如Web Content Accessibility Guidelines (WCAG).
- 考虑为读者提供所不了解的词汇表.
- 适当使用表格.
- 考虑使用图片，插画，视频音频，以及符号来阐释内容。. 

![](https://images.gitee.com/uploads/images/2020/0318/210149_0d8cf5c2_1648212.png)
![](https://images.gitee.com/uploads/images/2020/0318/210140_25178865_1648212.png)  

# STEP2：根据WAI原则点评[教育- Apple Developer](https://developer.apple.com/cn/education/)  

***
#### 1. 该网站对每一部分的文字内容都提供简短且有意义的标题.把独特且最相关的信息放在了首位，且把不同的内容与其他页面分开.  

![](https://i.loli.net/2020/03/19/Urw8Y9Cz5yFXH2W.png)
![](https://images.gitee.com/uploads/images/2020/0319/231408_f88f2bdc_1648212.png)
#### 2. 该网站使用了短标题将相关段落分了组，并清楚地概括描述了各节的内容.好的标题给用户提供了内容的大纲.  

![](https://images.gitee.com/uploads/images/2020/0319/231450_56b21e69_1648212.png)
#### 3. 此网站运用有意义的链接文本，描述该链接目标所想表达的内容.避免使用了“单击此处”或“阅读更多”这些有歧义的链接文本.  

![](https://images.gitee.com/uploads/images/2020/0319/231532_36eecb8f_1648212.png)
![](https://images.gitee.com/uploads/images/2020/0319/231557_ffe08d05_1648212.png)
#### 4. 该网站对于每个视频都标上内容相关标题以及简要概括内容，方便访问者对视频的理解.  

![](https://images.gitee.com/uploads/images/2020/0319/231637_f804ca15_1648212.png)
![](https://images.gitee.com/uploads/images/2020/0319/231732_20ab26ba_1648212.png)
#### 5. 为图片或图标添加有意义的文本描述.  

![](https://images.gitee.com/uploads/images/2020/0319/231814_e4bfbc7f_1648212.png)  
#### 6. 为访问者提供清晰，准确的指示.例如下图中访问者要登录该网站账号时所显示的界面以及提示，均是简洁易懂的.  

![](https://images.gitee.com/uploads/images/2020/0319/231852_5e17d12e_1648212.png)  

### 网站点评小总结
- 该网页内容编写清晰，页面结构简洁，避免使用不必要技术语言.每部分的文字内容都有有意义的标题.对于多媒体也会适当添加文字描述，例如图片，图标，视频内容等.准确提醒访问输入内容者，例如账号登陆里面的提示语.
- 整体上满足WAI原则，网站功能稍复杂，如跳转至另一页面，难以找回上一页面的链接入口.  

*** 
##### 小组成员
- 黄梓珊 181013083
- 许钰然 181013059
- 李姗姗 171013039