# Web_Operations

**Repository Path**: HyolynJang/Web_Operations

## Basic Information

- **Project Name**: Web_Operations
- **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-19
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#  Web可访问性编写入门

##### 摘要
此页面介绍了一些基本注意事项，以帮助您开始编写残障人士更容易访问的Web内容。 这些技巧是帮助您满足Web Content Accessibility Guidelines（WCAG）要求的良好实践。 遵循相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户案例等。

##### 页面内容
*  [提供内容丰富，独特的页面标题](https://www.w3.org/WAI/tips/writing/#provide-informative-unique-page-titles)
*  [使用标题传达含义和结构](https://www.w3.org/WAI/tips/writing/#use-headings-to-convey-meaning-and-structure)
*  [使链接文字有意义](https://www.w3.org/WAI/tips/writing/#make-link-text-meaningful)
*  [为图像编写有意义的文本替代](https://www.w3.org/WAI/tips/writing/#write-meaningful-text-alternatives-for-images)
*  [创建多媒体文字记录和字幕](https://www.w3.org/WAI/tips/writing/#create-transcripts-and-captions-for-multimedia)
*  [提供明确的指示](https://www.w3.org/WAI/tips/writing/#provide-clear-instructions)
*  [保持内容简洁明了](https://www.w3.org/WAI/tips/writing/#keep-content-clear-and-concise)


### 提供内容丰富，独特的页面标题
***

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

* 示例:页面标题
> :ballot_box_with_check: 首页标题
>
>太空泰迪公司
>
> :ballot_box_with_check: 页面名称后面跟着组织名称
>
>最新消息•太空泰迪公司
>
> :ballot_box_with_check: 页名包括流程中的步骤
>
>购买你的小熊(三步中的第一步)•太空泰迪公司

*  更多信息
  *  WCAG
      * [页面标题为2.4.2(了解2.4.2)](https://www.w3.org/WAI/WCAG21/quickref/#page-titled)

![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/1page_title.png)

### 使用标题传达含义和结构
***

使用简短的标题来组织相关的段落，并清晰地描述章节。好的标题提供内容的大纲。

* 示例:使用标题来组织内容
> :heavy_multiplication_x: 缺少标题
>
>Headings and Subheadings
>
>HTML elements provide information on structural hierarchy of a document. Using elements correctly will help convey additional meaning to assistive technology. In many cases, doing so will also make your document easier to edit.
>
>For documents longer than three or four paragraphs, headings and subheadings are important for usability and accessibility. They help readers to determine the overall outline of a document and to navigate to specific information of interest.
>
>Headings are classified into levels from one to six. The highest level is "Level 1" and often corresponds to the title of the page or major document section. Sub-headers proceed through increasing header levels.
>
> :ballot_box_with_check: 使用标题和副标题
>
>***Headings and Subheadings***
>
>**Headings and Subheadings**
>
>HTML elements provide information on structural hierarchy of a document. Using elements correctly will help convey additional meaning to assistive technology. In many cases, doing so will also make your document easier to edit.
>
>**Purpose of Headings**
>
>For documents longer than three or four paragraphs, headings and subheadings are important for usability and accessibility. They help readers to determine the overall outline of a document and to navigate to specific information of interest.
>
>**Heading Levels**
>
Headings are classified into levels from one to six. The highest level is "Level 1" and often corresponds to the title of the page or major document section. Sub-headers proceed through increasing header levels.

*  更多的信息
  *  WCAG
      * [标题和标签2.4.6(了解2.4.6)](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels)
      * [章节标题2.4.10(了解2.4.10)](https://www.w3.org/WAI/WCAG21/quickref/#section-headings)
      * [信息与关系1.3.1(了解1.3.1)](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships)

  *  用户故事
      * [屏幕阅读器用户如何使用标题导航](https://www.w3.org/WAI/people-use-web/user-stories/#accountant)

![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/2headings.png)

### 使链接文字有意义
***

编写链接文本，以便它描述链接目标的内容。避免使用模棱两可的链接文字，例如“点击这里”或“阅读更多”。说明链接目标的相关信息，如文档类型和大小，例如“提案文档(RTF, 20MB)”。

* 示例:使用链接文本来描述目标页面
> :heavy_multiplication_x: 没有信息
>
>有关设备独立性的更多信息，[请单击此处](javascript: return false)。
>
> :ballot_box_with_check: 有意义的信息
>
>阅读更多[关于设备独立性的内容](javascript: return false)。


*  更多的信息
  *  WCAG
      * [链接目的(上下文)2.4.4](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context)[(理解2.4.4)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context)
      * [链接目的(仅链接)2.4.9](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-link-only)[(理解2.4.9)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only)
     
![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/3link_text.png)

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

对于每个图像，编写替代文本，提供图像的信息或功能。对于纯装饰性的图像，没有必要编写替代文本。

* 例子:使用替代文本来传达重要信息
> :heavy_multiplication_x: 不提供信息的
>
>充电:使用提供的电缆和电源适配器将手机连接到电源插座。
>
>图像的替代文本:“充电手机”
>
> :ballot_box_with_check: 信息丰富的
>
>充电:使用提供的电缆和电源适配器将手机连接到电源插座。
>
>图像的替代文本:“将电缆插入手机底部边缘。”
>
>
替代文本通常是不可见的;它包含在这个示例中，这样您就可以看到它是什么。

* 更多的信息
  * WCAG
      * [非文本内容1.1.1](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content)[(理解1.1.1)](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content)

  * 教程
      * [图片](https://www.w3.org/WAI/tutorials/images/)

  * 用户故事
      * [描述文本替代方案对盲用户的价值](https://www.w3.org/WAI/people-use-web/user-stories/#accountant)

![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/4alternative_text.png)

### 创建多媒体文字整理稿和字幕
***

对于只提供音频的内容，如播客，请提供文字稿。对于音频和视频内容，如培训视频，也提供字幕。在文字稿和说明中包含对理解内容很重要的口头信息和声音，例如，“门吱嘎声”。对于视频记录，还包括对重要视觉内容的描述，例如“Athan leaves the room”。

* 更多的信息
  * WCAG
      * [标题(预先录制)1.2.2](https://www.w3.org/WAI/WCAG21/quickref/#captions-prerecorded)[(理解1.2.2)](https://www.w3.org/WAI/WCAG21/Understanding/captions-prerecorded)
      * [音频描述或媒体选择(预先录制)1.2.3](https://www.w3.org/WAI/WCAG21/quickref/#audio-description-or-media-alternative-prerecorded)[(理解1.2.3)](https://www.w3.org/WAI/WCAG21/Understanding/audio-description-or-media-alternative-prerecorded)

  * 用户故事
      * [描述字幕如何帮助聋哑学生](https://www.w3.org/WAI/people-use-web/user-stories/#onlinestudent)

![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/5transcripts_captions.png)

### 提供明确的指示
***

确保说明、引导和错误提醒是清晰，易于理解的，并避免不必要的专业术语。 描述输入要求，例如日期格式。

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

*  示例:错误提示指出问题所在以及可能的解决方法
>1.   :tw-26a0: 用户名“superbear”已被使用。
>
>2.   :tw-26a0: 密码必须至少包含一个数字。

*  更多信息
  *  WCAG
      * [标签或说明3.3.2（了解3.3.2）](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions)

  *  用户的故事     
      * [进行简单的操作描述，以帮助学习有困难的人](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant)

![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/6instruction.png)

### 保持内容简洁明了
***

根据情况，使用简单的语言和格式。
*  撰写简短明了的句子和段落。
*  避免使用不必要的复杂单词和短语。 考虑为读者可能不知道的术语提供词汇表。
*  首次使用时请缩写。 例如，Web内容可访问性指南（WCAG）。
*  考虑为读者可能不知道的术语提供词汇表。
*  适当使用列表格式。
*  考虑使用图像，插图，视频，音频和符号来帮助阐明含义。

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

*  更多信息
    *  WCAG
        * [阅读级别3.1.5（理解3.1.5）](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions)
        * [不寻常的单词3.1.3（理解3.1.3）](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions)
        * [缩写3.1.4（理解3.1.4）](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions)

    *  用户的故事
        * [阅读障碍者受益于易于阅读的文本](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant)

![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/7content_clear.png
)

![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/more.png
)

####  :round_pushpin: 了解更多关于可访问性的信息
这些提示是你需要考虑的关于网页可访问性的一些事情。下面的资源可以帮助您了解为什么可访问性很重要，以及如何使web更容易被有身体缺陷的人访问。

* [易访问性介绍](https://www.w3.org/WAI/fundamentals/accessibility-intro/)——介绍易访问性并提供许多有用资源的链接
* [易访问性原则](https://www.w3.org/WAI/fundamentals/accessibility-intro/)——对WCAG要求的介绍
* [残疾人士如何使用网络](https://www.w3.org/WAI/people-use-web/)-现实生活中的例子显示无障碍对残疾人士的重要性
* [如何满足WCAG(快速查阅)](https://www.w3.org/WAI/WCAG21/quickref/)-所有WCAG要求和技术的可定制参考


----

### 网站点评——————[TED](https://www.ted.com/topics)
我们小组选择了TED网站进行点评。经过观察比对，我们认为该网站页面美观，结构清晰，信息丰富，且设计基本符合WAI原则，唯一美中不足的是TED网页上的图片没有提供有意义的可替代文字。

#### 从主页右上角的菜单中进入下一层级的页面，会看到banner位置清晰的展示出概括此页面主要内容的标题，并配有简短的描述。
![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/1TED_title.png)

#### 用标题传递段落主要内容，并且展示出段落的结构大纲。
![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/2TED_structure.png)

#### TED Podcast页用标题区分不同内容，超链接文本指示了跳转的内容。
![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/3TED_links.png)

#### 演讲视频页面，TED基本都会提供多种语言的transcript，其中会包括像（laughter）这样的声音描述，方便人们理解。
![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/4TED_transcript.png)

#### TED Talks 页面头部的搜索框内用文字清晰的提供了输入指引。
![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/5TED_instruction.png)

#### 推荐页面的操作说明用数字标题区分步骤，展示流程，并配有相应icon帮助理解，可读性强。
![](https://gitee.com/HyolynJang/Web_Operations/raw/master/assets/images/6TED_readable.png)