WCAG, W3C, WAI, WTF?

Что такое веб-доступность и кто ее определяет? Вот хорошее начальное определение:

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

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

Ну, это сложно… Нет, это часть ответа — это серьезно сложно.


Разрушая это

Беглый поиск «как сделать мой веб-сайт более доступным» приведет вас к любому количеству сообщений в блогах или веб-страницах. Около 75% из них указывали или ссылались на массивные «Руководство по обеспечению доступности веб-контента» или WCAG.

WCAG так же прост для понимания, как юридический документ, написанный на иностранном языке.

Теперь этот документ WCAG представляет собой большую причудливую рубрику оценивания — да, как те, что были в старшей школе. Его можно использовать для оценки веб-сайтов с уникальный критерии градации.
Рейтинги A, AA или даже AAA (независимо от системы оценки говядины).
Затем, в зависимости от того, сколько пятерок получит ваш сайт, ему может быть присуждена медаль: бронзовая, серебряная или золотая. Так просто, да? 🙄

Будучи новичком, не прикасайтесь к этому документу 10-футовым шестом. Ну, по крайней мере, до тех пор, пока вы не изучите некоторые основы из более простого для понимания источника. Именно это мы и попытаемся здесь сделать — сделать понимание доступности более доступным (очень мета).


Из чего состоит веб-доступность

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

  • слуховой
  • познавательный
  • неврологический
  • физический
  • речь
  • визуальный


Как сделать ваш сайт более дружественным к a11y*

Примечание. a11y — это термин, используемый в Интернете и в индустрии программирования для «облегчения доступа к цифровым технологиям». Если вы хотите узнать больше об этом, проверьте этот пост от Проект A11y


Давайте посмотрим на некоторые примеры

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


Проблема: этот дом выглядит потрясающе — улучшение для людей с нарушениями зрения

Ваш веб-сайт в основном основан на видео? Например, услуга видеосъемки для дней открытых дверей и риелторов?

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

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

Они могут видеть дом Выглядит великолепно из видеопрохождения, но люди с нарушениями зрения?

Возможно, они не смогут много рассказать — если что-нибудь о доме из видео, в зависимости от тяжести их инвалидности.


Решение: описание визуальной информации или «описанное видео».

Из веб-сайт WCAG:

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

Очень помогает добавление простого альтернативного видеоописания, объясняющего некоторые основные особенности дома, с аудиосопровождением, например: «гладкий асфальтированный подъезд с небольшим уклоном, до дверного порога и 2 ступеньки до входа».
Эти дополнения будут полезны пожилым людям, чье зрение ухудшается, или людям с нарушением зрения.


Проблема: кричащий веб-сайт — да или нет?

Является ли ваш веб-сайт буквально «кричащийт.е. у него есть куча всплывающих разделов? Карусели с движущимися изображениями? Анимированные изображения героев? Грандиозные CSS-переходы?

Это может показаться хорошей идеей, и, вероятно, в некоторых случаях так и есть (спросите свой отдел маркетинга, они вам скажут 🙄 ), но что, если кто-то с неврологическая инвалидность происходит на вашем сайте?


Решение: будьте более «дзен»

Вы можете «успокоить» свой сайт несколькими способами:

Уменьшите количество «мигающих» элементов на странице

Уменьшите частоту мигания, обновления, перехода или анимации элементов.


Проблема: скорость убивает

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

Скажем, первое меню состоит из 3 пунктов:

  • Одежда
  • Аксессуары
  • Обувь

Но при наведении каждый из этих элементов имеет 20 подпунктов, и вам нужно достаточно быстро перевести курсор с пункта «Обувь» в «Избранное осенней моды», иначе меню подумает, что вы вышли, и оно автоматически закроется.

Кто-то с когнитивная или физическая инвалидность может быть не в состоянии прочитать содержимое или перейти к нему вовремя, прежде чем всемогущий :hover Время ожидания правила CSS истекло.


Решение: Замедлите его, waaaaay вниз

Считают, что :hover selector — не самый удобный способ ведения дел.

Вместо этого вы можете выбрать «кликабельное» меню, где, когда вы нажимаете «Обувь», появляется новый раздел со списком типов обуви. Это помогает соответствовать рекомендациям WCAG (1.4.13: Контент при наведении курсора или фокусе) в отношении содержимого, на которое можно навести курсор.

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


Вывод

Это было очень небольшое введение в некоторые принципы веб-доступности, оно намеренно не охватывало некоторые «основы», такие как лайки. alt="add your description here".

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

Вместо этого цель состояла в том, чтобы показать, что означает веб-доступность, помимо ошибок ES-Lint, связанных с alt-тегами.

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


Примечание от Автора:

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

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

Фото Андреа Пиаккуадио: