Как позаботиться о всех людях на сайте и быть хорошим разработчиком
Привет! Сегодня мы говорим о важной теме: a11y.
Главное правило, которое нужно запомнить: a11y не про людей с инвалидностью. a11y важен всем, хороший разработчик отличается от плохого вниманием к деталям: вам нужно заботиться о всех ваших пользователях, а не только о тех, что пользуются тем же браузером и живут как вы. Давайте разбираться.
Для начала я хочу вас познакомить с проектом a11yproject — ребята давно и планомерно занимаются a11y, переводить их нет смысла: лучше читать первоисточник. И, конечно же, нужно помнить об MDN.
На самом деле, a11y это очень обширная тема, взгляните что на эту тему думает W3C (консорциум, который создаёт стандарты): одних только стандартов 8 штук! Поэтому в этом уроке мы поговорим об основе основ, а дальше вы уже сами погрузитесь.
A11y это доступность вашего сайта для всех людей. Как я и сказал, a11y не только для людей с инвалидностью, a11y вообще для всех: пользователи вашего сайта должны им нормально пользоваться.
На мой взгляд, это касается двух вещей:
- работа сайта,
- обратная связь
Под работой сайта я подразумеваю, что сам сайт должен работать понятно и не путать людей. Давайте пройдёмся по списку.
семантика король доступности — если сайт правильно свёрстан, то, во-первых, его поддерживать легче, а во-вторых, браузерам и другим машинам его читать легче.
В дизайне должна быть нормальная контрастность, потому что не у всех идеальное зрение. Если вы делаете серый текст на белом фоне, не все смогут его прочитать — у людей часто бывают нарушения зрения и либо им придётся очень стараться, либо они вообще не увидят.
Посоветуйте дизайнеру две ссылки:
Да, именно вы должны советовать дизайнеру — это вы реализовываете сайт, а не он, вам отвечать за конечный результат. Берите ответственность в свои руки.
Перекликается с семантикой, но чуть обширнее.
Во-первых, конечно же, когда кнопка сделана тегом button, это яснее, чем кнопка через div.
Во-вторых, не забывайте про alt у изображений и title у других элементов — если изображение не загрузилось, нужно через alt объяснить его контент. И, конечно же, label из предыдущего урока тоже относится к ясным подсказкам о назначении элемента.
В-третьих, в вёрстке есть сравнительно новый стандарт WAI-ARIA (либо можно прочесть спецификацию W3C).
WAI-ARIA предназначен для современных веб-приложений (не сайтов!), чтобы всякие Реакты не ломали a11y. Честно говоря, они и так не ломают, но ломают люди, которые в погоне за модным инструментом забывают об a11y.
Почитайте спеку — она увлекательна. Сейчас мы её не будем рассматривать, потому что она нужна для веб-приложений, мы ими не занимаемся на этом курсе.
Второе, что нужно помнить — про обратную связь. Всегда думайте о том, чтобы человеку было понятно, что случилось.
Смотрите, что я имею в виду: вам нужно заботиться не только о том, какой красивый сайт, но и о том, что произойдёт после действий пользователя.
Если человек кликнул на кнопку — покажите это.
Если навёл на неё курсор — покажи это.
Если форма начала отправляться — покажите, что начался процесс.
Если отправилась — покажите сообщение.
Если не отправилась — покажите ошибки.
Могу лишь дать ссылку на сайт outlinenone.com.