Сделайте свой сайт на Readymag более доступным

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

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

Изображения

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

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

Чтобы добавить alt text к изображению, нажмите кнопку Semantics в настройках виджета и введите нужный текст во всплывающем окне. Если альтернативный текст прописан, при наведении курсора на изображение в режиме предпросмотра вы увидите желтое поле с текстом.

Текст

Заголовки расставлены в правильном порядке

Иерархия заголовков должна соответствовать логике документа. Например, тег <h3> описывает заголовок подсекции внутри <h2> — таким образом, тегу <h3> всегда должен предшествовать тег <h2>.

Чтобы изменить стиль текста, выберите нужный фрагмент и перейдите в раздел «стили» (Styles) в меню справа. Кликните на стрелку вниз возле названия стиля, чтобы изменить размер шрифта, цвет, высоту строки, выравнивание, межстрочный интервал, а также задать отступы.

Текст не вставлен картинкой

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

Цвета

Между виджетами и фоном достаточный контраст

Некоторые цвета и цветовые сочетания могут запутать посетителей с дальтонизмом. Для проверки используйте Webaim.org — набор инструментов для измерения контрастности. Также убедитесь, что цвет — не единственное средство передачи информации (избегайте, например, таких инструкций: «выберите красный кружок, чтобы продолжить»).

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

Анимация

Анимация не мерцает слишком интенсивно

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

Ссылки

По ссылке понятно, куда она ведет

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

Все ссылки на документы указывают на тип и размер документа

Если вы ссылаетесь на документ, убедитесь, что указан тип документа (DOC или PDF) и размер файла.

Навигация

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

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

Прочитать оригинал этого материала на английском можно здесь.

Посмотреть самые вдохновляющие проекты, сделанные в Readymag — здесь.

Создать свой первый проект на Readymag бесплатно — здесь.