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

Основная цель сайта — привлечь как можно больше посетителей. Важно, чтобы сайт был доступен для людей с ограниченными возможностями. По данным ВОЗ (всемирная организация здравоохранения) в мире более 2,2 миллиарда человек, которые имеют нарушения зрения. Современные технологии позволяют такой категории людей получать информацию наравне с остальными. Вот несколько способов сделать сайт доступным для них:

Добавьте возможность управления сайтом с помощью клавиатуры

Для пользователей с нарушением зрения навигация по сайту с помощью мыши невозможна. Вместо этого они используют сочетания клавиш «tab» и «left/right/up/down arrow», поэтому управление вашим сайтом должно быть удобным как с помощью мыши, так и с клавиатуры. Пользователи, которые управляют сайтом с клавиатуры,  должны иметь доступ ко всем интерактивным элементам страницы, а не только к основной навигации и внутренним ссылкам. Проверьте, что все веб-элементы активны по нажатию «tab».

Используйте правильный alt-текст 

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

• Людям с нарушениями зрения;
• Тем, кто отключил показ изображений для экономии трафика;
• Поисковым системам;

Вот несколько советов по созданию правильного alt-текста:

• Будьте лаконичны при описании изображения. Исключение, когда уместен длинный alt-текст — если вы описываете изображение с текстом внутри, например скриншоты или фотографии знаков;
• Не включайте в описание ключевые слова для поисковой оптимизации и имя автора изображения;
• Не начинайте alt-текст со слов «изображение», «фотография» – скринридер добавляет это по умолчанию;
• Используйте завершение точкой – это позволит скринридеру сделать небольшую паузу после последнего слова alt-text, что звучит более приятно;
• Не используйте атрибут title рядом с alt-текстом.

Используйте правильные цвета 

• Играйте на контрасте — ваш контент должен контрастировать с фоном. Хорошее решение — темный текст или фото на светлом фоне;
• Не используйте градиент — дальтоники искаженно видят переходы цветов и оттенков; 
• Используйте меньше цветов — чем меньше цветовая палитра, тем меньше путаницы;
• Не располагайте оттенки одного цвета рядом;
• Не используйте цвет как единственное средство для передачи информации — добавляйте фигуры и иллюстрации;
• Используйте NoCoffee — симулятор плохого зрения. Это инструмент, который  поможет понять, насколько сайт удобен для дальтоника, слабовидящего или человека с катарактой;
• Если на вашем сайте есть изображения товаров – сделайте для них описания в деталях — это поможет пользователям понять, как выглядит продукт. 

Сделайте содержимое читабельным

• Убедитесь, что  у вашего контента четкая структура на всех страницах сайта;
• Используйте теги заголовков для выделения текста. Тег H1 используйте для основного заголовка, H2 и H3 — для разделов и подразделов;
• Составьте короткие и точные предложения ко всему содержанию. Избегайте добавления длинных абзацев;
• Расположите на сайте сперва навигацию, а потом контент, либо наоборот;
• Предоставьте пользователю несколько вариантов перехода на другие страницы (обычная навигация, строка поиска, карта сайта)

Уделите внимание аудио и видео контенту

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

Оптимизируйте URL

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

^{По мотивам статьи: newbreedmarketing}