[HTML, Usability, Accessibility] 7 хороших HTML привычек

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

Автор

Сообщение

news_bot ^®

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

news_bot ^® написал(а)
15-Июн-2021 12:31

Цитировать

Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML это сделать не так просто. Недолго думая, я написал свой список из 7 советов и делюсь им с Хабром.Не используйте maximum-scale=1 and user-scalable=noКогда я взаимодействую с интерфейсом, то часто приходиться зумить страницу, чтобы прочитать текст или кликнуть по кнопке, которая слишком маленькая. Но иногда разработчики запрещают мне это делать. Они просто добавляют maximum-scale=1 and user-scalable=no. И я страдаю, придумывая, как же попасть по чертовой кнопке. Если вы хотите сделать ваших пользователей счастливыми, то не отключайте нативный браузерный зум.Не делайте так

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

Используйте ссылки без атрибута href вместо spanИногда требуется делать ссылки неактивными. Популярным решением является замена ссылки на текстовый элемент span. В итоге мы получаем текст, который неинтерактивный.Но существует более лаконичное решение. Атрибут href является необязательным, поэтому если вы его не добавите к элементу a, то он станет логической ссылкой, которая будет неактивной. А когда вы захотите сделать ее снова активно, то просто верните атрибут href.Например, этот подход можно использовать для обозначения текущей страницы в разметке навигации.Не делайте так

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><span>About me</span></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>

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

<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a>About me</a></li>
<li><a href="#">Projects</a></li>
</ul>
</nav>

Используйте button вместо a href="#"Когда разработчикам нужно разметить интерактивный элемент, который выглядит как ссылка, то они используют элемент a. Но они не знают куда она ведет, поэтому добавляют href="#". А дальше еще дописывают JS, который будет отменять переход в начало страницы. Но на этом они не останавливаются, потому что они слышали про доступность и добавляют role="button", чтобы еще и скринридеры поняли, что это кнопка.Просто используйте button type="button" и получите интерактивный элемент, который полностью доступен для скринридеров.Не делайте так

<a href="#">Show my order</a>

<a href="#" role="button">Show my order</a>

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

<button type="button">Show my order</button>

Используйте inputmodeОбычное дело при регистрации вводить свою почту и телефон. Я использую свой смартфон и бывает так, что я кидаю его в стену, потому что я вынужден постоянно переключать клавиатуру. Если вы хотите мне помочь не тратиться на смартфоны, то добавьте атрибут inputmode. В этом случае, если вы укажите email, то браузер сразу покажет мне клавиатуру с собачкой. А если вы еще добавите tel, то мне откроется клавиатура для ввода номера телефона.Не делайте так

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

Добавляйте атрибуты width и height к SVG иконкамКогда вы используйте SVG иконки в HTML, то обратите внимание, что вам следует добавить атрибуты width и height. Дело в том, что дизайнеры не всегда следят за размерами иконок, и поэтому они могут быть огромными. Да, вы можете задать размеры через CSS, но бывает так, что CSS не сработал, и я вижу огромные иконки на весь экран. Честно скажу, что зрелище так себе. Поэтому дополнительно задайте размеры, через атрибуты width и height и все будет надежно.Не делайте так

svg {
width: 0.875rem;
height: 1rem;
}

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

Не перегибайте с добавлением заголовковКогда вы добавляете элемент h1-h6 для каждого текста, который выглядит, как заголовок, вы делаете очень плохо пользователям скринридеров, потому что они используют их, как быструю навигацию по разделам страницы. Соответственно, если любой текст размечен заголовком, то пользователи получают кашу, которая не только не помогает им, а наоборот запутывает их. Например, если текст "iPhone 11 Just the right amount of everything." разметить заголовками h2 и h3, то в быстрой навигации будет два заголовка вместо одного. А еще скринридеры озвучат текст следующим образом: "iPhone 11, заголовок второго уровня. Just the right amount of everything., заголовок третьего уровня".Гораздо лучше будет так: "iPhone 11 Just the right amount of everything, заголовок второго уровня". Не делайте так

<h2>iPhone 11</h2>
<h3>Just the right amount of everything.</h3>

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

<h2>
<span>iPhone 11</span>
<span>Just the right amount of everything.</span>
</h2>

Добавьте больше смысла для altАтрибут alt очень полезен, потому что с помощью него пользователи скринридеров могут понять, что изображено на картинке. К сожалению, многие разработчики используют его некорректно. Они либо дублируют текст вокруг картинки, либо совсем его не добавляют.Лучшим решением является добавить краткое описание, которое будет дополнять текст вокруг. Например, если у вас карточка товара, в которой есть изображение и заголовок, то в alt опишите как выглядит товар. Не делайте так

<header>
<img src="picture.jpg" alt="adidas Originals Superstar">
<h3>adidas Originals Superstar</h3>
</header>

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

<header>
<img src="picture.jpg" alt="Белые кроссовки adidas Originals Superstar для бега">
<h3>adidas Originals Superstar</h3>
</header>

P.S. Если у вас есть вопросы по CSS/HTML, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.
===========
Источник:
habr.com
===========
Похожие новости:

Теги для поиска: #_html, #_usability, #_accessibility, #_html, #_accessibility, #_frontend, #_html, #_usability, #_accessibility

Профиль ЛС

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

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

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