`

如何制作一个可及性强(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)
分享到:
评论

相关推荐

    《数据结构》(02331)基础概念

    内容概要:本文档《数据结构》(02331)第一章主要介绍数据结构的基础概念,涵盖数据与数据元素的定义及其特性,详细阐述了数据结构的三大要素:逻辑结构、存储结构和数据运算。逻辑结构分为线性结构(如线性表、栈、队列)、树形结构(涉及根节点、父节点、子节点等术语)和其他结构。存储结构对比了顺序存储和链式存储的特点,包括访问方式、插入删除操作的时间复杂度以及空间分配方式,并介绍了索引存储和散列存储的概念。最后讲解了抽象数据类型(ADT)的定义及其组成部分,并探讨了算法分析中的时间复杂度计算方法。 适合人群:计算机相关专业学生或初学者,对数据结构有一定兴趣并希望系统学习其基础知识的人群。 使用场景及目标:①理解数据结构的基本概念,掌握逻辑结构和存储结构的区别与联系;②熟悉不同存储方式的特点及应用场景;③学会分析简单算法的时间复杂度,为后续深入学习打下坚实基础。 阅读建议:本章节内容较为理论化,建议结合实际案例进行理解,尤其是对于逻辑结构和存储结构的理解要深入到具体的应用场景中,同时可以尝试编写一些简单的程序来加深对抽象数据类型的认识。

    【工业自动化】施耐德M580 PLC系统架构详解:存储结构、硬件配置与冗余设计

    内容概要:本文详细介绍了施耐德M580系列PLC的存储结构、系统硬件架构、上电写入程序及CPU冗余特性。在存储结构方面,涵盖拓扑寻址、Device DDT远程寻址以及寄存器寻址三种方式,详细解释了不同类型的寻址方法及其应用场景。系统硬件架构部分,阐述了最小系统的构建要素,包括CPU、机架和模块的选择与配置,并介绍了常见的系统拓扑结构,如简单的机架间拓扑和远程子站以太网菊花链等。上电写入程序环节,说明了通过USB和以太网两种接口进行程序下载的具体步骤,特别是针对初次下载时IP地址的设置方法。最后,CPU冗余部分重点描述了热备功能的实现机制,包括IP通讯地址配置和热备拓扑结构。 适合人群:从事工业自动化领域工作的技术人员,特别是对PLC编程及系统集成有一定了解的工程师。 使用场景及目标:①帮助工程师理解施耐德M580系列PLC的寻址机制,以便更好地进行模块配置和编程;②指导工程师完成最小系统的搭建,优化系统拓扑结构的设计;③提供详细的上电写入程序指南,确保程序下载顺利进行;④解释CPU冗余的实现方式,提高系统的稳定性和可靠性。 其他说明:文中还涉及一些特殊模块的功能介绍,如定时器事件和Modbus串口通讯模块,这些内容有助于用户深入了解M580系列PLC的高级应用。此外,附录部分提供了远程子站和热备冗余系统的实物图片,便于用户直观理解相关概念。

    某型自动垂直提升仓储系统方案论证及关键零部件的设计.zip

    某型自动垂直提升仓储系统方案论证及关键零部件的设计.zip

    2135D3F1EFA99CB590678658F575DB23.pdf#page=1&view=fitH

    2135D3F1EFA99CB590678658F575DB23.pdf#page=1&view=fitH

    agentransack文本搜索软件

    可以搜索文本内的内容,指定目录,指定文件格式,匹配大小写等

    Windows 平台 Android Studio 下载与安装指南.zip

    Windows 平台 Android Studio 下载与安装指南.zip

    Android Studio Meerkat 2024.3.1 Patch 1(android-studio-2024.3.1.14-windows-zip.zip.002)

    Android Studio Meerkat 2024.3.1 Patch 1(android-studio-2024.3.1.14-windows.zip)适用于Windows系统,文件使用360压缩软件分割成两个压缩包,必须一起下载使用: part1: https://download.csdn.net/download/weixin_43800734/90557033 part2: https://download.csdn.net/download/weixin_43800734/90557035

    4-3-台区智能融合终端功能模块技术规范(试行).pdf

    国网台区终端最新规范

    4-13-台区智能融合终端软件检测规范(试行).pdf

    国网台区终端最新规范

    【锂电池剩余寿命预测】Transformer-GRU锂电池剩余寿命预测(Matlab完整源码和数据)

    1.【锂电池剩余寿命预测】Transformer-GRU锂电池剩余寿命预测(Matlab完整源码和数据) 2.数据集:NASA数据集,已经处理好,B0005电池训练、B0006测试; 3.环境准备:Matlab2023b,可读性强; 4.模型描述:Transformer-GRU在各种各样的问题上表现非常出色,现在被广泛使用。 5.领域描述:近年来,随着锂离子电池的能量密度、功率密度逐渐提升,其安全性能与剩余使用寿命预测变得愈发重要。本代码实现了Transformer-GRU在该领域的应用。 6.作者介绍:机器学习之心,博客专家认证,机器学习领域创作者,2023博客之星TOP50,主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析,文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年,更多仿真源码、数据集定制私信。

    基于android的家庭收纳App的设计与实现.zip

    Android项目原生java语言课程设计,包含LW+ppt

    大学生入门前端-五子棋vue项目

    大学生入门前端-五子棋vue项目

    二手车分析完整项目,包含源代码和数据集,包含:XGBoost 模型,训练模型代码,数据集包含 10,000 条二手车记录的数据集,涵盖车辆品牌、型号、年份、里程数、发动机缸数、价格等

    这是一个完整的端到端解决方案,用于分析和预测阿联酋(UAE)地区的二手车价格。数据集包含 10,000 条二手车信息,覆盖了迪拜、阿布扎比和沙迦等城市,并提供了精确的地理位置数据。此外,项目还包括一个基于 Dash 构建的 Web 应用程序代码和一个训练好的 XGBoost 模型,帮助用户探索区域市场趋势、预测车价以及可视化地理空间洞察。 数据集内容 项目文件以压缩 ZIP 归档形式提供,包含以下内容: 数据文件: data/uae_used_cars_10k.csv:包含 10,000 条二手车记录的数据集,涵盖车辆品牌、型号、年份、里程数、发动机缸数、价格、变速箱类型、燃料类型、颜色、描述以及销售地点(如迪拜、阿布扎比、沙迦)。 模型文件: models/stacking_model.pkl:训练好的 XGBoost 模型,用于预测二手车价格。 models/scaler.pkl:用于数据预处理的缩放器。 models.py:模型相关功能的实现。 train_model.py:训练模型的脚本。 Web 应用程序文件: app.py:Dash 应用程序的主文件。 callback

    《基于YOLOv8的船舶航行违规并线预警系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    《基于YOLOv8的工业布匹瑕疵分类系统》(包含源码、可视化界面、完整数据集、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    CodeCount.exe

    此为代码审查工具 可查 文件数,字节数,总行数,代码行数,注释行数,空白行数,注释率等

    商业数据分析与Python实现:企业破产概率及抽样技术解析(复现论文或解答问题,含详细可运行代码及解释)

    内容概要:本文档涵盖了一项关于企业破产概率的详细分析任务,分为书面回答和Python代码实现两大部分。第一部分涉及对业务类型和破产状态的边际分布、条件分布及相对风险的计算,并绘制了相应的二维条形图。第二部分利用Python进行了数据处理和可视化,包括计算比值比、识别抽样技术类型、分析鱼类数据集以及探讨辛普森悖论。此外,还提供了针对鱼类和树木数据的统计分析方法。 适合人群:适用于有一定数学和编程基础的学习者,尤其是对统计学、数据分析感兴趣的大学生或研究人员。 使用场景及目标:①帮助学生掌握统计学概念如边际分布、条件分布、相对风险和比值比的实际应用;②教授如何用Python进行数据清洗、分析和可视化;③提高对不同类型抽样技术和潜在偏见的理解。 其他说明:文档不仅包含了理论知识讲解,还有具体的代码实例供读者参考实践。同时提醒读者在完成作业时需要注意提交格式的要求。

    MCP快速入门实战,详细的实战教程

    MCP快速入门实战,详细的实战教程

    python,playwright基础

    python,playwright基础

    氖星生命体SDK1.7.15

    氖星生命体SDK是JAVA开发的代码。它能输出多种情绪和意图,让机器人、AI玩具和其他硬件具备人工生命,并在意图驱动下运行。

Global site tag (gtag.js) - Google Analytics