Источник: Дрибббл

Пишем HTML, не забывая о доступности

Введение в доступность в вебе. Советы о том, как улучшить разметку и предоставить пользователям более эффективные способы навигации и взаимодействия с вашим сайтом.

Перевод статьи Мануэля Матузовича Writing HTML with Accessibility in Mind

Персональное развитие в перспективе

Когда я разрабатывал свой первый сайт, то моим высочайшим приоритетом было создать контент в интернете. Меня не заботили удобство использования, доступность, производительность, совместимость с браузерами. А с чего бы мне об этом волноваться? Я создал надежную раскладку на таблицах и предоставил две версии моего сайта: 800 × 600 и 1024 × 768. Более того, я сообщил пользователям, что мой сайт оптимизирован под Internet Explorer 5.

Скриншот старого сайта finance.senate.gov, на котором юзеру сообщается, что сайт оптимизирован под Netscape и Internet Explorer с разрешением экрана 800x600. https://web.archive.org/web/20090325102735/http://finance.senate.gov/

Начало знакомства с доступностью (a11y)

Недавно мои приоритеты снова изменились и я понял, что быстрый, отзывчивый, работающий в старых браузерах сайт ничего не стоит, если по нему нельзя передвигаться при помощи клавиатуры.
Но доступность — это не просто еще один пункт в списке требований к сайту. Доступность — лежит в основе того, чем занимаются веб-дизайнеры и разработчики и стоит относиться к ней именно так.

Важно правильно указать язык вашего документа

Указывая браузеру, на каком языке написан ваш документ, вы получаете много преимуществ. Это хорошо для SEO, это помогает плагинам-переводчикам и браузерам правильно определить язык и словарь. Правильное указание языка в HTML помогает вспомогательным технологиям выбрать верный голосовой профайл или набор символов. Адриан Роселли собрал еще несколько плюсов использования атрибута lang на сайте.

<html lang="ru">

</html>
<p>В воздухе витало <i lang="fr" class="idiomatic">je ne sais quoi</i>.</p>

Можно прятать контент с помощью атрибута `hidden`

Если вы хотите скрыть контент визуально и от экранных читалок, то используйте атрибут hidden.

[hidden] {
display: none;
}

Иногда полезнее добавить пустой атрибут `alt` для картинки

Если картинка является контентной, используйте alt для краткого описания этого самого контента и функционала. Когда вы будете это делать, то не начинайте описание с «Picture/Image/Graphic of…» потому что экранная читалка сама скажет о том, что это за элемент.

<img src="decorative_image.jpg" alt="">

Если нужна кнопка, используй элемент `<button>`

Коротко говоря, вам всегда следует отдавать предпочтение нативным HTML-элементам (если они есть) перед собственными эмуляциями. Например, если вам нужна кнопка, то используйте элемент <button> вместо <div>.

  • Кликабельность (мышкой или клавиатурой);
  • Экранные читалки идентифицируют их как кнопки!

Важно структурировать разметку при помощи заголовков

При создании правильной схемы голосового озвучивания использование h1h6 помогает пользователям лучше понять структуру вашей страницы и взаимосвязь между отдельными секциями. Кроме того, это поможет пользователям с вспомогательными технологиями передвигаться по вашей странице. Экранные читалки предусматривают различные способы передвижения от одной единицы контента к другой. Например, при использовании скринридера NVDA пользователь может передвигаться по заголовкам при помощи горячих клавиш (H и Shift + H).

Демо навигации по сайту при помощи передвижения между заголовками
<!-- Не пропускайте уровни: -->
<body>
<h1>Мой сайт</h1>
<h4>Заголовок</h4>
<h2>Подзаголовок</h2>
<h3>Заголовок</h3>
</body>
<!-- Не полагайтесь на несуществующие алгоритмы: -->
<body>
<h1>Мой сайт</h1>
<section>
<h1>Заголовок</h1>
<section>
<h1>Подзаголовок</h1>
</section>
</section>
<section>
<h1>Заголовок</h1>
</section>
</body>
<!-- Делайте так: -->
<body>
<h1>Мой сайт</h1>
<h2>Заголовок</h2>
<h3>Подзаголовок</h3>
<h2>Заголовок</h2>
</body>
tota11y предоставляет удобный и простой инструмент проверки

Использование ориентиров помогает людям передвигаться по вашему сайту

Можно и даже нужно размечать тематические секции при помощи HTML5 тегов (<article>, <aside>, <nav>, <section>). Также можно использовать ARIA-атрибут role для более старых браузеров или секций, не имеющих для обозначения специфических тегов, например, поиска. Секционные элементы не являются прямой заменой элементу <div>. Используйте их для разметки больших кусков связанного контента, отличающегося от остального контента на странице. Не злоупотребляйте секционными элементами. Используйте <div> для CSS/JS, а секции для семантики.

<body>
<header> <!-- ориентир -->
<nav> <!-- ориентир -->
...
</nav>
</header>
<aside> <!-- ориентир -->
</aside>
</body>

`main, `header` и `footer` также являются ориентирами

Оборачивая основной контент сайта в элемент <main>, вы позволяете пользователям переместиться к нему при помощи горячих клавиш. «Элемент main указывает на секцию с основным контентом в документе или приложении» и не должен использоваться больше одного раза.

<!-- Дополнительные атрибуты `role` важны только для старых браузеров -->
<body>
<header role="banner">
<h1>Мой персональный блог</h1>
</header>
<main>
<section>
<h2>Посты в блоге</h2>
....
</section>
</main>
<footer role="contentinfo">
&copy; 2017 Я
</footer>
</body>

`fieldset` отлично подходит для группировки элементов формы и придания им большего контекста

Вероятно, вы сталкивались с необходимостью добавить несколько радиокнопок или чекбоксов в форму. Добавление элементов формы и соответствующих подписей обычно не становится такой уж проблемой. Но какой тег вы выбираете, если вам нужно подписать целую группу радиокнопок или чекбоксов?

<form>
Размеры рубашек
<input type="radio" id="s" name="shirtsize" />
<label for="s">S</label>
<input type="radio" id="m" name="shirtsize" />
<label for="m">M</label>
<input type="radio" id="l" name="shirtsize" />
<label for="l">L</label>
</form>
<form>
<fieldset>
<legend>Размеры рубашек</legend>
<input type="radio" id="s" name="shirtsize" />
<label for="s">S</label>
<input type="radio" id="m" name="shirtsize" />
<label for="m">M</label>
<input type="radio" id="l" name="shirtsize" />
<label for="l">L</label>
</fieldset>
</form>

Продолжая тему

На сегодня достаточно. Я надеюсь, что эти советы помогут вам писать более доступный HTML. Выражаю благодарность Хейдону Пикерингу. Его книга «Inclusive Front-End Design Patterns» заложила основу для осознания большей части из того, что вы только что прочитали. Если вы хотите почитать больше о доступности и инклюзивном дизайне, то я настоятельно советую эту книгу.

Больше секретов доступности

Эта статья является первой в серии из четырех. Последние две статьи находятся в работе и вскоре будут опубликованы.

  1. Writing JavaScript with accessibility in mind
  2. Пишем CSS, не забывая о доступности
  3. Дальше: Learn how to design and develop with accessibility in mind

Дополнительные материалы:

  1. Pickering, Heydon; Inclusive Design Patterns, стр. 5
  2. w3.org Wiki — i element
  3. WebAIM — Alternative Text
  4. Web Accessibility Tutorials — Headings
  5. WAI-ARIA — main (role)
  6. Using navigation landmarks
  7. Landmarks must identify content regions

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC

Frontend-дева. Верстаю, пишу и перевожу статьи, менторю, выступаю. Поддержать переводы: https://www.tinkoff.ru/sl/2QSPTULCQcC