Как использовать ARIA в HTML вашего сайта WordPress

Одна из основных целей веб-разработки - создать привлекательный пользовательский интерфейс. Вы часто будете делать это, добавляя интерактивные функции и потрясающие визуальные элементы на свой веб-сайт. Однако эти аспекты не обязательно доступны каждому потенциальному посетителю, особенно тем, кто полагается на программы чтения с экрана.

К счастью, существует система, которая поможет всем вашим пользователям ощутить результаты вашей тяжелой работы. Включение доступных полнофункциональных интернет-приложений (ARIA) в HTML-код вашего сайта требует лишь немного дополнительных усилий и может иметь огромные преимущества. Эта статья познакомит вас с ARIA и ее использованием. Пойдем!

Введение в ARIA: что это такое и почему вы можете его использовать

Короче говоря, ARIA - это способ указать атрибуты HTML, чтобы программы чтения с экрана могли их точно идентифицировать и затем передавать посетителям. Это ключевой аспект доступной веб-разработки, помогающий создать более точный опыт для пользователей программ чтения с экрана.

Это связано с тем, что включение ARIA в ваш HTML влияет на то, как браузеры изменяют ваши веб-страницы для программ чтения с экрана. Этот измененный контент представлен в виде дерева доступности, и ARIA берет на себя задачу перевода в него ваших HTML-элементов.

Например, предположим, что у вас есть страница с флажком, и вы использовали ARIA в своем HTML. ARIA скажет программе чтения с экрана проинформировать пользователя о том, что на странице есть флажок, и укажет, установлен он или нет. Собственный HTML не может этого сделать сам по себе.

Подумайте о том, как часто вы пользуетесь Интернетом не только в работе, но и в повседневной жизни. А теперь представьте, если бы вы не могли использовать большую часть Интернета. У вас будет доступ к меньшему количеству ресурсов для образования, трудоустройства, здравоохранения, информации, общения и даже развлечений.

Использование передового опыта для доступной веб-разработки - это один из способов сделать Интернет местом равных возможностей для всех, независимо от возраста и способностей. Организация Объединенных Наций считает это одним из основных прав человека, и эту цель стоит преследовать как таковую.

Если этого недостаточно для того, чтобы вы вложились в использование ARIA, вы также можете отметить, что доступная разработка также полезна с точки зрения бизнеса. Он перекликается с лучшими практиками поисковой оптимизации и увеличивает охват вашего веб-сайта. К тому же в некоторых случаях это требуется по закону. Другими словами, есть много причин сделать несколько простых шагов, чтобы сделать ваш сайт более доступным.

Как использовать ARIA в HTML вашего сайта WordPress (3 основные практики)

Мы определенно рекомендуем вам продолжить изучение ARIA и веб-доступности за пределами этой статьи. Вы можете особенно захотеть проверить текущую доступность вашего сайта.

Тем не менее, на самом деле вам нужно знать только три вещи, чтобы начать использовать ARIA в HTML-коде вашего сайта WordPress. Изучение приведенных ниже практик должно дать вам прочную основу.

1. Использование ARIA с семантическим HTML

Прежде чем мы обсудим, как применить ARIA к вашему HTML, важно отметить, когда это уместно. Хотя нативный HTML сам по себе не обеспечивает доступного веб-контента, есть некоторые семантические элементы, которые либо делают ARIA ненужной, либо будут конфликтовать с ARIA, если она используется неправильно.

Семантические элементы, такие как <header> , <figure> и <nav>, описывают цель своего HTML. Включение ARIA в эти элементы было бы излишним, поскольку семантический HTML уже подразумевает роль элемента (мы поговорим подробнее о ролях ARIA чуть позже).

Кроме того, существуют определенные правила, которые применяются к использованию ARIA, чтобы не дать разработчикам использовать его таким образом, который противоречит семантическому HTML. Консорциум World Wide Web (W3C) имеет полезную таблицу, которая разбивает, какие семантические элементы HTML подразумевают роли ARIA:

В первом столбце указывается элемент HTML, а во втором - подразумеваемая роль. Если элемент имеет в списке подразумеваемую роль, вам не нужно включать для него дополнительную роль ARIA. В третьем столбце перечислены роли, которые может выполнять каждый элемент HTML в соответствии с передовой практикой.

2. Добавление ролей в HTML-теги

Убедившись, что HTML-элемент, над которым вы работаете, требует использования ARIA, вы можете перейти к использованию «ролей» и «атрибутов». Возможно, вы уже имеете представление о том, что делают роли ARIA из предыдущего раздела. Они определяют тип элемента, который содержится в теге, и обозначают назначение элемента.

Так, например, если вы хотите создать оповещение, чтобы информировать пользователей о том, что им необходимо установить обновление, вы должны использовать роль «оповещение» следующим образом:

 <div role = "alert">
<p> Пожалуйста, установите последнее обновление! </p>
</div>

Как мы объясняли ранее, вам не нужно назначать роль, если элемент является семантическим и подразумевает роль, и вам не следует назначать новую роль элементу, который конфликтует с предполагаемой ролью. Однако следует также отметить, что к каждому элементу можно применить только одну роль.

Подумайте об этом так - роль определяет , что элемент является. Элемент не может быть двумя вещами одновременно, поэтому вам следует выбрать роль, которая лучше всего его описывает. Тем не менее, когда вам нужно, вы можете вложить один элемент в элемент с другой ролью.

Например, если вы хотите добавить указанное выше предупреждение в свой заголовок, оно может выглядеть примерно так:

 <header> <div role = "alert">
<p> Пожалуйста, установите последнее обновление! </p>
</div> </header>

Вместо того, чтобы утверждать, что один элемент является одновременно заголовком и предупреждением, это дает понять, что в заголовке содержится предупреждение.

3. Включение атрибутов в состояния и свойства нот

Атрибуты - это второй элемент, составляющий ARIA. Они отличаются от ролей тем, что сообщают программам чтения с экрана что-то важное о конкретном элементе, а не определяют, что это за элемент. Есть два типа атрибутов ARIA:

• Государства обмениваются информацией о функциях, которые могут измениться при взаимодействии с ними пользователя. Например, это могут быть флажки или переключатели.
• Свойства указывают на особенности, которые вряд ли изменятся во время использования. Элемент, который маркирует другой элемент, или иерархический уровень, на котором расположен элемент, являются свойствами.

И то, и другое легко обнаружить, так как они всегда начинаются с aria-, за которым следует конкретное состояние или используемое свойство. Например, состояние, используемое для информирования программы чтения с экрана о том, что флажок установлен по умолчанию, проверяется aria, как в этом примере:

 <span role = "checkbox" 
aria-checked = "правда"
tabindex = "0">
</span>

Точно так же свойство, используемое для обозначения того, когда один элемент маркирует другой, называется aria-labelledby. Вы можете применить этот атрибут к изображению, например, чтобы указать связанный с ним заголовок:

 <рисунок aria-labelledby = "operahouse_1" role = "group">
<img src = "operahousesteps.jpg" alt = "Сиднейский оперный театр">
<figcaption> Мы видели оперу <cite> Севильский цирюльник </cite> здесь! </figcaption>
</figure>

Мы рекомендуем ознакомиться со списком разрешенных ролей, состояний и свойств W3C, чтобы увидеть больше примеров атрибутов, которые вы можете использовать.

Заключение

Когда дело доходит до веб-разработки, создание доступного контента может быть не первой задачей. Однако, следуя передовым методам обеспечения доступности в Интернете и внедряя ARIA HTML в свой сайт, вы можете внести свой вклад в то, чтобы сделать Интернет доступным для всех.

Три основных метода использования ARIA на вашем сайте WordPress включают в себя:

1. Использование ARIA с семантическим HTML.
2. Добавление ролей в теги HTML.
3. Включая атрибуты для состояний и свойств заметок.

У вас есть вопросы об использовании ARIA на вашем сайте WordPress? Дайте нам знать в комментариях ниже!

Миниатюра изображения статьи EgudinKa / shutterstock.com