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

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

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

Если вы не хотите читать предисловие, то переходите сразу к советам.

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

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

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

Конечно же, это было до того, как я стал профессиональным веб-дизайнером и мое представление о важных вещах изменилось.
Годы спустя я решил оптимизировать свой сайт под все основные браузеры вместо того, чтобы диктовать пользователю, что ему использовать для посещения сайта.
После прочтения меняющей правила игры статьи Этана Маркотта, я также стал заботиться и о поддержке различных девайсов.
Разрабатывать сайты для разных типов устройств и браузеров прекрасно, но довольно бесполезно, если сайт очень медленный. По этой причине я изучил все, что касается критического CSS, индексов скорости, загрузки шрифтов, CDN’a и тому подобного.

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

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

Последние несколько месяцев я провел за чтением, прослушиванием и дискуссиями о доступности в вебе. Мне потребовалось некоторое время, чтобы уложить в голове определенные вещи, но я все еще в начале пути. Но чем больше я узнаю, тем больше поражаюсь тому, как много я могу делать прямо сейчас, не погружаясь в изучение чего-то совершенно нового.

Я расширил свои знания HTML, CSS и JavaScript, но самая важная вещь, которую я усвоил, сводится к тому, что доступность это не просто медицинский термин, применимый к небольшому проценту людей. Мы с вами ежедневно сталкиваемся с доступностью. Все, что мы создаем, бесполезно, если оно недоступно.

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

Без лишних церемоний вот мои советы по доступности:

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

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

<html lang="ru">

</html>

Посмотрите демонстрацию работы атрибута lang на YouTube.

Если внутри документа встречаются несколько языков, то вы можете использовать атрибут lang для отдельных тегов.

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

Всегда проверяйте чтобы язык был указан верно. Стив Фолкнер записал видео, иллюстрирующее, что произойдет, если вы неправильно используете атрибут lang. Список языковых кодов приведен в реестре IANA.

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

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

Поддержка атрибута hidden в браузерах отличная, за исключением IE10 и ниже. Вы можете обеспечить поддержку старых браузеров, просто добавив в CSS фоллбэк.

[hidden] {
display: none;
}

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

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

Если изображение декоративное или не содержит ценной информации, подумайте о том, чтобы вынести его в CSS и реализовать при помощи background-image. Если вы должны/хотите реализовать его в HTML, то не удаляйте атрибут alt, просто оставьте его пустым.

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

Важно, чтобы вы не опускали атрибут alt.

Есть еще несколько способов работы с атрибутом alt, они собраны на странице The A11y Project «Quick Tip: Using alt Text Properly».

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

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

Кнопки имеют множество преимуществ / важных функций. Например:

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

Роб Додсон проделал отличную работу, объясняя преимущества фактической <button> над <div>. Смотрите эпизод A11ycasts «Just use button» для получения более подробной информации и примеров.

Если вы не уверены, что использовать в конкретном случае — кнопку или ссылку — почитайте пост Марси Суттон «Links vs. Buttons in Modern Web Applications».

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

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

Демо навигации по сайту при помощи передвижения между заголовками

Когда вы вставляете заголовки, вам следует избегать пропусков уровней. Также не стоит использовать несколько элементов <h1>. Адриан Роселли объясняет, почему так не стоит делать, в своих статьях There Is No Document Outline Algorithm и The Truth about “The Truth About Multiple H1 Tags”.

<!-- Не пропускайте уровни: -->
<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 предоставляет хороший способ проверки устойчивости вашей схемы. Другой способ — отключить CSS и проверить, читается ли страница и имеет ли структура смысл.

tota11y предоставляет удобный и простой инструмент проверки

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

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

Одним из преимуществ такого подхода является возможность пользователям скринридеров перемещаться по странице, перепрыгивая с секции на секцию. Такие секции для навигации называются ориентирами (landmarks). Посмотрите демо перемещения по достопримечательностям на YouTube.

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

Вы можете имитировать функцию перехода от ориентира к ориентиру при помощи расширения для браузера Landmarks. Нажмите Alt + Shift + N, чтобы перейти к следующему, и Alt + Shift + P, чтобы перейти к предыдущему ориентиру.

Если вы хотите узнать больше о разделах, ознакомьтесь c Web Accessibility Tutorials page о разделах.

Пожалуйста, примите во внимание, что не все программное обеспечение будет интерпретировать ориентир как таковой.

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

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

Как уже говорилось, правильно разделять контент на ориентиры. <header> и <footer> воспринимаются всеми основными браузерами как ориентиры, если они не находятся внутри элементов <section> или <article>. Если вам нужна поддержка более старых браузеров, то вы можете превратить шапку и подвал вашего сайта в ориентиры при помощи атрибута role со значениями banner для шапки и contentinfo для подвала.

<!-- Дополнительные атрибуты `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>

Как вы разметите «Размеры рубашек»? Тег <p> наверняка сработает, но он никак не вяжется по смыслу с группой радиокнопок.

Гораздо лучше будет обернуть все в fieldset и поместить «Размеры рубашек» в тег <legend>. Экранные читалки будут знать, что <legend> относится к радиокнопкам и прочитает их значения вне зависимости от того, какая из них выбрана.

<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>

Точно также как с <section>, при оборачивании элементов формы в <fieldset> нужно быть внимательным. Группируйте элементы при помощи <fieldset> если у вас есть необходимость связать элементы в группу и добавляйте лейбл для этой группы при помощи <legend>.

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

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

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

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

  1. Пишем HTML, не забывая о доступности
  2. Writing JavaScript with accessibility in mind
  3. Пишем CSS, не забывая о доступности
  4. Дальше: 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