Сейчас много шума по поводу доступности интерфейсов. Здорово, что люди обращают на это внимание и начинают разрабатывать интерфейсы, которыми могут пользоваться люди с какими-то ограничениями.
Но мы забываем про людей, у которых нет ограничений по здоровью. У них также есть право пользоваться интерфейсами так, как им удобно. Поэтому я хочу рассказать про несколько случаев, когда я встречаю недоступные интерфейсы, как человек без ограничений по здоровью.
Не добавляете 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;
}
