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

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 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.
Не делайте так

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

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

Профиль ЛС

Ответить на тему

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

Текущее время: 22-Ноя 19:55
Часовой пояс: UTC + 5