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

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> 中元素。您的进度指示器将类似于 breadcrumb trail . <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>

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

<ul aria-label="progress">

您可以通过以下方式解决此问题:

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

(本质上是将第一个示例中的 <nav> 替换为 <div role="group">。

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

最后，我会为屏幕阅读器添加一些“隐藏”文本，以说明该步骤是否已完成。在视觉上，蓝色圆圈表示已完成的步骤，空心圆圈表示事件步骤，灰色圆圈表示未完成。这一切都是用 CSS 完成的(你的“is-complete”和“is-active”类)。同样的上下文应该传达给屏幕阅读器。空心圆圈(“is-active”)与 aria-current 一起传送属性。使用“sr-only”类型类为屏幕阅读器添加文本。 (参见 What is sr-only in Bootstrap 3?)

<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到当前步骤