24.09.2021
ccba6c2dd023e873f39dc702b671790b

10 способов улучшить доступность сайта

По данным Глобальной организации здравоохранения, 15% населения мира (около 1 миллиардов человек) — люди с ограниченными возможностями. Потому так важно убедиться, что содержание веб-сайта доступно для каждого. Эти 10 советов позволят адаптировать его для более широкой аудитории.

В эталоне текст должен быть доступен для людей с разными особыми потребностями:

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

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

1. Используйте семантический HTML
Семантические элементы употребляются для четкого описания назначения элементов. Несемантические элементы, такие как div либо span, ничего не говорят об их содержании, потому программы чтения с экрана и вспомогательные устройства имеют возможность неправильно понимать контент на сайте.

Решение. Используйте семантические элементы HTML, которые обрисовывают его содержимое, например header, nav, main, article, aside либо footer. Программы чтения с экрана не только конвертируют текст в речь, но и употребляют информацию из элементов HTML. Семантические блоки упрощают им работу и дают четкую структуру, которой они имеют возможность следовать.

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

Как пострадавшему от пандемии бизнесу получить содействие?

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

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

Решение. При необходимости используйте атрибуты aria для предоставления дополнительной инфы о вспомогательных технологиях. Например:

  • используйте атрибут role, если роль элемента неясна,
  • прописывайте характеристики для придания элементам дополнительного значения либо семантики, например: aria-labelledby,
  • указывайте состояния частей, например: пропишите aria-disabled = «true», чтобы сказать вспомогательным технологиям, что элемент отключен.

Если необходимо полностью скрыть декоративные элементы для программ чтения с экрана, можно использовать атрибут aria-hidden = «true» в элементах HTML.

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

Решение. Используйте глобальный атрибут tabindex, чтоб добавить фокус элементам там, где это нужно. Для блоков, которые не должны быть доступны с помощью клавиатуры, можно использовать tabindex=»- 1″. Также удостоверьтесь, что для интерактивных элементов установлено свойство outline, по другому пользователи не смогут увидеть, какой элемент в сегодняшний момент находится в фокусе.

5. Установите верный размер сенсорных целей
Маленькие сенсорные цели для устройств с маленьким экраном затрудняют навигацию и взаимодействие с элементами.

Снимок экрана: Medium

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

6. Адаптируйте сайт при масштабировании на 200%
Юзерам, страдающим проблемами со зрением, комфортнее использовать увеличенный шрифт. Потому содержимое сайта должно масштабироваться до 200% без утраты функциональности. Это означает, что текст должен отлично перестраиваться, а функционал сайта не должен пострадать.

Решение. Удостоверьтесь, что масштаб можно увеличить вдвое без нарушения макета. Так юзеры с нарушениями зрения смогут лучше созидать контент.

7. Используйте достаточный цветовой контраст
Юзерам с плохим зрением бывает сложно отличить фон от текста с низким цветовым контрастом.

Решение. Согласно ISO-9241–1, малый рекомендуемый коэффициент контрастности составляет 3:1. Если вы стремитесь к уровню доступности веб-сайта AA, необходимо обеспечить постоянное соотношение не наименее 4,5:1, а для уровня AAA — 7:1. Чтоб проверить коэффициент контрастности сайта, можно использовать такие онлайн-инструменты, как Contrast-ratio.com либо расширение Axe by deque. Также контрастность цветов можно проверить с помощью Chrome DevTools.

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

Снимок экрана: Medium

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

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

Решение. Удостоверьтесь, что динамический контент доступен людям с ограниченными способностями. Например:

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

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

Снимок экрана: Medium

Решение. Удостоверьтесь, что в сообщениях об ошибках кроме цвета используются:

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

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

По материалам: rb.ru

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *