10 рекомендаций по улучшению доступности веб-страниц

Оригинальная статья — https://aerolab.co/blog/web-accessibility/

Автор — Eva Ferreira


 

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

Есть цитата Тима Бернерса-Ли , директора W3C и изобретателя Всемирной паутины, в которой говорится: «Сила Интернета в его универсальности». Как люди, зарабатывающие на жизнь созданием веб-сайтов, мы несем ответственность за их доступность.

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

 

Что это такое «Веб-доступность страницы»?

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

Вы найдете кучу контента по этой теме в Интернете. Также посетите  WAI  — WebAccessibilityInitiative, если хотите копнуть глубже.

Наши рекомендации:

1. Не создавайте зависимостей от цвета

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

Почему?

Например, широко известно, что зеленый означает «Правду», а красный означает «Ложь», но какую смысловую нагрузку несут эти цвета, когда не подкреплены другими знаками?

Слепота цвета в Интернете

Цветная слепота является одним из наиболее распространенных недостатков зрения. Она затрагивает около 4,5% всего населения мира (это больше чем пользователей IE11, ну вы поняли).

Если мы отображаем важные сообщения в наших пользовательских интерфейсах, используя только цвет для передачи информации, мы отсеиваем 4,5% аудитории.

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

Слепота цвета в Интернете

Очень интересное решение было принято командой caniuse.com . Оно предоставляет альтернативную цветовую палитру для отображения содержимого их таблиц совместимости (в настройках есть соответствующий чекбокс).

Веб-доступность-caniuse-website

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

2. Не блокируйте масштабирование в мобильное версии

В нашу эпоху отзывчивого дизайна мы могли бы совершить несколько безответственных ошибок. Одна из них является добавление max-scale = 1.0, что отключает функциональность для увеличения веб-страниц на мобильных устройствах.

Астигматизм затрагивает от 30 до 60% взрослого населения в Европе и Азии, а размытое зрение может поражать людей всех возрастов и национальностей (Привет, мама!) (Автор  оригинальной статьи передаёт привет своей маме).

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

Кроме того, чтобы пользователи могли свободно масштабироваться на мобильных устройствах, не забудьте также проверить, что ваш макет выглядит неплохо, даже при 200% зуме в браузере  😉

3. Верните атрибут «alt» на место

Независимо от того, как долго вы делаете веб-сайты, вы можете быть удивлены, узнав эти несколько советов по знаменитому, но таинственному alt:

  1. Атрибут alt является обязательным для каждого тега «img», но при этом пустой атрибут alt является полностью допустимым. Если изображение является декоративным и не нужно понимать его содержание, вы можете использовать в качестве alt пустую строку;
  2. 2. Скрин-ридеры сообщают пользователю, что тэг img — это изображение, поэтому нет необходимости дублировать его и начинать с «Картинка о…». Пишите коротко и ясно.
  3. 3. Отображение картинки так же важно, как и её значение: если ваш логотип связан с домашней страницей вашего сайта, тогда ваш текст должен быть чем-то вроде «Назад на главную страницу» вместо бессмысленного «logo».
  4. 4. Альтернативный текст соприкасается не только с доступностью. Иногда пользователи с медленным интернетом отключают изображения для более быстрого использования браузера. Имейте этих пользователей в виду всякий раз, когда вы пишете свои атрибуты alt!

Но не все изображения на вашем сайте являются тегами img, не так ли? У вас может быть одно SVG или даже два … или целая система значков SVG.

Как сделать SVG доступным для всех? К счастью для нас, стандарт масштабируемой векторной графики позволяет описывать изображения! Для описания наших SVG’шек мы можем использовать <title> и <desc> для коротких и длинных описаний соответственно.

 4. Добавьте субтитры и описание к своим видео

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

  1. Возьмем, например, YouTube. Когда вы загружаете видео на платформу, вы можете включить титры. Они автоматически генерируются и могут оказаться неточными в некоторых случаях, в зависимости от языка и фонового шума. Тем не менее, они очень просты в реализации и могут хорошо работать на большинстве англоязычных видеороликов.
  2. 2. Если мы ищем 100% точные субтитры, трудно доверять YouTube, поэтому мы должны сами написать титры или нанять третью сторону для этого. YouTube использует самые распространенные форматы субтитров (.srt, .sub и .sbv), а также позволяет нам писать субтитры на самой платформе, что может быть очень удобно, если мы не владеем программным обеспечением по созданию субтитров (или просто не хотим).
    Веб-доступность-перевод-субтитры-Youtube-tool
  3. Но, возможно, вы не хотите использовать YouTube как свою платформу хостинга. Возможно, вы хотите использовать видео HTML5, размещенное на вашем сервере. Вам повезло! HTML5 добавил тег <track>, который вы можете использовать, чтобы легко прикрепить столько файлов заголовков и субтитров, сколько хотите, используя формат WebVTT (Translations FTW!).

5. Придерживаться семантическое вёрстки =  доступность

Тэг шрифта (<font>Соскучились по мне?</font>) , помните? Надеюсь, вы это больше не используете, т.к. это были темные времена.

Несмотря на распространенное мнение, семантика не родилась с HTML5. Она начала своё существование с первой HTML-страницы и с тех пор значительно улучшилась. Cтандарт HTML5 принёс новые семантические теги для постоянного использования.

Веб-сайт accessibility-first-html-website

А что, семантика не только для SEO?

Не только. Когда вы сознательно выбираете тег <h1> вместо <p>или, вы намеренно меняете значение элемента, модифицируете иерархию и создаете древовидную структуру информации на вашей странице.

Скрин-ридеры также не забывают об этом. На самом деле семантика является одним из самых полезных видов оружия в вебе.

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

6. Используйте дополнительные аттрибуты правильно

В соответствии с предыдущим пунктом про семантику я хотел бы обсудить несколько моментов:

<time> и Datetime

<time> отображает множество типов даты, часовых поясов и продолжительности с использованием стандарта ISO 8601 для представления даты и времени.

Datetime — необязательный атрибут, который помогает отображать содержимое

Del и Ins

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

Элемент ins обозначает добавленный контент в документе:

 

Элемент del обозначает удаленный контент:

 

<button> и <a>

Тащите попкорн, сейчас будет веселуха. Когда мы должны должны использовать <button>, когда <a>?

Посмотрим:

Теги <a> предназначены для привязки одного файла к другому или открытия ссылок на новой вкладке или в текущей. Однако этот тег не идеален. Элемент кнопки является правильным выбором для этих ситуаций и обычно реализуется с помощью JavaScript.

Кроме того, тег кнопки можно легко путать с типом input = «кнопка», но разница заключается в том, что первая может получать больше контента (1.текст, 2.изображение + текст или 3.только изображения).

При использовании тега button нужно учитывать две вещи:

Во-первых, если содержимое кнопки недостаточно явное (например, возьмите «X» для кнопки «Закрыть»), мы должны добавить атрибут aria-label, чтобы помочь объяснить его функцию.

Во-вторых, если добавление атрибута href имеет смысл (компонент поиска или галерея лайтбоксов), мы можем также использовать тег и переопределить поведение кнопки с помощью JavaScript. Галерея изображений, использующая теги с href, будет изящненько деградировать, если JavaScript не включен.

Но…

7. При необходимости используйте role

Чтобы сообщить пользователям скрин-ридеров, что наша ссылка запускает какое-то действие, и его функционал совпадает с <a>, мы должны добавить атрибут role со значением button.

Но будьте осторожны!

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

Подробнее об этом читайте в MDN .

Имейте в виду, что role обычно не нужен, если вы не нарушаете правила, как в приведенном выше примере. В семантических элементах HTML уже используется role по умолчанию: «Навигация» для тега <nav>, «ссылка» для тега <a> и т. д. Это означает, что атрибут role необходим только тогда, когда мы хотим изменить эти значения по умолчанию.

8. Скрытие элементов

Есть несколько методов, позволяющие скрыть элементы с помощью HTML и CSS. Таблица ниже поможет вам найти наилучшый вариант для каждой ситуации:

Метод Действие по просмотру Доступность на скрин-ридере Совместимость
CSS: visibility: hidden; Скрывает элемент из вида, но его исходное пространство остается занятым
(почти как opacity: 0;)
Не читается Работает везде, уиии!
CSS: display: none; Скрывает элемент из представления и его исходное пространство теряется,
следующий элемент в потоке займет место нашего элемента.
Не читается Работает везде, уиии!
HTML5: атрибут hidden То же, что и display: none; Не читается IE 11+
Aria-hidden = «true» Скрывает элемент из представления, но не передается пользователю с Assistive Technology Не читается IE 11+
CSS: класс .visuallyHidden Скрывает элемент из представления и удаляет его из рабочего процесса Читается Работает везде, уиии!

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

Класс VisuallyHidden является одним из примеров кода CSS, которые должны быть добавлены в блокнот. Вы можете изменить имя, если хотите.

9. Следуйте стандартам доступности веб-сайта

Повсеместная доступность в Интернете сложная штука. Стандарты и рекомендации вам могут помочь разобраться.

Предыдущий пункт в этой статье приводят к вопросам: как работает ?lt;button?gt;? Когда нужно его использовать? В чем разница между display: none; и аттрибутом “hidden”?

Вначале это может показаться скучным занятием, но W3C standards и руководство WCAG  не только надежны, но и познавательны. Идите вперед и постарайтесь не заблудиться в бесконечности информации, которую предоставляют эти ресурсы. Уверяю вас, вы обнаружите методы, о которых вы никогда не слышали!

10. Аудит и обзор

После того, как вы применили все эти знания, пришло время проверить доступность ваших текущих сайтов. Вот список лучших инструментов для проверки доступности:

  • ChromeVox — это программа для чтения с экрана, которую вы можете использовать для тестирования вашего сайта. (доступно для пользователей Google Chrome на Mac и Windows)
  • Специальные инструменты для разработчиков Chrome: еще одно отличное расширение для Chrome, которое добавляет возможность аудита доступности в ваши повседневные инструменты.
  • Color Filter: проверьте свой веб-сайт на различные типы цветной слепоты с помощью этого онлайн-инструмента.
  • Валидатор W3C: это официальный инструмент W3C. Он позволит вам узнать, соответствует ли ваша разметка HTML правилам веб-доступности!
  • WAVE:  инструмент для получения оценки доступности веб-страниц, созданный WebAIM.

Заключение

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

Если вы сомневаетесь, не бойтесь спрашивать других разработчиков или искать полезную информацию. Некоторые из моих любимых источников — проект A11y , A11y Wins , HTML5 Doctor и MDN.