# 网站运营-WAI指导原则翻译 **Repository Path**: william159/website_operation ## 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-19 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # WAI指导原则翻译 ## 编写Web可访问性 ### 简要 > 这一页介绍了一些基本的注意事项去帮助你开始写一些能让残疾人更容易看到的网页内容。这些提示是帮助你满足WCAG要求的好练习。下面是关于WCAG要求的链接，去详细了解文件的详细背景、游客指导，用户案例以及更多。 ---- #### 页面内容 - 提供内容丰富，独特的页面标题 - 使用标题传达含义和结构 - 使链接文字有意义 - 为图像编写有意义的文本替代 - 创建多媒体文字记录和字幕 - 提供明确的指示 - 保持内容简洁明了 ---- ## 提供内容丰富，独特的页面标题 对于每个网页，提供简短的标题，用来描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于多步骤过程的页面，请在页面标题中包括当前步骤。 ![Example: Page Titles](img/1.png) ##### 更多信息 + 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) ---- ## 使用标题传达含义和结构 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 ![Example: Using headings to organize content](img/2.png) ##### 更多信息 + 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）”。 ![Example: Using link text to describe target page](img/3.png) ##### 更多信息 + 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) ---- ## 为图像编写有意义的文本替代 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。 ![Example: Using alternative text to communicate important information](img/4.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) ---- ## 创建多媒体文字记录和字幕 对于纯音频内容（例如播客），请提供文字记录。对于音频和视频内容（例如培训视频），也提供字幕。在文字记录和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频文字记录，还包括重要视觉内容的描述，例如“ 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) ---- ## 提供明确的指示 确保说明，指导和错误消息清晰，易于理解，并避免不必要的技术性语言。描述输入要求，例如日期格式。 ![Example: Instructions communicate what information the user should provide](img/5.png) ##### 更多信息 + 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）。 * 考虑为读者可能不知道的术语提供词汇表。 * 适当使用列表格式。 * 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。 ![Example: Making content readable and understandable](img/6.png) ##### 更多信息 + 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) ---- # 网站点评 以[百度新闻](http://news.baidu.com/)为例 1、 使用了短标题区分开每一节的内容，也促成了页面一节一节的结构（国内、国际、、娱乐、地区......）![](img/分组分类.jpg) 2、 最上方提供了几个词，区分网页以及各个分网页![](img/标题.jpg) 3、 当光标移到右边的几个图形上，会出现恰当的代替解释这个图标的意思，使得链接有意义 ![](img/链接有意义.jpg) 4、 每一张新闻图片的下方都会用这一则新闻的概要作为此图的有效代替文本![](img/代替文本.jpg) 5、 登陆界面的输入框内都会提示应该输入什么内容，在发生错误时也会提示错误所在，能做到明确的提示。![](img/明确的提示.jpg)