Что такое ARIA Markup? — Путеводитель для начинающих

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

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

Что такое Ария? Набор атрибутов кода, расширяющие возможности HTML и облегчающие оптимизацию сайта для чтения сэкрана. Он делает это, делая части вашего сайта видимыми для вспомогательных технологий, что в противном случае, эти устройства не смогут взаимодействовать с вообще.

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

Зачем делать свой сайт доступным?

Некоторые люди могут задаться вопросом: почему забота о доступности Интернета? Действительно ли стоит положить в ресурсы, чтобы узнать спецификации, как ARIA? Является ли создание доступного веб-сайта действительно делает большую часть влияния?

Инвалидность не является редкостью

В действительности, да. Инвалидность не так уж и редка. 18,7% американцев имеют инвалидность той или иной форме. Хотя не все из них будут ухудшать их способность взаимодействовать с Интернетом, это все еще ошеломляющее число, и это включает только людей из США.

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

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

54% инвалидов находятся в сети,и хотя это число меньше, чем по сравнению с населением в целом, это все еще значительная часть.

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

Кроме того, он даже поставляется с личной выгоды.

Доступность перекрытия с хорошим веб-дизайна и SEO

Сайт, который следует стандартам доступности часто один, который использует хорошие принципы веб-дизайна, лучше работает на мобильных устройствах,и занимает высокое место в SEO.

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

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

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

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

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

Что такое считывани экрана?

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

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

Без экранных считывателей, слабовидящих людей будет бороться, чтобы использовать компьютер и Интернет, или быть не в состоянии использовать их вообще.

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

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

Что такое Ария?

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

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

Цитируя документацию Mozilla: «Дополнительная роль ориентира используется для обозначения вспомогательного раздела, который относится к основному содержанию, но может стоять в одиночку при разделении». Таким образом, в основном, эта часть разметки позволяет читателям экрана знать о том, что часть макета они имеют дело с.

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

Когда ARIA действительно необходима?

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

С другой стороны, вы не должны использовать ARIA, когда то, что вы определяете уже доступно. Например, <button> HTML-элемент распознается читателями экрана. Он не должен иметь button роль ARIA. Функции следует включать только в том случае, если вы не используете HTML-элементы, поддерживаемые вспомогательными устройствами.

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

Все еще запутался? Давайте поговорим немного больше о том, как работает ARIA.

Понимание ARIA

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

Разметка ARIA состоит из трех атрибутов: роли, состояния и свойства.

Ария Роли

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

• Ориентир роли — Разделите сайт на различные разделы, как основной контент, навигация, и дополнительные области. Это может помочь посетителям получить их подшипников и легче найти то, что они ищут на странице.
• Роли документов — Опишите определенные разделы на странице, такие как статьи, документы, списки и строки.
• Роли виджетов — Определите элементы и интерфейсы. Вкладки, текстовые ящики, оповещения и кнопки — вот некоторые элементы, которые может описать ARIA. Когда HTML не определяет эти элементы, или вы используете виджет из множества различных частей, роли виджетов могут помочь.
• Абстрактные роли — Они используются браузером. Вам не нужно беспокоиться о них.

Государства и свойства

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

Примером состояния является aria-busy , который говорит читателю экрана, что элемент обновляется. Другой aria-pressed , который указывает на то, что кнопка была нажата. Это элементы, которые могут активно меняться.

С другой стороны, свойства включают атрибуты, подобные aria-valuemax тому, который устанавливает максимальное число в селекторе диапазона, или указывает на то, aria-haspopup что элемент вызовет всплывающее окно. Они вряд ли будут обновляться.

И это основы ARIA. Гораздо проще, как только он сломался, не так ли? Но вы будете удивлены, как много вы можете сделать с ним.

Чтобы узнать больше, попробуйте официальную документацию WAI-ARIAили введение Новичка Google для разработчиков.

Тестирование на доступность ARIA

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

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

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

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

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

Наконец, этот контрольный список виджетов ARIA делает большой аудит в то время как вы проектируете.

Другие способы сделать ваш сайт доступным

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

Вот несколько примеров лишь нескольких руководящих принципов, которые вы должны следовать.

• Содержимое веб-сайта реагирует и работает при увеличении.
• Сайт и его элементы могут быть использованы только с клавиатурой.
• Текст правильно противопоставляется фону.
• Все нетекстовые материалы содержат текстовые альтернативы, включая аудио- и видеоподписи/транскрипты.
• Убедитесь, что большинство изображений имеют описательный альт текст, а декоративные изображения имеют пустой альт текст.
• Никакая информация не передается исключительно через зрение, звук или цвет.
• Избегайте автоматической воспроизведения звука без предоставления кнопки отключения звука.
• Автоматически движущиеся элементы могут быть приостановлены или остановлены.

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

Обеспечение того, чтобы ваш сайт был пригожен каждому

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

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

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

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

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

Вы когда-нибудь возникли проблемы навигации веб-сайтов? Что могут сделать веб-дизайнеры и разработчики, чтобы улучшить ситуацию? Препятствуйте нам знать ваш опыт с он-лайн доступностью (или отсутсвием их) в комментариях!