我正在向我公司的设计库添加一种阻止模式(即,一种覆盖模式,该模式可以覆盖屏幕并防止在API调用处理期间进行交互)。
作为其中的一部分,我修改了模式,以便在灰色背景上单击不会隐藏阻止模式,但是我要确保这不违反辅助功能准则。我还没有在网上找到任何有关此的信息。有人知道这是否违反了可访问性要求吗?
答案是“取决于”。基本上,如果该模式不能以任何方式被取消,它将成为“键盘陷阱”,因此会违反WCAG。
但是,如果您正确地构造了它,则可以在加载API时阻止页面的模式是完全有效的(并且在加载页面时不能将其关闭),但是您需要做一些事情来确保这是可访问的。
我在大多数模态上看到的最大问题是,它们允许在模态之外进行关注。
您不能只使用tab键停止用户,因为这不是大多数屏幕阅读器用户浏览页面的方式(他们使用标题(h1-h6),超链接等的快捷方式。
因此,请确保模态位于<main>
之外,并隐藏<main>
和其他包含aria-hidden="true"
信息的主要地标,并在其上添加tabindex="-1"
,以便使所有内容无法聚焦。
显然,这取决于您的文档结构,因此您需要对其进行测试,但是结构正确的HTML文档可以与上述方法一起使用。
有两种方法可以做到这一点。最好是使用aria-live region
向要更新的部分添加aria-live="polite"
和aria-busy="true"
是一种方法(如果要更新页面的一部分)。
但是在您的情况下,我会在模式aria-live="assertive"
中创建一个部分,而不使用aria-busy
(因为您将在步骤1中隐藏所有内容,因此aria-busy
将不适用。
然后,我会每隔一到两秒钟更新一次消息,以获取较长的负载(例如,“正在加载”,“仍在加载”,“即将加载”等。如果脚本允许,最好还是增加一个加载百分比。)
一旦页面内容已加载,您无需说“已加载”,而是确保您具有添加了tabindex="-1"
的节或页面的标题,该标题或页面准确地描述了刚刚加载的内容。
一旦完成加载,以编程方式将标题聚焦,用户将知道加载已完成。
[当您的API调用失败时(请注意,我说的是,什么时候,如果不是!),请确保您的JavaScript可以正常处理此问题。
在模态aria-live
区域内提供有意义消息,以说明问题。尝试避免陈述错误代码(或保持简短,没有比在屏幕阅读器上听到错误代码的16位字符串更糟糕),而是保持简单,例如“资源繁忙,请稍后再试”或“未收到数据” ,请重试'等。
在该区域内,我还将添加一个或两个按钮,这些按钮可以根据您的需要重试/返回/导航到新页面。
我在第2点中介绍了这一点,但只是为了强调它,如果更新时间较长,请确保通过向用户反馈说如果加载时间较长,事物仍在加载中。
没有什么比想知道页面是否已加载以及开发人员忘记告诉你更糟糕的了。
显然,整个页面模式的最大问题是它是'aria-live
'。
为了确保这不是问题,请确保您提供了keyboard trap按钮。
请确保这将取消页面的加载,但不要单独依赖JavaScript。
相反,将其设置为cancel
样式,类似于指向当前页面或上一页的按钮(根据您的需要,再次指向该页面,然后添加<a>
。
然后使用JavaScript拦截此点击,使其像按钮一样起作用。
原因是当您的JavaScript失败时(再次-在什么时候,如果不是),用户仍然可以进入有意义的页面,从而避免了键盘陷阱。
这是您应该使用锚点作为按钮的几次,作为后备!
通过这样做,您确保用户始终有逃脱模态的方法。
您还可以考虑允许用户使用Esc键关闭/取消,但这又取决于您和您的情况。