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

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

Не добавляете 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;
}