Назад

Зачем мне использовать семантические теги, ARIA роли и атрибуты

Кажется, что HTML5 пришел в нашу жизнь не так давно. Но на днях я осознал, что он уже достаточно плотно вошел в мою повседневную жизнь как верстальщика, хотя казалось, что для этого понадобятся годы. Но до недавнего времени я не уделял внимание такой области Web разработки, как ARIA. Cегодня я решил рассказать вам о том, почему вам стоит начать пользоваться его благами, если вы еще не сделали этого.

Немного о семантических тегах

Я думаю, что если вы верстаете чуть больше чем раз в год для развлечения, то вы уже пробовали новые (если их еще можно так их назвать) теги, такие как aside, main, header и т.д. Я не буду вдаваться в в подробное описание каждого такого тега, вы с легкостью найдете это в интернете (например в этой статье, хочу лишь сказать, что если вы ждали того момента, когда вы сможете использовать их без всяких костылей, то он настал. Даже Internet Explorer 9 поддерживает их (все же не совсем без костылей, вам придется описать свойство display для тега <main>).

В награду за ваши труды вы получите то, что поисковые роботы зайдя на ваш сайт смогут лучше ориентироваться и индексировать ваш контент более качественно. Так же это упростит жизнь (но не решит всех проблем) людям с ограниченными возможностями.

ARIA

Окей, с тегами разобрались. А что же такое ARIA? ARIA (Accessible Rich Internet Applications) - это стандарт разработанный W3C для людей с ограниченными возможностями с целью помочь им получить полноценный доступ к интернету. Современные веб приложения становятся все сложнее. Примерно так же, все сложнее и сложнее, пользоваться ими людям, которые не могут с ними взаимодействовать стандартными способами. Для решения этой проблемы были разработаны специальные атрибуты позволяющие разработчику описать структуру документа, назначение тех или иных элементов, их состояние и т.д. Познакомимся с ними поближе.

ARIA Роли

Рассмотрим для начала роли. Что дают они? В большинстве своем они повторяют функционал семантических тегов (например, heading или article) или вообще привычных нам тегов вроде img, form, button. Но зачем они тогда вообще нужны? Во-первых, некоторые из них все же несут особый смысл, например, dialog, alert, log и т.д. Во-вторых, они приходят на помощь тогда, когда по каким-то причинам (во славу бога дизайна, конечно же) вы не можете использовать специально предназначенный для этого тег, но хотите чтобы ваш, к примеру, <div> вел себя как кнопка. Вы просто вешаете на него роль и вот уже специальные программы понимают, что этот элемент можно нажать.

<div role="button">Нажми меня если сможешь</div>

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

Полный список ролей вы можете найти по это ссылке.

ARIA Атрибуты

Я уже затрагивал проблему, что люди с ограниченными возможностями, в виду некоторых дизайнерских решений, иногда не способны взаимодействовать с вашим интерфейсом. Самый простой пример - это кнопки. Наверняка, вы использовали кнопки (или ссылки), которые не имеют под собой никакого текста, а для взаимодействия с пользователем содержат в себе картинку (или технически они имеют текст, но это иконочный шрифт). В таком случае вы можете использовать ARIA атрибуты aria-label и aria-labeledby. Они дадут возможность соотнести какой-то текст с неким элементом, через который пользователь взаимодействует с интерфейсом.

Немного об <img />

Я думаю, что многие из вас практически никогда не используют атрибут alt. Я использовал его очень давно, когда люди иногда пользовались в браузере функцией "Загрузить без картинок". Сейчас уже никто так не делает и казалось бы, что надобность в нем отпала, но это не так. Зачастую, вы вставляете свои картинки не просто так, а хотите ими что-то сказать, но слепые люди не могут воспринять эту информацию. Для решения этой проблемы просто продублируете содержимое картинки словами через  атрибут alt и говоря продублируйте я имею в виду, что если на фото вы, то это не значит, что вы должны написать просто "Это я". Опишите то, что вы видите "Светловолосый мужчина средних лет в очках в зеленой рубашке поло". Стоит обратить внимание, что атрибут alt не замена тега <figcaption>. Надпись "Это я" как раз более подходит для тега <figcaption>.

Заключение

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

Фото Aaron Mello

Возможно вам будет интересно:

Как повысить производительность React приложений

Если честно, то эту тему в интернете не поднимал только ленивый, но мне кажется, что большинство разработчиков только сейчас начинают задумываться о том, как повысить производительность React приложений.

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

Рецепт: Webpack 4 + React + Babel 7 = ❤️

Сегодня я собрал волю в кулак и, все-таки, перешел в своем давнем React проекте с Webpack 2 на Webpack 4. Не скажу, что это было сложно, но потратить немного времени, все же, пришлось. Признаюсь честно, это был мой уже второй подход. Я пытался это сделать когда он только вышел, но тогда быстро все не взлетело и я решил отложить. Теперь, когда все грабли уже успешно пройдены, то я решил написать эту небольшую статью, чтобы, возможно, облегчить вам страдания.