使屏幕阅读器可以访问步骤进度指示器 [英] Making a step progress indicator accessible for screen readers

问题描述

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

像这样:

这是一个无序列表的 HTML 列表.

 
<li class="progress-step is-complete"><span class="progress-marker"></span><span class="progress-text"><h4 class="progress-title">步骤 1</h4>向用户解释此步骤的摘要文本</span><li class="progress-step is-complete"><span class="progress-marker"></span><span class="progress-text"><h4 class="progress-title">步骤 2</h4>向用户解释此步骤的摘要文本</span><li class="progress-step is-active"><span class="progress-marker"></span><span class="progress-text"><h4 class="progress-title">步骤 3</h4>向用户解释此步骤的摘要文本</span><li class="progress-step"><span class="progress-marker"></span><span class="progress-text"><h4 class="progress-title">步骤 4</h4>较短的摘要文本</span><li class="progress-step"><span class="progress-marker"></span><span class="progress-text"><h4 class="progress-title">步骤 5</h4>较短的摘要文本</span>

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

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

解决方案

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

如果进度指示器是交互式的，则将整个内容包含在

元素中.您的进度指示器类似于面包屑路径.<nav> 还应该有一个 aria-label 和流程中的当前步骤应该有 aria-current.所以它可能看起来像:

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

但是，您的代码片段不包含任何链接，所以我猜您的进度指示器是静态的而不是交互式的.在这种情况下，不要使用

，因为您无法使用指示器进行导航，但您仍然可以将元素组合在一起.使用无序列表是一种分组方式，但有时屏幕阅读器不会读取列表上的 aria-label.

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

<ul><li>...

(基本上将第一个示例中的

替换为

.

由于您的进度指示器是一系列步骤，因此使用有序列表

将获得更好的语义信息.您可以设置列表样式，以便不显示 <ol> 的默认数字(类似于您不使用 <ul> 显示项目符号点的方式).

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

<ol class="progress-tracker progress-tracker--text progress-tracker--center"><li class="progress-step is-complete"><span class="sr-only">已完成</span>...<li class="progress-step is-complete"><span class="sr-only">已完成</span>...<li class="progress-step is-active" aria-current="true">...<li class="progress-step"><span class="sr-only">未完成</span>......</ol>

总而言之，您需要进行的最小更改是:

• 也许从
  切换到
  1. 将sr-only"文本添加到已完成"和未完成"项目
  2. 将 aria-current 添加到当前步骤

  I often need to use a step indication to display the step the user is on, or the progress of a package in transit, etc.

  Like this:

  This is made up of an unordered HTML list.

          <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>
  

  Assuming a new list is loaded on each page (i.e. "step"), is there a way to adapt this for screen readers/assistive technology?

  It would be nice to have the reader read the current step to the user, at least.

  解决方案

  Are the steps static or can the user click on a previous step to go back?

  If the progress indicator is interactive, then enclose the whole thing in a <nav> element. Your progress indicator would be similar to a breadcrumb trail. The <nav> should also have an aria-label and the current step in the process should have aria-current. So it might look something like:

  <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>
  

  However, your code snippet didn't include any links so I'm guessing your progress indicator is static and not interactive. In that case, don't use a <nav>, because you can't navigate with your indicator, but you could still group the elements together. Having an unordered list is a type of grouping, but sometimes a screen reader will not read the aria-label on a list.

  <ul aria-label="progress">
  

  You could work around the issue by having:

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

  (essentially replacing the <nav> in the first example with <div role="group">.

  Since your progress indicator is a series of steps, using an ordered list <ol> would have better semantic information. You can style the list so the default numbers of a <ol> are not displayed (similar to how you're not showing bullet points with the <ul>).

  And finally, I would add some "hidden" text for the screen reader to say if the step is completed or not. Visually, you have blue circles for completed steps, an open circle for the active step, and gray circles for not completed. That's all done with CSS (your "is-complete" and "is-active" classes). That same context should be conveyed to screen readers. The open circle ("is-active") is conveyed with the aria-current attribute. Use a "sr-only" type class to add text for a screen reader. (See 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>
  

  In summary, the minimal changes you need are to:

  • maybe switch from <ul> to <ol>
  • add "sr-only" text to the "completed" and "not completed" items
  • add aria-current to the current step

  这篇关于使屏幕阅读器可以访问步骤进度指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！