# web_Accessibility_Guidelines **Repository Path**: lucaszy/web_Accessibility_Guidelines ## Basic Information - **Project Name**: web_Accessibility_Guidelines - **Description**: 自制WAI指导原则中文版 - **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_Accessibility_Guidelines **简介**：自制版WAI指导中文翻译。 ![首图](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/01.png "") # 编写Web可访问性 [ **提示入口** ](https://www.w3.org/WAI/tips/) ![摘要](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/02.png "在这里输入图片标题") # 摘要 > 本页介绍了一些基本注意事项，可帮助您开始编写残障人士更容易访问的Web内容。这些提示是帮助您满足Web内容可访问性指南（WCAG）要求的良好实践。点击相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户案例等。 ![目录](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/03.png "在这里输入图片标题") ## 目录 * [ **提供内容丰富，独特的页面标题** ](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) # 提供信息丰富，独特的页面标题 > 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 ![标题](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/04.png "在这里输入图片标题") ## 示例：页面标题 * 主页标题 ![主页标题](https://images.gitee.com/uploads/images/2019/0304/105803_1040787e_1648200.png "屏幕截图.png") * 页面名称后跟组织名称 ![页面名称后跟组织名称](https://images.gitee.com/uploads/images/2019/0304/105848_cafe1976_1648200.png "屏幕截图.png") * 页面名称包括进程中的步骤 ![页面名称包括进程中的步骤](https://images.gitee.com/uploads/images/2019/0304/105927_6651ff79_1648200.png "屏幕截图.png") ## 更多信息 ![dianji](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/05.png "在这里输入图片标题") * WCAG > [页面标题为2.4.2（了解2.4.2）](https://www.w3.org/WAI/WCAG21/quickref/#page-titled) ## 使用标题传达含义和结构 > 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 ![意义和结构](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/06.png "在这里输入图片标题") > 使用简短标题对相关段落进行分组，并清楚地描述各个部分。好的标题提供了内容的概述。 ## 示例：使用标题来组织内容 ## X缺乏标题 > HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 > > 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 > > 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 > > 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。 > > 相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。 > > 这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档> 中进行调整。 > > 改编自宾夕法尼亚州的标题和小标题 ## √使用标题和小标题 >> HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 >> 示例：标题的目的 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 >> 示例：标题级别 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 >> 示例：含义与格式 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。 >> 相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。 >> 这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档中进行调整。 >> 改编自宾夕法尼亚州的标题和小标题 ![gengduoxinxi](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/07.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/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) ## 使链接文字有意义 > 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/08.png "在这里输入图片标题") ## 示例：使用链接文本描述目标页面 | **无信息** | **有意义的信息** | |:-----------|-----------:| |有关设备独立性的更多信息，请[单击此处](http://)。|阅读[有关设备独立性](http://)的更多[信息](http://)。| ![gen](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/09.png "在这里输入图片标题") ## 更多信息 - **WCAG** - [链接目的（在上下文中）2.4.4（理解2.4.4）](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-in-context) - [链接目的（仅链接）2.4.9（理解2.4.9）](https://www.w3.org/WAI/WCAG21/quickref/#link-purpose-link-only) ## 为图像编写有意义的文本替代 > 对于每个图像，编写提供图像信息或功能的替代文本。对于纯装饰性图像，无需编写替代文本。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/10.png "在这里输入图片标题") ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/19.png "在这里输入图片标题") ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/11.png "在这里输入图片标题") ## 更多信息 - **WCAG** - [非文本内容1.1.1（理解1.1.1）](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) - **讲解** - [图片](https://www.w3.org/WAI/tutorials/images/) - **用户的故事** - [向盲人用户介绍替代文本的价值](https://www.w3.org/WAI/people-use-web/user-stories/#accountant) ## 创建多媒体文字记录和字幕 > 对于纯音频内容（例如播客），请提供成绩单。对于音频和视频内容（例如培训视频），也提供字幕。在成绩单和字幕中包括对理解内容很重要的语音信息和声音，例如“门吱吱作响”。对于视频成绩单，还包括重要视觉内容的描述，例如“ Athan离开房间”。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/12.png "在这里输入图片标题") ##更多信息 - **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/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/13.png ) ### 示例： #### 说明传达用户应提供的信息 密码至少应为六个字符，且至少有一个数字（0-9）。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/14.png "在这里输入图片标题") ### 示例： #### 错误表示问题是什么，可能还有如何解决问题 1. 用户名'superbear'已在使用中。 2. 密码至少需要包含一个数字。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/15.png "在这里输入图片标题") #### 更多信息 - 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) ## 保持内容简洁明了 根据情况，使用简单的语言和格式。 - 撰写简短明了的句子和段落。 - 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供词汇表。 - 首次使用时请缩写。例如，Web内容可访问性指南（WCAG）。 - 考虑为读者可能不知道的术语提供词汇表。 - 适当使用列表格式。 - 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。 ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/16.png "在这里输入图片标题") #### 示例：使内容可读且易于理解 ##### :x: 不必要的复杂 CPP：如果发生车辆碰撞，指定代表的公司将寻求确定属于所有相关方财产的损害程度和原因。一旦我们的代表获得允许我们理解因果关系的信息，我们可能会或可能不会分配适当的货币补偿。由此产生的决定可能会出现以下选项之一：索赔未获批准并被指定为拒绝状态，索赔状态不明确，并且在进一步处理之前需要其他信息，索赔部分批准并减少付款是已分配和签发，或索赔已完全批准，并且已分配和发放索赔总额。 ##### :heavy_check_mark: 更容易理解 索赔处理程序（CPP）：如果您发生车祸，我们的代理人将进行调查。调查结果将确定任何索赔付款。这可能导致： - 批准的索赔 - 全额付款 - 部分批准的索赔 - 减少付款 - 未确定的声明 - 需要更多信息 - 被拒绝的索赔 - 没有付款 *** ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/17.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) ![输入图片说明](https://gitee.com/lixintao/Web_Operations/raw/master/%E8%AF%B4%E6%98%8E%E4%B9%A6%E6%88%AA%E5%9B%BE/18.png "在这里输入图片标题") ## 了解有关辅助功能的更多信息 这些技巧是您需要进行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要求和技术的可定制参考 # step2 根据WAI原则点评任意一个网站 ## 选取网站：新浪网 ### 可感知信息和用户界面 1. 用文本替代非文本内容 替代文本与非文内容是等价的，比如： * 对图片（图标、按钮和图形）的简短描述； * 图表、示意图和插图上数据的说明； * 对音频和视频文件等非文本内容的简短说明； * 表单控件、输入框等用户交互组件的标注。 ![表单输入](https://images.gitee.com/uploads/images/2020/0322/104710_25c12fac_2228669.png) ##### 替代文本传达图片或功能的意图，提供等价的用户体验。比如，对搜索按钮的替代文本应该是“搜索”，而不是“放大镜”。该网站直接使用放大镜去表达搜索的意思，并不符合WAI原则。 2. 多媒体的字幕及其他替代物 听不见声音或看不见视频的人需要替代物。比如： * 音频内容（如广播采访的录音）的文字版或字幕； * 描述视频中重要影像细节的口述影像； * 音频内容的手语表达，包括相应的受众体验。 ![新浪视频](https://github.com/Huang-zhi-yi/image-_home/blob/master/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200322100409.png?raw=true) ##### 该网站的视频都会配有字幕，方便听不见声音的人知道视频的内容。 3. 内容有多种呈现方式 为针对不同用户以不同的方式呈现，内容必须： * 正确地标记内容的结构，标题、列表、表格、输入字段，等等； * 信息或指令的顺序适应任何呈现方式； * 浏览器及辅助技术为定制不同的呈现方式提供便利 ![](https://github.com/Huang-zhi-yi/image-_home/blob/master/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202003221004092.png?raw=true) ##### 该网站新闻页面从上至下的标题，新闻主体的字体大小，粗细均不同，提升了层次感,并且新闻标题时刻都出现在上方，并随页面滚动而滚动。 4. 内容的看和听更容易 便于区分的内容更容易看和听，比如： * 不只使用颜色传达信息或标识内容； * 默认的前景和背景色有足够高的对比度； * 用户将文本放大到400%或增大文本间距时，内容不会丢失； * 用户放大文本或使用小屏幕时，文本可以重排； * 文本图片可以缩放或以实际文本替代，或尽可能避免使用； * 用户可以暂停、停止或调整音频的音量； * 背景音乐音量小且可以关闭，避免干扰和分神。 ![](https://github.com/Huang-zhi-yi/image-_home/blob/master/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20200322105611.png?raw=true) ##### 新浪网的视频在完成加载后会自动播放；在视频播放期间，用户可以自主的暂停、停止或者调整音频音量；不足：新浪网并不是响应式网页，在用户使用小屏幕时，文本内容不能重排,上图是屏幕是iPhone5/5E时的新浪网 ### 可操作的用户界面和导航 1. 用户有充足的时间阅读和使用内容 所谓提供充足的时间，包括： * 必要时提供解除、扩展和调整时间限制的机制； * 提供暂停、停止或隐藏移动、闪烁或滚动内容的机制； * 必要时延迟或避免打断用户； * 会话超时后重新认证确保不丢失数据 ##### 用户可以随时随地地浏览新浪网，不会有时间或者空间上的限制。 2. 用户可以方便地导航、找到内容并确认自己在哪里 组织得当的内容可以让用户随时定位自己并有效导航，比如： * 页面标题表述适当，各部分标题也具有描述性； * 在一组网页中有多种方式可以找到相关页面； * 随时提醒用户在一组网页中的当前位置； * 让用户可以跳过多个网页中都有的内容块； * 键盘焦点可以看到，且焦点顺序有意义； * 链接的意图明确，理想情况下即使链接本身也能让人一目了然。 ![新浪网模块化分主题](https://images.gitee.com/uploads/images/2020/0322/105254_d69a8fa0_2228669.png) ##### 新浪网在首页设置了顶部导航，用户可以在顶部直接直接找到自己想要的内容主题，同时网页根据不同的主题设置了不同的内容块，用户可以在浏览到想要的主题时点击进去。另外，新浪网页面在右上角还专门设置了一个按钮，可以跳转到新浪专门设置的导航页。新浪在网页右下方专门设置了返回主页顶部的按钮，让用户可以轻易的回到顶部 ### 可理解的信息和用户界面 1. 文本容易阅读和理解 内容作者要确保文字具有可读性且大多数读者都比较容易理解，包括文字转语音读出来也一样。其中包括： * 标识网页使用的主要语言，如阿拉伯语、德语或韩语； * 标识文本、短语或网页中其他部分的语言； * 对不常见的词汇、短语、 习语和缩略语给出解释； * 尽可能用最简单明了的表达，或提供简化版本。 ##### 新浪网中国大陆版本页面所有内容都使用了简体中文，对大多数读者都具有较大的可读性并且，大多数读者都比较容易理解。 2. 用户可以得到帮忙以避免和纠正错误 表单及其他交互可能导致用户迷惑或难于使用，最终让用户犯错。帮助用户避免和纠正错误的做法包括： * 为用户提供说明、错误消息及建议，帮用户提供正确的信息； * 为复杂功能及交互提供上下文相关的帮助； * 必要时提供结果预览，以及纠正或重置表单的功能。 ![新浪网表单提供热搜榜](https://github.com/Huang-zhi-yi/image-_home/blob/master/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_202003221004094.png?raw=true) ##### 在用户输入表单时，新浪网会在表单下方提供热搜词，以供用户搜索建议。