Пишем HTML, не забывая о доступности
Введение в доступность в вебе. Советы о том, как улучшить разметку и предоставить пользователям более эффективные способы навигации и взаимодействия с вашим сайтом.
Перевод статьи Мануэля Матузовича Writing HTML with Accessibility in Mind
Если вы не хотите читать предисловие, то переходите сразу к советам. (Прим. переводчика: навигация в Медиуме работает криво)
Персональное развитие в перспективе
Когда я разрабатывал свой первый сайт, то моим высочайшим приоритетом было создать контент в интернете. Меня не заботили удобство использования, доступность, производительность, совместимость с браузерами. А с чего бы мне об этом волноваться? Я создал надежную раскладку на таблицах и предоставил две версии моего сайта: 800 × 600 и 1024 × 768. Более того, я сообщил пользователям, что мой сайт оптимизирован под Internet Explorer 5.
Конечно же, это было до того, как я стал профессиональным веб-дизайнером и мое представление о важных вещах изменилось.
Годы спустя я решил оптимизировать свой сайт под все основные браузеры вместо того, чтобы диктовать пользователю, что ему использовать для посещения сайта.
После прочтения меняющей правила игры статьи Этана Маркотта, я также стал заботиться и о поддержке различных девайсов.
Разрабатывать сайты для разных типов устройств и браузеров прекрасно, но довольно бесполезно, если сайт очень медленный. По этой причине я изучил все, что касается критического 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».
(прим. переводчика: или посмотрите доклад Вадима Макеева «Жми сюда!»)
Важно структурировать разметку при помощи заголовков
При создании правильной схемы голосового озвучивания использование h1 — h6 помогает пользователям лучше понять структуру вашей страницы и взаимосвязь между отдельными секциями. Кроме того, это поможет пользователям с вспомогательными технологиями передвигаться по вашей странице. Экранные читалки предусматривают различные способы передвижения от одной единицы контента к другой. Например, при использовании скринридера 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 и проверить, читается ли страница и имеет ли структура смысл.
Использование ориентиров помогает людям передвигаться по вашему сайту
Можно и даже нужно размечать тематические секции при помощи 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">
© 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» заложила основу для осознания большей части из того, что вы только что прочитали. Если вы хотите почитать больше о доступности и инклюзивном дизайне, то я настоятельно советую эту книгу.
Больше секретов доступности
Эта статья является первой в серии из четырех. Последние две статьи находятся в работе и вскоре будут опубликованы.
- Пишем HTML, не забывая о доступности
- Writing JavaScript with accessibility in mind
- Пишем CSS, не забывая о доступности
- Дальше: Learn how to design and develop with accessibility in mind
Благодарим вас за чтение и, пожалуйста, не забудьте «похлопать» и поделиться этой статьей, если вам понравилось.
Пока я работаю над следующей статьей, вы можете почитать другие мои материалы:
Как всегда, благодарю Еву за коррекцию статьи. (Прим. переводчика: в свою очередь благодарю Olga Morozova)
Дополнительные материалы:
- Pickering, Heydon; Inclusive Design Patterns, стр. 5
- w3.org Wiki — i element
- WebAIM — Alternative Text
- Web Accessibility Tutorials — Headings
- WAI-ARIA — main (role)
- Using navigation landmarks
- Landmarks must identify content regions
