ARIA расшифровывается как «Доступные многофункциональные интернет-приложения» и может помочь сделать ваш сайт более доступным для людей с ограниченными возможностями, такими как нарушения слуха или зрения. Давайте посмотрим, как мы, разработчики, можем облегчить им жизнь.
Одним из способов использования ARIA является добавление его в наш HTML. Возможно, вы уже знакомы с семантическими элементами в HTML, такими как navbuttonheader Довольно легко увидеть, для чего будут использоваться эти элементы. Эти элементы придают больше значения содержанию страницы, и мы можем использовать комбинацию этих элементов и ARIA в нашей разметке. Тем не менее, есть несколько вещей, которые следует иметь в виду при использовании их вместе.
Ария Роли
Роли ARIA добавляются в разметку HTML как атрибут. Они определяют тип элемента и предлагают, для какой цели он служит. Следующий пример идентифицирует элемент как своего рода баннер:
<header role="banner">
Следующий пример, часто помещаемый в содержащий элемент, предполагает, что его содержимое предоставляет некоторую информацию о содержимом в содержащем элементе:
<div role="contentinfo">
This website was built by Georgie.
</div>
Для оповещения с динамическим содержимым следует использовать role="alert"
<div role="alert">
Please upgrade to the latest version of your browser for the best experience.
</div>
Это мой личный фаворит, который используется, когда элемент просто для презентации. Если вы представляете, что кто-то использует программу чтения с экрана, подумайте об элементах, которые он не хотел бы прочитать. Одним примером является элемент, который может содержать визуальное оформление, или пустой элемент, просто служащий изображению или цвету фона.
<a href="aria.html" role="presentation">
<img src="aria-thumbnail.jpg" role="presentation" alt="Use ARIA effectively">
</a>
ARIA атрибуты
Атрибуты ARIA немного отличаются от ролей. Они добавляются в разметку таким же образом, но есть ряд атрибутов ARIA, доступных для использования. Все атрибуты ARIA имеют префикс aria- Существует два типа атрибутов, состояний и свойств .
- Значение состояний обязательно должно меняться в результате взаимодействия с пользователем.
- Значение свойств менее вероятно изменится.
Пример атрибута ARIA, который является состоянием, aria-checked Это используется для отображения состояния элементов, которые эмулируют интерактивные элементы, такие как флажки и переключатели, но не являются собственными элементами (например, пользовательские элементы пользовательского интерфейса, созданные с тегами divspan
<span role="checkbox"
aria-checked="true"
tabindex="0"
id="simulatedcheckbox">
</span>
Примером атрибута ARIA, который является свойством, является aria-label Это используется, когда метка для элемента формы не видна на странице (возможно, потому что не имеет смысла делать ее видимой, или если дизайн диктует это). Для случаев, когда текст метки видим, aria-labelledby
Это можно сделать с помощью элемента figure
<figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="The Sydney Opera House">
<figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>
Вы можете прочитать больше о поддерживаемых состояниях и свойствах на веб-сайте W3C .
Правила ARIA
Прежде чем стать слишком увлеченным, помните, что мы не хотим добавлять ARIA к каждому элементу по нескольким причинам.
Используйте семантические элементы HTML, где это возможно
По умолчанию неявная семантика ARIA относится к семантике, которая уже применена к элементу браузером. Такие элементы, как navarticlebuttonrole="navigation"role="article"role="button" До того, как существовали семантические элементы HTML, было принято иметь такие элементы, как <div class="main-navigation" role="navigation"> Теперь мы можем использовать navdivrole="navigation" Вы можете обратиться к этой таблице W3C, чтобы проверить, требуется ли атрибут ARIA для определенного элемента.
Ваш элемент может иметь только одну роль
Элемент не должен иметь несколько ролей ARIA. Определение role
Основной индикатор типа. Эта семантическая ассоциация позволяет инструментам представлять и поддерживать взаимодействие с объектом таким образом, который согласуется с ожиданиями пользователей относительно других объектов этого типа.
Элемент HTML не может иметь две role Все роли в той или иной мере являются семантическими, и, согласно приведенному выше определению, элемент не может быть двух типов объекта. Можете ли вы иметь что-то, что является одновременно кнопкой и заголовком? Нет, это должен быть один или другой. Выберите role
Не меняйте собственную семантику
Не следует применять контрастную rolerole Например:
<footer role="button">
Второе правило использования ARIA , однако, предполагает, что вместо этого вы должны использовать вложенный элемент HTML.
<footer><button>Purchase this e-book</button></footer>
Как еще вы можете сделать вашу разметку более доступной?
Используйте как можно больше семантических элементов
Это приходит с практикой, но если вы думаете о функции того, что вы строите, это может дать вам хорошее представление о том, какой элемент вы можете использовать, который будет намного лучше, чем divspan Чтобы попрактиковаться, вы можете постоянно ссылаться на то, какие элементы вы можете использовать, и знакомиться с ними.
Один из моих любимых примеров — использование blockquote Есть другие подобные элементы, которые служат определенным целям:
-
q -
cite
Вот пример, содержащий два элемента выше:
<p>In <cite>The Love Song of J. Alfred Prufock</cite> by T.S. Eliot, the clinical imagery of the line <q>Like a patient etherized upon a table</q> suggests themes of loneliness.</p>
Существует множество HTML-элементов, которые вы, возможно, не рассматривали, включая некоторые новые, поэтому обязательно ознакомьтесь с возможностями!
Атрибут alt
Это часто забываемая часть разметки, которая может существенно повлиять на доступность вашей разметки, особенно для программ чтения с экрана. На самом деле он существует со времен HTML2 и описывается следующим образом:
текст для использования вместо ссылочного ресурса изображения, например, из-за ограничений обработки или предпочтений пользователя.
Из-за ограничений обработки или предпочтений пользователя. Независимо от того, не загружается ли изображение («ограничения обработки»), у пользователя с нарушениями зрения на самом деле тоже нет предпочтений. По умолчанию у них просто проблемы с просмотром изображения, как у человека без нарушения зрения. Хотя в спецификации ничего не говорится о термине «доступность», предполагается, что изображение может загружаться не так, как требуется, и пользователь может отключить загрузку изображения. Хотя мы живем в мире, в который, кажется, трудно поверить, мы не можем предположить, что делает наш пользователь на другом конце. Поэтому мы должны предоставить пользователям альтернативу.
Люди часто пишут alt К сожалению, несмотря на включение этого текста, он действительно не рисует картину для слабовидящих. Следующее является более приемлемым:
<img src="bobby.jpg" alt="My dog Bobby playing fetch in the park">
Обратите внимание, что атрибут altfigcaptionaltальтернативного текста для изображения, тогда как figcaptionподписью для figure Используя тот же пример, это может быть соответствующий текст:
<figcaption>Isn’t Bobby cute?</figcaption>
Пример использования семантического HTML и ARIA с учетом доступности
Если вы посмотрите на пример, который я включил ранее в этой статье, вы увидите, что я включил что-то, что:
- использует семантический HTML для изображения и его заголовка
- правильно использует элемент
cite - предоставляет соответствующий
alt - использует один из атрибутов ARIA, которые я уже упоминал
<figure aria-labelledby="operahouse_1" role="group">
<img src="operahousesteps.jpg" alt="The Sydney Opera House"/>
<figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
</figure>
Вывод
Роли и атрибуты ARIA могут иметь огромное значение, когда ваш контент обрабатывается программами чтения с экрана и другими вспомогательными технологиями. Поскольку использование вспомогательных технологий становится все более распространенным, мы должны рассмотреть возможность интеграции ARIA в наш код как обычную практику.