Кажется, что HTML5 пришел в нашу жизнь не так давно. Но на днях я осознал, что он уже достаточно плотно вошел в мою повседневную жизнь как верстальщика, хотя казалось, что для этого понадобятся годы. Но до недавнего времени я не уделял внимание такой области Web разработки, как ARIA. Cегодня я решил рассказать вам о том, почему вам стоит начать пользоваться его благами, если вы еще не сделали этого.
Я думаю, что если вы верстаете чуть больше чем раз в год для развлечения, то вы уже пробовали новые (если их еще можно так их назвать) теги, такие как aside, main, header и т.д. Я не буду вдаваться в в подробное описание каждого такого тега, вы с легкостью найдете это в интернете (например в этой статье, хочу лишь сказать, что если вы ждали того момента, когда вы сможете использовать их без всяких костылей, то он настал. Даже Internet Explorer 9 поддерживает их (все же не совсем без костылей, вам придется описать свойство display для тега <main>).
В награду за ваши труды вы получите то, что поисковые роботы зайдя на ваш сайт смогут лучше ориентироваться и индексировать ваш контент более качественно. Так же это упростит жизнь (но не решит всех проблем) людям с ограниченными возможностями.
Окей, с тегами разобрались. А что же такое ARIA? ARIA (Accessible Rich Internet Applications) - это стандарт разработанный W3C для людей с ограниченными возможностями с целью помочь им получить полноценный доступ к интернету. Современные веб приложения становятся все сложнее. Примерно так же, все сложнее и сложнее, пользоваться ими людям, которые не могут с ними взаимодействовать стандартными способами. Для решения этой проблемы были разработаны специальные атрибуты позволяющие разработчику описать структуру документа, назначение тех или иных элементов, их состояние и т.д. Познакомимся с ними поближе.
Рассмотрим для начала роли. Что дают они? В большинстве своем они повторяют функционал семантических тегов (например, heading или article) или вообще привычных нам тегов вроде img, form, button. Но зачем они тогда вообще нужны? Во-первых, некоторые из них все же несут особый смысл, например, dialog, alert, log и т.д. Во-вторых, они приходят на помощь тогда, когда по каким-то причинам (во славу бога дизайна, конечно же) вы не можете использовать специально предназначенный для этого тег, но хотите чтобы ваш, к примеру, <div> вел себя как кнопка. Вы просто вешаете на него роль и вот уже специальные программы понимают, что этот элемент можно нажать.
<div role="button">Нажми меня если сможешь</div>
Стоит отметить, что не нужно увлекаться использованием ролей повсеместно. Если тот или иной тег используется по назначению, то определение его роли избыточно.
Полный список ролей вы можете найти по это ссылке.
Я уже затрагивал проблему, что люди с ограниченными возможностями, в виду некоторых дизайнерских решений, иногда не способны взаимодействовать с вашим интерфейсом. Самый простой пример - это кнопки. Наверняка, вы использовали кнопки (или ссылки), которые не имеют под собой никакого текста, а для взаимодействия с пользователем содержат в себе картинку (или технически они имеют текст, но это иконочный шрифт). В таком случае вы можете использовать ARIA атрибуты aria-label и aria-labeledby. Они дадут возможность соотнести какой-то текст с неким элементом, через который пользователь взаимодействует с интерфейсом.
Я думаю, что многие из вас практически никогда не используют атрибут alt. Я использовал его очень давно, когда люди иногда пользовались в браузере функцией "Загрузить без картинок". Сейчас уже никто так не делает и казалось бы, что надобность в нем отпала, но это не так. Зачастую, вы вставляете свои картинки не просто так, а хотите ими что-то сказать, но слепые люди не могут воспринять эту информацию. Для решения этой проблемы просто продублируете содержимое картинки словами через атрибут alt и говоря продублируйте я имею в виду, что если на фото вы, то это не значит, что вы должны написать просто "Это я". Опишите то, что вы видите "Светловолосый мужчина средних лет в очках в зеленой рубашке поло". Стоит обратить внимание, что атрибут alt не замена тега <figcaption>. Надпись "Это я" как раз более подходит для тега <figcaption>.
Надеюсь теперь вы яснее понимаете назначение ARIA ролей и атрибутов и насколько важно поддерживать этот стандарт. Давайте вместе не забывать о людях, которым нужно немного больше внимания.
Фото Aaron Mello