使用 aria-live 步骤指示器创建可访问的多步骤表单的最佳方法？

Question

我正在开发一个多步骤表单，其中每个步骤都使用

<template>

元素动态显示。随着用户的进展，上一步被隐藏，下一步被显示（使用 JavaScript）。

为了便于访问，我已将

aria-live="polite"

添加到 HTML 文档的根目录，并使用 JavaScript 根据所选步骤动态更新内容。

我的问题是：哪种方法更容易实现？

• 将

  aria-live="polite"

  添加到根元素，并在步骤更改时使用 JavaScript 更新它。

或

• 向每个

  aria-live="polite"

  元素添加

  <template>

  ，步骤标题已包含在模板内。

Answer 1

这两种选择都不推荐。您通常不希望将大面积的内容变成实时区域。在没有看到项目的情况下很难给出一个好的答案，但一种解决方案可能是在每个步骤的开头有一个标题，将

tabindex="-1"

添加到标题中，并在新步骤出现时以编程方式将焦点放在标题上。不需要 aria-live。