# Web_Operations

**Repository Path**: windy-feier/Web_Operations

## Basic Information

- **Project Name**: Web_Operations
- **Description**: 网站运营与管理
- **Primary Language**: 其他
- **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

# Web_Operations

## 网站运营与管理


### web可访问性质的写作技巧
以下是关于如何开始的建议

##### 摘要
本页面介绍了一些基本注意事项，以帮助您开始编写对残疾人更容易访问的web内容。这些提示是帮助您满足Web内容可访问性指南(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页面，提供一个简短的标题来描述页面内容并将其与其他页面区分开来。页面标题通常与页面的主标题相同。把唯一和最相关的信息放在首位;例如，将页面的名称放在组织的名称之前。对于属于多步骤流程的页面，请在页面标题中包含当前步骤。

##### 例子：页面标题
* 首页标题
Space Teddy Inc  ----空间泰迪公司

* 组织名称放在页面名称后面
Latest News • Space Teddy Inc  ----最新消息•空间泰迪公司

* 页面名称包括流程中的步骤
Buy Your Bear (Step 1 of 3) • Space Teddy Inc ----购买你的小熊（三步中的第一步）•空间泰迪公司

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


![](https://gitee.com/windy-feier/Web_Operations/raw/master/assets/images/images/p1.png)

------------------------------------------------------------------------------------------------------------------------------

### 使用标题来传达意思和结构
使用简短的标题来组织相关的段落，并清晰地描述章节。好的标题提供内容的大纲。

##### 例子：使用标题来组织内容
* 缺少标题
* 使用标题和副标题

更多信息：
* 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/Understanding/section-headings)
  * [信息和关系1.3.1(理解1.3.1)](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships)

![](https://gitee.com/windy-feier/Web_Operations/raw/master/assets/images/images/p2.png)

------------------------------------------------------------------------------------------------------------------------------

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

##### 例子：使用链接文本来描述目标页面
* 缺少信息
有关设备独立性的更多信息，[请单击此处](about:blank#blocked)。
* 有意义的信息
[阅读更多关于设备独立性的内容。](about:blank#blocked)

更多信息：
* WCAG
   * [链接目的(上下文)2.4.4(理解2.4.4)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context)
   * [链接目的(仅链接)2.4.9(理解2.4.9)](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-link-only)

![](https://gitee.com/windy-feier/Web_Operations/raw/master/assets/images/images/p3.png)

------------------------------------------------------------------------------------------------------------------------------

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

##### 例子：使用替代文本来传达重要信息
* 无提供信息

![图1](https://gitee.com/windy-feier/Web_Operations/raw/master/assets/images/images/xijie1.png)

充电:使用提供的电缆和电源适配器将手机连接到电源插座。
图片替代文字:“充电手机”

* 提供丰富信息

![图2](https://gitee.com/windy-feier/Web_Operations/raw/master/assets/images/images/xijie2.png)

将电缆插入手机底部边缘。
充电:使用提供的电缆和电源适配器将手机连接到电源插座。
图片替代文字:“将电缆插入手机底部边缘。”

它包含在这个示例中，这样您就可以看到它是什么。

更多信息：
* 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/windy-feier/Web_Operations/raw/master/assets/images/images/p4.png)

------------------------------------------------------------------------------------------------------------------------------

### 为多媒体创建文本和标题
对于只提供音频的内容，如播客，请提供文字记录。对于音频和视频内容，如培训视频，也提供字幕。在文字记录和说明中包含对理解内容很重要的口头信息和声音，例如，“门吱嘎声”。对于视频记录，还包括对重要视觉内容的描述，例如“Athan 离开了房间”。

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

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

![](https://gitee.com/windy-feier/Web_Operations/raw/master/assets/images/images/p5.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/windy-feier/Web_Operations/raw/master/assets/images/images/p6.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/windy-feier/Web_Operations/raw/master/assets/images/images/p7.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要求和技术的可定制参考

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


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

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

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

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


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


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

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