Сделать индикатор прогресса шага доступным для программ чтения с экрана

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

Не похоже, что любой ваш контент является фокусируемым.У меня была похожая ситуация, которую я поставил в нашем угловом приложении, которое прекрасно работает с JAWS, NVDA и VoiceOver.Что вы можете сделать, это обернуть вашу разметку в контейнер div и контент для чтения с экрана, подобный этому.

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

Класс 'sr-only' скрывает копию от визуального интерфейса, но допускает средства чтения с экрана.чтобы «увидеть» его в доступном дереве.

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

}

Важно сделать доступным только содержимое для шага, который в данный момент активен.

Надеюсь, что этопомогает.

Answer 2

Являются ли шаги статичными или пользователь может щелкнуть по предыдущему шагу, чтобы вернуться назад?

Если индикатор прогресса является интерактивным, тогда заключите все это в элемент <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>

Однако в вашем фрагменте кода нет ссылок, поэтому я предполагаю, что индикатор прогресса статичен и не интерактивен.В этом случае не используйте <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-active "). Тот же контекст должен передаваться программам чтения с экрана. Открытый круг (" is-active ") передается с атрибутом aria-current. Используйте тип" sr-only "cПрошу добавить текст для чтения с экрана.(См. Что такое sr-only в 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 к текущему шагу