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”类）全部完成了。应该将相同的上下文传达给屏幕阅读器。空心圆（“处于活动状态”）与aria-current属性一起传递。使用“仅sr”类型类为屏幕阅读器添加文本。（请参见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”文本
将aria-current添加到当前步骤

Answer 2

您的所有内容看起来都不是可聚焦的。我在角度应用程序中也遇到过类似情况，该应用程序可与JAWS，NVDA和VoiceOver完美配合。您可以做的就是将标记包装在“ div”容器中，然后按屏幕显示特定于内容的内容。

<div>
  <span class="sr-only">Step 3 of 5: Summary text explaining this step to the user</span>
   ...
</div>

“仅sr”类将副本从可视UI中隐藏，但允许屏幕阅读器在可访问的树中“查看”它。

.sr-only {
border: none;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;

}

仅使内容可用于当前处于活动状态的步骤很重要。

希望这会有所帮助。

Answer 3

我不同意以前添加到该问题的答案。

识别当前步骤的正确方法是使用aria-current="step" 。

虽然aria-current="page"有效，但可以在一组链接中使用（例如，面包屑小部件或分页小部件）。我强烈建议您详细了解aria-current attribute，包括其可能的值以及何时使用它。您的示例如下所示：

<ol>
  <li>Step 1 ... </li>
  <li>Step 2 ... </li>
  <li aria-current="step">Step 3...</li>
  <li>Step 4 ... </li>
  <li>Step 5 ... </li>
</ol>

注意：我还建议您使用<ol>而不是<ul>，因为此步骤列表具有顺序。

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

3 个答案: