如何开发Web可访问性

2019.07.18 mf_web

196

develop2用于Web可访问性

使残疾人可以访问Web内容的国际标准称为Web内容可访问性指南,简称WCAG。这些要求被称为“成功标准”。在这里,您将找到一些最基本的考虑因素,这些因素将帮助您开始开发残障人士可以访问的内容。

识别页面语言和语言更改

您应该通过使用html标记中的lang属性来指示每个页面的主要语言,例如<html lang =“en”>,并且当元素的语言不相同时,将此lang属性用于特定元素。页面的其余部分。

成功遵守此规定将确保内容开发人员在网页中提供用户代理所需的信息,以便正确显示文本和语言内容。当识别出页面的语言时,传统的用户代理和辅助技术将能够更准确地呈现文本。屏幕阅读器将能够加载发音规则,可视浏览器将正确呈现脚本和字符。当网页中使用多种语言时,默认的文本处理语言将是最常用的语言。

如果操作正确,这将有助于那些使用屏幕阅读器等技术将文本转换为合成语音的人。它还将帮助那些由于语言,学习或认知障碍而难以流利准确地阅读书面材料的人。此外,那些依靠字幕来解释同步媒体的人将获得清晰语言识别的好处。

在每种控制形式上关联标签

您应该在<label>元素上使用“for”属性,该元素链接到表单元素中的id属性,或者您可以使用WAI-ARIA属性。在某些情况下,有必要在视觉上隐藏<label>元素,但在大多数情况下,确实需要案例标签来帮助读者理解所有必需的输入。

成功完成后,内容作者将在表单中放置表示控件的标签或说明,以便用户准确了解所需的输入数据。这些标签还将指示字段的数据格式,特别是当它们不是正常格式或表格的特定规则集时。当指令长于正常且乏味时,内容作者也可以向残疾人提供一组指令。目的不是在页面上混杂不需要的信息,而是提供对残疾人有益的重要线索和指示。太少的指令可能会像过多的指令一样受阻。

清晰的标签和说明在许多方面都是有益的。当与输入元素相关联时,当该字段处于焦点时,屏幕阅读器可以说出它们,并且具有受损的运动技能的用户受益于更大的可点击区域,因为标签将激活控件。当给出预期数据格式的示例时,具有语言,认知和学习障碍的用户能够以正确的方式提供信息。当明确标识必填字段时,仅使用键盘的人将能够浏览表单并提供所需的所有信息。

利用图像的ALT文本

您应确保将用于图像的替代文本添加到每个功能和信息图像中。对于装饰性图像,您可以使用空的替代文本标签,例如alt =“”,或者您可以选择将它们包含在CSS中。文本替代方案通常由负责书面内容的人员提供。

成功完成后的目的是允许通过使用文本替代方式访问非文本内容传达的信息。首先,文本替代品用于使信息可访问,因为它们可以通过其他感官方式提供,如听觉,视觉或触觉,以满足个人的需要。

以更具体的方式思考这种成功,文本替代方案对于那些努力感知视觉内容的人来说是有益的 - 他们可以使用辅助技术大声朗读文本,将其转换为盲文,或者将其呈现在视觉上。这些替代方案也可以帮助那些难以解释媒体含义的人,如图像,绘图或照片。文本演示可以帮助那些听力困难或难以理解音频信息的人。

避免和纠正用户错误

旨在提供明确的说明,通知和错误消息,以帮助用户填写您网站上的表单。当发生错误时,您应该能够提供可理解的解释,建议更正,并帮助用户找出问题所在。在处理输入时,格式应尽可能宽容,例如,目标是接受包含空格的电话号码,但在需要时删除空格。

理想情况下,这将确保用户意识到发生了错误,并且他们将能够分辨出错误,以便他们可以纠正错误。错误消息需要尽可能具体,无论是表示不成功的表单提交,还是任何具有此类性质的消息。您应该以用户可以感知到的方式指示发生错误的字段。使用屏幕阅读器的人将无法看到屏幕阅读器遇到指示符之前出现错误。如果他们认为表单根本不起作用,他们可能会放弃页面。错误的识别和描述可以与用户代理或辅助技术将用于识别错误然后向用户提供必要信息的程序信息组合。

成功使用后,它将帮助那些有学习,认知和语言障碍的人理解图标和其他视觉效果的含义。它还将提供有关文本内输入错误的信息,允许盲目(或色盲)用户观察错误的反应。

代码顺序应反映阅读顺序

确保代码中元素的顺序与所显示信息的逻辑顺序匹配。您可以通过删除CSS样式来检查这一点,然后检查内容的顺序是否有意义。

该标准的意图是能够向用户代理提供内容的替代表示,同时仍然保留所需的阅读顺序以便理解含义。重要的是确保编程至少一个对内容有意义的序列的可能性。

如果操作正确,这将有助于依赖辅助技术的用户大声读取内容。当内容以口头形式呈现时,默认呈现中的内容的含义必须相同。

用标记传达意义和结构

对所有标题,表格,列表和这样的元素使用适当的标记。HTML5将提供更多元素,如<aside>和<nav>,以便以更好的方式构建内容。WAI_ARIA角色将能够提供额外的含义,例如可识别搜索功能的role =“search”。如果您不熟悉这方面,则应与内容编写者和设计人员合作,以便在整个内容中具有一致的含义。

这些指南的原因是为了确保在演示文稿的格式发生变化时保存听觉或视觉格式隐含的信息以及关系。有视力的用户能够通过视觉提示理解结构和关系 - 标题大而粗,列表项是项目符号或编号,表单字段是组,等等。当这些结构和关系通过编程确定或在文本中可用时断言,所有人都能理解对于理解数据很重要的信息。听觉提示也可以实现 - 语音音调或语速的变化可以强调重要的文本,以及类似的事情。

成功实施后,具有各种残疾的用户将能够根据自己的需求调整内容,并获得有价值的信息。

应该赋予非标准交互元素意义

使用WAI-ARIA以提供有关自定义窗口小部件的功能和状态的信息,例如自定义按钮。例如,role =“navigation”和aria-expanded =“true”。需要更多代码来应用这些类型的小部件的行为,例如扩展或折叠内容,或者键盘如何控制小部件。

应为所有接口组件提供状态,角色和值信息,以便它们与所有辅助技术兼容。

尽可能避免使用CAPTCHA

有趣的是,CAPTCHAs为大量个人带来了问题。还有一些其他方法可以验证用户输入的用户输入,这些用户输入更易于使用,如自动检测和界面交互。如果使用CAPTCHA是绝对必要的,请确保理解起来相当简单并且确实包含残疾人的替代方案。这可以通过不要求授权用户使用CAPTCHA来完成,提供对能够绕过CAPTCHA的客户服务中的实际人员的访问,或者提供不仅仅两种方式来解决CAPTCHA。

交互式元素应该是键盘可访问的

在设计媒体播放器,菜单,可折叠元素和鼠标悬停信息等交互元素时,确定键盘可访问性。您将使用tabindex =“0”,以便在用于交互时将通常不会获得焦点的元素(如<span>或<div>)添加到导航顺序中。您应该使用脚本来捕获和响应键盘触发的事件。

这将确保可以通过使用键盘或键盘界面来操作内容,这允许内容由没有视力的人或使用备用键盘的人操作。使用指点设备执行的许多动作也可以用键盘完成,但是只有指点设备才能完成一小部分动作。应当注意,用户输入的设计者应该考虑到一些用户将依赖具有键盘可访问性特征的网站

如果操作正确,那些视力低下,盲人或使用鼠标有困难的人将能够成功浏览网站并使用其中包含的内容。内容仍应以可访问环境中的方式运行,并且在显示内容时不会干扰任何辅助功能。例如,绘图程序仍应允许用户使用键盘调整大小,旋转,定位和绘制对象。

应编写代码以适应用户的技术

利用响应式设计,有助于显示器适应不同的缩放状态以及视口大小 - 如移动设备和平板电脑。当字体大小增加超过200%时,请勿使用水平滚动并防止内容被剪裁。采用渐进式增强功能,有助于确保无论使用何种技术访问核心功能和内容,都可以访问它们。

简而言之,这可以确保文本可以向上或向下缩放,以便能够被视觉障碍者阅读,而无需使用辅助技术。页面上的所有内容都应该能够扩展,但文本是最重要的。成功使用此功能可以将内容扩展到200%,但超出此范围也是可以接受的。

最新案例

联系电话 400-6065-301

微信咨询 寒总监