Как стать автором
Обновить

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

CSS *HTML *Accessibility *
🔥 Технотекст 2020

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


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


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


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


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


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


.hero {
  background-image: url("example.jpg");
}

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


.hero {
  background-image: url("example.jpg");
  background-color: #919191;
}

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


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


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


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


<input type="text" placeholder="Ваша электронная почта">
<input type="text" placeholder="Ваш номер телефона">

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


<input type="email" placeholder="Ваша электронная почта">
<input type="tel" placeholder="Ваш номер телефона">
<!-- или -->
<input inputmode="email" placeholder="Ваша электронная почта">
<input inputmode="tel" placeholder="Ваш номер телефона">

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


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


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


.button:focus {
  outline: none;
}

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


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


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


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


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


<div role="button">Добавить в корзину</div>

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


<button>Добавить в корзину</button>

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


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


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


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


<div class="form-group">
  <input type="checkbox">
  <span>Да, принимаю</span>
</div>

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


<label class="form-group">
  <input type="checkbox">
  <span>Да, принимаю</span>
</label>

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


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


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


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


.hero {
  font-size: 16px;
}

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


.hero {
  font-size: 1rem;
}

P.S: Также я делюсь советами по CSS/HTML и отвечаю на вопросы на своем Patreon. Вы можете найти его по ссылке в моем профиле на Хабре.


P.S.S: Если вам понравилась статья, то вы можете сказать спасибо, подарив мою продукцию друзьям или лично себе. Ссылка в профиле.

Теги:
Хабы:
Всего голосов 22: ↑21 и ↓1 +20
Просмотры 19K
Комментарии Комментарии 41