Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что единственная точка доступа к пляжу - это лестница из примерно 20 ступенек.
Но у этой лестницы есть проблема... точнее, у нее несколько проблем. Угол ее наклона очень крутой, ступени очень узкие, а перила по бокам превышают метр в высоту от земли.
Доступ к пляжу затруднен, не так ли? Предположим, что спуск по нему не вызвал у вас серьезных затруднений. Приложив немного усилий и осторожности, вы смогли это сделать.
А теперь подумайте о том, что для многих людей спуск по лестнице невозможен. Люди в инвалидных колясках, с костылями, пожилые люди, люди с проблемами равновесия, дети и т.д. Все эти люди никогда не смогут посетить этот пляж, потому что никто не потрудился облегчить им доступ.
Когда мы создаем веб-сайт, мы должны учитывать общую доступность. Поскольку природа веб-страницы в первую очередь визуальная, мы должны убедиться, что наш сайт смогут посетить и понять слепые или слабовидящие люди.
По оценкам, в 2020 году в мире будет насчитываться 49,1 миллиона слепых людей. Это больше, чем нынешнее население Аргентины.
Как разработчики, мы несем большую ответственность за то, чтобы сделать веб-сайты более доступными для всех. В этой статье блога я продемонстрирую некоторые рекомендации по коду, чтобы повысить доступность для большего количества людей.
Если мы не разрабатываем и не работаем над конкретным проектом для слепых людей, мы склонны забывать об этой категории населения. Не волнуйтесь, это обычное явление; мы склонны забывать о решении проблем, которые не касаются нас лично.
Если мы хотим переосмыслить то, как мы пишем наш код, первый вопрос, который мы должны задать себе как разработчики, это: Как слепые люди пользуются Интернетом?
Ответ таков: они используют программы для чтения с экрана.
Программы для чтения с экрана - это программные приложения, которые читают содержимое веб-страниц вслух. Пользователи с ослабленным зрением используют программы для чтения с экрана для навигации в Интернете.
Программы для чтения с экрана используют механизм Text-To-Speech (TTS) для перевода экранной информации в речь, которую можно слушать через наушники или динамики. Они также могут предоставлять информацию шрифтом Брайля. Для этого необходимо внешнее аппаратное устройство, известное как обновляемый дисплей Брайля.
Как вы можете себе представить, незрячие пользователи должны полностью доверять считывателям экрана в чтении содержимого веб-сайта. Смогут ли они наслаждаться сайтом или нет, полностью зависит от программы чтения с экрана.
Кроме того, в отличие от зрячих людей, которые обычно используют мышь для навигации по веб-странице, слепые люди используют для навигации клавиатуру.
Легкость доступа, чтения и навигации по содержимому нашего сайта напрямую зависит от того, насколько хорошо структурирован наш HTML-код.
Если вы хотите больше узнать о том, как работает программа чтения с экрана, приглашаю вас посмотреть следующее видео:
Ниже приведены несколько предложений, которые следует рассмотреть, думая об удобстве и доступности сайта для экранных ридеров.
По умолчанию программа чтения с экрана использует язык операционной системы для перевода текста. Если наш сайт на каком-то определенном языке, мы должны включить его в качестве атрибута в открывающий тег 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 (мы можем использовать тег <div> для структурирования почти всего сайта), не все элементы HTML выполняют одинаковую функцию, когда речь идет о доступности.
Мы должны использовать элементы HTML, которые указывают на то, чем они являются. HTML-теги должны привносить смысл на сайт, а не просто играть презентационную роль. Это известно как семантический HTML.
Когда устройство чтения с экрана сканирует сайт, оно получает информацию о его HTML-структуре. Такие элементы, как <div> или <span>, не имеют семантической ценности. Однако такие теги, как <header>, <nav>, <main> или <table>, позволяют устройству чтения с экрана узнать, с каким типом содержимого оно имеет дело и как это содержимое связано с остальной частью сайта. Это помогает устройству чтения с экрана более точно понять структуру сайта, чтобы оно могло выполнять свою работу более эффективно.
Рассмотрим следующий пример:
<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 один за другим. Вот почему важно эффективно структурировать контент для программы чтения с экрана.
<header>Это раздел заголовков</header>
<nav>Это раздел навигационного меню</nav>
<main>
<h1>Это основной заголовок</h1>
<p>Первый параграф</p>
<h2>Первый подзаголовок</h2>
<p>Первый подраздел</p>
<h2>Второй подзаголовок</h2>
<p>Второй подраздел</p>
</main>
<footer>Это раздел футера</footer>.
Атрибут 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 (Accessible Rich Internet Applications) определяет набор атрибутов, которые предоставляют устройствам чтения с экрана дополнительную информацию о просматриваемых элементах HTML.
Когда семантического HTML недостаточно, чтобы самостоятельно объяснить содержание наших HTML-элементов, в игру вступает роль ARIA.
Роль ARIA Attribute используется в двух сценариях:
<ul role="tablist">
<li role="tab">Вкладка 1</li>
</li role="tab">Вкладка 2</li>
</ul>.
2. Исправление ошибок в коде, где семантический HTML был использован неправильно.
<a role="button">Кнопка</a>
(Аналогично, лучше избегать этого типа случаев и
всегда использовать правильный тег)
Атрибутaria-label позволяет изменить способ "перевода" HTML-элемента устройством чтения с экрана. По умолчанию программа чтения с экрана будет читать текстовое содержимое HTML-элемента, но иногда текст сам по себе не объясняет его назначение. Строка, переданная в атрибуте aria-label, становится доступным именем этого HTML-элемента.
<button>X</button>
// доступное имя: x
<button aria-label="Close modal">X</button>
// доступное имя: close modal
Когда текстовое содержимое видно на экране, следует использовать 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 года.
20.08.2023 18:21
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в 2023-2024 годах? Или это полная лажа?".
20.08.2023 17:46
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
19.08.2023 18:39
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в частности, магию поплавков и гибкость flexbox.
19.08.2023 17:22
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для чтения благодаря своей простоте. Кроме того, мы всегда хотим проверить самые последние возможности в наших проектах!
18.08.2023 20:33
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий их языку и культуре.
14.08.2023 14:49
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип предназначен для представления неделимого значения.