От автора: одна вещь, которую вы можете сделать для улучшения доступности вашего проекта — это всегда обеспечивать доступность имен. Уникальные и полезные имена, в идеале, чтобы их можно было использовать для навигации. В этом посте я объясню, как браузеры выбирают имена для ссылок, полей форм, таблиц и групп форм.
Дерево доступности
Когда пользователь заходит на ваш сайт, сервер отправляет в браузер разметку. Она превращается в деревья. Мы, наверное, все знакомы с деревом DOM, интерактивным представлением разметки, где все узлы превращаются в объекты, для которых мы можем считывать свойства и выполнять всевозможные функции.
Многие люди не знают, что есть еще одна структура, которую может генерировать браузер: дерево доступности. Оно основано на дереве DOM и содержит все мета-данные доступности: роли, имена и свойства. Другими словами: дерево доступности — это то, как ваша страница воспринимается вспомогательными технологиями.
Вспомогательные технологии
Вспомогательные технологии (AT) — это общий термин для обозначения всех видов инструментов, которые люди используют для улучшения своего доступа к вещам. Для компьютеров и Интернета они включают в себя:
альтернативные указательные устройства, такие как мышь, которая прикрепляется к голове пользователя
экранные лупы, они увеличивают экран
брайлевские полосы, они превращают то, что отображается на экране, в шрифт Брайля
экранные дикторы, они зачитывают то, что отображается на экране, пользователю
Всем этим инструментам, чтобы работать эффективно, необходимо знать, что происходит на экране. Чтобы выяснить это, они получают доступ к API платформы, встроенным во все основные платформы, включая Windows, Mac и Linux. API могут отображать все в операционной системе, поэтому они знают о таких вещах, как панель запуска, док-станция или кнопка возврата браузера. Но одна вещь, о которой они не знают, это веб-сайты, к которым вы обращаетесь. У них не может быть в наличии семантической структуры каждого веб-сайта, поэтому они полагаются на посредника — вот где в игру вступает дерево доступности. Оно описывает структуру веб-сайта. Как я уже сказал, оно основано на DOM, который основан на нашей разметке.
Удобная блок-схема
Дерево доступности описывает роли (это хэдер, футер, кнопка, панель навигации?), имена (я расскажу о них чуть позже), свойства (открыто или закрыто гамбургер-меню, установлен флажок или нет и так далее) и ряд других вещей.
Если вы хотите посмотреть, как это выглядит на выбранном вами сайте, взгляните на панель специальных возможностей в инструментах разработчика Firefox или информационные поля специальных возможностей в инструментах для разработчиков Chrome, Safari Tech Preview или Edge.
Вычисление доступного имени
Имена — это одна из вещей, которую дерево доступности описывает для своих объектов. Имена берутся из разметки. Есть много аспектов, которые могут повлиять на это. Если вы хотите узнать об этом больше, ознакомьтесь со Спецификацией вычисления доступного имени и описания.
Уникальные имена помогают различать вещи
Прежде чем углубляться в описание имен, давайте рассмотрим, какие имена нам нужны. Какие имена имеют решающее значение в плане доступности.
Что если в вашей семье четыре кошки, и каждая из них зовется «Алиса»? Это было бы невероятно непрактично, поскольку это затруднило бы общение. «Алису уже покормили?» — спросите вы. «Алиса снаружи?». Неоднозначность непрактична. Тем не менее, это то, что мы делаем, когда на главной странице у нас есть четыре новости, для каждой из которых в качестве текста ссылки значится «Читать дальше».
Представьте, что все ваши кошки имеют кличку Алиса (фото: stratman2 на Flickr)
Это очень распространено, к сожалению. В проекте WebAIM Million, в котором WebAIM просмотрели более миллиона сайтов и провели автоматические исследования доступности, они пришли к выводу: 24,4% страниц имели ссылки с неоднозначным текстом ссылки, например, «нажмите здесь», «еще», «продолжить» и т. д.
Повторное использование «Читать дальше» в качестве текста ссылки для каждого элемента новости упрощает управление кодом и контентом, но обеспечивает плохое удобство использования для пользователей программ чтения с экрана. Когда они используют метки ссылки для просмотра ссылок на странице, они не знают, куда ведет каждая ссылка. В приведенном выше примере, когда вы просите AT прочитать все ссылки, она будет читать «Ссылка Читать дальше, Ссылка Читать дальше, Ссылка Читать дальше, Ссылка Читать дальше».
Именование элементов
Таким образом, уникальные и описательные имена полезны для пользователей AT. Давайте посмотрим, какой HTML может помочь нам предоставить имена. Как я уже говорил, эвристика для определения имен входит в спецификацию, но для большинства вещей можно довольно просто предоставить имена с помощью только HTML. Следующий раздел в основном будет полезен для людей, чей HTML неидеален в данном аспекте.
Ссылки
Содержимое <a> элемента обычно становится доступным именем. Итак, в:
<a href="/win-a-prize">Win a prize</a>
доступное имя будет вычисляться как «Win a prize».
Если есть только изображение, его альтернативный текст также можно использовать:
<a href="/win-a-prize"><img src="prize.png" alt="Win a prize" /></a>
И, чтобы внести ясность, если ничего не указано, имя будет null или пустая строка, поэтому некоторые люди не смогут выиграть приз.
Поля формы
Поля формы помечаются с помощью элемента label. В вышеупомянутом исследовании WebAIM также обнаружили, что: 59% полей ввода форм не были должным образом помечены.
Давайте посмотрим, как может выглядеть ошибка метки:
<div>Email</div> <!-- не делайте так--> <input type="email" id="email" />
В этом примере слово «Email» указано прямо перед полем ввода, поэтому часть пользователей может визуально решить, что они связаны друг с другом. Но они не связаны, поэтому поле ввода не будет иметь имени — в дереве доступности оно будет вычисляться как null или ».
Их можно связать либо обернув поле ввода в элемент label, либо с помощью атрибута for, который соответствует атрибуту id поля ввода:
<label for="email">Email</label> <!-- do this--> <input type="email" id="email" />
Таблицы
Чтобы задать имя таблице, вы можете использовать ее элемент caption. Он используется как первый элемент в table.
Группы в форме
В формах иногда требуется сгруппировать набор полей ввода, например, набор переключателей или чек-боксов, которые отвечают на один и тот же вопрос. HTML имеет элемент fieldset для группировки элементов формы. Чтобы задать имя для этой группы в целом, используйте элемент legend:
<fieldset> <legend>Don't you love HTML?</legend> <input type="radio" name="yesno" id="yes"/> <label for="yes">Yes</label> <input type="radio" name="yesno" id="no"/> <label for="no">No</label> </fieldset>
Если вы теперь проверите этот набор полей в дереве доступности, то увидите, что группа называется «Don’t you love HTML?».
А что насчет ARIA?
Те, кто знаком со Спецификацией вычисления доступных имен и описаний, могут задаться вопросом: разве ARIA не позволяет нам задавать для элементов доступные имена? Совершенно верно, например, через атрибуты aria-label / aria-labelledby. При добавлении к элементу они перезаписывают доступное имя (если оно было).
Но есть веские причины отдавать предпочтение стандартным тегам HTML перед ARIA:
лучшая поддержка браузеров (многие браузеры поддерживают большинство ARIA, но все поддерживают весь HTML)
большая вероятность понимания нынешними или будущими членами команды, которые не обладают всеми навыками ARIA
менее вероятно, что о нем забудут при выполнении таких вещей, как интернационализация
Иногда ARIA может пригодиться, например, если элемент не очень хорошо сочетается с CSS (например, если вы хотите использовать Grid Layout для fieldset), или если ваша (клиентская) CMS очень негибкая.
Разметка имеет значение
В современных браузерах наша разметка становится деревом доступности, которое в конечном итоге сообщает, как выглядит интерфейс для вспомогательных технологий. Не имеет большого значения, написали ли вы эту разметку:
в файле .html
в Twig, Handlebars или Nunjucks
как template в одном компоненте файла Vue
экспортировали в JSX для компонента React
вывели через странную устаревшую CMS
Не важно, как вы вывели эту разметку — важно, какая это разметка. Вероятно, на вашем сайте уже используются все вышеперечисленные HTML-элементы, которые именуют вещи. Они существуют уже много лет. Но я надеюсь, что этот пост объясняет, почему стоит приложить все усилия, чтобы всегда обеспечивать наличие в коде полезных имен для вспомогательных технологий. С точки зрения разметки назначать имена всем вещам на нашем сайте несложно, здесь есть два аспекта. Контент (придумать полезные и различимые имена) и технологии (можем ли мы гарантировать, что правильная разметка попадет в DOM пользователя).
Автор: Hidde de Vries
Источник: https://hiddedevries.nl
Редакция: Команда webformyself.