Правила использования ARIA в HTML
The Web Accessibility Initiative’s Accessible Rich Internet Applications Suite (WAI-ARIA, или просто ARIA) — это набор инструментов и указаний для того, чтобы сделать веб-контент и приложения более доступными.
В частности, он включает в себя набор атрибутов, которые мы можем добавлять к HTML-элементам для придания им семантической информации, которая может быть прочитана с помощью специальных возможностей (assistive technologies).
Хотя ARIA может быть достаточно полезной, нам стоит быть осторожными в вопросах, как и когда её использовать. Вот 5 правил, которые необходимо учитывать при использовании ARIA в HTML.
1. Используйте семантический HTML в пользу ARIA
Если вы вы можете использовать нативный HTML-элемент или атрибут с заложенными семантическим значением и поведением, используйте его вместо того, чтобы добавлять ARIA-роли, состояния или свойства для того, чтобы сделать его доступным.
Правило номер один — не пытайтесь использовать ARIA, если в этом нет необходимости. HTML5 предоставляет нам широкий спектр семантических элементов.
Поэтому, по возможности, нам стоит использовать семантический HTML-элемент, а не ARIA-атрибут.
Вместо того, чтобы создавать
Нам следует использовать элемент :
2. Не изменяйте значения семантических элементов ARIA-ролями
Не изменяйте нативную семантику элемента, если вам это не необходимо.
Вместо переопределения семантического значения элемента, нам следует использовать соответствующий элемент:
Или, в крайнем случае, мы можем добавить ARIA-роль к элементу, который не несет такого смысла.
3. Интерактивные элементы ARIA должны быть доступны для всех сред
Все интерактивные элементы управления ARIA должны быть пригодны для работы с клавиатуры.
Недостаточно использовать ARIA-роль на элементе, чтобы по-настоящему изменить его роль. Если мы попытаемся изменить, например,
В руководстве ARIA имеется список возможностей, которые должен иметь каждый элемент. Например, настоящая кнопка должна удовлетворять следующим требованиям:
При использовании ARIA-ролей нам необходимо учитывать эти требования. Создание элемента похожего на кнопку — не делает его кнопкой. Нам нужно учитывать, как пользователи во всех средах взаимодействуют с элементом.
4. Используйте соответствующие роли для видимых фокусируемых элементов
Не используйте role=»presentation» или aria-hidden=»true» на видимых фокусируемых элементах.
ARIA-атрибут role=»presentation» подразумевает, что элемент предназначен для визуального взаимодействия и не является интерактивным. Атрибут aria-hidden=»true» говорит о том, что элемент не должен быть видим. Когда мы используем эти атрибуты, нам нужно знать, к каким элементам они применяются и являются ли эти элементы видимыми и интерактивными. Например, обе эти кнопки приведут к тому, что некоторые пользователи будут фокусироваться на элементе, который для них не существует.
Эти атрибуты должны применяться только к элементам, которые не являются интерактивными или являются невидимыми.
5. Интерактивные элементы должны иметь Доступное описание
Все интерактивные элементы должны иметь Доступное описание.
Элементы, с которыми можно взаимодействовать, например кнопки и ссылки, должны иметь «доступное описание».
Доступное описание (accessible name) — имя элемента пользовательского интерфейса.
Очень просто объяснить это на пример кнопки «OK». Текст «OK» — доступное описание (accessible name). (прим. переводчика)
Доступное описание для элемента может быть указано в зависимости от типа этого элемента. Инпуты в форме, как правило, получают свое Доступное описание из соответствующих им лейблов.
(подробнее).
Другие элементы, например кнопки и ссылки, могу получить своё Доступное описание из их контента или label-атрибута (подробнее).
Методы скрытия элементов веб-страниц
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
Что такое ARIA?
Перевод статьи: Ben Myers — What Is ARIA?
Введение
Не секрет, что сегодняшние сайты становятся все более сложными. Веб-страницы теперь больше напоминают динамические, живые приложения. Разработчики комбинируют и оформляют элементы HTML для создания новых пользовательских интерфейсов. Однако пользователям с ограниченными возможностями может быть непросто разобраться в этом новом мире.
Одним из инструментов, разработанных для решения этой проблемы, является ARIA. Сокращенно от Accessible Rich Internet Applications (Доступные многофункциональные интернет-приложений), ARIA — это подмножество атрибутов HTML (обычно с префиксом aria-), которые изменяют то, как вспомогательные программы, такие как программы чтения с экрана, распознают ваши страницы.
К сожалению, разработчики часто неправильно понимают ARIA и применяют ее неправильно, что ведет к ухудшению работы пользователей с ограниченными возможностями. В 2017 году ресурс веб-доступности WebAIM сообщил:
Когда WebAIM оценивает веб-сайты клиентов на предмет доступности, мы часто тратим больше времени на оценку и составление отчетов об использовании ARIA, чем на любую другую проблему. Почти каждый отчет, который мы создаем, содержит раздел, предупреждающий о злоупотреблении ARIA и описывающий использование ARIA, которые необходимо исправить или, чаще всего, удалить.
Самый сильный индикатор того, что страница будет иметь множество ошибок доступности, — это наличие ARIA. Страницы с ARIA имеют на 65% больше проблем, чем без него. И это становится все хуже. Это ОЧЕНЬ тревожно!
Отчет WebAIM показывает нам, что более сложные страницы и использование библиотек и структур могут привести как к большему количеству ситуаций, требующих ARIA, так и к большему количеству ошибок. Таким образом, кажется, что у разработчиков нет понимания того, что такое ARIA и как ее следует использовать.
Это может быть связано с тем, что существует множество атрибутов ARIA, каждый из которых имеет свои (правда, иногда нишевые) варианты использования. Это так же делать ARIA сложным для понимания.
Кроме того, ARIA не всегда полноценно описывается в документацию по веб-разработке. Кажется что его часто используют для того чтобы сделать элемент «более доступным». Мой друг признался, что скопировал ARIA из примера кода, потому что пример из документации включал его. Но не понимая что именно делает ARIA, разработчики вполне разумно могут предположить, что больше ARIA означает лучшую доступность.
В этой статье я хочу рассказать что такое ARIA, что она делает, почему вы должны ее использовать ее, и когда ее не нужно использовать.
Пересмотр дерева доступности
В моем последнем посте я представил дерево доступности: альтернативный DOM, который браузеры создают специально для вспомогательных программ. Эти деревья доступности описывают страницу в терминах доступных объектов: структуры данных, предоставляемые операционной системой, которые представляют различные виды элементов пользовательского интерфейса и элементы управления, такие как текстовые узлы, checkbox или кнопки.
Доступные объекты описывают элементы пользовательского интерфейса как наборы свойств. Например, свойства, которые могут описывать checkbox, включают:
Мы можем разбить эти атрибуты на четыре типа:
Эти качества охватывают все, что пользователь может захотеть узнать о функции элемента, в то же время пропуская все что связано с внешним видом элемента.
Хорошая разметка означает хорошие деревья
Тем не менее, возможности семантики не без граничны. Иногда нам нужны новые, более сложные операции, которые семантические элементы просто еще не поддерживают, такие как:
Что делать в этих случаях? По-прежнему важно спроектировать весь функционал так, чтобы вспомогательные программы могли все это понять. Во-первых, мы должны реализовать как можно больше с помощью семантической разметки. Затем мы используем атрибуты ARIA, чтобы настроить/подкорректировать дерево доступности.
ARIA не изменяет DOM и не добавляет новую функциональность к элементам. Она никак не изменит поведение элементов. ARIA исключительно управляет представлением элементов в дереве доступности. Другими словами, ARIA используется для изменения роли, имени, состояния и свойств элемента для вспомогательных технологий.
Это прекрасно в теории, но как это работает на практике?
Рассмотрим переключатель
Давай те рассмотрим как работает Aria на примере переключателя (switch):
Если вы нажмете на переключатель, вы активируете темный режим. Нажмите на него еще раз, и вы вернетесь в светлый режим. Переключение должно работать даже с клавиатуры — вы можете перейти к нему и вызвать его, нажав пробел.
Но у этого переключателя есть небольшая проблема. Если вы перейдете к нему с помощью программы чтения с экрана, вы услышите что-то вроде этого:
VoiceOver, просто прочитает «group»
Пользователи программы чтения с экрана не будут знать, что это за элемент, для чего он нужен, и даже то, что он кликабелен. Пользователи других вспомогательных технологий будут также разочарованы. Это то, что в бизнесе называется «проблемой». К счастью, мы можем попытаться исправить это с помощью ARIA. Мы рассмотрим, как ARIA изменяет имена, роли, состояния и свойства, добавляя атрибуты ARIA к этому переключателю.
Если вы хотите использовать код локально, чтобы следовать по нему, вы можете клонировать его из GitHub. Если у вас нет программы для чтения с экрана, выполните следующие действия, чтобы просмотреть дерево доступности вашего браузера.
Прежде всего, как мы можем убедиться, что вспомогательные технологии могут понять, что наш элемент — это переключатель, а не проста группа элементов?
Браузер на самом деле не знает, что делать с нашим переключателем или как лучше всего использовать его для вспомогательных программ. Поскольку наш переключатель — это просто с другим внутри него, лучшим предположением браузера является то, что это общая группа элементов. К сожалению, это не помогает пользователям вспомогательных программ понять, что это за элемент или как им следует взаимодействовать с ним.
Мы можем помочь браузеру, предоставив нашему переключателю атрибут role. role может принимать множество возможных значений, таких как button, link, slider или table. Некоторые из этих значений имеют соответствующие семантические элементы HTML, но некоторые нет.
Мы хотим выбрать роль, которая лучше всего описывает наш элемент как переключатель. В нашем случае есть две роли, которые описывают элементы, которые чередуются между двумя противоположными состояниями: checkbox и switch. Эти роли функционально очень похожи, за исключением того, что состояния checkbox checked и unchecked, а switch использует on и off. Роль switch также имеет более слабую поддержку, чем checkbox. Мы будем использовать switch, но вы можете использовать checkbox самостоятельно.
Теперь, когда мы перейдем к нашему переключателю с помощью программы чтения с экрана, мы получим более точное описание этого элемента:
VoiceOver прочитает «off, switch»
Когда я немного задержался на этом элементе с активным VoiceOver, VoiceOver сказал мне, как я могу взаимодействовать с элементом с помощью клавиши пробела:
Вспомогательные технологии теперь могут использовать эти роли для предоставления дополнительных функций, облегчающих навигацию по странице для пользователей с ограниченными возможностями. Например, когда пользователь вводит голосовую команду «click button», программа распознавания речи Dragon NaturallySpeaking подсвечивает все кнопки на странице. Программы чтения с экрана часто предоставляют ярлыки для навигации между различными элементами одной и той же роли — JAWS предоставляет горячие клавиши, а VoiceOver предоставляет Rotor для этой цели.
Важно отметить, что роль — это обещание. Вы обещаете пользователям, что они могут взаимодействовать с элементами определенным образом и будут вести себя предсказуемо. Например, пользователи ожидают от переключателей switches следующее:
Указание role для элемента не приведет к автоматическому добавлению каких-либо ожидаемых функций. Это не сделает наш элемент фокусируемым или добавит ключевые события. Разработчик должен выполнить это обещание. В случае с нашим переключателем я уже обработал это с помощью tabindex и добавил прослушиватель событий keydown.
Хорошо, что пользователи и вспомогательные технологии знают, что наш элемент — это switch. Теперь, однако, они могли бы спросить себя для чего этот переключатель?
Иногда доступное имя по умолчанию недостаточно. В некоторых случаях, оправданна ручная установка доступного имени. Например когда:
ARIA предлагает два атрибута для изменения имени элемента: aria-label и aria-labelledby.
Когда вы указываете aria-label для элемента, вы переопределяете любое имя, которое имело этот элемент, и заменяете его содержимым этого атрибута aria-label. Возьмите кнопку со значком увеличительного стекла. Мы могли бы использовать aria-label, чтобы программы чтения с экрана перезаписывали содержимое кнопки и объявляли ее как «Search»:
Давайте добавим aria-label к нашему переключателю:
Если вы перейдете к переключателю с помощью программы чтения с экрана, вы услышите что-то вроде этого:
VoiceOver прочитает переключатель как «Use dark mode, off, switch«
aria-label лучше всего использовать, когда на странице еще нет видимой текстовой метки. В качестве альтернативы, если у нас уже есть ярлык на странице, мы могли бы использовать aria-labelledby. aria-labelledby берет идентификатор текстовой метки и использует содержимое этой метки в качестве доступного имени.
Например, мы могли бы использовать aria-labelledby, чтобы использовать заголовок в качестве метки для раздела оглавления.
использует идентификатор id, чтобы указать, какой элемент должен служить его меткой. В результате весь раздел оглавления называется Table of Contents (Оглавление).
Этот подход очень похож на использование элемента для атрибута, за исключением того, что он работает для всех элементов, а не только для полей формы.
Вот как будет выглядеть наш пример переключателя, если мы используем aria-labelledby вместо aria-label:
Примечание: во время написания этой статьи я узнал, что программы чтения с экрана могут игнорировать aria-label и aria-labelledby для статических элементов. Если ваши ярлыки не работают, убедитесь, что у вашего элемента есть landmark role или роль, которая подразумевает интерактивность.
Состояние (State)
Когда я перехожу к нашему переключателю с помощью программы чтения с экрана, она говорит мне, что он находится в выключенном состоянии. Тем не менее, когда я запускаю тумблер … он все равно говорит, что он выключен. Нам нужен способ, чтобы вспомогательные программы знали, когда состояние переключателя изменилось.
Атрибуты состояния ARIA описывают свойства элемента, которые могут изменяться способами, которые актуальны для пользователя. Они динамичны. Например, складные разделы (collapsible sections) позволяют пользователям нажимать кнопку, чтобы развернуть или свернуть содержимое. Когда пользователь программы чтения с экрана фокусируется на этой кнопке, вероятно, было бы полезно, если бы они знали, было ли содержимое в настоящее время развернуто или свернуто. Мы могли бы установить aria-extended=»false» на кнопку, а затем динамически изменять значение при каждом нажатии кнопки.
Еще один заслуживающий упоминания атрибут ARIA — aria-hidden. Всякий раз, когда элемент имеет aria-hidden=»true», он и любой его дочерний элемент немедленно удаляются из дерева доступности. Вспомогательные программы, использующие дерево, не будут знать, что этот элемент существует. Это полезно для презентационных элементов, которые украшают страницу, но создают беспорядочные возможности чтения с экрана. aria-hidden также может быть динамически переключен, например, чтобы скрыть содержимое страницы от программ чтения с экрана, когда открыто модальное окно.
Возвращаясь к нашему переключателю, элементы, для которых заданы role=»checkbox» или role=»switch», ожидают, что элемент будет иметь атрибут состояния, aria-checked, и будет меняться между «true» и «false» всякий раз, когда переключение срабатывает.
Следующий пример демонстрирует, как мы можем использовать JavaScript для изменения aria-checked:
Попробуйте перейти к переключателю с помощью программы чтения с экрана. Нажмите на переключатель, чтобы включить темный режим. Теперь переключатель фактически объявляет, когда он включен:
VoiceOver прочитает текст «on, Use dark mode, switch»
Свойства
Свойства ARIA — это атрибуты, которые описывают дополнительный контекст об элементе, который было бы полезно знать пользователю, и который не подвержен изменениям, таким как состояние. Примеры свойств:
Некоторые свойства ARIA устанавливают отношения между элементами. Например, вы можете использовать aria-describedby, чтобы связать элемент с другим элементом, который предоставляет более длинное описание:
Используйте меньше ARIA.
Спецификации ARIA Консорциума World Wide Web предоставляют пять правил использования ARIA. Первое правило можно прочитать как «не используйте ARIA», как это сделали некоторые, но это не совсем так. Правило звучит так:
Если вы можете использовать встроенный HTML-элемент с семантикой и поведением, которые вам требуются, вместо использования ARIA элементов (роли, состояния или свойства), чтобы сделать его доступным, то сделайте это.
Другими словами, ARIA должна быть инструментом в вашем арсенале, но она не должна быть первым инструментом, к которому вы обращаетесь. Вместо этого используйте семантику элементов, где это возможно. В нашем примере с переключателем это может выглядеть следующим образом (мы можем использовать встроенный checkbox и вообще не использовать ARIA):
Почему мы должны использовать семантическую разметку вместо ARIA? Вот несколько причин:
Мне действительно нравится, как выразилась Кэтлин МакМэхон. Если веб-разработка похожа на приготовление пищи, то семантические элементы — это ваши высококачественные ингредиенты. Атрибуты ARIA — это ваши приправы. Готовьте с ними, во что бы то ни стало, но вам нужно только небольшое их количество.
Дальнейшее чтение
Если вы хотите узнать больше об ARIA, я рекомендую следующие ресурсы:
HTMHell — адовая разметка (25 плохих примеров)
Приветствую. Представляю вашему вниманию перевод заметок с сайта HTMHell — коллекции плохих примеров HTML-кода, взятых из реальных проектов.
Каждая заметка включает сам фрагмент плохого кода, который дополняется объяснениями, в чём именно ошибки и почему так лучше не делать. А в заключение предлагается вариант, который считается более корректным.
Так как я объединил в единую статью заметки, которые изначально являются независимыми и самодостаточными, во время перевода позволил себе иногда немного отходить от стилистики изначальных формулировок, пытаясь сделать текст менее «сухим» и более последовательным.
1. Кнопка, замаскированная под ссылку
Плохой код
Ошибки и что следует исправить
Атрибут title описывает содержимое элемента в виде всплывающей подсказки и для элементов указывать его излишне
В атрибуте tabindex также нет необходимости, ведь при переключении между элементами с помощью клавиатуры кнопки получают фокус по умолчанию
Хороший код
2. Элемент с атрибутом role=»button»
Плохой код
Ошибки и что следует исправить
Нет необходимости пытаться задать семантику
SVG-иконки, расположенной внутри нашей псевдокнопки не хватает текстовой альтернативы на случай, если SVG не отобразится
Хороший код
Чтобы предназначение кнопки было понятно не только визуально, но и оставалось доступным для пользователей скринридеров, внутрь добавляется описательный текст.
Плохой код
Ошибки и что следует исправить
Элемент предназначен отнюдь не для выполнения JavaScript, а для показа изображений
Как и на упомянутом ранее
Для самого изображения не задана текстовая альтернатива (атрибут alt ). Из-за этого скринридеры могут озвучивать название самого файла изображения, что далеко не всегда информативно
Хороший код
Решение №1: Использовать кнопки, а к помещённым внутрь кнопок изображениям добавить атрибут alt
Решение №2: Использовать кнопки и вместо добавления атрибута alt к изображениям, добавить описание в текстовые элементы
4. Ссылка с кнопкой внутри
Плохой код
Ошибки и что следует исправить
Вкладывая кнопку внутрь ссылки, вы подаёте сразу два сигнала: это кнопка, но также это и ссылка
Хороший код
5. Кнопкоподобная ссылка
Плохой код
Контекст: это ссылка, стилизованная под кнопку. Ведёт она на форму, расположенную на этой же странице
Ошибки и что следует исправить
Атрибут aria-haspopup=»true» призван сообщать вспомогательным устройствам, что данный элемент вызывает попап, но в нашем случае этого не происходит
Внутренний отступ padding следует добавлять к элементам через CSS, а не с помощью
Хороший код
6. Ссылка с void-оператором в значении атрибута «href»
Плохой код
Ошибки и что следует исправить
Если JavaScript-код не загрузился или не может быть выполнен, использующая его ссылка просто перестанет работать
Такая ссылка будет работать только при клике левой кнопкой мыши. Открыть её в новой вкладке/окне щелчком скролла или через конктекстное меню не удастся
Хороший код
7. Дубликаты «id» и табличная раскладка
Плохой код
Ошибки и что следует исправить
Значения атрибутов id должны быть уникальными, независимо от того, к какому тегу они добавляются
Данный код использует раскладку, основанную на таблицах (это при том, что дизайн сайта обновлялся в 2016 году). Избегайте разметки страниц с помощью таблиц, потому что эти элементы имеют вполне конкретное семантическое значение и не предназначены для этих целей
Текущую разметку следует заменить на семантические HTML5-теги. Это существенно сократит количество тегов и сделает код более понятным
При стилизации следует использовать новые технологии Flexbox и CSS Grid, но никак не элементы таблиц
Для значений атрибута ID должны быть использованы более семантические термины
Хороший код
8. Якорная ссылка в роли кнопки
Плохой код
Ошибки и что следует исправить
Ещё одним серьёзным недочётом данного примера является то, что браузеры и устройства, которые не поддерживают JavaScript, не смогут получить доступ к содержимому модального окна
Хороший код
Решение №1: Использовать элемент
Поскольку целью данного элемента является не навигация, а вызов действия на текущей странице, элемент является семантически более подходящим.
Решение №2: Ссылка на отдельную страницу
Таким образом, получаем некий фолбэк для браузеров и устройств, которые не поддерживают JavaScript или если он по какой-то причине не сработал
Это пример прогрессивного улучшения при разработке
9. Запрос согласия на хранение Cookie
Плохой код
Ошибки и что следует исправить
Окно с запросом разрешения хранить данные Cookie появляется сразу при входе на страницу. Конкретно для этого типа модального окна следует делать исключение и помещать в самом начале кода, чтобы сразу же после загрузки страницы оно получало фокус и было доступно для взаимодействия. Но в нашем примере оно располагается наоборот в конце
Кнопки данного окна, реализованные с помощью
Как уже было указано ранее, в дополнение ко всему, на элементах
Для иконки нет текстовой альтернативы, а значит её назначение можно определить только визуально
Font Awesome советует скрывать иконки от скринридеров, добавляя элементам атрибут aria-hidden=»true»
В завершение можно также добавить, что крайне полезным было бы иметь возможность закрыть модальное окно нажатием Escape
Хороший код
Дополнительные материалы
10. Элемент «section» как замена для «div»
Плохой код
Ошибки и что следует исправить
Секционные элементы вкладывать друг в друга можно, только это имеет смысл в ситуациях, когда содержимое внутренных элементов связано с содержимым родителя
В данном конкретном случае секционные элементы используются не для того, чтобы разбить содержимое на разделы, а лишь с целью стилизации. Значит большинство из них должны быть элементами
Важный момент, который следует понимать – элементы не являются заменой
Компонент карусели (слайдера) следует озаглавливать и связывать заголовок с главным элементом с помощью атрибута aria-labelledby чтобы позволить пользователям скринридеров легко его найти
Хороший код
Дополнительные материалы
11. Триграмма неба
Плохой код
Ошибки и что следует исправить
Проблема данной реализации в том, что текст внутри тегов скринридеры могут озвучить как «триграмма неба меню». Причина кроется в символе «☰», который таким образом называется в unicode
Так же, как на упомянутых ранее
Элемента касаются и проблемы, связанные с невозможностью получения фокуса при переключении между элементами с помощью клавиатуры. А в нашем случае это особенно важно, ведь главная навигация открывается и скрывается именно с помощью данного элемента
Для улучшения доступности при открытии навигации к элементу следует добавлять атрибут aria-expanded для обозначения текущего состояния панели. Значением true – если панель открыта, false – если закрыта
Хороший код
12. Доступный опрос «Да/Нет»
Плохой код
Ошибки и что следует исправить
13. Ссылка или label
Плохой код
Ошибки и что следует исправить
Вкладывать элементы с запускаемым поведением (таким как клик) считается плохим решением
Возможность выбора чекбокса путём нажатия на его название улучшает удобство и доступность (путём увеличения области клика)
Но в данном случае пользователи не ожидают, что при нажатии на название чекбокса откроется новая страница
Размещайте ссылки за пределами элемента
Хороший код
Источники
14. Неподходящий «type»
Плохой код
Ошибки и что следует исправить
Если его и добавлять, то лишь со значением, являющимся допустимым MIME-типом. Браузеры могут учитывать его, но исключительно как рекомендацию
Отрицательное значение tabindex значит, что элемент не получит фокус при переключении между элементами с помощью клавиатуры. Правда, такой элемент всё же может получить фокус с помощью JavaScript
Не меняйте семантику элементов, присущую им по умолчанию, если только в этом нет явной необходимости
Если вам нужна кнопка, просто используйте элемент
Хороший код
Источники
15. Буква за буквой
Контекст: буквы обёрнуты в
Плохой код
Ошибки и что следует исправить
Если каждая буква обёрнута в отдельный элемент, вспомогательные технологии могут озвучивать текст, произнося каждую букву по отдельности
Старайтесь избегать разрастания DOM. Слишком большое количество DOM-узлов или вложенных элементов может плохо отразиться на производительности страницы
Большое DOM-дерево ведёт к большому дереву доступности, которое также может плохо сказываться и на производительности вспомогательных технологий
Рекомендуется отделять представление от содержимого. Стили, которые не изменяются динамично, поместите в CSS-файл
Хороший код
Если в этом действительно есть необходимость, добавьте версию текста, доступную для скринридеров, а текст, предназначеный для визуального отображения, скройте с помощью aria-hidden=»true»
Источники
16. alt, хотя нет. aria-label, хотя нет. alt
Контекст: список изображений, которые ссылаются на страницы с товаром
Плохой код
Ошибки и что следует исправить
Ссылки без href не получают фокус при переключении между элементами с помощью клавиатуры. tabindex исправляет эту ситуацию, но необходимость использовать данный атрибут лишь подтверждает тот факт, что корректно оформленная ссылка была бы в данном случае лучшим выбором
Атрибут alt не используется с элементами div и никак не влияет на их семантическое значение
Хороший код
Полноценная ссылка с заполненным атрибутом href и текстовая альтернатива alt для изображения
Источники
17. Недоступные карточки
Контекст: список карточек со ссылками, каждая из которых имеет заголовок, изображение и краткое описание
Плохой код
Ошибки и что следует исправить
Вероятнее всего, в подобных ситуациях необходимости в таком количестве элементов нет. Чтобы лучше понять почему, рекомендую прочитать статью «Why You Should Choose HTML5 Over » автора Bruce Lawson
Не следует недооценивать важность соблюдения иерархии заголовков. Например, пользователи скринридеров при навигации по сайту нередко ориентируются в структуре документа именно по его заголовкам
Согласно спецификации, HTML5-элемент представляет собой самодостаточный элемент, который под основным содержимым опционально может содержать подпись. Но в этом примере нет содержимого, есть только подпись
Сделать доступной карточку, вся область которой является кликабельной, непросто. Дополнительную информацию можно найти в разделе «источники» ниже
Хороший код
Источники
18. Панель div-игации
Контекст: главная панель навигации
Плохой код
Ошибки и что следует исправить
Используйте элементы
- или
- для структурирования ссылок, связанных семантически и визуально. Скринридеры обычно объявляют номер элемента в списке, что помогает ориентироваться
Если в навигации имеет значение последовательность элементов, используйте
- вместо
Хороший код
Источники
19. Неправильная работа с заголовками
Контекст: простая страница, которая отображает наличие товара
Плохой код
Ошибки и что следует исправить
не должны использоваться для разметки подзаголовков, альтернативных заголовков и слоганов, если только они не озаглавливают новый раздел или подраздел
Старайтесь избегать разрастания DOM. Слишком большое количество DOM-узлов и вложенных элементов может отрицательно повлиять на производительность страницы
Большое DOM-дерево ведёт к большому дереву доступности, что может отрицательно влиять и на скорость работы вспомогательных технологий
могут быть только элементы фразового содержимого.
Элемент представляет собой фрагмент, который скринридеры произносят изменённой интонацией, чтобы обозначить его отличие от остального текста. Если вам нужен просто курсивный текст, используйте CSS-свойство font-style: italic
Хороший код
Источники
20. Спецвыпуск HTMHell: кнопка «Закрыть»
В данном спецвыпуске рассматривается один из наиболее сложных и наиболее спорных шаблонов во фронтенд-разработке – кнопка «Закрыть».
После недолгого исследования, занявшего менее 2 часов, HTMHell представляет 11 примеров плохой реализации данного элемента
Пример 1: с фоновым изображением
Ошибки и что следует исправить
Для фонового изображения невозможно задать текстовую альтернативу
Данный элемент скринридеры озвучат: Никак
Пример 2: с иконкой
Ошибки и что следует исправить
Символ «✕» не является чем-то вроде «Закрыть» или «Перечёркнуто», это знак умножения. Например, 2 ✕ 2 (два умножить на два). В кнопках «Закрыть» использовать его неуместно
В первом примере подробно описаны проблемы, связанные с использованием элемента
Данный элемент скринридеры могут озвучить: как-то вроде «умножить на» или «разы» (times)
Пример 3: Иконки Font Awesome
Ошибки и что следует исправить
Скринридеры могут озвучивать содержимое, которое генерируется через CSS
Элемент представляет собой фрагмент, который скринридеры произносят другой интонацией, что обозначить его отличие от остального текста. Если вам нужен просто курсивный текст, используйте CSS-свойство font-style: italic
В первом примере подробно описаны проблемы, связанные с использованием элемента
Данный элемент скринридеры могут озвучить: «разы» (times)
Пример 4: Закрывающая ссылка
Ошибки и что следует исправить
Задача элемента в нашем примере – вызвать JavaScript-действие на текущей странице. Элемент с атрибутом type=»button» подходит лучше, потому что не имеет поведения по умолчанию и разработан для вызова действий в ответ на нажатие пользователем
Скринридеры могут озвучивать содержимое, которое генерирует CSS
Символ «✕» не является чем-то вроде «Закрыть» или «Перечёркнуто», это знак умножения. Например, 2 ✕ 2 (два умножить на два). Не используейте его в кнопках «Закрыть»
Данный элемент скринридеры могут озвучить: «ссылка, разы» (link, times)
Пример 5: Закрывающая ссылка с текстом
Ошибки и что следует исправить
Хорошая попытка, но это всё ещё ссылка, а не кнопка
В предыдущем примере подробно написано про использование элемента и генерируемое CSS содержимое
Данный элемент скринридеры могут озвучить: «ссылка, разы закрыть» (link, times close)
Пример 6: Закрывающая ссылка без атрибута href
Ошибки и что следует исправить
Ещё одна хорошая попытка, но ссылка без атрибута href всё еще не является кнопкой
Ссылки-заглушки не получают фокус при переключении между элементами с помощью клавиатуры
Данный элемент скринридеры могут озвучить: «разы, кликабельно» (times, clickable)
Пример 7: Ссылка-заглушка и изображение
Ошибки и что следует исправить
Для изображения не задана текстовая альтернатива. Скринридеры могут озвучить название файла
В 6 примере подробно написано про использование ссылок-заглушек
Скринридеры могут озвучить данный элемент: «close.png, изображение» (close.png, image)
Пример 8: Радио-кнопка
Ошибки и что следует исправить
Радио-кнопки используются в группах, описывающих набор связанных вариантов (опций)
У SVG нет текстовой альтернативы. Чтобы больше узнать о доступности SVG, рекомендую почитать статью «Creating Accessible SVGs» автора Carie Fisher
Также, display: none на элементе делает недоступным
Данный элемент скринридеры озвучат: Никак
Пример 9: Кнопка с иконкой
Ошибки и что следует исправить
Символ «✕» не является чем-то вроде «Закрыть» или «Перечёркнуто», это знак умножения. Например, 2 ✕ 2 (два умножить на два). Не используейте его в кнопках «Закрыть»
Данный элемент скринридеры могут озвучить: «разы, кнопка» (times, button)
Пример 10: Кнопка с svg
Ошибки и что следует исправить
У SVG нет текстовой альтернативы. Чтобы больше узнать о доступности SVG, рекомендую почитать статью «Creating Accessible SVGs» автора Carie Fisher
Данный элемент скринридеры могут озвучить: «кнопка» (button)
Пример 11: Старая добрая буква «X»
Ошибки и что следует исправить
Нет необходимости с помощью атрибута role явно задавать семантику элемента, вместо этого стоит просто использовать элемент
При использовании атрибут tabindex не нужен. HTML-кнопки получают фокус по умолчанию
В 1 примере подробно описаны проблемы, связанные с использованием элемента
Буква «X» не является иконкой для кнопки «Закрыть»
Данный элемент скринридеры могут озвучить: «икс, кнопка» (X, button)
«Использовать букву «X» для кнопок «Закрыть» – это то же, что добавлять в кофе соль вместо сахара, потому что выглядит она так же»
Примеры правильной разметки
Решение 1: Кнопка с видимым текстом без иконки
Только текст: легко в реализации и понятно для пользователей
Скринридеры могут озвучить данный элемент: «Закрыть, кнопка» (Close, button)
Решение 2: Кнопка с видимым текстом и только визуально доступной иконкой
Если вы вынуждены использовать иконку «умножить», скройте её от скринритеров, обернув в элемент с атрибутом aria-hidden=»true»
Скринридеры могут озвучить данный элемент: «Закрыть, кнопка» (Close, button)
Решение 3: Кнопка со скрытым текстом и только визуально доступной иконкой
Скринридеры могут озвучить данный элемент: «Закрыть, кнопка» (Close, button)
Решение 4: Кнопка со скрытым текстом и только визуально доступной иконкой
Если вы не хотите показывать текст на экране, обеспечьте для иконки или SVG текстовую альтернативу, добавив к кнопке атрибут aria-label
Скринридеры могут озвучить данный элемент: «Закрыть, кнопка» (Close, button)
Решение 5: Font Awesome
Для полноты картины, закрывающая кнопка с иконкой Font Awesome
Порой может иметь смысл использование более описательных названий «Закрыть окно», «Закрыть галереию», «Закрыть рекламу».
Если вы используете сторонние решения для модальных, диалоговых окон, проверяйте, как они были реализованы перед добавлением на сайт. Не полагайтесь на других в вопросах качества и доступности кода.
21. Легендарный legend
Контекст: кнопка, которая разворачивает и сворачивается блок текста
Плохой код
Ошибки и что следует исправить
не разрешается помещать в какой-нибудь другой элемент, кроме (HTML спецификация для legend)
При использовании атрибут tabindex не нужен. HTML-кнопки получают фокус по умолчанию.
Атрибут href не может использоваться с элементом (HTML спецификация для button)
Хороший код
Источники
22. Старая добрая div-ссылка
Контекст: ссылка на другую страницу
Плохой код
. или любой другой вариант этого шаблона, где для ссылки на другую страницу используется отличный от элемент
Ошибки и что следует исправить
При нажатии правой кнопкой мыши в контекстном меню не будет пунктов «Открыть в новой вкладке/окне» или «Добавить ссылку в закладки»
По умолчанию скринридеры просто озвучивают текст внутри
Атрибуты наподобие aria-label у элементов
Пользователи скринридеров могут использовать раздел со списком ссылок страницы.
Хороший код
23. Шаблон карточки
Плохой код
Ошибки и что следует исправить
Основной текст внутри карточки обёрнут в
лучше передало бы его предназначение
«Read more» – не самый лучший текст для ссылки. Это особенно заметно пользователям скринридеров, которые используют навигацию по ссылкам. Из названия непонятно, куда именно ведёт эта ссылка
внутри ссылки не предоставляет дополнительную информацию и должен быть скрыт от скринридеров
Хороший код
Источники
Плохой код
Ошибки и что следует исправить
По умолчанию, текст placeholder отображается светло-серым цветом с плохой контрастностью. Людям со слабым зрением может быть трудно его прочитать при ярком солнечном свете
С помощью псевдоэлемента ::placeholder можно улучшить контрастность цвета. Но тут тоже нужно не переборщить, поскольку текст с очень контрастным цветом пользователи могут принять за текстовое содержимое поля
Использование увеличивает область выбора нужного поля, что может быть очень полезным, особенно на устройствах с сенсорным экраном
Если placeholder является единственным местом, содержащим название поля, при вводе текста он скрывается. Это ухудшает удобство заполнения форм, особенно если содержат много полей.
Пользователи не могут проверить, правильно ли они заполнили форму, потому что видят только значения, но не названия полей.
Если браузер заполняет поле автоматически, пользователь вынужден вырезать содержимое поля, чтобы убедиться, что оно заполнилось корректно
Текст placeholder обрезается, если он выходит за рамки поля
Инструменты подобные Google Translate могут не переводить значение данного атрибута при переводе всей страницы
Названия полей лучше воспринимаются, когда расположены над соответствующим текстовым полем, а не внутри него
Хороший код
Источники
25. Ссылка, которая кнопка, которая ссылка
Примечание: чтобы облегчить чтение кода, большинство классов были удалены
Плохой код
Ошибки и что следует исправить
Отрицательное значение атрибута tabindex означает, что элемент не получает фокус при навигации с помощью клавиатуры
Нет необходимости в добавлении дополнительного для получения фокуса. Элемент и сам на это способен
Элемент представляет собой фрагмент текста, который нужно озвучить с другой интонацией. Если вам нужен курсив, используйте CSS-свойство font-style: italic
Старайтесь избегать разрастания DOM. Слишком большое количество DOM-узлов или вложенных элементов может плохо отразиться на производительности страницы
Большое DOM-дерево ведёт к большому дереву доступности, которое также может плохо сказываться и на производительности вспомогательных технологий
Вариант иконки 2: Иконка может быть удалена, потому что в исходном примере ссылка откроет страницу того же сайта в той же вкладке. Значок внешней ссылки полезен в ситуации, если ссылка ведёт на другой сайт
