Чтобы программа чтения с экрана могла представить пользователю голосовой пользовательский интерфейс, значимые элементы должны иметь соответствующие метки или текстовые альтернативы. Альтернатива метки или текста дает элементу его доступное имя , одно из ключевых свойств для выражения семантики элемента в дереве доступности .
Когда имя элемента объединяется с ролью элемента, оно предоставляет пользователю контекст, позволяющий ему понять, с каким типом элемента он взаимодействует и как он представлен на странице. Если имя отсутствует, программа чтения с экрана только объявляет роль элемента. Представьте себе, что вы пытаетесь перемещаться по странице и слышите слова «кнопка», «флажок», «изображение» без какого-либо дополнительного контекста. Вот почему альтернативные варианты маркировки и текста имеют решающее значение для хорошего и доступного опыта.
Проверьте имя элемента
Доступное имя элемента легко проверить с помощью DevTools Chrome:
- Щелкните правой кнопкой мыши элемент и выберите «Проверить» . Откроется панель «Элементы DevTools».
- На панели «Элементы» найдите панель «Доступность» . Оно может быть скрыто за символом
». - В раскрывающемся списке «Вычисляемые свойства» найдите свойство «Имя» .
Независимо от того, смотрите ли вы на img с alt текстом или на input с label , все эти сценарии приводят к одному и тому же результату: присвоению элементу доступного имени.
Проверьте недостающие имена
Существуют разные способы добавления доступного имени к элементу в зависимости от его типа. В следующей таблице перечислены наиболее распространенные типы элементов, которым требуются доступные имена, и ссылки на объяснения того, как их добавлять.
| Тип элемента | Как добавить имя |
|---|---|
| HTML-документ | Маркировка документов и кадров |
Элементы <frame> или <iframe> | Маркировка документов и кадров |
| Элементы изображения | Включите текстовые альтернативы для изображений и объектов. |
Элементы <input type="image"> | Включите текстовые альтернативы для изображений и объектов. |
элементы <object> | Включите текстовые альтернативы для изображений и объектов. |
| Кнопки | Маркировка кнопок и ссылок |
| Ссылки | Маркировка кнопок и ссылок |
| Элементы формы | Элементы формы этикетки |
Маркировка документов и кадров
Каждая страница должна иметь элемент title , который кратко объясняет, о чем эта страница. Элемент title дает странице доступное имя. Когда программа чтения с экрана входит на страницу, это первый текст, который объявляется.
Например, страница ниже имеет заголовок «Рецепт быстрой выпечки кленовых батончиков Мэри»:
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Аналогично, любые элементы frame или iframe должны иметь атрибуты title :
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Хотя содержимое iframe может содержать собственный внутренний элемент title , программа чтения с экрана обычно останавливается на границе фрейма и объявляет роль элемента — «фрейм» — и его доступное имя, предоставляемое атрибутом title . Это позволяет пользователю решить, хотят ли они войти в фрейм или обойти его.
Включите текстовые альтернативы для изображений и объектов.
img всегда должен сопровождаться атрибутом alt , чтобы дать изображению доступное имя. Если изображение не загружается, alt текст используется в качестве заполнителя, чтобы пользователи могли понять, что пытается передать изображение.
Написание хорошего alt текста — это своего рода искусство, но есть несколько правил, которым вы можете следовать:
- Определите, содержит ли изображение контент, который в противном случае было бы трудно получить, читая окружающий текст.
- Если да, то передайте содержание как можно более кратко.
Если изображение действует как украшение и не содержит никакого полезного контента, вы можете присвоить ему пустой атрибут alt="" , чтобы удалить его из дерева доступности.
Изображения как ссылки и входные данные
Изображение, заключенное в ссылку, должно использовать атрибут alt img , чтобы описать, куда пользователь перейдет, если нажмет на ссылку:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
Аналогично, если элемент <input type="image"> используется для создания кнопки с изображением, он должен содержать alt текст, описывающий действие, которое происходит, когда пользователь нажимает на кнопку:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
Встроенные объекты
Элементы <object> , которые обычно используются для встраивания таких файлов, как Flash, PDF или ActiveX, также должны содержать альтернативный текст. Подобно изображениям, этот текст отображается, если элемент не удается отобразить. Альтернативный текст помещается внутри элемента object как обычный текст, например «Годовой отчет» ниже:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Маркировка кнопок и ссылок
Кнопки и ссылки часто имеют решающее значение для удобства работы с сайтом, и важно, чтобы у них обоих были хорошие и доступные имена.
Кнопки
Элемент button всегда пытается вычислить доступное имя, используя его текстовое содержимое. Для кнопок, которые не являются частью form , написание четкого действия в качестве текстового содержимого может быть всем, что вам нужно для создания хорошего доступного имени.
<button>Book Room</button>
Одним из распространенных исключений из этого правила являются кнопки со значками. Кнопка со значком может использовать изображение или шрифт значка для предоставления текстового содержимого кнопки. Например, кнопки, используемые в редакторе «Что видишь, то и получаешь» (WYSIWYG) для форматирования текста, обычно представляют собой просто графические символы:
При работе с кнопками со значками может оказаться полезным дать им явное доступное имя с помощью атрибута aria-label . aria-label переопределяет любое текстовое содержимое внутри кнопки, позволяя четко описать действие любому, кто использует программу чтения с экрана.
<button aria-label="Left align"></button>
Ссылки
Подобно кнопкам, ссылки в первую очередь получают свое доступное имя из текстового содержимого. Хороший трюк при создании ссылки — поместить в саму ссылку наиболее значимый фрагмент текста, а не слова-наполнители, такие как «Здесь» или «Читать дальше».
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Это особенно полезно для программ чтения с экрана, которые предлагают ярлыки для вывода списка всех ссылок на странице. Если ссылки полны повторяющегося текста-заполнителя, эти ярлыки становятся гораздо менее полезными:
Элементы формы этикетки
Существует два способа связать метку с элементом формы, например с флажком. Любой из методов приводит к тому, что текст метки также становится целью щелчка для флажка, что также полезно для пользователей мыши или сенсорного экрана. Чтобы связать метку с элементом, выполните одно из следующих действий:
- Поместите элемент ввода внутри элемента метки.
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- Или используйте атрибут метки
forи обратитесь кidэлемента.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Если флажок помечен правильно, программа чтения с экрана может сообщить, что элемент выполняет роль флажка, находится в отмеченном состоянии и называется «Получать рекламные предложения?». как в примере VoiceOver ниже:
TODO: DevSite — подумайте и проверьте оценку