内搜索:

网页可及性

有关更多信息,请参阅以下类别。这不是一个全面的列表,我们将继续在这里添加信息,所以请经常回来。

无障碍设计

关于数字可访问性的一个迷思是,它阻碍了设计师创造美丽和互动的内容。

这是不正确的。

虽然可访问性是一种设计约束,需要技巧和创造力来整合,但可以说可访问性是伟大设计的标志。

设计是带有策略的艺术,而没有可用性就没有策略。

WCAG指南提供了一种使尽可能多的人获得信息通信技术(ICT)的方法。这些指导方针根植于可用性原则——这意味着信息通信技术将变得对每个人都更有用,无论他们是否患有残疾。

然而,对于残疾人来说,我们选择实施WCAG指南意味着获取信息通信技术或完全被排除在数字参与之外的区别。

这些设计主题涉及可访问性设计的一些方面,并将随着时间的推移而扩展,但您可以在W3C Web可访问性倡议(WAI)网站上深入了解,“Web可访问性设计入门提示”。

 

将可访问性添加到设计需求中

无论您是在设计网站、表单还是菜单交互,都要确保在提供给开发人员的文档中标注可访问性需求。例如,当您设计表单的外观时,请指定有意义的表单标签,并向开发人员添加表单必须可访问的标记。

在文档中添加可访问性符号是尽早将可访问性需求集成到软件和网页设计项目中的好方法。

请计划一些时间观看这个YouTube网络研讨会,将设计线框图转换为可访问的HTML/CSS,以帮助您入门。

这里有一个方便的清单,可以帮助您创建更易于访问的web和应用程序设计。

网页上的颜色

颜色对比

当设计中有文字时,根据字体大小,确保背景和文字颜色之间的对比度至少为4.5:1。你可以使用WebAim的颜色对比检查器来验证。

更多信息请参见了解成功标准1.4.3。

只用颜色交流

颜色可以用来帮助人们更好地理解上下文,或者他们在网站上的位置,或者他们什么时候犯了错误等等。但是对于那些色盲的人(大约10%的男性和2%的女性)来说,如果颜色是交流的唯一方式,他们可能会错过或误解它。一定要使用比颜色更多的东西来传达信息。你也可以使用文字、符号或形状。

更多信息请参见了解成功标准1.4.1。

字体

字体大小

低视力的人应该能够在不破坏网站布局的情况下将字体大小增加200%。如果一个网站在设计时没有考虑到这一点,开发人员可能会试图禁用用户增加字体大小的能力,以使布局看起来更好。幸运的是,这一功能在苹果操作系统上已经被禁用,但在其他操作系统上可能仍然存在问题。字体大小必须由用户决定,不能在代码中禁用。

更多信息请参见了解成功标准1.4.4。

内容贡献者

如果你想知道俄亥俄大学的无障碍政策是如何影响网站内容贡献者的,这是一个开始学习的好地方。

关于您的内容的可访问性的问题,请不要犹豫与我们联系。除了在web服务网站上提供指南和资源外,我们还将在不久的将来为内容贡献者提供无障碍培训。

让你的标题井然有序

内容的标题结构既用于导航,也用于理解内容之间的关系;例如,事物是否同等重要,或者项目是否从属于其他项目。当您在内容中创建标题时,单击富文本编辑器中的“Normal”下拉项。然后为你的文本选择合适的标题级别。

记住,你的标题结构应该类似于文章大纲。当遵循自然编号顺序时,标题应该以数字形式下降,即标题第2级紧跟标题第1级。你不应该跳过数字顺序,从1级跳到3级,但你可以跳回更高的级别。

最近《俄亥俄大学指南》杂志的一篇文章提供了更多关于用标题组织内容的细节。

数据表

表格应该只用于显示数据,如电子表格行/列,而不是在页面上定位元素。数据表必须用适当的标头进行标记。创建数据表时,可以使用富文本编辑器或Microsoft Word的table ribbon(例如)中的工具来添加描述性行标头、列标头或行标头和列标头。如果您的表更复杂(例如,具有合并单元格或多层标题的表),可以将表分解为几个简单的表,或者联系大学通信和营销来帮助您使复杂的表易于访问。

您可以在WebAim网站上了解更多关于可访问表的信息。

想象的图片

在替代文本中描述图像可以是一种艺术形式。虽然说一个完美的替代文本看起来几乎是不可能的,但有一些指导方针可以帮助你创建更好的替代文本。想象力是关键。

理解:

  • 屏幕阅读器向无法在您的网页上看到内容的人宣布图像信息。
  • 屏幕阅读器会显示“image”这个词,这样你就不必在描述中显示了。
  • 使用屏幕阅读器很乏味。
    • 保持你的描述有意义。
    • 尽量将描述控制在140个字符以内(想想推文的长度)。

有关可访问图像的更多信息,请访问我们的通用技术页面。

平实的语言

The Next Web 2019年的一份报告显示,人们每天上网的时间约为6个多小时,其中大部分时间都花在了阅读上。与使用简单的语言技术“降低”内容的神话相去甚远,它要求我们以简单和清晰的方式编写和设计内容。联邦通俗语言指南指出,你的听众可以快速、轻松地:

  • 找到他们需要的东西。
  • 了解他们的发现。
  • 用他们找到的东西来满足他们的需求。

考虑到我们的数字世界中有很多让人分心的东西,对于绝大多数的观众来说,无论他们的能力如何,简单的语言都是一种受欢迎的解脱。

这里有一些建议要记住:

  1. 关注你的读者。
  2. 为扫描构建整个页面。
  3. 简单地使用听众常用的词汇。
  4. 言归正传——把最重要的信息放在第一位。
  5. 用图片来说明你的观点。
  6. 用主动语态写作。
  7. 使用较短的句子。
  8. 使用标题和符号来分隔大块的文本。
  9. 将列长度限制为65-75个字符。
描述性的链接

网页标题、标题和现在的描述性链接都是人们使用辅助技术扫描网页的方式,以便更好地了解你的网页是否对他们有帮助。屏幕阅读器用户可以将他们的设备设置为只阅读标题或只阅读页面上的链接。

如果屏幕阅读器只是在页面上显示链接——你页面上的每个链接都显示“阅读更多”或“点击这里”——这对那个人来说可能是一个真正的问题。但是,如果这些链接是描述性的,用户就会对页面上的内容有更好的了解。这种做法也会提高你的搜索引擎优化。

访问开发

作为一名web开发人员/应用程序程序员,在创建页面、模板和站点时,您应该牢记以下可访问性概念。

以下是一个针对web和应用程序开发人员的概述视频:

 

b|教育部功能需求概述

以下是教育部网站上列出的功能要求清单,是一套有效的数字无障碍指导方针。

具体功能需求

软件应用程序和操作系统。

  1. 当软件被设计在一个有键盘的系统上运行时,产品的功能应该可以从一个键盘上执行,在这个键盘上,功能本身或执行功能的结果可以通过文本来识别。
  2. 应用程序不得破坏或禁用其他产品中被识别为可访问功能的已激活功能,这些功能是根据行业标准开发和记录的。应用程序也不得干扰或禁用任何操作系统中被识别为辅助功能的激活功能,如果这些辅助功能的应用程序编程接口已由操作系统制造商记录并可供产品开发人员使用。
  3. 当输入焦点发生变化时,当前焦点的屏幕指示应该在交互界面元素之间移动。焦点应程序化地暴露,以便辅助技术可以跟踪焦点和焦点的变化。
  4. 辅助技术应获得有关用户界面要素的充分信息,包括该要素的标识、操作和状态。当图像表示程序元素时,图像所传达的信息也必须以文本形式提供。
  5. 当位图图像用于识别控件、状态指示器或其他可编程元素时,分配给这些图像的含义应在整个应用程序的性能中保持一致。
  6. 通过操作系统的文字显示功能提供文字信息。应该提供的最小信息是文本内容、文本输入插入符位置和文本属性。
  7. 应用程序不得覆盖用户选择的对比度和颜色选择以及其他单独的显示属性。
  8. 当显示动画时,该信息应在用户选择的至少一种非动画呈现模式下显示。
  9. 颜色编码不得作为传达信息、指示动作、提示响应或区分视觉元素的唯一手段。
  10. 当产品允许用户调整颜色和对比度设置时,应提供能够产生一系列对比度水平的各种颜色选择。
  11. 软件不得使用闪烁或闪烁的文本、对象或闪烁或闪烁频率大于2hz且低于55hz的其他元素。
  12. 当使用电子表格时,该表格应允许使用辅助技术的人员访问完成和提交表格所需的信息、字段元素和功能,包括所有指示和提示。

基于网络的内部网和互联网信息及应用。

  1. 应该为每个非文本元素提供等效的文本(例如,通过“alt”、“longdesc”或在元素内容中)。
  2. 任何多媒体演示的等效替代方案应与演示同步。
  3. 网页的设计应使所有用颜色传达的信息在没有颜色的情况下也可用,例如从上下文或标记。
  4. 文档的组织应使其可读,而不需要相关的样式表。
  5. 应为服务器端图像地图的每个活动区域提供冗余的文本链接。
  6. 除非无法用可用的几何形状定义区域,否则应提供客户端图像地图而不是服务器端图像地图。
  7. 数据表的行头和列头应被标识。
  8. 标记应使用用于关联具有两个或多个逻辑级别的行或列标头的数据表的数据单元格和标头单元格。
  9. 框架的标题应该是便于框架识别和导航的文本。
  10. 页面的设计应避免导致屏幕以高于2hz和低于55hz的频率闪烁。
  11. 当网站无法以任何其他方式符合本部分的规定时,应提供具有同等信息或功能的纯文本页面,以使网站符合本部分的规定。当主页面发生变化时,纯文本页面的内容应进行更新。
  12. 当页面使用脚本语言来显示内容或创建界面元素时,脚本提供的信息应被识别为可通过辅助技术读取的功能性文本。
  13. 当网页要求在客户端系统上提供一个小程序、插件或其他应用程序来解释页面内容时,该页面必须提供一个链接,链接到符合上述软件应用程序和操作系统要求的插件或小程序。
  14. 当电子表格设计为在线填写时,该表格应允许使用辅助技术的人访问完成和提交表格所需的信息、字段元素和功能,包括所有指示和提示。
  15. 应该提供一种方法,允许用户跳过重复的导航链接。
  16. 当需要定时响应时,应提醒用户并给予足够的时间来表示需要更多的时间。
键盘导航

网站最常见的问题之一是缺乏键盘可访问性。您应该能够仅使用键盘访问链接和控件。要开始使用键盘进行测试,请单击浏览器的位置栏,然后将鼠标放在一边。使用tab键开始浏览页面。Shift-tab键会让你向后移动。

无障碍开发指南网站提供了如何使用键盘浏览网站的一个很好的概述。适用的WCAG指南包括:

请访问Web AIM网站,了解有关键盘导航测试的更多信息。

共同关注的问题

未定义键盘焦点指示器

许多样式表使用“重置”样式,这实际上删除了所有格式。这样做时,没有定义键盘焦点指示器,这会阻止键盘用户查看页面上当前具有键盘焦点的项。有时焦点是设置的,但它与其他颜色冲突而不可见。

自定义控件的键盘激活

将onclicks事件处理程序放在LI、div、span和其他元素上,而不为键盘可访问性编码,这也会给键盘用户造成障碍。与锚标记、按钮和其他元素不同,这些HTML元素本身并不是键盘可聚焦的。在这些元素上添加onclick将导致它们只能由鼠标使用。解决此问题的选项取决于您对这些元素的预期功能:如果您希望它们显示附加内容,打开子菜单,或者充当伪复选框或按钮。

有关更多细节,请参阅可访问的Javascript事件处理程序。

焦点

一些用户,尤其是那些有特殊残疾的用户,可能严重依赖于使用键盘或其他设备来改变焦点。例如,用户可以使用tab键更改网页中的位置,这将是“焦点”的更改。当用户使用键盘控件在页面上移动时,应该有一个可视指示器显示当前焦点的元素。

有一个专注的策略将改善所有网站用户的体验,尤其是帮助那些有视觉和运动障碍的人。焦点策略始于web开发项目的开始,在DOM中的逻辑顺序中保持可焦点的内容。

OIT建议

  • 不要在不考虑键盘用户的网站体验的情况下改变DOM的顺序。
  • 在CSS文件中包含突出显示可聚焦内容的样式。(OIT基本模板已经包含了这种样式。)
  • 只将焦点行为添加到交互式控件中,如按钮、链接或其他需要用户输入的控件
  • 避免使用tabindex等于大于“0”的值
  • 包括“跳过链接”选项的导航,让用户可以直接进入内容。确保此链接在接收键盘焦点时可见。

有关详细信息,请参见WCAG 2.1成功标准2.1.1键盘可操作性。

语义HTML

当我们阅读网站(或报纸或其他内容)时,我们经常会跳过,浏览一些内容或深入阅读一些标题引起我们兴趣的内容。无障碍网站为所有用户提供了轻松访问和跳转到他们需要的内容的能力。使用语义HTML(如标题)可以提供有关内容如何排序的信息。

语义标记是一个很大的主题。为了说明语义标记的重要性,请观看这段来自Udacity.com的YouTube视频,该视频演示了人们如何使用文本阅读器浏览网站。要特别注意这样一个事实,即辅助技术遵循web页面的DOM顺序,而不管页面如何在视觉上呈现。

总的来说,OIT建议开发者:

  • 标签输入元素
  • 提供有用的替代文本
  • 在逻辑大纲形式中使用标题(h1-h6)
  • 给链接起有用的名字(避免“点击这里或阅读更多”)
  • OIT基本模板为您解决了许多这些问题,但是不使用基本模板的开发人员和内容贡献者仍然需要理解和实践良好的语义标记。

您可以了解更多关于语义HTML 5(视频)。

地标性建筑

如果你还没有考虑过你网站上的地标,那么它们可能需要一些改进。辅助技术用户可以使用地标结构导航您的页面。地标的类型将提供给这些用户,如果提供了地标,还将提供地标的名称。如果页面上的内容没有包含在地标中,那么用户在使用地标进行导航时可能会错过这些内容。

新出现的标准是页面上的所有内容都应该包含在一个地标内。你的页面应该至少包含一个导航地标和一个“主”地标。如果您有一个在页面上重复出现的地标类型,例如导航地标内的两组不同的控件,则应该用不同的名称标识这两个地标。Web内容可访问性指南提供了有关地标的更多详细信息。

咏叹调

ARIA是可访问的富互联网应用程序(Accessible Rich Internet Applications)的缩写,是W3C开发的标准。开发人员将ARIA添加到web代码中,为辅助技术(如屏幕阅读器)提供额外的信息。如果使用得当,ARIA将大大提高网站的可访问性,并有助于满足WCAG 2.1指南。然而,只是将ARIA添加到您的代码中并不能解决您网站的所有可访问性问题;事实上,过度使用ARIA可能会引入以前不存在的块和问题。

ARIA将覆盖语义HTML5,所以除非你有一个自定义控件或其他真正好的理由使用ARIA,否则不要使用它。

ARIA为网页上元素的辅助技术提供语义信息。ARIA提供了一种在网页上包含元素的角色和状态的方法,例如“展开”、“折叠”。

ARIA还为交互式“小部件”提供了设计模式,例如下拉菜单、可扩展的手风琴等。这些设计模式指定了应该如何使用ARIA,以及应该使用哪些键盘命令以及它们应该做什么。通常,键盘命令是方向键、回车键和空格键以及转义键。

完整的ARIA规范可从万维网联盟获得。

易访问性评估

使用自动化工具评估网站或web应用程序的可访问性并不困难。请记住,自动评估只发现大约30%的可访问性问题。但是,如果您在IT购买之间进行选择,自动评估可以让您了解哪种工具可以更好地完成该解决方案中的每个人的工作。

了解更多有关IT采购流程的信息。

Chrome灯塔评分

这个工具的好处是,它为您运行自动检查器的每个页面提供一个分数。你可以给每页分配100,然后你可以把它平均成每页的分数。

如果你想自己进行审计,步骤如下:

  1. 使用Chrome浏览器导航到您想要检查的页面。
  2. 转到View菜单。
  3. 选择“开发人员”,然后选择“开发人员工具”。
  4. 审计选项卡选择可访问性可选:取消选择其他审计,加快审计速度。
  5. 向下滚动并选择Run审计。

检查器需要一些时间来处理,然后您将看到一个分数。

您可以使用许多其他自动化工具,并且使用的工具越多,您对网站的可访问性就越了解。但是请记住,任何自动化工具虽然有帮助,但只能指出它正在评估的网页可能存在的30%的可访问性问题。即使它发现的错误仍然需要在上下文中理解,因为它们可能是错误,也可能不是错误。

手动评估

本节介绍了可访问网页所需的一些手动检查。有些手动检查可以在单个页面上执行,而有些则需要查看站点上各个页面的使用情况。

  1. 对你的页面进行视觉检查。使用颜色对比工具检查对比度(小心误报-您可能需要手动检查标记为违规的项目)。
  2. 如果您有媒体和图像,请检查确保您的图像有替代描述,您的视频有字幕。
  3. 内容的顺序和呈现应该具有逻辑意义。标题应该用来指定内容,而不是简单地改变文本的外观。
  4. 用键盘访问你的网站。把鼠标放在一边,开始浏览页面。选项卡浏览的一个很好的示例站点是Web体验工具包. 注意,您需要在该工具包上的菜单上使用键盘箭头键。需要注意的一些事情:
    • 当你浏览网页时,你能看到焦点在哪里吗?
    • 页面上是否有地方没有重点,或者项目之间是否有多个步骤?
    • 当你在页面上选择标签时,顺序是否遵循页面上的视觉位置?
    • 有子菜单的菜单,你能通过空格键或回车键打开那些菜单吗?
    • 页面顶部是否有一个跳转链接,可以跳过导航栏进入主内容区?
    • 网站上是否有无法通过键盘进入的区域?
    • 欲了解更多详情,请访问有关键盘可访问性的WebAIM资源。
  5. 浏览网站上的页面,并检查:
    • 页面上元素的顺序和外观是否一致?
    • 你是否一直以同样的方式使用标题?
    • 你有“跳到主要内容”的链接吗?(这些可能只有当它们通过点击链接获得键盘焦点时才可见。)

当您准备下一步检查所有可访问性指南时,WebAIM有一个很好的清单。确保将简化的检查表设置为正确的一致性级别(当前为WCAG 2.1 AA)。

可访问性资源

下面是一些有用的支持数字访问的第三方网站。

开始
  • Web AIM“我们的使命是使组织能够使他们的网络内容对残疾人无障碍。”
  • W3C网页无障碍倡议
  • 关于可访问性的W3C设计技巧。
  • 关于可访问性的W3C编写技巧
  • 关于可访问性的W3C开发技巧
  • 在线教育的包容性设计基础-注册时可以使用免费课程
可访问性组织
  • 之前
    • AHEAD是一个专业会员制组织,会员包括参与制定政策和提供优质服务的个人,以满足参与高等教育各个领域的残疾人的需要。
  • 雅典
    • ATHEN是一个由高等教育专业人士组成的网络,致力于改善学生、教职员工和管理人员的无障碍环境。
  • IAAP
    • 国际无障碍专业人士协会