Доступность HTML - программирование с инклюзивной перспективой

Важность доступности в веб-разработке

Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что единственная точка доступа к пляжу - это лестница из примерно 20 ступенек.

Но у этой лестницы есть проблема... точнее, у нее несколько проблем. Угол ее наклона очень крутой, ступени очень узкие, а перила по бокам превышают метр в высоту от земли.

Доступ к пляжу затруднен, не так ли? Предположим, что спуск по нему не вызвал у вас серьезных затруднений. Приложив немного усилий и осторожности, вы смогли это сделать.

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

То же самое относится и к веб-сайтам.

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

По оценкам, в 2020 году в мире будет насчитываться 49,1 миллиона слепых людей. Это больше, чем нынешнее население Аргентины.

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

Как слепые люди пользуются Интернетом?

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

Если мы хотим переосмыслить то, как мы пишем наш код, первый вопрос, который мы должны задать себе как разработчики, это: Как слепые люди пользуются Интернетом?

Ответ таков: они используют программы для чтения с экрана.

Что такое программы для чтения с экрана?

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

Программы для чтения с экрана используют механизм Text-To-Speech (TTS) для перевода экранной информации в речь, которую можно слушать через наушники или динамики. Они также могут предоставлять информацию шрифтом Брайля. Для этого необходимо внешнее аппаратное устройство, известное как обновляемый дисплей Брайля.

Почему HTML-код так важен для программы чтения с экрана?

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

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

Легкость доступа, чтения и навигации по содержимому нашего сайта напрямую зависит от того, насколько хорошо структурирован наш HTML-код.

Если вы хотите больше узнать о том, как работает программа чтения с экрана, приглашаю вас посмотреть следующее видео:

Открыть Github Gist

Как сделать наш сайт более доступным?

Ниже приведены несколько предложений, которые следует рассмотреть, думая об удобстве и доступности сайта для экранных ридеров.

Язык чтения сайта

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

<html lang="en">...

</html>.

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

<html lang="en">
<body>
<h1>Welcome</h1>
<p lang="es">Este párrafo está en idioma español.</p>
</body>
</html>.

Семантический HTML - это ключ

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

Мы должны использовать элементы HTML, которые указывают на то, чем они являются. HTML-теги должны привносить смысл на сайт, а не просто играть презентационную роль. Это известно как семантический HTML.

Когда устройство чтения с экрана сканирует сайт, оно получает информацию о его HTML-структуре. Такие элементы, как <div> или <span>, не имеют семантической ценности. Однако такие теги, как <header>, <nav>, <main> или <table>, позволяют устройству чтения с экрана узнать, с каким типом содержимого оно имеет дело и как это содержимое связано с остальной частью сайта. Это помогает устройству чтения с экрана более точно понять структуру сайта, чтобы оно могло выполнять свою работу более эффективно.

Рассмотрим следующий пример:

Мы хотим создать навигационное меню для нашего сайта.
Мы можем написать его только с помощью тегов <div>(несемантичных :S):

<div>
<div>Home</div>
<div>About</div>
<div>Contact</div>
</div>.

Или мы можем реализовать это с помощью семантического HTML (правильный способ):

<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>.

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

Если вы хотите узнать, какой элемент HTML следует использовать в той или иной ситуации, я рекомендую полный справочник по элементам HTML.

Структура HTML

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

Используйте теги <header>, <main>, <footer> для определения областей в коде.
Правильно используйте теги заголовков(<h1>,..., <h6>) для создания иерархии в контенте. Размер текста не имеет никакого отношения к иерархии заголовков. Во многих программах чтения экрана можно перейти к следующему/предыдущему заголовку.
Используйте тег <p> для обозначения абзацев.

Вот пример хорошо структурированного HTML-кода:


<header>Это раздел заголовков</header>


<nav>Это раздел навигационного меню</nav>

<main>
<h1>Это основной заголовок</h1>
<p>Первый параграф</p>
<h2>Первый подзаголовок</h2>
<p>Первый подраздел</p>
<h2>Второй подзаголовок</h2>
<p>Второй подраздел</p>
</main>

<footer>Это раздел футера</footer>.

Всегда используйте атрибут Alt в изображениях

Атрибут alt или альтернативный текст указывает на содержание вашего изображения. Когда программа чтения с экрана находит текст alt, она зачитывает его пользователю.

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

Для незрячих пользователей эти три примера не одинаковы:

Пример 1:

<img src="image-cat-45623.jpg" />
// доступное имя: image-cat-45623

Пример 2:

<img src="image-cat-45623.jpg" alt="" />
// декоративный корпус изображения. он будет проигнорирован программами чтения с экрана

Пример 3:

<img src="image-cat-45623.jpg" alt="Храп вонючей кошки" />
// доступное имя: Храп вонючей кошки

ARIA

ARIA (Accessible Rich Internet Applications) определяет набор атрибутов, которые предоставляют устройствам чтения с экрана дополнительную информацию о просматриваемых элементах HTML.

Что такое роли ARIA?

Когда семантического HTML недостаточно, чтобы самостоятельно объяснить содержание наших HTML-элементов, в игру вступает роль ARIA.

Роль ARIA Attribute используется в двух сценариях:

Для описания элементов, которые концептуально не существуют в HTML.

<ul role="tablist">
<li role="tab">Вкладка 1</li>
</li role="tab">Вкладка 2</li>
</ul>.

2. Исправление ошибок в коде, где семантический HTML был использован неправильно.

<a role="button">Кнопка</a>
(Аналогично, лучше избегать этого типа случаев и
всегда использовать правильный тег)

aria-label

Атрибутaria-label позволяет изменить способ "перевода" HTML-элемента устройством чтения с экрана. По умолчанию программа чтения с экрана будет читать текстовое содержимое HTML-элемента, но иногда текст сам по себе не объясняет его назначение. Строка, переданная в атрибуте aria-label, становится доступным именем этого HTML-элемента.

<button>X</button>
// доступное имя: x

<button aria-label="Close modal">X</button>
// доступное имя: close modal

aria-label и aria-labelledby

Когда текстовое содержимое видно на экране, следует использовать aria-labelledby вместо aria-label.

// Неправильный способ<section
aria-label="Заголовок содержимого">
<h2>Заголовок содержимого</h2>
</section>.

// Правильный способ<section
aria-labelledby="section-title">
<h2 id="section-title">Заголовок контента</h2>
</section>.

Также вы можете использовать aria-labelledby для объединения нескольких элементов в одно доступное имя.

<section>
<h2 id="h2">О нас</h2>
<p>...</p>
<a href="go.html" id="l1" aria-labelledby="l1 h2">читать больше</a>
</section>
// доступное имя: читать больше о нас.

Если элемент имеет оба атрибута, приоритет будет отдан значению aria-labelledby.

Если у вас есть сомнения в выборе правильного атрибута ARIA для каждого конкретного случая, ознакомьтесь с официальной документацией ARIA in HTML.

Используйте самоописательные ссылки

Ссылки являются важным инструментом в нашем коде, когда речь идет о перенаправлении пользователя внутри сайта или на внешний сайт.

Именнопоэтому мы должны поддерживать стили, которые отличают их от остальных компонентов сайта и предотвращают их неожиданное поведение с помощью JavaScript.

Другим важным аспектом является текст ссылки. То, что мы пишем внутри тегов <a>, должно четко объяснять, куда будет отправлен пользователь. Для устройства чтения с экрана "Нажмите здесь" ничего не значит.

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

<p>
Если вы хотите узнать больше о вакансии
<a href="open-position.html
" aria-label="Описание и требования к открытой
вакансииfullstack-разработчика

">нажмите здесь
</a>.
</p>.

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

Атрибут tabindex позаботится об этом порядке для ссылок.

<ul>
<li><a href="home.html" tabindex="1">Home</a></li>
<li><a href="about-us.html" tabindex="3">О нас</a></li>
<li><a href="contact-us.html" tabindex="2">Контакт с нами</a></li>
</ul>

Будьте осторожны с большим количеством рекламы

Реклама может стать головной болью для любого пользователя. Зрячие пользователи могут легко игнорировать их, но читатели экрана - нет. Если баннер крайне важен для сайта, не забудьте про атрибут alt в изображении баннера и добавьте слово 'Ad' или 'Advertisement' в начале текстового значения.

Если объявление не обязательно должно быть прочитано программой чтения с экрана, попробуйте использовать атрибут aria-hidden=true, чтобы скрыть его от читателя.

Всегда помните: устройства чтения с экрана рассматривают любое содержимое как жизненно важное. Избегайте показывать читателю экрана ненужный контент.

Теперь представьте, что вы возвращаетесь на пляж.

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

То же самое касается и веб-сайтов.

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

Давайте изменим цифровой опыт людей!

Первоначально опубликовано на https://www.octobot.io 4 марта 2022 года.