Программа чтения с экрана IE JAWS пропускает содержимое <h1>

Сейчас я работаю над доступностью. Форма, над которой я работаю, разбита на шаги. Каждый шаг находится в шаблоне, когда я перехожу с шага 6 на шаг 7, JAWS не читает элемент <h1>.

Программа чтения с экрана IE JAWS пропускает содержимое &lt;h1&gt;

На изображении выше JAWS переходит от шага 6 к «Включая вас, сколько людей в вашем доме», который является тегом <label>. Подумывал добавить атрибут aria. Каков наилучший подход, чтобы программа чтения с экрана не начинала просматривать эту страницу с

<label class = "c-question__label" for = "household-members">{{ __('Including you, how many people are in your household?', 'accessnyc-screener') }}</label>

Вот код:

<fieldset class = "{{ styles.fieldset }}" id = "step-7" data-track-key = "Screener Step: 7"
  data-track-data='[{"WT.si_n": "ScreeningHH"},{"WT.si_p": "7-NumOfHHMembers"}]'>
  <div class = "{{ styles.padding }}">
    <div data-js = "step-title" class = "{{ styles.number }}">{{ __('Step 7 of 10', 'accessnyc-screener') }}</div>

    <h1 class = "{{ styles.heading }}">{{ __('Tell us about your household.', 'accessnyc-screener') }}</h1>

    <div class = "c-question">
      <label class = "c-question__label" for = "household-members">{{ __('Including you, how many people are in your household?', 'accessnyc-screener') }}</label>

      <p>{{ __('This is usually family members who you both live with and share important resources like food and bills. Only count your roommates if you often buy and prepare food together.', 'accessnyc-screener') }}</p>

      <label class = "c-question__label" for = "household-members">{{ __('Number of People (max. 8)', 'accessnyc-screener') }}</label>
      <div class = "c-question__container" data-js = "question">
        <input id = "household-members" type = "number" name = "Household.members" data-type = "integer" min = "1" max = "8" required value = "1">
      </div>
    </div>

    <div class = "pt-2">
      <a class = "btn btn-primary btn-next btn-small js-screener-validate-step" href = "#step-8" role = "button">{{ __('Continue', 'accessnyc-screener') }}</a>
    </div>
  </div>
</fieldset>{# /#step-7 #}

Как лучше всего это исправить?

присвойте элементу h1 значение Id или tabindex, равное 0. Используйте инструмент f12 для просмотра клиентского источника, а не angular. В Edge есть инструмент Aria, который может отображать элементы aria на странице.

Rob Parsons 25.08.2018 23:19

сделать нет присвоить <h1> tabindex 0. это плохой совет по доступности. табуляцией должны быть только интерактивные элементы. пользователей программ чтения с экрана сбивает с толку переход к элементу, с которым невозможно взаимодействовать. Средству чтения с экрана легко перейти к статическому тексту, который является заголовком, с помощью клавиши «H».

slugolicious 28.08.2018 06:14

так это одностраничное приложение (спа)? у вас проблема только между шагами 6 и 7 или на каждом шаге? Я предполагаю, что каждый шаг будет иметь свой собственный h1 (или должен). это помогло бы (мне), если бы вы разместили сгенерированный html без всех фигурных скобок (которые, как я предполагаю, взяты из сторонней библиотеки)

slugolicious 28.08.2018 06:28

@slugolicious да, каждый шаг имеет свои собственные заголовки <h1>

Steven Aguilar 28.08.2018 15:28

Нет, проблема только с шага 6 по шаг 7. Все остальные шаги скринера читают <h1>, но только на шаге 7 - нет.

Steven Aguilar 28.08.2018 19:30

Если другие шаги работают, чем отличается №7? другие шаги выглядят как №7 (вопрос, описание, метка поля и поле ввода)? не стесняйтесь обращаться ко мне напрямую в автономном режиме, чтобы сообщить все подробности, затем вы можете обновить свой вопрос, добавив соответствующую информацию, и ответ можно будет опубликовать. см. мой профиль по электронной почте.

slugolicious 30.10.2018 16:26
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
6
610
1

Ответы 1

Пока вы не используете сценарии для перемещения фокуса куда-нибудь после заголовка H1, это звучит так, как будто JAWS ведет себя странно, что иногда и происходит. Пока вы обслуживаете совместимый со стандартами HTML, не пытайтесь работать над ошибками во вспомогательных технологиях, иначе вы поджарите себе мозг.

Другие вопросы по теме