使屏幕阅读器可以访问步骤进度指示器

Question

我经常需要使用步骤指示来显示用户所在的步骤，或者包裹在运输途中的进度等。

像这样：

这是由一个无序列表的 HTML 列表组成的。

        <ul class="progress-tracker progress-tracker--text progress-tracker--center">
          <li class="progress-step is-complete">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 1</h4>
              Summary text explaining this step to the user
            </span>
          </li>

          <li class="progress-step is-complete">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 2</h4>
              Summary text explaining this step to the user
            </span>
          </li>

          <li class="progress-step is-active">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 3</h4>
              Summary text explaining this step to the user
            </span>
          </li>

          <li class="progress-step">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 4</h4>
              Shorter summary text
            </span>
          </li>

          <li class="progress-step">
            <span class="progress-marker"></span>
            <span class="progress-text">
              <h4 class="progress-title">Step 5</h4>
              Shorter summary text
            </span>
          </li>
        </ul>

假设每个页面上都加载了一个新列表（即“步骤”），有没有办法使其适应屏幕阅读器/辅助技术？

至少让读者向用户阅读当前步骤会很好。

Answer 1

步骤是静态的还是用户可以单击上一步返回？

如果进度指示器是交互式的，则将整个内容包含在一个<nav>元素中。您的进度指示器类似于面包屑路径。该<nav>也应该有一个aria-label，并在过程中的当前步骤应该有aria-current。所以它可能看起来像：

<nav aria-label="progress">
  <ul class="progress-tracker progress-tracker--text progress-tracker--center">
    <li class="progress-step is-complete">
      ...
    </li>

    <li class="progress-step is-complete">
        ...
      </li>

    <li class="progress-step is-active" aria-current="true">
        ...
      </li>

    ...
  </ul>
</nav>

但是，您的代码片段不包含任何链接，因此我猜您的进度指示器是静态的而不是交互式的。在这种情况下，不要使用 a <nav>，因为您无法使用指示器进行导航，但您仍然可以将元素组合在一起。拥有无序列表是一种分组方式，但有时屏幕阅读器不会读取aria-label列表中的内容。

<ul aria-label="progress">

您可以通过以下方式解决该问题：

<div role="group" aria-label="progress">
  <ul>
    <li>
      ...
    </li>
  </ul>
</div>

（基本上将<nav>第一个示例中的替换为<div role="group">.

由于您的进度指示器是一系列步骤，因此使用有序列表<ol>将获得更好的语义信息。您可以设置列表样式，以便<ol>不显示a 的默认数字（类似于您不使用 显示项目符号点的方式<ul>）。

最后，我会为屏幕阅读器添加一些“隐藏”文本，以说明该步骤是否已完成。从视觉上看，蓝色圆圈表示已完成的步骤，空心圆圈表示活动步骤，灰色圆圈表示未完成。这一切都是用 CSS 完成的（你的“is-complete”和“is-active”类）。应该将相同的上下文传达给屏幕阅读器。空心圆（“is-active”）是用aria-current属性传达的。使用“sr-only”类型类为屏幕阅读器添加文本。（请参阅 Bootstrap 3 中的 sr-only 是什么？）

<div role="group" aria-label="progress">
  <ol class="progress-tracker progress-tracker--text progress-tracker--center">
    <li class="progress-step is-complete">
      <span class="sr-only">completed</span>
      ...
    </li>

    <li class="progress-step is-complete">
      <span class="sr-only">completed</span>
      ...
    </li>

    <li class="progress-step is-active" aria-current="true">
      ...
    </li>

    <li class="progress-step">
      <span class="sr-only">not completed</span>
      ...
    </li>
    ...
  </ol>
</div>

总之，您需要的最小更改是：

• 也许从 切换<ul>到<ol>
• 将“sr-only”文本添加到“已完成”和“未完成”项目
• 添加aria-current到当前步骤