HTML5+CSS3网页设计与制作课件：对页面进行无障碍改造

HTML5+CSS3网页设计与制作制作响应式网页能够在学习的Web内容无障碍指南（WCAG）知识和可访问的互联网应用（ARIA）基础上，对D清单页面进行无障碍改造；能够根据网可访问的互联网应用（ARIA）提示的网页辅助浏览方法，对D清单页面进行无障碍测试。任务目标

对页面进行无障碍改造本次任务要求学习Web内容无障碍指南（WCAG）知识，对页面进行无障碍改造并测试。任务描述

对页面进行无障碍改造完成对页面进行无障碍改造，并对改造后的页面进行测试，需要：学习WCAG2.0/2.1知识；学习可访问的互联网应用（ARIA）及其最佳实践方法；对D清单进行无障碍改造，并模拟障碍人士进行无障碍页面测试。任务分析

对页面进行无障碍改造知识与技能准备Web内容可访问性指南（WCAG）2.1定义了如何使残障人士更容易访问Web内容。无障碍获取涉及广泛的残疾，包括视觉，听觉，身体，言语，认知，语言，学习和神经障碍。尽管这些准则涵盖了广泛的问题，但它们无法满足所有类型，程度和残障人士的需求。这些准则还使年龄较大的人更容易使用Web内容，但随着年龄的增长其能力会发生变化，并且通常会提高用户的可用性。WCAG2.1是通过W3C流程与世界各地的个人和组织合作开发的，目的是为Web内容可访问性提供共享的标准，以满足国际上个人，组织和政府的需求。WCAG2.1建立在WCAG2.0[WCAG20]的基础上，而WCAG2.0[WCAG20]又建立在WCAG1.0[WAI-WEBCONTENT]的基础上，旨在现在和将来广泛应用于不同的Web技术，并且可以结合自动化测试和人工测试评价。有关WCAG的介绍，请参阅《Web内容可访问性指南（WCAG）概述》。1、WCAG知识与技能准备ARIA是“AccessibleRichInternetApplications”的缩写。它是W3C的Web无障碍推进组织(WebAccessibilityInitiative/WAI)在2014年3月20日发布的可访问富互联网应用实现指南，是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范，是对Web内容无障碍指南（WCAG）的有效补充，是具体的技术指标。ARIA提供了语义，因此作者可以将用户界面行为和结构信息传达给辅助技术（例如屏幕阅读器）。ARIA规范提供了定义可访问用户界面元素的角色，状态和属性的本体。ARIA套件包括提供用户代理实施指南的API映射规范。它还包括图形和数字出版模块。2、WAI-ARIA知识与技能准备2.1ARIA使用方法应用于HTML的ARIA包括“role”（角色）和带“aria-”前缀的属性。role标识了一个元素的作用，aria-属性描述了与之有关的事物特征及其是什么样的状态。2.2ARIA的角色定义“role”下表列出了HTML元素中常用的ARIA角色role。2、WAI-ARIA知识与技能准备2、WAI-ARIA表1-22-1role角色定义知识与技能准备在使用时，只需在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-ARIA12345<!--定义一个弹出框--><divclass=”modal”role=”dialog”><h1>弹出框标题</h1><p>弹出框的内容</p></div>知识与技能准备2.3ARIA的属性和状态“aria-”表1-22-3ARIA属性值示意及说明表限于篇幅，需要了解更多ARIA的属性值，可通过

页面查看。在使用时，只需根据需求在HTML代码中加入aria-属性即可。知识与技能准备2.3ARIA的属性和状态“aria-”示例1：（在示例1中，工具栏的第一个控件（id为button1）是能够获取焦点的控件。）12345<divrole="toolbar"tabindex="0"aria-activedescendant="button1"><imgsrc="btncut.png"id="button1"role="button"alt="cut"/><imgsrc="btncopy.png"id="button2"role="button"alt="copy"/><imgsrc="btnpaste.png"id="button3"role="button"alt="paste"/></div>示例2：（在示例2中，aria-用在progressbar组件上，对应HTML5中的min。）12<divclass="progress-bar"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"></div>示例3：（在示例3中，表示按钮已经按下，同时处于禁用状态。。）1<divrole="button"tabindex="0"aria-pressed="false"aria-disabled="false"></div>知识与技能准备2.3ARIA的属性和状态“aria-”表1-22-4ARIA状态值示意及说明表知识与技能准备开发一个可访问的Web应用不仅需要工具的支持，浏览器的支持，还需要开发人员遵循一定的规范提供对应的元素信息，才能达到最终的目的。下面着重介绍一些开发中的最佳实践。3.1image图片或者动画均需提供alt信息，使得读屏软件可以将图片动画的内容清楚的读出来。对于某些用于装饰性的图片，则需设置alt为空，使得读屏软件可以忽略此元素。对于放在链接里面的图片，如果已经有文字的说明，alt也设置为空，这样避免读屏软件重复同样的内容。CSS将样式跟结构分离，使得HTML代码结构清晰。很多装饰性的图片也都放在CSS里面来加载，带来的一个问题就是在CSS里面的图片在高对比度模式下都无法显示。如果这个图片并不仅仅是装饰性的，还可以触发功能，那就需要从CSS里面拿出来，当成一个独立的img或者input元素。3、开发最佳实践知识与技能准备3.2tableTable分为两类：一类是做布局的table，一类是数据table。对于布局用的table，读屏软件没必要知道这是一个表，可以通过设置role=presentation使读屏软件忽略这个表，只关注里面的内容。对于数据表格，则需要设置caption属性，说明整个表是用来做什么的，使得读屏软件可以告诉用户这个表的作用。对于每一个单元内的数据，还应该通过th属性使得读屏软件能识别这个数据的表头是什么。对于复杂表，可以通过id和header属性来标识。如图所示：3、开发最佳实践知识与技能准备以第一行的数字5为例，正常人可以很容易得看出5指的是一年级Mr.Henry老师这个班的男生有5个，但当读屏软件面对这个数字5的时候，怎么能识别出来呢？通过header来标识表头，header的值就指向对应表头的id。3.3formform元素需要关联一个label元素，所有的button都已经有了一个隐含的label，所以不再需要显示关联。对于input，select，checkbox，radio，button则都需要显示一个label元素。这样读屏软件在面对这个表单元素的时候才能告诉用户这个表单的作用。例如下面的input，读屏软件会告诉用户这个是需要输入名字的一个输入框。当label属性不方便使用的时候，还可以通过title属性达到相同的效果，也可以满足Webking检查的需要。下面的两种写法都可以。但前提是name不需要被显示出来。当title和label都设置的时候title会被读屏软件忽略。3、开发最佳实践知识与技能准备当一个表单元素如果前后都需要描述的时候，label就显得力不从心了。ARIA规范的出现解决了这一问题。aria-labelledby属性可以设置多个值，说明这个表单元素是被那些值所描述的,aria-describedby属性则更详细的扩展了这个描述。当读屏软件把焦点放在10上的时候，会告诉用户10表示的是10分钟刷新一次。对应的HTML代码如下所示。aria-required的属性标识这个元素是必须的，JAWS识别此元素并告知用户必须输入此元素。我们可以看到中间的input元素被多个元素来描述（aria-labelledby中的几个id值），这样读屏软件就能够识别这个标签，并且按照这个标签的顺序读出前后的label，并且提示用户如果还有更详细的描述以及如何获取这个更详细的描述。当用户需要时，aria-describedby所对应的元素信息就会被读出来。增强了视力有障碍人士与普通人了解内容的一致性。3、开发最佳实践知识与技能准备3.4关于Tabindex与获取焦点的顺序Tabindex属性的使用可以使得原本无法取得焦点的元素获取焦点。目的是为了使用户可以用键盘访问任何可以用鼠标访问的元素。我们知道，使用Tab键可以按文档顺序tab到所有可以获取焦点的元素。tabindex可以设置为-1，0或者是任何自然数。tabindex=0就使原本无法获取焦点的元素可以在用户tab的时候获取焦点，并且按照文档顺序排列。tabindex=-1使得元素可以获取焦点，但当用户用tab键访问的时候并不出现在tab的列表里面。可以方便的通过Javascript设置上下左右键的响应事件。非常有利于应用小部件（widget）内部的键盘访问。tabindex设置为大于0的数字则可以控制用户Tab时候的顺序，一般很少用。当用户使用Tab键浏览页面时，元素获取焦点的顺序是按照HTML代码里面元素出现的顺序排列的，有时跟实际看到的页面顺序并不一致。3、开发最佳实践知识与技能准备3.5Label3.6AlertDialog3.7headings3.8list/listitem3.9button3.10togglebutton3.11checkbox3.12radio3.13link限于篇幅限制，以上实现方法代码详见书本，其它实现方法就不在介绍，如果感兴趣，可以查看

或

了解。3、开发最佳实践知识与技能准备信息无障碍网页的测试主要是模拟相关人群去测试页面。相关人群使用的无障碍辅助技术（硬件或软件）主要是：依靠用户代理提供的服务来检索和呈现Web内容。通过使用API​​与用户代理或Web内容本身协同工作。提供超出用户代理提供的服务，以方便用户与残疾人的网页内容交互。该定义可能与其他文档中使用的定义不同。如：屏幕放大镜，用于放大和提高渲染文本和图像的视觉可读性；屏幕阅读器，最常用于通过合成语音或可刷新盲文显示来传达信息；文本到语音软件，用于将文本转换为合成语音；语音识别软件，用于允许口语控制和口授；用于模拟键盘的备用输入技术（包括头指针，屏幕键盘，单开