Состояния и свойства объектов — ARIA-атрибуты
Атрибутов спецификации, как нетрудно догадаться, гораздо больше. Их делят на следующие секции.
Эта секция содержит атрибуты, определенные для элементов пользовательского интерфейса, (GUI) веб-документов или интернет-приложений, взаимодействующих с пользователем. Эти атрибуты предназначены для поддержки ролей-виджетов:
— aria-autocomplete — показывает, применяется ли автозаполнение для текстового поля;
— aria-checked — показывает состояние «checked» у чекбоксов или радиокнопок;
— aria-disabled — показывает состояние «disabled» у элементов упражнения;
— aria-expanded — показывает, развернут или свернут текущий элемент;
— aria-hidden — показывает состояние «hidden» у текущего элемента;
— aria-multiline — показывает возможность многострочного ввода у текстового элемента;
— aria-multiselectable — показывает возможность множественного выбора у элементов управления у тега ;
— aria-orientation — показывает положение элемента (горизонтальное или вертикальное);
— aria-readonly — показывает состояние «readonly» у элементов управления;
— aria-required — аналог HTML5 атрибута required;
— aria-selected — показывает состояние «selected» у элементов управления;
— aria-sort — показывает порядок сортировки у строк таблицы или элементов с ролью «grid».
Атрибуты для Live Region
Live Region — это элементы страницы, обновляемые в результате внешнего события, обычно вне пользовательского фокуса. Канонический пример Live Region — информер биржевых сводок.
Задача этих атрибутов — отобразить, какие изменения содержимого могут произойти, когда элемент не в фокусе, и обеспечить вспомогательным технологиям информацию о способе обработки обновления этого содержимого.
— aria-busy — указывает, обновляются ли элемент и его поддерево, в настоящее время.
— aria-live — указывает, что элемент будет обновлен, и описывает типы обновлений браузеру.
Атрибуты перетаскивания (Drag-and-Drop)
Тут все понятно — эти атрибуты обеспечивают эффект drag-and-drop:
— aria-grabbed — указывает, может ли элемент быть захвачен перетаскиванием;
— aria-dropeffect — определяет функции, которые могут быть задействованы в процессе и при завершении перетаскивания.
В этой секции — атрибуты, указывающие на отношения или ассоциации между элементами, которые не могут быть полностью определены структурой документа.
— aria-activedescendant — указывает на элемент, чей контент является активным потомком составного виджета;
— aria-controls — указывает элемент (элементы), чьим содержанием или поведением управляет текущий элемент;
— aria-describedb — указывает элемент (или элементы), описывающие объект;
— aria-owns — определяет положение в иерархии документов по схеме потомок/родитель;
— aria-posinset — определяет позицию элементов наборе;
— aria-setsize — определяет число пунктов в текущем наборе lis-titems или treeitems.
По состоянию на сегодняшний день это почти все, ну а чтобы покончить с этой непростой темой, приведем как пример использования технологии реализацию дерева на html-разметке с применением WAI-ARIA (пример из спецификации):
Что такое 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, я рекомендую следующие ресурсы:
Как эффективно работать с ARIA в HTML5
Дата публикации: 2016-02-24
От автора: ARIA расшифровывается как «Accessible Rich Internet Applications» и помогает сделать ваш сайт более доступным для людей с ограниченными возможностями, такими как слух или нарушение зрения. Давайте разберемся как мы, разработчики можем облегчить жизнь с помощью этого инструмента.
Один из способов это добавить ARIA в HTML. Вы, скорее всего, уже знакомы с семантическими элементами в HTML типа nav, button или header. Довольно легко понять для чего данные теги будут использоваться. Эти теги придают больше значения контенту страницы, а их комбинацию с ARIA можно использовать в нашей разметке. Но нужно помнить о некоторых вещах.
Роли ARIA
ARIA роли добавляются в разметку как атрибуты. С их помощью задается тип элемента и его назначение. Код ниже задает элемент как баннер:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Пример ниже, часто размещается в контейнерах, показывает, что в контенте содержится какая-то информация о данных внутри контейнера:
А предупреждение будет выглядеть так:
Следующий пример мой любимый, он используется только в том случае, когда элемент нужен только для презентации. Если представить, что кто-то зашел на сайт через какой-либо скрин ридер, подумайте о элементах, которые пользователи не захотят читать. Один пример это когда элемент может содержать в себе только визуальную декорацию чего-либо или он просто пустой с изображением или фоновым цветом.
ARIA атрибуты
Атрибуты ARIA немного отличаются от ролей. Они точно так же добавляются в разметку, но есть ряд ARIA атрибутов, которые можно использовать. Все атрибуты идут с префиксом aria-. Есть два типа атрибутов, состояния и свойства.
Значения состояний связано с изменением результата пользовательского взаимодействия.
Значения свойств почти не меняются.
Пример атрибута состояния ARIA это aria-checked, который используется для определения состояния элементов типа чекбоксов или радио кнопок.
Пример атрибута свойства aria-label. Используется в тех случаях, когда подпись к элементу невидима на странице (просто потому что нет смысла делать ее видимой или так указано в дизайне). Для видимых лейблов используется aria-labelledby. Данный атрибут используется так – значение атрибута должно совпадать с id элемента, на который ссылается лейбл.
Можно сделать то же самое с figure.
На W3C можно подробно прочитать о поддерживаемых состояниях и свойствах.
Правила ARIA
Перед тем, как совсем увлечься, помните, что мы не добавляем ARIA во все элементы по нескольким причинам.
Используйте семантические HTML элементы везде где возможно
Неявная семантика ARIA по умолчанию относится к семантике, которая применяется к элементу браузером. Такие теги как nav, article и button имеют неявные ARIA состояния role=»navigation», role=»article» и role=»button» соответственно. До появления семантики в HTML было нормально использовать элементы типа
У одного тега только одна роль
Один тег не должен содержать несколько ARIA ролей. Определение role: «Основной индикатор типа. Данная семантическая ассоциация позволяет инструментам представлять и поддерживать взаимодействие с объектом таким образом, чтобы взаимодействие соответствовало ожиданию пользователя от работы с другими объектами данного типа.»
HTML элемент не может иметь две роли. Все роли тем или иным образом имеют семантическое значение, и следуя из определения выше, тег не может быть двух типов одного объекта одновременно. Вы можете сделать одновременно кнопку и заголовок? Нет, это будет либо одно, либо другое. Выбирайте роли так, чтобы они наилучшим образом описывали функцию вашего элемента.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Не изменяйте встроенную семантику
К семантическим тегам не нужно применять дополнительный атрибут role, так как он переписывает родную семантику тега. К примеру:
Второе правило применения ARIA гласит, что если необходимо, то нужно использовать вложенный HTML элемент.
Используйте как можно больше семантических элементов
Если подумать о задачах того, что вы создаете, то можно понять, какие элементы лучше подойдут вместо div и span. Это приходит со временем. Для практики можно обращаться к what elements are available. Один из моих любимых примеров это blockquote, про который часто забывают. Есть похожие теги, которые выполняют те же задачи:
q – используется для строчный цитат. Прямая цитата кого-то внутри параграфа текста.
cite – используется для цитирования названий творческих работ в тексте, к примеру, стихотворений.
Пример использования двух обоих тегов:
Существует множество тегов, про которые вы, возможно, и не знаете, среди которых есть и часть новых. Так что убедитесь в том, что вы знаете их возможности!
Атрибут alt
Про данный атрибут очень часто забывают, а он может оказать огромнейшее влияние на доступность разметки, особенно для скрин ридеров. Он появился в HTML2 и описывался так: «Текст, заменяющий изображение, к примеру, из-за ошибок обработки или предпочтений пользователя.»
Из-за ошибок обработки или предпочтений пользователя. Вне зависимости от проблем с загрузкой изображения («ошибки обработки»), у пользователей с нарушенным зрением нет и предпочтений. У них просто от природы проблемы с просмотром изображения. В спецификации ничего не говорится про доступность. Там сказано, что изображений может не загрузиться, как положено, и пользователю предоставляется возможность отключить загрузку изображений вообще. Хотя мы с вами и живем в мире, где в последнее очень сложно поверить, мы все же не знаем, чем на другом конце провода занимается пользователь. Поэтому необходимо предоставить пользователю другие варианты.
Люди часто пишут в теге alt к фотографии с их собакой, играющей в парке «собака», к примеру. Но к сожалению такой текст не отражает визуальное представление изображения для слбовидящих. Пример ниже намного доступнее:
