# Web_Operations_18_202003 **Repository Path**: tangyuqing/Web_Operations_18_202003 ## Basic Information - **Project Name**: Web_Operations_18_202003 - **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-18 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Web可访问性 - [WAI指导原则](https://www.w3.org/WAI/tips/writing/)中文翻译 ## 提供内容丰富,独特的页面标题 - 对每个网页,要提供简短的标题来描述页面内容并将其与其他页面区分开。 - 页面标题通常与页面的主要标题相同。 - 将独特且最相关的信息放在首位;例如,将页面名称放在组织名称之前。 - 对于属于多步骤过程的页面,请在页面标题中包括当前步骤。 ![提供内容丰富,独特的页面标题](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/01.png) ## 使用标题来传达意思和结构 * 使用简短的标题将相关段落分组,并清楚地描述各章节。而且好的标题可以提供一个内容大纲。 ![使用标题来传达意思和结构](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/02.png) ## 使链接文字有意义 * 编写的链接文本,以便描述链接目标的内容。避免使用指向不明确的链接文本,例如“单击此处”或“阅读更多”。 * 指示有关链接目标的相关信息,例如文档类型和大小,例如“建议文档(RTF,20MB)”。 ![使链接文字有意义](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/03.png) ## 为图像编写有意义的文本替代 * 对于每个图像,编写替代文本,提供图像的信息或功能。 * 对于纯装饰性的图像,没有必要编写替代文本。 ![为图像编写有意义的文本替代](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/04.png) 示例:使用替代文本传达重要信息 不提供信息 * 为手机充电:使用提供的电缆和电源适配器将手机连接到电源插座。 * 图片的替代文本:“正在为手机充电” *替代文字通常不可见;它包含在此示例中,这样您可以看到它是什么。* ## 为多媒体创建文本和字幕 * 对于纯音频内容(例如播客),请提供一个文本。 * 对于音频和视频内容(例如培训视频),也提供字幕。 * 在文本和字幕中包括对理解内容很重要的口头信息和声音,例如“门吱吱作响”。 * 对于视频文本,还包括重要的视觉内容的描述,例如“ Athan离开房间”。 ![为多媒体创建文本和字幕](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/05.png) ## 提供明确的指示 * 确保说明、指示和错误消息是清晰,易于理解的,并避免不必要的技术性语言。 * 描述输入要求,例如日期格式。 ![提供明确的指示](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/06.png) - *示例:说明让用户知道应填入哪些信息* - 密码应至少包含六个字符,至少包含一个数字(0-9)。 - *示例:出现错误时,指示问题所在以及可能的解决方法* - 用户名“ superbear”已在使用中。 - 密码必须至少包含一个数字。 ## 保持文章内容清晰简洁 适当按上下文的意思,使用简单的语言和格式 * 撰写简短、清晰的句子和段落。 * 避免使用不必要的复杂单词和短语。考虑为读者可能不知道的术语提供一个词汇表。 * 扩大首字母缩略词的第一次使用。例如,Web内容可访问性指南(WCAG)。 * 考虑为读者可能不知道的术语提供词汇表。 * 适当使用列表格式。 * 考虑使用图像,插图图解,视频,音频和符号来帮助阐明含义。 ![保持文章内容清晰简洁](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/07.png) # 根据原则点评网站 [数英网](https://www.digitaling.com/) ![网站截图](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/web1.png) ### 一、提供内容丰富、独特的页面标题 优点:有导航栏,每个分类有说明当前位置,标题内容一目了然且吸引眼球,重要文章放在首位 缺点:到文章页面时分类当前位置的指示就不明确了,对于属于多步骤过程的页面,缺乏当前步骤指示。
### 二、使用标题来传达意思和结构 - 文章内部有使用小标题将段落分组,为整篇文章提供了一个简要的大纲,使图文逻辑更清晰。 ![网站截图](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/web8.png) - 对重点的内容加粗标注 ### 三、使链接文字有意义 如“相关推荐”,有标题和相关图片,可以满足用户更多需求,“您可能喜欢”,会按关键词分类 ![网站截图](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/web9.png) ### 四、为图像编写有意义的文本替代 图文符合 ![网站截图](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/web10.png) ### 五、为多媒体创建文本和字幕 ![网站截图](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/web11.png) ### 六、提供明确的指示 - **优点**:含有视频文件的文章会通过图标说明 ![网站截图](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/web5.png) - **缺点**:在设置密码时没有说明要多少字符等要求,但出现错误有指示 ![网站截图](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/web6.png) ### 七、保持文章内容清晰简洁 文章内容清晰整洁,图文结合,很少使用复杂术语,语言平和易懂,可读性较强。并且适当使用了列表的格式列举内容 ![网站截图](https://gitee.com/tangyuqing/Web_Operations_18_202003/raw/master/web_accessibility_img/web7.png)