美文网首页信息无障碍
[译]信息无障碍:如何让表单更友好?

[译]信息无障碍:如何让表单更友好?

作者: 李福东 | 来源:发表于2015-06-19 22:20 被阅读36次

原作者:Rob Copeland(前端开发工程师)译者:李福东

当谈论信息无障碍(尤其对读屏器友好)的问题时,我总是会听到“只需要语义标记就好了”的观点。这种观点认为,语义标记在信息无障碍领域使用是如此的广泛和密集。但是!语义标记真的就能够全部覆盖吗?我们在意信息无障碍,但却不能花大量的时间去阅读晦涩的大部头、研究如何将我的标题和辅助功能变的更友好。

我的问题是:除了语义标记之外,还有没有什么方法能够更轻松地实现信息无障碍?(请记住,这就是我想要做的)

为了回答这个问题,我(作者)决定从最明显的地方——表单开始。

读屏器Screen readers

首先要解决的是,我将选择什么读屏器?如何评估自己努力的效果?

Fromhttp://webaim.org/projects/screenreadersurvey5/#used

毫无疑问,选择使用量最大的读屏器是最合理的。使用量最多的前两位读屏器的JAWS、NVDA均只有windows版,但是我使用的是Mac,于是只能选择排名第三的Mac VoiceOver来评估(37%其实也还是比较高的)。

基本的语义表单

基于本文目的,我有了如下这样的最基本的注册表单:

Username

Password

本例中,只有几个标签、输入框、一些用于验证的占位符(具体是前端验证还是后端验证对此不影响)。

VoiceOver会怎么朗读这个表单?

取得焦点状态的Username文本框

当我们将光标聚焦在username文本框中,VoiceOver读出:

“Username, edit text”(用户名,编辑文本)

移动到password文本框:

“Password, secure, edit text”(密码,安全,编辑文本)

读出id对应的属性,这是目前最好的处理方式,对吗?阅读标签让用户意识到所处的语境、知道何时可以输入。甚至能够在password文本框中读出“secure”(安全)。

是不是有些遗漏?

取得焦点状态的Username文本框(已输入无效字符)

这幅截图表明了在输入无效字符的时候,Javascript加载后对文本框进行了标红处理,提示此文本框输入有误(对于视力正常用户有效)。但是VoiceOver此时会如何表现?

“Username, edit text”(用户名,编辑文本)

根本就没有提示输入不对!

当某个元件处于焦点状态时,我期望的是读屏器能够提示“输入错误”,甚至可以告诉用户为什么输出不正确(提示用户如何更正输入)。

如何改进-提示错误位置?

这正是我们可以得到改善的地方。首先要表明某个文本框输入错误,它会这样读:

取得焦点状态的Username文本框(已输入无效字符)

“Username, invalid data, edit text”(用户名,输入无效,编辑文本)

这样就更好一些,因为用户能够知道究竟是在哪个文本框位置出错了。

这非常容易实现、也很易——只需要在输入无效时提供参数:

aria-invalid=”true”

Javascript或其他语言在校验输入合法性时就能轻松实现。

如何改进-实现无效原因的提示?

如果在字段无效时,读屏器能够读出错误的原因会非常好。

其实很简单,你只需要在帮助文本(‘Helper text’)中加入验证信息说明即可。任何输入文本框中已经定义的验证信息

aria-describedby=””

都能够作为特定输入的帮助标签(Help Tag)而被大声朗读出来。例如

取得焦点状态的Password文本框(已输入无效字符,出现了验证信息)

在取得焦点状态的Password文本框,如果输入无效并出现了验证信息,读屏器将读出:

“Password, invalid data, secure, edit text”(密码,无效输入,安全,编辑文本)

一切看似妥当,但是我们定义的验证信息去哪里了?

嗯…这需要使用aria-describedby,这一段将会在逗点后面读出来。因此在朗读出“无效输入”后,会继续朗读:

“The Help Tag is: Passwords are supposed to be a secret.”(帮助标签:密码应该是一个秘密)

如果读屏器读出的帮助文本可以告知用户某个文本框输入错误、并立即给出了改正的提示线索(线索是我们提供的)。这样的帮助信息会非常有意义。

JavaScript处理起来也相当容易,因为每一个文本框都存在唯一的ID,你可以在验证信息的文本框中预设内容(如:‘error-’),来生成新的唯一ID并设置对应的验证信息。

仅此而已

确实,这就是我目前为止所取得的成绩。但没有什么理由能够值得让我们慢下脚步——如果我们真正关心着每一个打开我们网站网页的人的话。

[译后记]前端本不是我擅长的内容,但基于对于信息无障碍的兴趣,愿意翻译介绍,希望以自己微薄之力推进信息无障碍进程。另:文中配图等信息来源于原文。

原文地址:https://medium.com/@roblcopeland/how-can-i-make-my-forms-a-little-more-accessible-1726d63210f2

相关文章

  • [译]信息无障碍:如何让表单更友好?

    原作者:Rob Copeland(前端开发工程师)译者:李福东 当谈论信息无障碍(尤其对读屏器友好)的问题时,我总...

  • Android.Accessibility包之Accessibl

    accessibility service概念 “信息无障碍”起源于西方发达国家,译自Accessibility,...

  • java springcloud版b2b2c社交电商spring

    这篇文篇主要简述如何在springboot中验证表单信息。在springmvc工程中,需要检查表单信息,表单信息验...

  • SpringBoot教程 | 第十九篇: 验证表单信息

    这篇文篇主要简述如何在springboot中验证表单信息。在springmvc工程中,需要检查表单信息,表单信息验...

  • HTML5简明教程(二)新标签和新属性

    HTML5新增了很多标签和属性,实现Web页面语义化,使页面可读性更强;增加Web表单功能,使表单更丰富更友好;还...

  • 设计对用户友好表单的8个要点

    表单对于产品来讲非常重要,它可以有效快捷地收集我们需要的用户信息。因此,设计一个对用户十分友好的表单能够使表单的填...

  • 3.18 表单及多媒体标签

    一、表单 表单是专门用来收集用户信息的 表单的格式 method 属性规定如何发送表单数据(表单数据发送到 act...

  • 如何利用金山表单收集信息

    在群里收集信息,最好用的莫过金山表单了。那么,如何使用金山表单收集信息呢? 首先,在微信小程序搜索金山表单,打开金...

  • 05-HTML表单标签

    表单标签 作用:用于收集用户信息, 让用户填写、选择相关信息 格式: 什么是表单元素?表单元素其实还是HTML中的...

  • 信息无障碍

    深圳有家公司叫信息无障碍公司,在大众创业万众创新的时代,别人的想法你可以用,你的想法别人也可以用,不付出行动,最后...

网友评论

    本文标题:[译]信息无障碍:如何让表单更友好?

    本文链接:https://www.haomeiwen.com/subject/tvmsqttx.html