HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью

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

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

Не добавляете background-color для блока с фоновым изображением

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

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

Не делайте так

 

Можно делать так

 

Не используете специальные типы email и tel для тега input

Когда заполняешь поля формы с телефона, то удобно, когда специальная клавиатура для ввода электронный почты или номера телефона появляется сразу.

Но я все еще встречаю сайты, где мне приходится самостоятельно переключаться на нее. Это происходит, потому что разработчики не использую типы email и tel для тега input.

Не делайте так

 

Можно делать так

 

Удаляете outline без альтернативы

Когда я смотрю вакансии на сайте для поиска работы, я не могу быстро переключаться при помощи клавиатуры. Дело в том, что из-за отключенного outline я просто не вижу, на какой ссылке сейчас мой фокус.

Не делайте так

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

Используете псевдо-кнопки

В интернете все чаще встречаются сайты, на которых разработчики добавляют role=”button” для тегов div или span. И, наверное, они думают, что все хорошо. Но у меня плохие новости.

Кнопки по-прежнему не доступны для меня, когда я хочу использовать свою клавиатуру. Я жму enter, и снова получаю разочарование. Приходится использовать тачпад.

Не делайте так

 

Можно делать так

Не используете тег label

Я регистрировался на одном сайте и мне нужно было поставить чекбокс для согласия с правилами политики конфиденциальности. Я кликнул по тексту “Да, принимаю” и никакой реакции интерфейса. Я подумал, что может промахнулся или какой-то лаг. Кликнул еще раз. Та же реакция интерфейса, точнее ее отсутствие.

Я проинспектировал код и увидел, что разработчики забыли добавить тег label.

Не делайте так

Можно делать так

 

Используете px для свойства font-size

Я использую монитор, который находится примерно в метре от меня, поэтому у меня стоит режим с увеличенным размером текста в Google Chrome. И когда я попадаю на сайт, где шрифт указан в пикселях, то мне приходится дополнительно увеличивать его через зум.

Хотя разработчики могли использовать rem’ы, и у меня не было бы неудобств.

Не делайте так

 

Можно делать так

источник