1.22对页面进行无障碍改造（课件）-高二《网页设计与制作》同步教学（劳动版）

制作响应式网页 第三阶段 能够在学习的Web内容无障碍指南（WCAG）知识和可访问的互联网应用（ARIA）基础上，对D清单页面进行无障碍改造； 能够根据网可访问的互联网应用（ARIA）提示的网页辅助浏览方法，对D清单页面进行无障碍测试。 任务目标 任务22 对页面进行无障碍改造 本次任务要求学习Web内容无障碍指南（WCAG）知识，对页面进行无障碍改造并测试。 任务描述 任务22 对页面进行无障碍改造 完成对页面进行无障碍改造，并对改造后的页面进行测试，需要： 学习WCAG2.0/2.1知识； 学习可访问的互联网应用（ARIA）及其最佳实践方法； 对D清单进行无障碍改造，并模拟障碍人士进行无障碍页面测试。 任务分析 任务22 对页面进行无障碍改造 知识与技能准备 Web内容可访问性指南（WCAG）2.1定义了如何使残障人士更容易访问Web内容。无障碍获取涉及广泛的残疾，包括视觉，听觉，身体，言语，认知，语言，学习和神经障碍。尽管这些准则涵盖了广泛的问题，但它们无法满足所有类型，程度和残障人士的需求。这些准则还使年龄较大的人更容易使用Web内容，但随着年龄的增长其能力会发生变化，并且通常会提高用户的可用性。 WCAG 2.1是通过W3C流程与世界各地的个人和组织合作开发的，目的是为Web内容可访问性提供共享的标准，以满足国际上个人，组织和政府的需求。WCAG 2.1建立在WCAG 2.0 [ WCAG20 ]的基础上，而WCAG 2.0 [ WCAG20 ]又建立在WCAG 1.0 [ WAI-WEBCONTENT ]的基础上，旨在现在和将来广泛应用于不同的Web技术，并且可以结合自动化测试和人工测试评价。有关WCAG的介绍，请参阅《Web内容可访问性指南（WCAG）概述》。 1、WCAG 知识与技能准备 ARIA是“Accessible Rich Internet Applications”的缩写。它是W3C的Web无障碍推进组织(Web Accessibility Initiative/WAI)在2014年3月20日发布的可访问富互联网应用实现指南，是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范，是对Web内容无障碍指南（WCAG）的有效补充，是具体的技术指标。 ARIA提供了语义，因此作者可以将用户界面行为和结构信息传达给辅助技术（例如屏幕阅读器）。ARIA规范提供了定义可访问用户界面元素的角色，状态和属性的本体。 ARIA套件包括提供用户代理实施指南的API映射规范。它还包括图形和数字出版模块。 2、WAI-ARIA 知识与技能准备 2.1 ARIA使用方法 应用于HTML的ARIA包括“role”（角色）和带“aria-”前缀的属性。 role标识了一个元素的作用，aria-属性描述了与之有关的事物特征及其是什么样的状态。 2.2 ARIA的角色定义“role” 下表列出了HTML元素中常用的ARIA角色role。 2、WAI-ARIA 知识与技能准备 2、WAI-ARIA 表1-22-1 role角色定义 知识与技能准备 在使用时，只需在HTML代码中加入role即可定义HTML的角色。 表1-22-1中并没用列出所用的ARIA角色，表1-22-2列出了常用标签元素对应的ARIA的role。当然，并不是使用的HTML元素都具有对应的ARIA的role。 在不同的情况下HTML的ARIA角色也是不一样的，如a标签不带href属性就不具有link角色，当a标签父元素是一个菜单时，其角色为menuitem；又如input表单标签，其角色取决于其type属性，type属性设置为checkbox，这角色为checkbox，如果其父元素是一个菜单时则为menuitemcheckbox；属性为button、image、reset、submit，角色为button，属性为text，角色为textbox。 2、WAI-ARIA 1 2 3 4 5 <!--定义一个弹出框--> <div class=”modal” role=”dialog”> <h1>弹出框标题</h1> <p>弹出框的内容</p> </div> 知识与技能准备 2.3 ARIA的属性和状态“aria-” 表1-22-3 ARIA 属性值示意及说明表 限于篇幅，需要了解更多ARIA的属性值，可通过https://www.w3.org/TR/2014/REC-wai-aria-20140320/states_and_properties页面查看。 在使用时，只需根据需求在HTML代码中加入aria-属性即可。 知识与技能准备 2.3 ARIA的属性和状态“aria-” 示例1：（在示例1中，工具栏的第一个控件（id为button1）是能够获取焦