`

如何制作一个可及性强(accessible)的网页弹框(转载)

阅读更多

英文原文:Making an accessible dialog box

中文翻译原文:可交互的弹出窗

 

在今天的web应用中,对话框差不多像他们在桌面应用中一样常见。用一点JavaScript和CSS来显示或隐藏一个覆盖在页面上的元素相当简单,但是很少有人考虑它如何影响可访问性。在很多情况下,它是可访问性的灾难。输入焦点没有被正确处理,屏幕阅读器(译者注:弱视盲人等使用)无法判断一些东西已被改变。事实上,制作一个完全可访问的对话框一点也不难,你只需要理解几行代码的重要性。
 

ARIA 角色

如果你希望屏幕阅读器用户意识到一个对话框弹出来了,那么你需要学一点可访问的富互联网应用(ARIA)角色。ARIA角色给HTML元素提供了额外的语义,好让浏览器与屏幕阅读器能以更具描述性的方式通信。有数目非常多的角色改变了屏幕阅读器识别页面元素的方式。对对话框来说,有两个有趣的:对话框和提示对话框。

在很多案例中,dialog(对话框)是可使用的角色。通过设置它为一个元素role(角色)的属性,你告诉浏览器该元素的目的是一个对话框。

<div id="my-dialog" role="dialog">
    <-- Your dialog code here -->
</div>

当一个具有dialog角色的元素设置为可见,浏览器告诉屏幕阅读器一个新的对话框被打开了。那使屏幕阅读器的用户认识到他们不再在通常的页面流之中了。

 
 

对话框也有可能具有标签。你可以指定一个标签,或者通过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>
    <-- Your dialog code here -->
</div>

在第一个例子里,aria-label属性被用来标明只被屏幕阅读器使用的标签。当对话框没有可视的标签时你可能想这么做。在第二个例子里,aria-labelledby属性被用来标明包含对话框标签的元素的ID。由于对话框有一个可视的标签,重复利用那个信息比复制它要有意义。当对话框被显示时,屏幕阅读器声明该对话框标签。

 

 

alertdialog(提示对话框)的角色是被设计用来引起用户注意的特殊类型的对话框。想象这是一种当你试图删除一些东西时候的确认对话框。一个提示对话框有很少的交互性。它的主要目的是吸引用户注意一个动作发生了。和对话框比较一下,后者可能是给用户输入信息如写一封新电子邮件或即时消息的一块地方。

当提示对话框被显示时,屏幕阅读器查找说明来朗读。推荐用aria-describedby元素来标明需要被朗读的文字。与aria-labelledby类似,这个属性是包含朗读内容的元素的ID。如果aria-describedby省略了,屏幕阅读器将尝试找出代表说明的文字,经常是选择元素的第一段文字内容。这里有个例子:

<div id="my-dialog" role="alertdialog" aria-describedby="dialog-desc">
    <p id="dialog-desc">Are you sure you want to delete this message?</p>
    <-- Your dialog code here -->
</div>

这个例子使用了一个包含说明的元素。这么做确保了当对话框被显示时,正确的文字被朗读。

即使你省略了额外的属性,只为你的对话框使用了合适的角色(role),应用的可访问性也有巨大的提升。

 

设置对话框的焦点

下面一部分关于创建一个可访问的对话框的内容是管理焦点。当一个对话框被显示,焦点应该被置于对话框之内,以便用户可以用键盘操纵。对话框中哪里是放置焦点的正确位置主要取决于对话框自身的目的。如果你有一个确认对话框带一个继续按钮一个取消按钮,那么你会希望默认焦点设在取消按钮。如果你有一个预计用户会输入文字的对话框,那么你会希望默认焦点设置在文本框。如果你找不到哪里放置焦点,那么一个很好的起点是设置焦点到代表对话框的元素。

 

由于大多数时间你将使用<div>元素代表一个对话框,默认的你并不能将焦点设置到它上面。替代的,你需要通过设置tabIndex属性为-1来使焦点能设置到该元素。这使得你能用JavaScript设置焦点到该元素,但不将该元素插入普通的tab顺序。那意味着用户不能通过敲tab键设置焦点到该对话框。你可以直接用HTML或用JavaScript做这些。HTML的:

<div id="my-dialog" role="dialog" tabindex="-1" aria-labelledby="dialog-title">
    <h3 id="dialog-title">New Message</h3>
    <-- Your dialog code here -->
</div>

JavaScript的:

var div = document.getElementById("my-dialog");
div.tabIndex = -1;
div.focus();

一旦tabIndexis设置为-1,你可以像其他可聚焦的元素一样,调用该元素的focus()。然后用户就可以在对话框中敲tab来操作。

 

捕获焦点

另一个对话框可访问性的问题是焦点不会跑到对话框之外。很多情况下,对话框是模态的因此焦点不可能离开对话框。当对话框打开时敲击tab键使焦点设置最终跑到对话框后面,那么键盘用户返回对话框将非常困难。因此最好用一点JavaScript阻止那样的事情发生。

这个技术背后的基本思想是使用事件捕获侦听聚焦事件,这是由Peter-Paul Koch推广普及的技术,现在被许多的JavaScript库所采用。由于聚焦不会冒泡,你无法在事件流捕获它。你反而可以用事件捕获来拦截页面上的所有聚焦事件。然后,你只需要判断收到聚焦的元素是否在对话框之内。如果不在,将焦点设回到对话框。代码非常简单:

document.addEventListener("focus", function(event) {

    var dialog = document.getElementById("my-dialog");

    if (dialogOpen && !dialog.contains(event.target)) {
        event.stopPropagation();
        dialog.focus();
    }

}, true);
 

这段代码侦听文档上的聚焦事件,以便在目标元素收到它们之前拦截所有这样的事件。假设对话框打开时一个dialogOpen变量被设置为true。当聚焦事件发生时,这个函数捕获事件并检查对话框是否打开,如果是,再检查收到聚焦的元素是否在对话框之内。如果两个条件都满足,聚焦就会设置会对话框。这可能影响到对话框下面的焦点返回到最顶部。结果是你不能按tab离开对话框,因此这使键盘用户很难再失去焦点。

如果你在使用一个JavaScript库,它可能具有代理聚焦事件的方式,通过这种方式你可以获得同样的效果。如果你需要在JavaScript库条件下支持 Internet Explorer 8和更早版本,那么就使用focus事件代替吧。

 

恢复焦点

最后一个对话框聚焦的困惑是,在对话框关闭时恢复焦点到页面的主要部分。思想很简单:为了打开对话框,用户可能激活了一个链接或按钮。然后焦点移到对话框内部,用户在那里完成一些任务之后关闭对话框。焦点应该返回之前被点击来打开对话框的链接或按钮,然后才可能继续操作该页面。这是在web应用中经常被忽视的方面,但它引起很大的不同。

相较其他几节,这只需要很少的代码来运作。所有浏览器都支持document.active元素,它表示现在获得焦点的元素。所有你需要做的就是在显示对话框之前查询这个值,然后在对话框关闭时将焦点设回到那个元素。例如:

var lastFocus = document.activeElement,
    dialog = document.getElementById("my-dialog");

dialog.className = "show";
dialog.focus();

代码重要的部分是它保存了最后获得焦点的元素。这样以来,你所需做的就是对话框关闭时将焦点设回到它:

lastFocus.focus()

总体上说,这可能给你现有有关对话框的代码中只增加了很短的几行代码。

 

退出打开的对话框

怎样让用户方便并快速的关闭对话框呐。最好的办法是采用“Esc”键。这也是桌面应用程序关闭应用程序的方式,这对用户来说也非常友好。只要监听被按下的“Esc”键,然后就可以关闭对话框,例如:

document.addEventListener("keydown", function(event) {
    if (dialogOpen && event.keyCode == 27) {
        // 关闭对话框
    }
}, true);

“Esc”键值是27,因此你需要监听keydown事件,一旦触发就关闭掉对话框并激活先前的对象。

 

总结

帖子中已经很明白了,不需要太多的代码就可以创建一个对话框,并且还适合只有一个键盘的屏幕阅读器,仅仅数行代码就可以提升你的用户体验。有很多使用弹出对话框的网页程序,仅仅少数做得好,还有大部分拥有糟糕的用户体验,因此,希望这个帖子对你制作自己的可访问性对话框有所帮助。

参考文献

  1. WAI-ARIA (W3C)
  2. Delegating the focus and blur events by Peter-Paul Koch (Quirksmode)
分享到:
评论

相关推荐

    Accessible接口读取软件UI元素

    在IT领域,特别是软件开发和自动化测试中,`Accessible接口`是一个重要的概念,它主要用于获取和操作用户界面(UI)元素。这个接口是无障碍技术( Accessibility Technology)的一部分,旨在帮助残障人士通过辅助...

    建立可访问的网站Building Accessible Websites

    构建一个既美观又具有高度可访问性的网站是一项挑战,但也是值得投入的努力。通过遵循上述原则和技术建议,我们可以创建出既吸引人又能惠及所有人的数字空间。最后,鼓励开发者持续关注无障碍领域的最新进展和技术,...

    易语言调用Accessible接口例程

    在描述中提到的变体型(Variant Type)在易语言中是一个通用的数据类型,它可以表示多种基础类型,如整数、浮点数、字符串等,也可以用于封装接口。在调用`AccessibleObjectFromWindow`时,你需要将接口指针封装到一...

    易语言基于accessible接口打造获取QQ窗口相关信息

    最后,将所有这些组件整合到易语言的程序中,编写适当的逻辑,就可以实现一个能够获取并显示QQ窗口信息的小工具。这不仅可以作为学习易语言和Windows编程的一个实践项目,也对理解无障碍技术有很好的启发作用。 总...

    Accessible.tlb

    Accessible.tlb

    美丽的网页制作小图标

    网页制作中的小图标是网页设计中不可或缺的一部分,它们在页面布局、导航、信息提示等多个方面发挥着重要作用。小图标以其简洁、直观的特性,能够快速引导用户理解和操作,提升用户体验。下面将详细介绍小图标在网页...

    Vue.js Up & Running Building Accessible and Performant Web Apps pdf

    这些工具和库极大地扩展了Vue的功能,使其成为一个完整的解决方案,适合大型项目的开发。 总之,《Vue.js Up & Running: Building Accessible and Performant Web Apps》这本书将带领读者全面了解Vue.js,从基础到...

    Vue.js Up and Running_ Building Accessible and Performant Web Apps

    Vue.js Up and Running_ Building Accessible and Performant Web Apps (2018, Media)

    HTML5视频播放器accessible-html5-video-player.zip

    Accessible HTML5 Video Player 是一个轻量级的 HTML5 视频播放器,支持自定义字幕。功能特征:与自定义控件提供了一个 HTML5 视频播放器支持字幕:只需要使用标准 HTML5 视频语法的 VTT 字幕文件使用本地 HTML5 ...

    accessible-colors:自动找到最接近的可访问颜色组合

    `accessible-colors` 是一个JavaScript库,专门用于帮助开发者找到最接近的可访问颜色组合,确保色彩对比度符合WCAG(Web Content Accessibility Guidelines)标准。 WCAG是国际公认的一套指导原则,旨在确保网络...

    网页图片轮播制作工具

    综上所述,“网页图片轮播制作工具”为网页设计师和开发者提供了一个方便快捷的解决方案,让创建互动且吸引人的图片轮播变得更加简单。无论你是新手还是经验丰富的开发者,这样的工具都能极大地提升你的工作效率和...

    html 制作特殊网页的例子

    通过熟练掌握这些技术,你可以创造出具有吸引力、交互性强且功能丰富的网页。记住,实践是最好的老师,所以打开那个名为“特殊---网页例子”的压缩包,通过查看源代码并动手实践,你的HTML技能将得到显著提升。

    PyPI 官网下载 | accessible_output-0.5.3.win32.exe

    这次我们要关注的是一个名为"accessible_output"的库,其版本为0.5.3,并且是以Windows 32位系统为目标平台的可执行文件(.exe)。这个文件的全名是"accessible_output-0.5.3.win32.exe",它是从PyPI官网获取的,...

    horiseon-access:Horiseon可及性项目

    "Horiseon可及性项目"是一个旨在提升网站可访问性的IT项目,主要涉及HTML和CSS这两种核心技术。可访问性(Accessibility,简称WCAG)是确保网页内容对所有用户,包括那些有身体障碍或者使用辅助技术的人,都能方便地...

    Accessible XHTML and CSS Web Sites - Problem - Design - Solution

    随着互联网技术的发展,网站的可访问性逐渐成为一个重要的话题。《Accessible XHTML and CSS Web Sites - Problem - Design - Solution》这本书由Jon Duckett撰写,并于2005年由Wiley Publishing出版。本书主要探讨...

    js 弹出框

    `confirm()`函数与`alert()`类似,也会弹出一个对话框,但不同的是它会有一个“确定”和一个“取消”按钮。如果用户点击“确定”,则返回`true`;点击“取消”,返回`false`。这可以用来进行简单的用户确认操作。...

    java代码-Accessible

    在Java编程语言中,`Accessible` 是一个关键概念,它涉及到Java反射API(Reflection API)中的访问控制。Java反射API允许程序在运行时检查类、接口、字段和方法的属性,甚至可以调用私有成员。`Accessible` 接口是这...

    Data Analytics Made Accessible Maheshwari, Anil pdf

    This book fills the need for a concise and conversational book on the growing field of Data Analytics and Big Data. Easy to read and informative, this lucid book covers everything important, with ...

Global site tag (gtag.js) - Google Analytics