# 自制WAI指导原则中文版

**Repository Path**: HLink12/web_operations1

## 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-18
- **Last Updated**: 2021-07-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# STEP-1 中文翻译

## 网页第一部分翻译由[Autumn_hui](https://gitee.com/autumnhui/Learn_WebsiteOperation/blob/master/week_01.md)负责

## 网页第三部分翻译由[Tengzyi](https://github.com/Tengzyi/translate-WAI/blob/master/README.md)负责

## PART-1

![PART1_TRANSLATIONS](https://images.gitee.com/uploads/images/2020/0318/213245_44b26e75_2350084.png "part1.png")

### 使用小标题传达含义和架构

使用小标题将相关段落分组，并清楚地描述各章节。好的标题传达了内容的大意。

> 示例：使用标题来组织内容
> **缺少短标题** ![缺少短标题](https://images.gitee.com/uploads/images/2020/0318/214357_a51b8d87_2350084.png "part1-1.png")  **使用标题和副标题** ![使用标题和副标题](https://images.gitee.com/uploads/images/2020/0318/214457_e46c6215_2350084.png "part1-2.png")

> 更多信息
> * WCAG
    > * 标题和标签2.4.6（了解2.4.6）
    > * 本节标题2.4.10（了解2.4.10）
    > * 信息和关系1.3.1（了解1.3.1）
> * 用户的故事
    > * 屏幕阅读器用户如何使用标题导航

## PART-2

![PART2_TRANSLATIONS](https://images.gitee.com/uploads/images/2020/0318/215816_2e166faa_2350084.png "part2.png")

### 使链接文字有意义

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

> 示例：使用链接文本描述目标页面
> - [ ] **无信息** 有关设备独立性的更多信息，请单击此处。
> - [x] **有意义的信息** 阅读有关设备独立性的更多信息。

> 更多信息
> * WCAG
> * 链接目的（在上下文中）2.4.4（了解2.4.4）
> * 链接目的（仅链接）2.4.9（了解2.4.9）


## PART-3

![PART3_TRANSLATIONS](https://images.gitee.com/uploads/images/2020/0318/215847_3c626e84_2350084.png "prat3.png")

### 为图像编写有意义的文本替代

对每个图像，编写提供图像信息或功能的替代文本。对纯装饰性图像，无需编写替代文本。

> 示例：使用替代文本传达重要信息
> **无信息!**[充电](https://images.gitee.com/uploads/images/2020/0318/220045_f25c8085_2350084.png "part3-1.png")为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。    **图片的替代文本**：“正在为手机充电”
> **内容丰富!**[充电](https://images.gitee.com/uploads/images/2020/0318/220226_e6d8ac5b_2350084.png "part3-1.png")为手机充电：使用随附的电缆和电源适配器将手机连接至电源插座。    **图片的替代文本**：“将电缆插入电话的底部边缘。”
> 代文字通常不可见；它包含在此示例中只是为了您可以看到它是什么。

> 更多信息
> * WCAG
> * 非文本内容1.1.1（了解1.1.1）
> * 讲解
> * 图片
> * 用户的故事
> * 向盲人用户介绍替代文本的价值

## PART-4

![PART4_TRANSLATIONS](https://images.gitee.com/uploads/images/2020/0318/220528_dcf09f5b_2350084.png "part4.png")

### 创建多媒体文字记录和字幕

对于纯音频内容（例如podcast），请提供全文。对于音频和视频内容（例如培训视频），也提供字幕。在全文和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频全文，还包括重要视觉内容的描述，例如“ Athan离开了房间”。

> 更多信息
> * WCAG
> * 字幕（预先录制）1.2.2（理解1.2.2）
> * 音频描述或媒体替代（预先录制）1.2.3（了解1.2.3）
> * 用户的故事
> * 描述字幕如何帮助聋哑学生

## PART-5

![PART5_TRANSLATIONS](https://images.gitee.com/uploads/images/2020/0318/220930_2838954b_2350084.png "part5.png")

### 提供明确的指导

> 示例：说明并传达用户应提供哪些信息。
> * 密码至少应包含六个字符，并且至少包含一个数字（0-9）。

> 示例：错误指示问题所在以及如何解决
> * 用户名“ superbear”已在使用中。
> * 密码必须至少包含一个数字。


> 更多信息
> * WCAG
> * 标签或说明3.3.2（了解3.3.2）
> * 用户的故事
> * 描述简单的说明，帮助学习有困难的人

---

# STEP-2 网站点评

# 根据WAI原则点评网站

## 网站：[(news.baidu.com)百度新闻](news.baidu.com)

### 1.提供独特的页面标题。

![](/pic/page1.png)

> 在百度新闻的各个页面中，每个页面拥有各自的内容，因此需要有不同的页面标题来概括该页面的内容。如上图，此标题为对应网页内容概括。


### 2.使用标题来传达信息。
### 3.使链接文本有意义。

![](/pic/page2.png)

> 如上图所展示，*划线文本*作为链接文本，以标题的形式书写在网页中，直接传达对应页面的概括/主要信息，并且同时让链接文本有意义，能够通过点击进行跳转。

### 4.图像拥有有意义替代文本
### 5.为多媒体创建标题、文本
### 6.提供明确的指示。

![](/pic/p3.png)

> 图像标注文本注释，让图片的可读性更高也让人更容易理解。图片拥有对应的跳转链接，明确的标题让人更能够理解图片附带的讯息。左右两侧的标签指示按钮有明确的指示性，清晰表示左右换页。


### 7.保持内容清晰。

![](/pic/p4.png)

> 标题下以模块化形式进行分类，且以对比度较高的字体和背景颜色作为内容的展示，达到清晰明了的效果。