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

Пишем 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/

Конечно же, это было до того, как я стал профессиональным веб-дизайнером и мое представление о важных вещах изменилось.
Годы спустя я решил оптимизировать свой сайт под все основные браузеры вместо того, чтобы диктовать пользователю, что ему использовать для посещения сайта.
После прочтения меняющей правила игры статьи Этана Маркотта, я также стал заботиться и о поддержке различных девайсов.
Разрабатывать сайты для разных типов устройств и браузеров прекрасно, но довольно бесполезно, если сайт очень медленный. По этой причине я изучил все, что касается критического 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.

Опущение этого атрибута означает, что изображение является ключевой частью контента, но для него нет текстового эквивалента. Если же значение атрибута — пустая строка, это значит, что изображение не является ключевой частью контента; тогда невизуальные браузеры имеют право совсем его не отображать.
https://developer.mozilla.org/ru/docs/Web/HTML/Element/img

Есть еще несколько способов работы с атрибутом 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

Благодарим вас за чтение и, пожалуйста, не забудьте «похлопать» и поделиться этой статьей, если вам понравилось.

Пока я работаю над следующей статьей, вы можете почитать другие мои материалы:

Как всегда, благодарю Еву за коррекцию статьи. (Прим. переводчика: в свою очередь благодарю Olga Morozova)

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

  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

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Workafrolic (±∞)

Workafrolic (±∞)

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

More from Medium

MDN Styling and Layout w/CSS chapter 11

Styling an input range to have different track heights before and after the thumb

Styled Components

Scroll Section to Section Animation with JavaScript