标签归档:WAI-ARIA

创建无障碍的对话框

如今的web应用程序中,对话框如同在桌面应用程序中一样常见。我们使用较少的JavaScript和CSS就可以很容易的显示或隐藏一个元素,但很少会考虑对话框对可访问性的影响。多数情况下,它是可访问性的一个灾难。输入焦点未能正确处理以及屏幕阅读器无法感知内容变化。其实,使对话框可访问并非如此困难,你只需要理解几行代码的作用。 ARIA role 如果你想要屏幕阅读器用户感知到弹出了一个对话框,那么你需要学习一些ARIA role知识。ARIA role [1]为HTML元素提供了额外的语义,让浏览器与屏幕阅读器以更具描述性的方式进行沟通。ARIA定义了大量的角色,改变了屏幕阅读器感知页面中不同元素的方式。与对话框有关的角色有两个:dialog和alertdialog 。 在大多数情况下, 我们使用dialog。将一个元素的role属性设为此值,浏览器则会把该元素看作为一个对话框。 <div id=”my-dialog” role=”dialog”> <– Your dialog code here –> </div> 当role属性值为dialog的元素可见时,浏览器会告知屏幕阅读器一个对话框已打开。这可以让屏幕阅读器用户意识到,他们已经不在页面的常规流中了。 对话框应有描述标签(label)。你可以使用aria-label属性来指明描述文本或者使用aria-labelledby属性来指明包含描述文字的元素的ID。示例如下: <div id=”my-dialog” role=”dialog” aria-label=”New Message”> <– Your dialog code here –> </div> <div id=”my-dialog” role=”dialog” aria-labelledby=”dialog-title”> <h3 id=”dialog-title”>New Message</h3> … 继续阅读

发表在 技术 | 标签为 , , | 留下评论

WAI-ARIA Live Regions

概要 6年前我写了一篇关于W3C的无障碍网页倡议-无障碍的富互联网应用程序 (WAI-ARIA)中的live region属性的文章(译文地址),WAI-ARIA规范在这段时间发生了显著变化,那篇文章中的一些细节现在已经过时了。那篇文章中的例子需要使用XHTML的命名空间,现在HTML5已支持WAI-ARIA了。 富互联网应用 开发人员使用HTML、CSS和JavaScript创建富互联网应用程序时,往往把残疾人士抛在脑后,因为这些应用程序无法提供被辅助技术理解所需的语义信息。可悲的是,过去几年里这种情况并没有多少改变,其实我们可以扭转这种局面。WAI-ARIA能够提供足够的语义,以确保富互联网应用是可以理解的,并且现在已经得到相对较好的支持。 WAI-ARIA规范解决的一个重大问题是页面的部分内容已更新,但使用辅助工具的用户并未得到通知,使用live region可以解决此问题。 实时区域(live regions) 使用辅助工具的用户通过live region可以获知文档的变更部分,而且焦点仍保留在当前活动中。例如,报读一个表中的动态更新的股票信息。live region也可用于帮助理解复杂的小部件(widget)。例如,汉斯·希伦使用一个隐藏的live region来报读返回的条目数目,参见他的自动完成部件例子,根据指示使用光标键来浏览整个列表,如果此时没有这个语境信息,自动完成的效果就不会如此好。下面的属性用于定义一个实时区域。 aria-live 属性 aria-live 属性表示该区块内的内容是实时的,内容的详细变化都会报读。可以使用下面的值来确定详细度(verbosity)。 aria-live=”off” 默认值,表明一个区域不是实时的,不会报读变化。 aria-live=”polite” 更新内容应当在适当时刻报读,比如在用户停止输入时。 aria-live=”assertive” 立即向用户报读更新内容。由于这是突兀的, assertive值应当仅用于更新内容是重要的,应立即通知给用户的情况。 在下面的例子中,无序列表中的文本的变化或增加,都将通知给用户。 使用aria-live=”polite” <ul aria-live=”polite”> <li>Item 1</li> <li>Item 2</li> <li>item 3</li> </ul> aria-atomic属性 aria-atomic属性是一个可选属性,其值可以是true或false(默认值)。当区域内有更新时,使用atomic属性来指示辅助工具应当报读变化区域的部分内容还是全部内容,并受aria-relevant 属性的影响。 如果aria-atomic属性值为true … 继续阅读

发表在 技术 | 标签为 , , , | 留下评论