Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. ARIA
Code

Лучшие практики по внедрению ARIA

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Accessibility Recipes for Web Apps

Russian (Pусский) translation by Pembelight (you can also view the original English article)

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

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

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

И так, начнем!

Что такое ARIA?

По своей сути ARIA является расширением современных языков веб-разработки (в основном HTML), что обеспечивает полномасштабный доступ для целевых пользователей.

Что это значит?

Дополнительные возможности HTML с помощью ARIA

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

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

Вторым важным преимуществом является соотношение элементов. В HTML каждый элемент существует как дочерний и/или родительский элемент относительно другого элемента. Но данная структура не охватывает все семантические отношения.  Это может привести к ситуации, когда контроллер и элемент, которым он управляет, в случае если они размещены в отдельных div, нечетко взаимосвязаны.  Это проблема срочной важности, когда речь идет о сложных структурах сайта или изменении DOM с помощью JavaScript.

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

ARIA для расширенной доступности

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

Другая ключевая возможность заключается в том, что ARIA не просто расширяет HTML - она ​​также может использоваться для того, чтобы сделать другие менее дружественные технологии более доступными для большего числа пользователей. Это часто относится к людям, использующим AJAX или DHTML в своих веб-приложениях.

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

Почему мы должны использовать ARIA?

Что касается доступности, ARIA стала одним из наиболее широко распространенных стандартов, и более 25% из первых миллионов веб-сайтов используют его в той или иной степени.

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

Помимо аспекта передового опыта, существует также бизнес-стимул для внедрения ARIA. С 2-3% американцев, имеющих некоторую форму слабовидения, значительная часть рынка выиграет от использования стандартов.  Кроме того, интеграция ARIA будет выгодной, поскольку такое внедрение все больше растет среди нестандартных веб-интерфейсов и проникает в такие устройства, как смарт колонки.

Лучшие практики для внедрения ARIA

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

Использование подхода Light Touch

Хорошая реализация ARIA не требует дополнительных атрибутов и ролей для каждого случая.

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

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

Как избежать лишней разметки (особенно при использовании HTML5)

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

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

Это часто случается с людьми, использующими элементы, представленные в HTML5. Например, при использовании элемента <button> вам больше не нужно добавлять атрибут role = "button", поскольку роль уже явно определена HTML-кодом.

Тестирование с помощью скринридера

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

Многие атрибуты ARIA могут создавать уведомления или оповещения для пользователя, и если вы используете область содержимого aria-live, которая обновляется каждые 10 секунд, возможно, что это усложнит использование вашего веб-сайта.

Итеративная доступность для Интернета

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

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

Хороший UX - это хорошая доступность (и наоборот)

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

Если вы хотите глубже вникнуть в особенности того, как UX и разработка (за пределами ARIA) могут использоваться для улучшения доступности, ознакомьтесь с  Web Content Accessibility Guidelines.

Вы также можете ознакомиться с нашим Complete Learning Guide to Web Accessibility.

Часто задаваемые вопросы об ARIA

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

Вот некоторые из наиболее распространенных вопросов и комментариев, которые появляются в Интернете:

Какие браузеры поддерживают WAI-ARIA?

Многие! Большинство современных браузеров в некоторой степени поддерживают функции ARIA, хотя это немного отличается в зависимости от браузера. Если вы хотите увидеть подробности для каждого браузера, воспользуйтесь таким инструментом, как  Can I Use?

Can I Use ARIA results

Можно ли использовать ARIA с WordPress?

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

Что произойдет, если ARIA не поддерживается?

Так как ARIA не влияет на рендеринг, ничего! В большинстве случаев, если устройство не поддерживает ARIA, оно будет полностью проигнорировано.

Сделайте Интернет лучше!

Объединив все статьи в одну серию, я надеюсь, что теперь у вас есть все инструменты, необходимые для улучшения доступности вашего сайта!

Если у вас есть какие-либо вопросы, отзывы или замечания к тому, что я сказал, пожалуйста, сообщите об этом в комментариях!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.