# 2020网站运营
**Repository Path**: SOMNUSLOCK/website_operation
## Basic Information
- **Project Name**: 2020网站运营
- **Description**: 网站运营作业集中
- **Primary Language**: 其他
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-03-17
- **Last Updated**: 2020-12-19
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 编写Web可访问性
@([入门提示](https://www.w3.org/WAI/tips/))
### 摘要
>此页面介绍了一些基本注意事项，以帮助您开始编写残障人士更容易访问的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)
-------------------
### 提供内容丰富，独特的页面标题
对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。
> #### 更多信息：
>- **WCAG**
> [标题为2.4.2的页面](https://www.w3.org/WAI/WCAG21/quickref/#page-titled)[(了解2.4.2)](https://www.w3.org/WAI/WCAG21/Understanding/page-titled)
### 使用标题传达含义和结构
使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。
> #### 更多信息：
>- **WCAG**
> [标题和标签2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels)[(了解2.4.6)](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels)
> [本节标题2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#section-headings)[(了解2.4.10)](https://www.w3.org/WAI/WCAG21/Understanding/section-headings)
> [信息和关系1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#info-and-relationships)[(了解1.3.1)](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)
>- **用户的故事**
> [屏幕阅读器用户如何使用标题导航](https://www.w3.org/WAI/people-use-web/user-stories/#accountant)
### 使链接文字有意义
编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。
**示例：使用链接文本描述目标页面**
| 无效信息 | 有效信息 |
| :-------- |:--: |
| 有关设备独立性的更多信息，[请单击此处](about:blank#blocked)|阅读有关设备独立性的更多信息 |
> #### 更多信息：
>- **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)
### 为图像编写有意义的文本替代
对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。
### 为图像编写有意义的文本替代
对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。
> #### 更多信息：
>- **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)
### 创建多媒体文字记录和字幕
对于纯音频内容（例如播客），请提供成绩单。对于音频和视频内容（例如培训视频），也提供字幕。在成绩单和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频成绩单，还包括重要视觉内容的描述，例如“ Athan离开房间”。
> #### 更多信息：
>- **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)
### 提供明确的指示
确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。
###### 示例：说明传达用户应提供哪些信息 图片
###### 示例：错误指示问题所在以及可能的解决方法
1. ❗ 用户名“ superbear”已在使用中。
2. ❗ 密码必须至少包含一个数字。
> #### 更多信息：
>- **WCAG**
> *[标签或说明3.3.2 ](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) [理解3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions)
>- **用户的的故事**
> * [描述简单的说明，帮助学习有困难的人](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant)
### 保持内容简洁明了
* 撰写简短明了的句子和段落。
* 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。
* 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。
* 考虑为读者可能不知道的术语提供词汇表。
* 适当使用列表格式。
* 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。
© 2019 Elaine
##### 更多信息
* 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)
*********
### 创建多媒体文字记录和字幕
对于纯音频内容（例如播客），请提供成绩单。对于音频和视频内容（例如培训视频），也提供字幕。在成绩单和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频成绩单，还包括重要视觉内容的描述，例如“ Athan离开房间”。
##### 更多信息
* 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)
*********
### 提供明确的指示
确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。
###### 示例：说明传达用户应提供哪些信息
###### 示例：错误指示问题所在以及可能的解决方法
1. ❗ 用户名“ superbear”已在使用中。
2. ❗ 密码必须至少包含一个数字。
##### 更多信息
* WCAG
* [标签或说明3.3.2 ](https://www.w3.org/WAI/WCAG21/quickref/#labels-or-instructions) [理解3.3.2](https://www.w3.org/WAI/WCAG21/Understanding/labels-or-instructions)
* 用户的故事
* [描述简单的说明，帮助学习有困难的人](https://www.w3.org/WAI/people-use-web/user-stories/#supermarketassistant)
*******
### 保持内容简洁明了
* 撰写简短明了的句子和段落。
* 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。
* 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。
* 考虑为读者可能不知道的术语提供词汇表。
* 适当使用列表格式。
* 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。
*********
> #### 示例：使内容易读易懂
| ✖不必要的复杂 | ✔更容易理解 |
|---|
| CPP：万一发生车辆碰撞，公司指派的代表将寻求查明所涉各方财产的损害程度和原因。 一旦我们的代表获得使我们了解因果关系的信息，我们可能会分配也可能不会分配适当的货币补偿。 最终的决定可能会出现以下选择之一：索赔未获批准并被指定为拒绝状态，索赔的状态不明确，在进一步处理之前将需要其他信息，部分索赔已获批准并且减免了付款。 分配和签发，或者索赔已完全批准，并且分配了总索赔付款。 | 索赔处理程序（CPP）：如果您发生车祸，我们的代理商将进行调查。 调查结果将确定任何索赔款项。 这可能导致：
● 批准的索赔-全额付款
● 部分批准的索赔-减少付款
● 未确定的索偿-需要更多信息
● 索赔被拒-不付款  |
> #### 更多信息
> - **WCAG**
**● [阅读级别3.1.5](https://www.w3.org/WAI/WCAG21/quickref/#reading-level)[（理解3.1.5）](https://www.w3.org/WAI/WCAG21/Understanding/reading-level)**
**● [不寻常的词3.1.3](https://www.w3.org/WAI/WCAG21/quickref/#unusual-words)[（理解3.1.3）](https://www.w3.org/WAI/WCAG21/Understanding/unusual-words)**
**● [缩写3.1.4](https://www.w3.org/WAI/WCAG21/quickref/#abbreviations)[（理解3.1.4）](https://www.w3.org/WAI/WCAG21/Understanding/abbreviations)**
> - **用户的故事**
**● [阅读障碍者受益于易于阅读的文本](https://www.w3.org/WAI/people-use-web/user-stories/#classroomstudent)**
> #### 了解有关辅助功能的更多信息
> 这些技巧是您需要进行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要求和技术的可定制参考
> #### 帮助改善此页面
> 请通过电子邮件将您的想法，建议或评论分享到公开存档的列表wai-eo-editors@w3.org或通过GitHub
日期：2019年1月9日进行较小更新。2016年4月15日更新。2015年9月首次发布
编辑：凯文·怀特（Kevin White），沙迪·阿布·扎赫拉（Shadi Abou-Zahra）和肖恩·劳顿·亨利（Shawn Lawton Henry）。 致谢。
由教育和外展工作组（EOWG）开发。 在WAI-DEV项目的支持下开发，该项目由欧盟委员会IST计划共同资助。
**********
### B站
### 1. 提供内容丰富，独特的页面标题
> 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开
- 不同网页在不同标签显示
- 主标题图文丰富鲜明
### 2.使用标题传达含义和结构
> 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲
- 1.不同类型视频在不同小标题区块下
- 2.视觉清晰，直达所想
### 3.使链接文字有意义
> 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本
- 1.用链接文本描述目标页面
- 2.每个画面每个文字都有意义
### 4.为图像编写有意义的文本替代
在B站观看视频的时候，在右下方会有几个图形代表功能，用鼠标悬浮在图形上时会出现文字提示该图形所代表的功能，方便观看的人按照自己习惯去调整页面质量、大小等。
### 5.创建多媒体文字记录和字幕
在观看视频的时候，尽管会有声音，但是有时候因为方言的差异观看的人不一定知道该字音代表什么，所以就需要字幕来明确制作视频的人所表达的意思。
### 6.提供明确的指示
指示明确，用户非常清楚的知道这个是什么功能，尽可能让操作后的结果满足用户的预期。如:
将鼠标悬浮在“下载APP”此选择后会出现：
就会出现预期效果——想要下载手机端进行体验。
### 7.保持内容简洁明了
其实b站并不算得上内容简洁明了。正是因为b站内容的复杂、丰富，才得以吸引大批的、各个阶层的、背景不一样、性格爱好不一的用户。但是b站没有中大篇幅的广告（只有偏角），使人感觉非常舒适。
红笔圈出位置为b站广告