Доступность в Интернете имеет значение
Доступность Интернета действительно важна не только потому, что вы собираетесь привлечь больше трафика в свою сеть или из-за моральной дилеммы, но и потому, что, согласно этому недавнему исследованию, которое показало, что « две трети Интернета транзакции, инициированные людьми с нарушениями зрения, заканчиваются отказом от них, потому что веб-сайты, которые они посещают, недостаточно доступны. ”
Сказав это, я должен быть честным: за семь лет работы в веб-разработке я мало заботился о доступности Интернета. Я писал код без учета доступности, пока однажды, работая над проектом, мне в дверь не постучал билет Jira.
Этот проект был основан на ядре Magento, но также имел огромные настраиваемые функции - модули, плагины и настраиваемый пользовательский интерфейс. Из-за этого или из-за того, что мы были в спешке, мы забыли добавить базовые стандарты веб-доступности к созданным нами компонентам. Мы не использовали свойство альтернативного текста (ALT) для тегов IMG, меток форм, заголовка страницы, метки aria или других стандартов веб-доступности.
Чтобы исправить это, требовалось добавить атрибуты ALT ко всем тегам IMG, свойствам aria-label, title и role среди всех элементов платформы электронной коммерции магазина, которые в них нуждаются. Я немного знал о стандартах веб-доступности, поэтому сначала начал это исправлять.
Добавить альтернативный текст (ALT) ко всем тегам IMG
Если не указано иное, атрибут alt должен быть указан, и его значение не должно быть пустым.
Это было довольно просто. Мне просто нужно было найти все вхождения тегов IMG, а затем соответственно установить альтернативный текст, предоставленный клиентом. Вот и все!
Однако затем клиент спросил: «А как насчет иконок? Должны ли мы также установить для них ALT-текст? » Должен признаться, меня поразил именно этот сценарий. В голову пришел следующий вопрос:
Должен ли я добавлять атрибуты ALT или Title к тегу ‹i›?
Во фрагменте кода, который я пытался изменить, нигде не было тега IMG, а только тег SPAN в качестве оболочки, а внутри него тег <i>, установленный как значок с отличным шрифтом. Как вы, возможно, знаете, это способ сделать это в соответствии с официальной документацией FontAwesome, известной и используемой миллионами веб-сайтов.
Код перед исправлением
<span class="pro-install-box">
<div class="tooltip-container">
<div class="tooltip-container__text">Requires Professional Installation</div>
<div class="tooltip-container__arrow"></div>
</div>
<i class="fas fa-user"></i>
</span>
Красная стрелка указывает на значок, который нам нужно описать:
В то время я не знал точно, поддерживает ли тег <i> атрибут ALT, или установить для него погоду было хорошей практикой. Что, если бы я знал, что тег <i> предназначен для создания текста? Здравый смысл подсказал мне, что устанавливать для него атрибут ALT - плохая идея.
Несомненно, мне нужно было опереться на моего ближайшего друга, Google. Потратив некоторое время на исследования, я обнаружил вот что.
Что Инициатива по обеспечению доступности Интернета рекомендует насчет ALT?
Основываясь на Инициативе веб-доступности (WAI), мы должны добавить ALT текст к не-контенту, например, короткие эквиваленты изображений, включая значки, кнопки и графику, описания данных, представленных на диаграммах, диаграммах и иллюстрациях.
Значение атрибута ALT никогда не должно содержать текст, который можно рассматривать как подпись, заголовок или легенду изображения. Он должен содержать заменяющий текст, который пользователи могли бы использовать вместо изображения.
Соответствующие атрибуты ALT в зависимости от назначения изображений
Чтобы завершить наше понимание этого, давайте обсудим, как предоставить соответствующие атрибуты ALT в зависимости от назначения изображений.
Информативные изображения
Изображения, которые графически представляют концепции и информацию, обычно это изображения, фотографии и иллюстрации. Альтернативный текст должен быть как минимум кратким описанием, передающим основную информацию, представленную изображением.
Декоративные изображения
Предоставьте альтернативу пустому тексту (alt=” ”), когда единственной целью изображения является добавление визуального украшения к странице, а не передача информации, которая важна для понимания страницы.
Функциональные образы
Текстовая альтернатива изображения, используемого в качестве ссылки или кнопки, должна описывать функциональные возможности ссылки или кнопки, а не визуального изображения. Например, кнопка закрытия со значком закрытия, обозначающая действие выхода.
Изображения текста
Читаемый текст иногда присутствует в изображении. Если изображение не является логотипом, избегайте использования текста в изображениях. Однако, если используются изображения текста, альтернативный текст должен содержать те же слова, что и изображение.
Сложные изображения
Такие как графики и диаграммы. Чтобы передать данные или подробную информацию, предоставьте полнотекстовый эквивалент данных или информации, представленных на изображении, в качестве альтернативного текста. Подробнее об этом читайте здесь.
Если вам интересно узнать больше об атрибуте ALT и ситуациях, в которых вы должны его использовать, то руководство по дереву это решение ALT является хорошим ориентиром.
Теперь, когда мы знаем больше об ALT и концепциях изображений, мы готовы реализовать наше решение.
Доступные полнофункциональные интернет-приложения (ARIA)
Подход 1
Давайте воспользуемся преимуществами новых спецификаций WAI-ARIA, особенно когда мы используем значки Font Awesome. Так что давайте улучшим доступность, опираясь на role, aria-label and aria-hidden атрибуты.
<span class="pro-install-box">
<div class="tooltip-container">
<div class="pro-tooltip-text">Requires Professional Installation</div>
<div class="product-tooltip-arrow"></div>
</div>
<i aria-label="Requires Professional Installation" role="presentation" class="fas fa-user"></i>
</span>
Мы используем role="presentation", чтобы удалить неявную семантику собственных ролей элемента. В этом случае мы удаляем нативную семантическую роль для использования значков при использовании элемента <i>.
aria-label предоставляет строковое значение, которое маркирует элемент. Делая это, мы предоставляем пользователю вспомогательных технологий, таких как программа для чтения с экрана, узнаваемое имя объекта, на который он наводит курсор.
Другими словами, атрибут aria-label определяет невидимую метку, где видимую метку использовать нельзя. Используйте его в тех случаях, когда текстовая метка не видна на экране.
Подход 2
Второе решение - заставить наши значки действовать как изображение с помощью role="img":
<span class="pro-install-box">
<div class="tooltip-container">
<div class="pro-tooltip-text">Requires Professional Installation</div>
<div class="product-tooltip-arrow"></div>
</div>
<i aria-label="Requires Professional Installation" role="img" class="fas fa-user"></i>
</span>
Заключительные мысли
Доступность в Интернете имеет значение. Наша миссия - предоставить каждому пользователю, независимо от обстоятельств, одинаковый пользовательский опыт.
Отсутствие альтернативного текста (ALT), основанного на назначении изображения и не относящемся к содержанию, является одной из наиболее распространенных ошибок веб-доступности. Следовательно, нам нужно придерживаться стандартов и убедиться, что наше веб-приложение достаточно доступно.
Кроме того, с помощью атрибута aria- мы улучшаем и описываем наш контент намного эффективнее, когда пользователь использует вспомогательные технологии.
Спасибо за прочтение!
