spark wai_WAI-ARIA对自动完成小部件的支持
spark wai
在这篇文章中,我想讨论一个AutoComplete小部件的可访问性。 在您键入该字段时,通常会使用“自动完成”窗口小部件提供建议。 在当前的工作中,我基于Twitter的Typeahead (一个灵活JavaScript库)实现了JSF组件,该库为构建健壮的typeahead提供了坚实的基础。 Typeahead小部件具有伪代码形式的可靠规范 ,详细说明了UI对事件的React。 Typeahed可以在相应的输入字段中显示提示,例如google的搜索字段显示该提示,突出显示匹配项,处理自定义数据集和预编译的模板。 此外, Bloodhound建议引擎还提供预取,智能缓存,快速查找以及回填远程数据的功能。
尽管有许多功能,但Typeahead的一大缺点是对WAI-ARIA的支持不足(我要说到现在为止,它是完全缺失的)。 AutoComplete小部件的设计应使屏幕阅读器和其他辅助工具的用户可以立即使用。 我决定添加完全的WAI-ARIA支持,完成此任务并将我的请求请求发送到GitHub。 以下是带有解释的新“ WAI-ARIA感知”标记(未省略相关HTML属性)。
<input class="typeahead tt-hint" aria-hidden="true"><input class="typeahead tt-input" role="combobox"aria-autocomplete="list/both"aria-owns="someUniqueID"aria-activedescendant="set dynamically to someUniqueID-1, etc."aria-expanded="false/true"><span id="someUniqueID" class="tt-dropdown-menu" role="listbox"><div class="tt-dataset-somename" role="presentation">...<span class="tt-suggestions" role="presentation"><div id="someUniqueID-1" class="tt-suggestion" role="option">... single suggestion ...</div>...</span>...</div>
</span><span class="tt-status" role="status" aria-live="polite" style="border:0 none; clip:rect(0, 0, 0, 0); height:1px;width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute;">... HTML string or a precompiled template ...
</span>
tt-hint类的第一个输入字段模拟视觉提示(如上图)。 提示以可视方式完成对匹配建议的输入查询。 可以通过按右箭头或Tab键完成对建议(提示)的查询。 该提示与屏幕阅读器无关,因此我们可以将aria-hidden =“ true”应用于该字段。 屏幕提示会忽略该提示。 为什么不重要? 因为我们将通过aria-live =“礼貌”(将在下面进行说明)通过“状态”区域强行阅读匹配的建议。
下一个输入字段是用户输入查询的主要元素。 它应该具有角色=“ combobox”。 对于自动完成,建议使用此角色。 有关更多详细信息,请参见WAI-ARIA官方文档 。 实际上,docu还显示了AutoComplete的粗略标记结构!
主输入字段应具有各种ARIA状态和属性。 aria-autocomplete =” list”表示当用户输入时,输入以列表的形式提供自动完成建议。 aria-autocomplete =“ both”表示提示也由提示(除了列表)提供。 aria-owns属性指示输入字段和带有建议的列表之间存在父/子关系。 当无法使用DOM层次结构表示关系时,应始终设置此属性。 否则,屏幕阅读器将很难找到包含建议的列表。 在我们的例子中,它指向列表的ID。 最有趣的属性是aria-activedescendant。 视力不佳的用户通过箭头键在列表中导航。 aria-activedescendant属性将焦点更改传播到辅助技术-对其进行了调整以反映已导航到的当前子元素的ID属性。 在上图中,选中了“阿拉伯的劳伦斯”项目(突出显示)。 aria-activedescendant设置为此项的ID,屏幕阅读器会向盲人用户“ Lawrence of Arabia”读取。 注意:焦点停留在输入字段上,因此您仍然可以编辑输入值。 我建议在Google的Web Accessibility简介中阅读有关此属性的更多信息。
aria-expanded属性指示带有建议的列表是展开(true)还是折叠(false)。 列表状态更改时,此属性将自动更新。
带有建议的列表本身应具有“列表框”角色。 这意味着,小部件允许用户从选项列表中选择一个或多个项目。 应将role =“ option”应用于列表中的各个结果项目节点。 我建议阅读一篇有趣的文章“在构造自动完成列表时使用“列表框”和“选项”角色” 。 对于屏幕阅读器来说不重要的部分应标记为role =“ presentation”。 该角色说“我的标记仅适用于非盲人用户”。 您可能会问,角色=“应用程序”是什么? 对我们重要吗? 并不是的。 在阅读了“并非所有ARIA小部件都应具有角色=”应用程序”之后,我跳过了它。
标记中的最后一个元素是具有角色=“状态”和属性aria-live =“礼让”的范围。 这有什么用? 您可以通过让用户知道自动完成的结果(通过自动朗读的文本)来为小部件增添趣味。 小部件应将要说的文本添加到移到视口之外的元素中。 这是所提到的具有应用样式的span元素。 样式与jQuery CSS类ui-helper-hidden-accessible完全相同,后者以可视方式隐藏内容,但仍可用于辅助技术。 span元素的aria-live =“ polite”属性意味着–应该在下一个宽限间隔(例如,当用户停止键入时)宣布该元素内的更新。 通常,aria-live属性指示实时内容中的一段以及应宣布更改的详细程度。 我在项目中将自动完成的口语文本定义为由Handlebars编译JavaScript模板(也可以使用其他任何模板化引擎,例如Hogan )。
Handlebars.compile('{{#unless isEmpty}}{{count}} suggestions available.' +'{{#if withHint}}Top suggestion {{hint}} can be chosen by right arrow or tab key.' +'{{/if}}{{/unless}}')
当用户停止键入内容并显示建议时,屏幕阅读器会读取可用建议的数量和顶部建议。 非常好。
最后但并非最不重要的是测试。 如果尚未安装屏幕阅读器,请安装Google Chrome扩展ChromeVox和Accessibility Developer Tools 。 这些是开发的好工具。 请观看简短的ChromeVox演示和Accessibility Developer Tools演示 。 或者,您也可以尝试使用免费的独立屏幕阅读器NVDA 。 简单尝试一下工具。
翻译自: https://www.javacodegeeks.com/2014/10/wai-aria-support-for-autocomplete-widget.html
spark wai
spark wai_WAI-ARIA对自动完成小部件的支持相关推荐
- WAI-ARIA对自动完成小部件的支持
在本文中,我想讨论AutoComplete小部件的可访问性. 在您键入该字段时,通常会使用"自动完成"窗口小部件提供建议. 在当前的工作中,我基于Twitter的Typeahead ...
- 安卓应用部件_设计应用程序小部件的痛苦和喜悦
安卓应用部件 Some people say widgets are a thing of the past, but recently we faced a market for which thi ...
- 别羡慕苹果的小部件了,安卓也有!
/ 今日科技快讯 / 12月9日上午美团外卖由骑手App技术原因导致骑手无法接单,于10时46分全面恢复正常.对于在故障中受影响的用户,美团外卖建议可选择自主退款,并将为该部分用户提供10元无 ...
- Android 12 小部件详解
来龙去脉 小部件兴起 2020年九月苹果的 iOS 14 正式版本发布,其中的一项重大更新就是苹果也支持小部件了!不容易啊,安卓好多年前拥有的功能现如今苹果终于用上了,先来看看苹果中的小部件样式吧! ...
- 桌面时钟代码_被遗忘的手机桌面小部件
iOS 和 Android,两个移动时代的操作系统在历经十多年发展后,成熟度之高已经很难再找出大的短板. 如今,这两个系统相似的部分,大概比它们不相似的地方还要多得多.从早期的下拉通知栏,再到现在的侧 ...
- perl/tk_在Perl / Tk中使用高级小部件
perl/tk 与Perl语言的广泛使用相比,Perl的GUI工具集Perl / Tk不太受欢迎. 这很奇怪,因为它可以说是最容易编程的GUI工具包之一(至少对于UNIX平台而言),因此建议将其自身用 ...
- android调服务不更新,android – OnUpdate()不调用小部件服务
我正在为我的应用程序开发一个小部件.窗口小部件名称是历史记录,当用户浏览任何URL时,我将其存储在本地数据库中,从中列出该窗口小部件. 当我打开小部件时,它从本地数据库中获取所有细节并在小部件的列表视 ...
- Android 之窗口小部件详解--App Widget
1 App Widget简介 App Widget是应用程序窗口小部件(Widget)是微型的应用程序视图,它可以被嵌入到其它应用程序中(比如桌面)并接收周期性的更新.你可以通过一个App Widge ...
- 变分模态分解_Android小部件示例中的模态对话框(弹出)
变分模态分解 在此示例中,我们将看到如何在主屏幕中创建一个可以打开弹出对话框的Android小部件. 如您所知,Android Widgets是小型应用程序,基本上可以做两件事. 按下时启动新的活动, ...
最新文章
- spring核心框架体系结构(jar包依赖)
- linux安装python库报错pywin32,Linux windows安装paramiko模块
- 【资源推荐】良心之作!超过 10000+ 的互联网团队正在使用的在线 API 文档、技术文档工具...
- upload-labs_pass12_文件名截断_URL要编码为%00_pass13_文件名截断_Hex修改为00
- Debug Hook
- 什么是慢查询?如何通过慢查询日志优化?
- Django model 字段类型及选项解析(一)
- 隐瞒英特尔重大安全漏洞惹众怒,苹果遭遇集体诉讼
- 高效配置Linux代理服务器――Squid
- Ubuntu 16.04编译Android 7.1.2
- VBA word 文件类型html,使用vba进行Word文档的数学格式设置
- 怎么用linux给苹果手机降级,如何查询iOS可降级版本?苹果iOS随意降级工具或即将到来...
- python实验总结与分析_Python实验报告二
- Centos7.5安装MySQL5.7
- GTC '19 经典回顾 | 如何编排和创造二次元中的舞蹈?
- 学而不思则罔,思而不学则殆
- stm32h7能跑linux,STM32H7榨干了Cortex-M7的最后一滴血
- LaTex创建四级目录
- 一个屌丝程序员的青春(三三)
- python使用pd.to_numeric()方法将数据转为数字类型int或float