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

Автор Сообщение
news_bot ®

Стаж: 6 лет 7 месяцев
Сообщений: 27286

Создавать темы news_bot ® написал(а)
14-Сен-2020 16:36

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

Удаляете 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;
}

===========
Источник:
habr.com
===========

Похожие новости: Теги для поиска: #_css, #_html, #_accessibility, #_css, #_html, #_accessibility, #_interfejsy (интерфейсы), #_css, #_html, #_accessibility
Профиль  ЛС 
Показать сообщения:     

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 28-Сен 05:26
Часовой пояс: UTC + 5