Если HTML-элемент имеет role="button", он также должен иметь атрибут "name"
Если HTML5 <div> элемент требует role="button" атрибут для обеспечения успеха в аудите доступности (Критерий успеха 4.1.2 [Имя, Роль, Значение].. div действует как кнопка в пользовательском интерфейсе), требует ли он также действительного name атрибут (который обычно будет недействительным HTML5 для div).
Если ответ "нет" - какой еще дружественный атрибут доступности я могу добавить, чтобы описать кнопку div и соответствовать критериям? Просто title атрибут или aria-label?
3 ответа
Я думаю, что первоначальный вопрос возник из-за некоторой путаницы в том, что означает "имя" в "WCAG 4.1.2 Имя, Роль, Значение".
Атрибут name= действительно недействителен для <div>, Имя = используется для именования объекта, чтобы на него можно было ссылаться в javascript. Это не имеет ничего общего с доступностью.
"Имя" в 4.1.2 относится к тому, как объект будет вызываться программой чтения с экрана и другими вспомогательными технологиями. Для кнопок это обычно текст, который отображается на кнопке. Для полей ввода это обычно метка для поля. Если у тебя есть <div>затем, как отмечают другие, aria-label это как бы вы назвали объект.
Когда фокус направлен на объект, большинство программ чтения с экрана будут читать имя / метку объекта, роль (кнопка, флажок, поле со списком, таблица и т. Д.), А также значение или состояние объекта, если необходимо (ввод, поле со списком, флажок статус).
Эти три фрагмента информации быстро выясняются на глаз и, по сути, дают вам всю необходимую информацию об объекте. Та же самая информация должна быть передана вспомогательным технологиям.
name атрибут не существует для <div> и не может быть добавлено.
Тебе понадобится aria-label предоставить доступное имя.
Однако, если вы просто пытаетесь получить пропуск на SC 4.1.2, то вы, вероятно, подошли к этому неправильно. На самом деле, если вы не можете проверить aria-label в программе чтения с экрана, чтобы убедиться, что она работает так, как вы хотите, тогда вы пишете контрольный список, а не помогаете пользователям.
Если это так, то вам, вероятно, следует отказаться от <div role="button"> и вместо этого начните с самого правильного элемента для работы.
Хорошее практическое правило - никогда не ставить себя в ситуацию, когда вы меняете семантику элемента по умолчанию (через role).
Уже есть три элемента, которые могут делать то, что вы хотите в первую очередь. В отсутствие контекста для вашего вопроса, некоторые общие советы о том, когда использовать <a href> по сравнению с <button> или же <input type="submit">:
- Если пользователь переходит на новую страницу (или привязку к странице), используйте
<a href>( спец) - Если пользователь меняет состояние на текущей странице, используйте
<button>( спец) - Если пользователь отправляет форму, используйте
<input type="submit">или же<button type="submit">( спец)
Я предупреждаю против изменения роли по умолчанию элемента с role атрибут, поскольку это может в конечном итоге вызвать некоторую путаницу и потенциально конфликт для некоторых вспомогательных технологий. Они также нарушают первое и второе правила использования ARIA.
Также учтите опыт работы с клавиатурой. Если все, что вы делаете, это изменить role элемента, то вы также должны предоставить все сценарии, чтобы позволить ему вести себя как новый элемент.
Гиперссылка (<a href>) можно запустить, нажав клавишу ввода. Но это правда <button> может быть запущен нажатием клавиши ввода или пробела. Когда гиперссылка имеет фокус и пользователь нажимает клавишу пробела, страница прокручивается на один экран. Пользователи некоторых вспомогательных технологий будут ожидать поведения в зависимости от используемого элемента.
Я думаю, что также стоит упомянуть, что события, запускаемые пробелом, запускаются только при отпускании клавиши, тогда как использование клавиши Enter запускает событие, как только вы нажимаете клавишу (до ее отпускания).
Поэтому начните с правильного элемента для задачи, используя приведенный выше список, а затем стилизуйте его так, как вам хочется.
Атрибут name не может быть добавлено.
Кнопки всегда должны иметь доступное имя. Для большинства кнопок это имя будет таким же, как и текст внутри кнопки. В некоторых случаях, например, для кнопок со значками, доступное имя может быть предоставлено через атрибут aria-label или aria-labelledby.
Пожалуйста, обратитесь более подробно здесь: Использование кнопки Роль