# Web_Operations **Repository Path**: luobyinan/Web_Operations ## Basic Information - **Project Name**: Web_Operations - **Description**: 网站运营与管理 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-03-21 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # :pencil2:编写Web的可访问性 ## 摘要 > 此页面介绍了一些基本注意事项，以帮助您开始编写残障人士更容易访问的Web内容。这些技巧是帮助您满足Web Content Accessibility Guidelines（WCAG）要求的良好实践。遵循相关WCAG要求的链接，“理解”文档中的详细背景，教程指南，用户案例等。 ## 页面内容 * 提供内容丰富，独特的页面标题 * 使用标题表达意思和结构 * 使链接文本有意义 * 为图像编写有意义的文本替代 * 创建多媒体文字记录和字幕 * 提供明确的指示 * 保持内容简洁明了 ![](image/1.png) ## 提供内容丰富，独特的页面标题 对于每个网页，请提供简短的标题，以描述页面内容并将其与其他页面区分开。页面标题通常与页面的主要标题相同。将独特且最相关的信息放在首位；例如，将页面名称放在组织名称之前。对于属于多步骤过程的页面，请在页面标题中包括当前步骤。 ### 示例：页面标题 #### 主页标题 * 太空泰迪公司 #### 页面名称后跟组织名称 * 最新消息•太空泰迪公司 #### 页面名称，包括流程中的步骤 * 购买您的熊（第1步，共3步）•太空泰迪公司 ##### 更多信息 * Web内容无障碍指南 * 标题为2.4.2的页面（了解2.4.2） ![](image/2.png) ## 使用标题传达含义和结构 使用短标题将相关段落分组，并清楚地描述各节。好的标题提供了内容的大纲。 ### 示例：使用标题来组织内容 #### 标题不足 ##### 标题和子标题 HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。 相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。 这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档中进行调整。 ##### 标题和子标题 HTML元素提供有关文档结构层次结构的信息。正确使用元素将有助于向辅助技术传达其他含义。在许多情况下，这样做还可以使文档更易于编辑。 ###### 标题的目的 对于超过三，四段的文档，标题和小标题对于可用性和可访问性很重要。它们可以帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 ###### 标题级别 标题分为1到6级。最高级别是“级别1”，通常对应于页面或主要文档部分的标题。子标题通过增加标题级别进行。 ###### 含义与格式 视觉阅读器通过扫描页面中较大尺寸或不同样式的文本来识别标题。辅助技术用户无法看到这些视觉变化，因此，改变样式是不够的。 相反，必须在语义上对标题进行“标记”，以便辅助技术可以识别标题。这可以作为导航辅助呈现给用户。 这使添加标题成为屏幕阅读器用户最重要的工具之一，这样他或她就可以了解页面上的内容。请注意，标记通常会在视觉上触发格式更改，可以在许多文档中进行调整。 ##### 更多信息 * Web内容无障碍指南 * 标题和标签2.4.6（理解2.4.6) * 本节标题2.4.10（了解2.4.10） * 信息和关系1.3.1（了解1.3.1） * 用户的故事 * 屏幕阅读器用户如何使用标题导航 ![](image/3.png) ## 使链接文字有意义 编写链接文本，以描述链接目标的内容。避免使用歧义的链接文本，例如“单击此处”或“阅读更多”。指示有关链接目标的相关信息，例如文档类型和大小，例如“建议文档（RTF，20MB）”。 ### 示例：使用链接文本描述目标页面 #### 无信息 有关设备独立性的更多信息，请[单击此处]()。 #### 有意义的信息 阅读[有关设备独立性]()的更多[信息]()。 ##### 更多信息 * Web内容无障碍指南 * 链接目的（在上下文中）2.4.4（理解2.4.4） * 链接目的（仅链接）2.4.9（理解2.4.9） ![](image/4.png) ## 为图像编写有意义的文本替代 每一个图像，都要写出提供图像信息或功能的文本。但对于纯装饰性的图像，没有必要编写替代文本。 #### 举例:使用替代文本来传达重要信息 信息不充足 | 信息充足 ---|--- 充电:使用提供的电线和电源适配器将手机连接到电源插座。|充电:使用提供的电线和电源适配器将手机连接到电源插座 **图片的替代文字**：“充电” |**图片的替代文字**：“将电缆插入手机底部边缘。” *替代文字通常不可见； 它包含在此示例中只是为了您可以看到它是什么。* ##### 更多信息 * Web内容无障碍指南 * [非文本内容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) ![Write meaningful text alternatives for images](https://gitee.com/jellychan/web-operation2020/raw/master/image/Write.png) ## 创建多媒体文字记录和字幕 对于只提供音频的内容，如播客，请提供文字记录。对于音频和视频内容，如培训视频，也要提供字幕。在文字记录和说明中包含对理解内容很重要的口头信息和声音，例如，“门吱嘎作响”。对于视频记录，还包括对重要视觉内容的描述，例如“阿桑离开了房间”。 ##### 更多信息 * Web内容无障碍指南 * [标题（预录）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) ![Create transcripts and captions for multimedia](https://gitee.com/jellychan/web-operation2020/raw/master/image/creat.png) ## 提供明确的指示 确保指令、指导和错误消息清晰、容易理解，并避免使用不必要的技术语言。描述输入需求，例如日期格式。 ### 示例:指令表达了用户应该提供什么的信 - **密码至少应该是6个字符和至少一个数字(0-9)。** - **密码：** ### 示例：错误指示表明问题的所在以及可能的解决方法能 ##### 1.:warning:[用户名“ superbear”已在使用中。](about:blank#blocked) ##### 2.:warning:[密码必须至少包含一个数字。](about:blank#blocked) ##### 更多信息 * Web内容无障碍指南 * [标签或说明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) ![Provide clear instructions](https://gitee.com/jellychan/web-operation2020/raw/master/image/provide.png) ## 保持内容简洁明了 根据情况，使用简单的语言和格式： * 撰写简短明了的句子和段落。 * 避免使用不必要的复杂单词和短语。 考虑为读者可能不知道的术语提供词汇表。 * 首次使用时请缩写。 例如，网页内容可访问性指南（WCAG）。 * 考虑为读者可能不知道的术语提供词汇表。 * 适当使用列表格式。 * 考虑使用图像，插图，视频，音频和符号来帮助阐明含义。 ### 示例：使内容易读易懂 不必要的复杂 | 更容易理解 ---|--- **CPP**：万一发生车辆碰撞，公司指派的代表将寻求查明所涉各方财产的损害程度和原因。 一旦我们的代表获得使我们了解因果关系的信息，我们可能会分配也可能不会分配适当的货币补偿。
最终的决定可能会出现以下选择之一：索赔未获批准并被指定为拒绝状态，索赔的状态不明确，在进一步处理之前将需要其他信息，部分索赔已获批准并且减免了付款。 分配和签发，或索赔已完全批准，并且总索赔付款已分配和签发。| **索赔处理程序（CPP）**：如果您发生车祸，我们的代理商将进行调查。 调查结果将确定任何索赔款项。 这可能导致：
1.批准的索赔
2.全额付款部分批准的索赔
3.减少付款未确定的索偿
4.需要更多信息索赔被拒-不付款 ##### 更多信息 * Web内容无障碍指南 * [阅读级别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/#supermarketassistant) ![Keep content clear and concise](https://gitee.com/jellychan/web-operation2020/raw/master/image/keep.png) ![Keep-more infor](https://gitee.com/jellychan/web-operation2020/raw/master/image/keep-more.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要求和技术的可定制参考 ![Learn More About Accessibility](https://gitee.com/jellychan/web-operation2020/raw/master/image/learnmore.png) ------ # 网站分析 根据WAI原则，我们分析了[腾讯视频](https://v.qq.com/),以下是我们的分析结果： * 提供内容丰富，独特的页面标题 * 我们看到了腾讯视频在页面的标题，会把重要的内容放在前面，例如综艺的名称以及更新的具体日期，能让用户很清楚的了解到这个综艺是否已经更新了。 ![](image/biaoti.png) * 有大标题小标题，也有补充文本来描述目标页面，增加浏览者的兴趣。比如这个见字如面有大标题小标题还有文本描述来描述页面。好的标题提供了内容的大纲。 ![describe](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/describepage.png) * 导航栏有三到四级标题，很好的运用了大标题小标题帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。帮助读者确定文档的总体轮廓，并浏览到感兴趣的特定信息。 ![level](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/fstt.png) * 了解用户需求、对组织和个人的好处 * 腾讯视频app目前已经在安卓端全面上线了色彩辅助功能。他们对算法进行了精确的校准，最终开发出一种能够覆盖红色/绿色/蓝黄色所有种类的色觉障碍用户的算法，最大程度的帮助用户在不破坏观看体验的同时，保持场景自然色彩、提升场景分辨能力并提高观看舒适度。这也是市场上首家提供针对色觉异常用户辅助观看功能的视频类APP。 ![](image/semang.jpeg) * 在腾讯视频中，我们发现了，当你看的是少儿专栏里的视频是，页面的背景是绿色的，而当你看到的其他专栏的视频，例如综艺，它的页面背景图就是黑色的。因为绿色有护眼，放松心情的功效。当一个小孩子较长时间盯着动画片看时，容易出现眼疲劳，在这时候看一下绿色的背景图，能有缓解眼部疲劳，保护眼睛的作用。 ![](image/beijing1.png) ![](image/beijing2.png) * 腾讯视频的交互功能感觉很高级，看了爱奇艺和优酷都没有这样的操作。当你把鼠标悬停到某一个剧的页面上时，会自动播放一小段片段，你可以选择静音或者有声，有些甚至可以拉动进度条。这样帮助了很多选择障碍症的用户。 ![img](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/img1.png) ![hover](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/hoverimg.png) ![line](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/line.png) * 在腾讯视频的动漫专栏，有个强势接档，他会根据用户的期待值的高低，来判断在下个月的新播出的番剧的质量。在图中我们可以看到，在期待值的第一、二名的番剧上面，有个有好戏的标签，能清晰的传递给用户这是下个月值得看的番剧。 ![](image/dongman.png) * 不要单独使用颜色来传达信息 * 这个登录页面，文盲色盲都可以分辨QQ和微信，因为有图标，图标是不会认错的。 ![longin](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/LONGIN.png) * 创建多媒体文字记录和字幕 * 用十分丰富的文字表达描述了这个页面中你将看到的内容，提供了内容丰富，独特的页面标题。比如这个火箭少女的综艺，把亮点内容全都标出来了，你也知道要看到什么内容了。 ![plenty](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/plentytitle.png) * 使用链接文本描述目标页面。如腾讯视频官网中这个金色的领结，你光看是不知道什么意思的，然后把鼠标移上去之后有文字解释是VIP频道。使链接文字有意义，为图像编写有意义的文本替代。 ![VIP页面](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/VIP.png) * 提供明确的指示、提供易于识别的反馈 * 错误页面提供了明确的指示，而且用鲜明的颜色以及小表情来警告 同时使用色彩和符号也帮助了色盲人士。 ![error](https://gitee.com/jellychan/web-operation2020/raw/master/image/pingjia/warnning.png)