但是,与可访问性无关的设计呢?

对于与设备无关的设计,响应技术已经走了很长一段路。

网络应该是每个人都可以从世界任何地方访问相同内容的地方。

这包括高对比度文本 ,用于盲人的音频页面,优化的媒体以及用于非JS / CSS浏览器的后备广告。

许多开发人员希望提供帮助,但是很难理解如何设计可访问性 ,因为有很多活动部件。

Web可访问性已经存在多年了,但是其实现需要技术和Web开发方面的新进步。

但是这些好处值得我们付出努力,并且您的所有Web项目都将使每个访问者对可访问内容产生持久印象。

请注意,这是一个非常详细的主题,需要花费数月或数年的时间才能完全理解。

在本文中,我将介绍辅助功能设计基础知识 ,它的用途,解决的目标以及开始使用的步骤。

辅助功能简介

这可能包括无法阅读的盲人,也可能包括无法操作鼠标或键盘(或两者之一)的肢体残障人士。

一般来说,可访问性是构建内容的想法,以便任何人都可以使用

实际上,“网络可访问性”的概念包括可能影响某人与网站交互或使用网站的方式的所有可能的损害

它可能包括阅读障碍者或阅读理解障碍者

但也可能包括视力稍有缺陷的人。

也许更重要的是,如Wikipedia定义中所述,Web可访问性可以提供什么:

实际上,这可能是来自世界各地互联网可能无法最佳访问Internet的 每个人 的信息

然而,安妮·吉布森(Anne Gibson)在她的“ 列表分开”( List Apart)文章中指出,维基百科的定义过于含糊, 不仅涉及残疾人。

但是实际上,可访问性有四个主要类别

许多开发人员认为可访问性仅适用于无法阅读的盲人。

  1. 视觉 –视力低下或视力较差/无视
  2. 听觉 –听力障碍或耳聋
  3. 认知 –难以理解或使用信息
  4. 电机 –物理可访问性问题,可能需要特殊的输入设备,例如键盘或语音命令程序

但是,在WCAG (Web内容可访问性指南)中批准了这些标准后,便有了一种稳定感。

这些类别均具有广泛的技术,其变化与网络标准一样快

它们通过W3C在国际上适用。

法律要求某些网站(例如政府机构)遵守这些准则

让我们看一下Web可访问性背后的官僚机构,然后深入探讨一些适用的设计技巧。

W3C和无障碍设计

如果您是该主题的新手,这些操作可能会很复杂,但是一旦简化,我希望它们会更有意义。

有很多与Web可访问性相关的首字母缩写词

  • W3C (万维网联盟) –一个国际组织,为协议,语言和法规定义Web标准。 所有官方无障碍指南均属于该组织。
  • WAI (Web Accessibility Initiative) –涵盖所有与可访问性有关的官方程序。 此总括术语包含现代可访问性的所有规则,准则和技术。
  • WCAG (Web内容可访问性指南) –一组标准和规则,可帮助设计人员根据可访问性级别为网站评分。
  • ARIA (可访问的丰富Internet应用程序) –一种特定的标准,定义了如何构建依赖于JavaScript / Ajax和类似技术的可访问的丰富应用程序。 Anna Monus的这篇文章中阅读有关此内容的更多信息。

目前,您应该对WAI提出的建议和WAI规则集以WCAG命名的指南最感兴趣。

WAI下还存在其他准则,包括针对用户代理的 UAAG针对Web创作工具的 ATAG

但是最好的来源是每天面对这些问题的人

可能很难理解所有复杂的问题,更不用说了解如何解决它们了。

W3C关于残疾人的这篇文章是了解更多信息的好资源,分享了残疾人如何访问互联网的故事。

最好的分数是AAA。

您可以使用网络辅助功能检查器工具进行检查

级别基于与A,AA和AAA评级系统的一致性。

这涉及网站的可访问性水平,涉及多种因素。

您应该了解的另一个重要主题是WCAG一致性

还可以查看这些相关链接以了解更多详细信息:

要了解有关这些准则的更多信息,请查看W3C的了解WCAG 2.0简介

无障碍设计步骤

A11Y(也是一个别名 )是一个托管在GitHub上的免费开源项目, 提供了可访问的网页设计技术

我强烈建议访问A11Y项目网站以获取实用的无障碍提示。

您可以浏览其可访问性项目清单 ,甚至可以浏览一堆设计模式 ,例如下拉菜单,选项卡,手风琴,按钮和模式窗口(以及其他项目)。

Web无障碍设计基础设计者指南

分步进行,如果您感到困惑,愿意研究更多。

很难学习所有这些知识并同时实施。

这些技术各自都有自己的详细程度,因此实施主要是关于测试以查看有效的方法。

您将遇到一些具体的建议,例如跳转到内容的链接高对比度的配色方案

查看A11Y的操作方法快速 入门 技巧

这就是为什么正确的语义HTML (请参阅 本文 )对于具有tabindexaccesskey之类的属性如此重要的原因。

他们可能还会有一个音频翻译器,或者甚至是一个特殊的键盘,用于使用按键而不是鼠标来浏览网页。

考虑可能正在使用自动内容阅读器的盲人用户

您可以研究架构并自定义设计以适合您的项目。

如果您想参与其中,请考虑选择一个可访问性就绪的主题

辅助功能测试工具

然后,您可以使用测试工具来衡量您的成功水平。

如果要开始使用,请选择一个可访问性区域,然后尝试一下。

Web无障碍设计基础设计者指南

有太多要考虑的内容,而且WCAG准则很难理解,以至于您最终可能会出现信息过载的情况

值得一提的是,这个过程可能令人沮丧

然后使用这些工具来帮助您调整和改进您的工作。

选择一个可访问性区域,并将其作为您的重点。

重要的是保持前进。

选择颜色后,只需使用此免费的对比度检查器即可查看它们是否可以协同工作。

例如,您可以尝试使用WCAG的对比度规范提高可读性

Web无障碍设计基础设计者指南

但是,尝试的次数越多,您就会学到的越多,理解的就越多。

不幸的是, WCAG 2.0准则如此混乱,以至于您可能难以理解要求。

您会在侧栏中看到一个直观的视图和问题列表。

这是一个免费的视觉检查器 ,可显示错误,警报,对比问题以及网站的其他详细信息。

要测试已经在线的站点,请查看WAVE

Web无障碍设计基础设计者指南
Web无障碍设计基础设计者指南

如果您喜欢开源,请在GitHub上查看这些免费的可访问性测试工具

Web无障碍设计基础设计者指南
图像:HTML代码嗅探器

浏览器附加组件

您可以从任何网站上的任何计算机上运行它们,以获得真正有用​​的结果。

浏览器加载项可能提供了可访问性测试的最快,最简单的方法。

这将检查所有内容,并且比WAVE测试仪要彻底得多。

Firefox的AInspector被视为可访问性的必备工具。

Web无障碍设计基础设计者指南

Mozilla用户可能还喜欢WCAG对比度检查器 ,它也是一个免费的附件。

这会将更多工具添加到检查器窗口中,以检查可访问性准则。

Chrome使用者没有AInspector,但确实有Google正式建立的Accessibility Developer Tools

Web无障碍设计基础设计者指南

Chrome用户还具有用于颜色对比的 亮度检查器以及其他一些免费扩展程序

如果您愿意足够努力地搜索Google,那么您可能会发现更多工具。

不幸的是,我没有为Safari用户找到太多东西,但是我确实找到了Opera的一个扩展,可以检查WCAG 2.0的合规性。

进一步阅读

这并不容易,但是却非常令人满意。

如果您认真学习网络访问能力,那么请做好漫长的准备。

下一步是进一步的研究和实践,以将这些原理牢记在您的工作流程中。

到现在为止,您应该了解有关Web可访问性的实际定义,为什么存在的更多信息,以及有关开发人员期望如何改进其网站的次要详细信息。

请查看以下帖子以获取更多信息,如果您想直接从源中获取知识,请务必参考WCAG指南


翻译自: https://www.hongkiat.com/blog/web-accessibility-design-guide/

相关文章: