可访问 in-line 模态?

Accessible in-line modal?

在可访问性方面,附加具有 header、body 文本和可选关闭按钮的内联面板的正确设计模式或技术是什么?

对于上下文,我的任务是创建一个易于访问的 multi-select 测验问题,在用户按下提交后在问题下方附加正确或不正确的反馈面板。我认为通常这种反馈会出现在覆盖其他内容和陷阱焦点的模式弹出窗口中,但这种特殊设计需要反馈面板出现在提交按钮正下方的页面中,并且仍然允许用户通过选项卡返回答案选项(即使提交后它们会是 aria-disabled)。

反馈面板将有一个标题 header、body 文本和一个可选的关闭按钮。如果用户全部正确或者他们 运行 尝试失败,则不会有关闭按钮。

这种附加面板是否有合适的aria-role或已知的设计模式?一旦出现反馈面板,我应该将焦点发送到什么,header?关闭按钮?

如果相关,对于多选答案选项,我使用带有 <label>s

的原生复选框

选项 1

首先是将 role="alert" 添加到附加框中(假设您每页只添加一次,否则我们将使用 aria-live)。

然后将向筛选 reader 用户公布。

选项 2

选项 2 是您可以将框附加到页面并使用焦点管理。因此该框出现,您可以通过 JavaScript 将焦点移动到框的标题(例如标题上有 tabindex="-1")。这需要从预期的操作中发生(所以你说你有“提交答案”按钮)。

我可能会选择选项 2,因为这是避免错误引入更多可访问性问题的最简单方法。

您可以通过 aria-livearia-labelledby 等其他方法实现此目的,但以上两个选项是最直接的。