Для того, чтобы программа чтения с экрана могла представить пользователю голосовой пользовательский интерфейс, значимые элементы должны иметь соответствующие метки или текстовые альтернативы. Метка или текстовая альтернатива дает элементу его доступное имя , одно из ключевых свойств для выражения семантики элемента в дереве доступности .
Когда имя элемента сочетается с ролью элемента, оно дает пользователю контекст, чтобы он мог понять, с каким типом элемента он взаимодействует и как он представлен на странице. Если имя отсутствует, то экранный диктор только объявляет роль элемента. Представьте себе, что вы пытаетесь перемещаться по странице и слышите «кнопка», «флажок», «изображение» без какого-либо дополнительного контекста. Вот почему маркировка и текстовые альтернативы имеют решающее значение для хорошего, доступного опыта.
Проверить имя элемента
Проверить доступное имя элемента легко с помощью DevTools в Chrome:
- Щелкните правой кнопкой мыши по элементу и выберите Inspect . Откроется панель DevTools Elements.
- На панели «Элементы» найдите панель «Доступность ». Она может быть скрыта за символом
» - В раскрывающемся списке «Вычисляемые свойства» найдите свойство «Имя» .
Независимо от того, смотрите ли вы на 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>
Одним из распространенных исключений из этого правила являются кнопки-иконки. Кнопка-иконка может использовать изображение или шрифт-иконку для предоставления текстового содержимого кнопки. Например, кнопки, используемые в редакторе What You See Is What You Get (WYSIWYG) для форматирования текста, обычно представляют собой просто графические символы:
При работе с кнопками-значками может быть полезно дать им явное доступное имя с помощью атрибута aria-label . aria-label переопределяет любое текстовое содержимое внутри кнопки, позволяя четко описать действие любому, кто использует программу чтения с экрана.
<button aria-label="Left align"></button>
Ссылки
Подобно кнопкам, ссылки в первую очередь получают свое доступное имя из своего текстового содержимого. Хороший трюк при создании ссылки — поместить наиболее значимый фрагмент текста в саму ссылку, а не слова-заполнители вроде «Здесь» или «Подробнее».
Check out our guide to web performance <a href="/https/web.developers.google.cn/guide">here</a>.
Check out <a href="/https/web.developers.google.cn/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 ниже:
