通过简单性实现可访问性

2020-05-27 23:31:27

我收到了很多赞扬SourceHut简单设计和轻量级页面1的电子邮件,但我从一个特殊的用户群体那里收到了令人惊讶的积极反馈:盲人社区。

对于许多软件团队,特别是Web开发人员来说,可访问性是一项极其繁重的任务。许多公司开具的支票上都有令人不安的数字为零的支票,以完成这项工作。在您的DOM上散布ARIA标记以注释具有其用途的元素,并随着DOM随时间的变化而更新这些标记,这不是一项小任务,并且会使您的代码更难维护。许多盲人用户在使用网络时不断感到沮丧,这并不特别令人惊讶。

即使面对这些试题,SourceHut又是如何做出这样一个可访问的网站的呢?事实上,尽管易访问性对我来说很重要,但我并没有特别努力地让SourceHut变得可访问-我总共花了三四个多小时明确地致力于可访问性。相反,SourceHut之所以是可访问的,是因为它所基于的简单性的核心原则自然会产生一个可访问性的设计。我们今天在这里分享我们的想法,这样你就可以将同样的原则应用到你自己的网站上。

首先,考虑一下您正在设计的受众。您的用户具有不同的功能集,并且必然需要不同的可访问性方法来适应他们。不同的用户会对您的网站有不同的体验。有不同程度的视力损害-近视和远视用户,色盲用户,以及完全失明的许多程度的视力损害。谈论可访问性可能会让人想到后者,但如果你在视觉设计上用心,很多有部分视力的用户也会受益。除了视觉之外,还有其他的考虑因素--例如,为行动不便的用户避免高精度的鼠标动作,为聋人和重听者的视频添加字幕。

关于网页可访问性的一般建议,我会从以下几点开始:“信任网页浏览器”。保留页面的默认字体大小,避免使用自定义字体,而更喜欢使用诸如“sans-serif”和“monSpace”这样的模糊选择。不要摆弄滚轮,不要覆盖右击和文本选择的默认行为。不要使用JavaScript创建文本框、组合框或滚动条等执行输入元素。网络浏览器会为你做所有这些事情-相信它会做得很好。

请记住,浏览器是用户代理,而不是开发代理。通过信任其默认设置,您可以让用户选择更大的文本大小、不同的字体等进行自定义。用户已经习惯了他们的浏览器的工作方式,而你将无法用你漂亮的模仿捕捉到他们的用户代理的本质。当准确使用鼠标非常困难时,习惯于使用选择框中的箭头键的用户在遇到没有正确实现此行为的自定义下拉列表时,会面临不合理的挑战(<;select>;box)。

另一个需要注意的情况是颜色、对比度和图像的使用。始终要确保用户要阅读的文本与其背景有足够的区分度。2还应避免将文本放在可变背景上,例如渐变背景或平铺背景。保守地使用颜色-将明亮的、视觉上有吸引力的颜色限制在页面上的一到两个可操作的项目,或者使用它们来引起对及时通知的特别注意,或者警告用户潜在的危险操作,如删除数据。

尽量不要使用纯视觉的信息表示方式,例如图标:它们应该始终与文本配对。例如,这样的说明性文字不应该需要悬停才能看到-这项任务需要很高的移动性才能用鼠标击中小目标,并在足够长的时间内保持稳定,使工具提示出现。也要避免移动信息-动画和视觉上复杂的状态转换。添加图像时,请始终使用“alt”标签和图像的简明英语描述。

和我一起做这个练习:交叉眼睛,然后闭上一只眼睛。通过这个模糊的视图,你还能识别出你页面上的主要元素和行动项目吗?有什么东西需要太多关注还是太少关注?

刚才提到的“alt”标签是我们第一次提到许多关于网络上“可访问性”的惯常重复的智慧,经常被包括进来是因为它的价值是直观的和易于实现的。毫无疑问,到目前为止,我们几乎没有涵盖这些传统智慧:从可访问的网站获益的典型用户并不是完全失明的,他们使用屏幕阅读器并利用您的ARIA标签。残酷的事实是,你必须让你的网站变得更简单、更容易使用--对每个人都是如此。

但是,无论如何也不能忘记拥有屏幕阅读器的用户。对这类用户的一般建议是,适当地利用语义HTML,例如,lt;main>;、<;文章&>、<;Section>;、<;nav&>;等;以及其他元素(如<;p&>;)来标记段落、uL&>t;和<;ol&>;以适当地标记物品、引用和>t;的列表。屏幕阅读器可以解释这些内容,以便更好地理解页面布局,并为用户提供非文本线索。

更喜欢从逻辑上而不是空间上组织站点的信息。如果你的视觉意识较弱,信息的逻辑层次结构会更直观。确保你的页面被组织起来,如果从头到尾都是线性阅读,没有CSS,它仍然是有意义的。避免在整个页面中乱扔营销垃圾、最高级和网站其他部分的广告(甚至是直接的广告),因为跳过这些对于屏幕阅读器来说比普通访问者更难。模拟屏幕阅读器体验的一个好方法是使用Lynx查看页面。方便的是,Lynx不支持JavaScript。😉。

这似乎需要付出很多努力才能获得可访问性!但是,如果你仔细阅读,这主要是一个避免做的事情的清单。SourceHut法通过关注简单性避开了许多这样的问题。没有JavaScript的界面更容易访问,而且不会在单个页面中塞满太多内容,因此以可访问的方式流动和组织起来要容易得多。这个建议也相当普遍地渗透到可用性这一更广泛的主题中,这是没有错的:投资于可访问性会让你的服务对每个人都更好。

SourceHut还受益于一些延伸到Web之外的设计选择,例如,通过专注于电子邮件进行讨论、补丁程序和代码审查,并坚持使用纯文本,许多盲人用户可以选择完全避开Web界面,只使用纯简文本电子邮件,从他们的邮件客户端舒适地与Web界面上的服务和用户进行交互。然后,当他们有问题时,可以加入我们的IRC聊天室,这是一种专门用来交换简短纯文本消息的媒介,而不需要做噩梦用屏幕阅读器浏览Slake界面。

总而言之,如果您想要快速访问,新网站的良好开端可能会避免安装NPM,而倾向于这样做:

内置于Chrome浏览器中的灯塔测试可以用来帮助识别对比度太低的UI元素。↩︎