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

Доступность сайта: Приступая к работе с Ария

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Homepage Elements and Standard Navigation

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

Final product image
What You'll Be Creating

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

HTML является основным языком разметки онлайн, который используется почти 83% существующих веб-сайтов. Хотя за 25 лет с момента его создания произошли некоторые изменения, даже более новые итерации, такие как HTML5 и AMP, оставляют желать лучшего, особенно когда речь идет о доступности. Вот где ARIA. В этом учебнике я собираюсь говорить о том, что Ария, почему это полезно для вашего сайта и несколько способов, которые могут быть добавлены на ваш сайт.

Что такое ARIA?

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

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

Кто отвечает за ARIA?

Ария-это проект, организованный W3C (World Wide Web Consortium). Проект соблюдает те же стандарты для обновления и редактирования как их других инициатив. Они также предоставляют хранилище GitHub несколько тестов, которые можно запускать, чтобы убедиться, что ваша страница выполняется правильно.

Что не так с моей текущей разметки сайта?

Большинство сайтов, которые имеют структурированной, хорошо продуманный дизайн достаточно хорошо делать, когда дело доходит до адаптивных технологий (т.е. программы чтения с экрана). Однако имея возможность выяснить, как использовать ваш сайт пользователя и иметь его быть простым в использовании – разные вещи. Пользователи со слабым зрением составляют почти 2% населения, и для них, разница может означать сохранение значительное количество времени и детективной деятельности при попытке выполнения основных задач онлайн. Это может быть разница между предлагая посетителям захватывающий опыт и обеспечивая лабиринт для них ориентироваться.

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

Ладно но что она делает?

В целом Ария соединяет элементы вместе в семантически значимым образом. Она предоставляет пользователю дополнительные смысли относительно взаимодействия. Вот некоторые реальные примеры как она может быть использована:

  1. Связывание невложенных элементов: С простой HTML, браузер пользователя может видеть только отношения, основанные на родитель/потомок. В некоторых ситуациях однако, мы можете ряд кнопок параллельно с содержимым в иерархии HTML. С Ария, мы можем определить, какой тип контроллера каждой кнопки, и какой элемент управляет в другом месте в документе.
  2. Интерактивные элементы объявляются: в то время как HTML предоставляет несколько элементов для интерактивности, Ария определяет десятки, позволяя для более детального описания того, что можно сделать каждый элемент вашей страницы. Кроме того они могут назначаться HTML-теги, которые не используются для этой цели, но может иметь смысл в вашем конкретном случае. Например, вы могли бы использовать<li>тег для серии флажки, которые вы не хотите быть состоит из элементов формы.
  3. В прямом области уведомлений об обновлении: еще одна особенность, которая обеспечивает ARIA является определение «живой» области содержимого. Когда область содержимого определяется таким образом, Ария уведомит пользователя всякий раз, когда содержимое в пределах изменения этого элемента. Это может быть полезно, когда убедившись, что пользователи со слабым зрением знают, что что-то изменилось на вашей странице.

Добавление ARIA для веб-страниц

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

Создание альтернативных маркировки с Ария

Когда дело доходит до альтернативных маркировки, большинство разработчиков знакомы с <alt> атрибут обычно используется на <img> Теги. Этот тег служит важной цели: описания изображения, это придает для увеличения доступности (или как общие SEO тактику, в зависимости от вашей точки зрения).

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

Определение элементов ARIA-конкретного пользовательского интерфейса

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

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

Вы можете определить всплывающую подсказку, используя Ария следующим образом:

Определения доступных ARIA

Чтобы расширить эти элементы пользовательского интерфейса, вот краткий список некоторых из наиболее интересных «ролей» которые могут быть определены. Полный список доступен в документе ссылки спецификации.

  • Поиск
  • баннер
  • Презентация
  • панель инструментов
  • статус
  • пункт меню
  • Журнал
  • диалоговое окно
  • Ссылка

Установление отношений вне структуры подчинения

Теперь давайте расширять на точку, что мы говорили о ранее: принудительное структура HTML. В то время как родитель/потомок это хорошо для принятия решения, как вещи должны быть заказаны, она отстает, когда необходимы более значимым соединения. Примером этого является одноуровневых элементов. Некоторые библиотеки добавили способность для братьев и сестер или других форм связи элемента быть пройден, но обычно это происходит в JavaScript или другом языке вне разметки.

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

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

Этот фрагмент говорит, что nextbutton.jpg изображение кнопки, которая является элементом управления для учебника div ниже.

Создание «Живут» элементов в ARIA

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

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

Мы можем добавить этот атрибут к элементу, подобному этому:

Создание веб-сайта для всех пользователей

С чуть более 2% населения США, перевозящих некоторые формы слабовидящим лейбла повышение доступности вашего сайта может резко досягаемости вашего сайта. Для тех, кто с сайтами, достигнув несколько стран этот номер становится еще больше. Поверх доступность Ария также предоставляет способ для не браузер интерфейсов для использования вашего сайта, с количеством устройств на базе голос уже оказывают поддержку.

Внедрение 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.