Контрольный список доступности веб-сайта

20 ноября 2022 г.

Что и почему?

Под доступностью понимается разработка продуктов таким образом, чтобы они могли использоваться людьми с ограниченными возможностями. Многие проекты игнорируют эту проблему, поскольку любые дополнительные усилия рассматриваются как ненужные затраты. Однако, принимая во внимание различия в том, как (хорошо и по-разному) мы воспринимаем такие вещи, как цвет, текст и т. д., такое невнимание резко сокращает вашу пользовательскую базу. Знаете ли вы, что 8% мужчин дальтоники?

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

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

Контрольный список для обеспечения доступности веб-сайтов

1. Используйте атрибут alt для изображений и опишите их содержимое
2. Может создаваться автоматически.
3. Поможет SEO.
4. Улучшит работу вашего веб-сайта при медленном сетевом подключении.
5. Все значки должны иметь описания (особенно изображения и ссылки).
6. Вы можете использовать название.
7. В других случаях aria-label.
8. Все ссылки, даже если они представляют собой изображения, значки или пустые поля, должны иметь заголовки. Это помогает каждому пользователю, показывая в своем браузере при наведении. Используйте атрибут title.
9. Если на что-то можно нажать, но это не ссылка или кнопка браузера, используйте role="button".
10. Убедитесь, что все входные данные помечены, и вы можете перемещаться по ним с помощью табуляции.

11. Цветовой контраст

    1. Убедитесь, что цвета, которые вы используете для текста и фона, имеют хороший контраст.
    2. Вы можете использовать Проверку цветового контраста веб-доступности — соответствие требованиям WCAG (accessibleweb.com).
    3. Стремитесь к рейтингу AA или AAA.
    Тег
    4. html должен иметь атрибут lang.

Подробнее

Стандарт специальных возможностей, используемый во всем мире и используемый в качестве требования, обычно — WCAG 2.0/2.1. Взгляните на этот обзор, если хотите. Краткий обзор WCAG 2.1

Вот бесплатный тест на дальтонизм, многие люди не понимают, что они не видят цвета, как другие, в течение десятилетий colorblindnesstest.org.. р>

Подробнее "что, почему и как" - W3C.

Первоначально опубликовано здесь

---

Оригинал