Сейчас я работаю над доступностью. Форма, над которой я работаю, разбита на шаги. Каждый шаг находится в шаблоне, когда я перехожу с шага 6 на шаг 7, JAWS не читает элемент <h1>.
На изображении выше 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> tabindex 0. это плохой совет по доступности. табуляцией должны быть только интерактивные элементы. пользователей программ чтения с экрана сбивает с толку переход к элементу, с которым невозможно взаимодействовать. Средству чтения с экрана легко перейти к статическому тексту, который является заголовком, с помощью клавиши «H».
так это одностраничное приложение (спа)? у вас проблема только между шагами 6 и 7 или на каждом шаге? Я предполагаю, что каждый шаг будет иметь свой собственный h1 (или должен). это помогло бы (мне), если бы вы разместили сгенерированный html без всех фигурных скобок (которые, как я предполагаю, взяты из сторонней библиотеки)
@slugolicious да, каждый шаг имеет свои собственные заголовки <h1>
Нет, проблема только с шага 6 по шаг 7. Все остальные шаги скринера читают <h1>, но только на шаге 7 - нет.
Если другие шаги работают, чем отличается №7? другие шаги выглядят как №7 (вопрос, описание, метка поля и поле ввода)? не стесняйтесь обращаться ко мне напрямую в автономном режиме, чтобы сообщить все подробности, затем вы можете обновить свой вопрос, добавив соответствующую информацию, и ответ можно будет опубликовать. см. мой профиль по электронной почте.






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