Можно легко найти хорошие практики по любой технологии, но, к сожалению, по HTML это сделать не так просто. Недолго думая, я написал свой список из 7 советов и делюсь им с Хабром.
Не используйте maximum-scale=1 and user-scalable=no
Когда я взаимодействую с интерфейсом, то часто приходиться зумить страницу, чтобы прочитать текст или кликнуть по кнопке, которая слишком маленькая. Но иногда разработчики запрещают мне это делать. Они просто добавляют maximum-scale=1 and user-scalable=no. И я страдаю, придумывая, как же попасть по чертовой кнопке.
Если вы хотите сделать ваших пользователей счастливыми, то не отключайте нативный браузерный зум.
Не делайте так
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">Можно сделать так
<meta name="viewport" content="width=device-width, initial-scale=1">Используйте ссылки без атрибута 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, то мне откроется клавиатура для ввода номера телефона.
Не делайте так
<input type="text" placeholder="Your email">
<input type="text" placeholder="Your tel">Можно сделать так
<input inputmode="email" placeholder="Your email">
<input inputmode="tel" placeholder="Your tel">Добавляйте атрибуты width и height к SVG иконкам
Когда вы используйте SVG иконки в HTML, то обратите внимание, что вам следует добавить атрибуты width и height. Дело в том, что дизайнеры не всегда следят за размерами иконок, и поэтому они могут быть огромными.
Да, вы можете задать размеры через CSS, но бывает так, что CSS не сработал, и я вижу огромные иконки на весь экран. Честно скажу, что зрелище так себе. Поэтому дополнительно задайте размеры, через атрибуты width и height и все будет надежно.
Не делайте так
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path fill="currentColor" d="..."></path>
</svg>svg {
width: 0.875rem;
height: 1rem;
}Можно сделать так
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
width="0.875rem"
height="1rem">
<path fill="currentColor" d="..."></path>
</svg>Не перегибайте с добавлением заголовков
Когда вы добавляете элемент 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, то, не стесняйтесь, пишите мне на мою почту. Она указана в моем профиле на Хабре.
KYuri
П — последовательность