通过单击背景来防止模式被隐藏是否违反了可访问性要求？
Does preventing a modal from being hidden by clicking the background violate accessibility requirements?
我正在向我公司的设计库中添加一个阻塞模态（即覆盖屏幕并阻止在处理 API 调用时进行交互的模态）。
作为其中的一部分，我修改了我们的模式，以便单击灰色背景不会隐藏阻塞模式，但我想确保这不会违反可访问性指南。我无法在网上找到任何关于此的信息。有谁知道这是否违反了辅助功能要求？
简答
答案是'it depends'。基本上，如果模式不能以任何方式关闭，它就会变成 'keyboard trap'，因此会违反 WCAG。
但是，如果你正确地构造它，一个在 API 加载时阻塞页面的模式是完全有效的（并且在页面加载时不能被关闭），但是你需要一些东西确保这是可访问的。
1。确保加载此模态时，页面上的任何其他内容都不可聚焦。
我在大多数模态框上看到的最大问题是它们允许焦点在它们之外。
您不能只阻止用户使用 tab 键，因为这不是大多数屏幕 reader 用户浏览页面的方式（他们使用标题的快捷方式 (h1 -h6)、超链接等)。
因此，请确保您的模态框位于 <main> 之外，并隐藏您的 <main> 和其他包含 aria-hidden="true" 信息的主要地标，并添加 tabindex="-1" 对他们来说，没有什么是可聚焦的。
显然这取决于您的文档结构，因此您需要对其进行测试，但是结构正确的 HTML 文档将适用于上述方法。
2。确保屏幕 reader 用户知道页面正忙并且正在加载某些内容。
有几种方法可以做到这一点。最好是使用 aria-live region
将 aria-live="polite" 和 aria-busy="true" 添加到您正在更新的部分是一种方法（如果您正在更新页面的一部分）。
但是在您的情况下，我会在模态 aria-live="assertive" 中创建一个部分而不使用 aria-busy（因为您将在第 1 步中隐藏所有内容，因此 aria-busy 会不适用）。
然后我会每隔一两秒更新一次消息以进行长时间加载（即 'loading'、'still loading'、'nearly loaded' 等。或者如果您的脚本允许，加载百分比更好。 )
页面内容加载后，您无需说 'loaded'，而是确保您的部分或页面的标题添加了 tabindex="-1"，可以准确描述刚刚加载的内容。
加载完成后，以编程方式聚焦此标题，用户将知道加载已完成。
3。确保如果 API 调用失败，你将一些 有意义的 反馈回屏幕 readers
当您的 API 调用失败时（注意我说的是何时，而不是如果！）请确保您的 JavaScript 能够以优雅的方式处理此问题。
在您的模态 aria-live 区域内提供一条 有意义的 消息来解释问题。尽量避免陈述错误代码（或者保持简短，没有什么比在屏幕上听到 16 位字符串 reader 更糟糕的错误代码），而是保持简单，例如 'resource busy, try again later' 或 'no data received, please try again'等
在那个区域内，我还会添加一个或两个按钮，允许根据您的需要重试/返回/导航到新页面。
4。对于较长的加载时间，让用户知道发生了什么。
我在第 2 点中介绍了这一点，但只是为了强调这一点，如果加载时间很长，请确保通过更新 aria-live 区域向用户反馈内容仍在加载。
没有什么比想知道页面是否已加载而开发人员忘记告诉您更糟糕的了。
5。提供取消 API 调用的选项，这样它就不会成为键盘陷阱。
显然整个页面模态的最大问题是它是“keyboard trap”。
为确保这不是问题，请确保提供 cancel 按钮。
确保清楚这将取消页面的加载，但不要单独依赖JavaScript。
而是将其设为 <a> 样式的按钮，指向当前页面或上一页（再次取决于您的需要）并添加 role="button".
然后用JavaScript拦截这个点击，这样它就可以像按钮一样工作了。
这样做的原因是，当您的 JavaScript 失败时（又一次 - 何时，而不是是否），用户仍然可以访问有意义的页面，从而避免键盘陷阱。
这是您应该将锚点用作按钮的少数情况之一，作为后备！
通过这样做，您可以确保用户始终有办法转义模态。
您也可以考虑允许用户使用 Esc 键来关闭/取消，但这又取决于您和您的情况。
我正在向我公司的设计库中添加一个阻塞模态（即覆盖屏幕并阻止在处理 API 调用时进行交互的模态）。
作为其中的一部分，我修改了我们的模式，以便单击灰色背景不会隐藏阻塞模式，但我想确保这不会违反可访问性指南。我无法在网上找到任何关于此的信息。有谁知道这是否违反了辅助功能要求？
简答
答案是'it depends'。基本上，如果模式不能以任何方式关闭，它就会变成 'keyboard trap'，因此会违反 WCAG。
但是，如果你正确地构造它，一个在 API 加载时阻塞页面的模式是完全有效的（并且在页面加载时不能被关闭），但是你需要一些东西确保这是可访问的。
1。确保加载此模态时，页面上的任何其他内容都不可聚焦。
我在大多数模态框上看到的最大问题是它们允许焦点在它们之外。
您不能只阻止用户使用 tab 键，因为这不是大多数屏幕 reader 用户浏览页面的方式（他们使用标题的快捷方式 (h1 -h6)、超链接等)。
因此，请确保您的模态框位于 <main> 之外，并隐藏您的 <main> 和其他包含 aria-hidden="true" 信息的主要地标，并添加 tabindex="-1" 对他们来说，没有什么是可聚焦的。
显然这取决于您的文档结构，因此您需要对其进行测试，但是结构正确的 HTML 文档将适用于上述方法。
2。确保屏幕 reader 用户知道页面正忙并且正在加载某些内容。
有几种方法可以做到这一点。最好是使用 aria-live region
将 aria-live="polite" 和 aria-busy="true" 添加到您正在更新的部分是一种方法（如果您正在更新页面的一部分）。
但是在您的情况下，我会在模态 aria-live="assertive" 中创建一个部分而不使用 aria-busy（因为您将在第 1 步中隐藏所有内容，因此 aria-busy 会不适用）。
然后我会每隔一两秒更新一次消息以进行长时间加载（即 'loading'、'still loading'、'nearly loaded' 等。或者如果您的脚本允许，加载百分比更好。 )
页面内容加载后，您无需说 'loaded'，而是确保您的部分或页面的标题添加了 tabindex="-1"，可以准确描述刚刚加载的内容。
加载完成后，以编程方式聚焦此标题，用户将知道加载已完成。
3。确保如果 API 调用失败，你将一些 有意义的 反馈回屏幕 readers
当您的 API 调用失败时（注意我说的是何时，而不是如果！）请确保您的 JavaScript 能够以优雅的方式处理此问题。
在您的模态 aria-live 区域内提供一条 有意义的 消息来解释问题。尽量避免陈述错误代码（或者保持简短，没有什么比在屏幕上听到 16 位字符串 reader 更糟糕的错误代码），而是保持简单，例如 'resource busy, try again later' 或 'no data received, please try again'等
在那个区域内，我还会添加一个或两个按钮，允许根据您的需要重试/返回/导航到新页面。
4。对于较长的加载时间，让用户知道发生了什么。
我在第 2 点中介绍了这一点，但只是为了强调这一点，如果加载时间很长，请确保通过更新 aria-live 区域向用户反馈内容仍在加载。
没有什么比想知道页面是否已加载而开发人员忘记告诉您更糟糕的了。
5。提供取消 API 调用的选项，这样它就不会成为键盘陷阱。
显然整个页面模态的最大问题是它是“keyboard trap”。
为确保这不是问题，请确保提供 cancel 按钮。
确保清楚这将取消页面的加载，但不要单独依赖JavaScript。
而是将其设为 <a> 样式的按钮，指向当前页面或上一页（再次取决于您的需要）并添加 role="button".
然后用JavaScript拦截这个点击，这样它就可以像按钮一样工作了。
这样做的原因是，当您的 JavaScript 失败时（又一次 - 何时，而不是是否），用户仍然可以访问有意义的页面，从而避免键盘陷阱。
这是您应该将锚点用作按钮的少数情况之一，作为后备！
通过这样做，您可以确保用户始终有办法转义模态。
您也可以考虑允许用户使用 Esc 键来关闭/取消，但这又取决于您和您的情况。