Согласно ежегодному исследованию доступности от WebAims, 98,1% сайтов из топ-1 000 000 содержат явные ошибки WCAG 2.0. У некоторых из этих сайтов лишь незначительные проблемы с контрастностью или, может, есть один пропущенный id, в то время как другие крайне недоступны. Тем не менее, это чертовски большое число, учитывая тот факт, что инструменты автоматического тестирования сообщают только о явных проблемах доступности.
Только 1,9% протестированных страниц проходят автоматическое тестирование, что нормально, но это не значит, что на этих сайтах нет никаких барьеров. Настоящая доступность выходит за рамки автоматических тестов и правил WCAG.
Справедливо сказать, что большинство сайтов доступны только для кого-то.
98,1% звучит плохо, но для большинства из нас это просто число, не так ли? Мне, как человеку, чья работа — помогать другим создавать доступные сайты, легче представить, какими могут быть реальные последствия этих ошибок. Чтобы помочь вам лучше понять, что значит этот высокий процент для пользователей и их повседневного опыта в интернете, я провел небольшой эксперимент.
Мой партнёр — архитектор, и она разожгла во мне интерес к современной архитектуре. Поэтому я создал страницу об архитектурном движении в Европе, и в рамках моего эксперимента я хотел бы, чтобы вы открыли эту страницу и прочитали её. Когда закончите, попробуйте обобщить то, что вы только что узнали, оцените свой опыт, а затем, пожалуйста, вернитесь к статье.
Впечатляет, правда? Я надеюсь, что вы можете получить доступ к большей части информации, не используя DevTools. Я сделал всё возможное, чтобы сделать её максимально доступной. Если у вас возникли проблемы с пониманием того, о чём эта страница, обратите внимание на следующее:
Наши разработчики (я) провели бесчисленные часы, оптимизируя доступность, и мы гордимся тем, что Lighthouse, Wave и Axe не выдают никаких ошибок. Страница на 100% доступна.
Вы сами выбираете, как работать со страницей, но она оптимизирована для десктопных скринридеров. Вы получите лучший опыт, если не будете использовать мышь. Вы можете бесплатно скачать NVDA.
Это ранняя версия страницы, и мы изучаем способы сделать такие типы страниц доступными для всех.
К сожалению, мы не заложили бюджет, чтобы оптимизировать её не для скринридеров. Нет выгоды вкладывать деньги в эту часть рынка.
Зачем вообще люди, пользующиеся мышью, хотят посетить сайт, посвящённый архитектуре экспрессионизма?!
Мы ориентируемся на нашу целевую аудиторию: пользователей VoiceOver на macOS, NVDA и JAWS. Но мы также рассматриваем виджеты доступности, которые мы могли бы добавить на сайт для других пользователей. Такое улучшение позволит вам кликать столько раз, сколько хотите, и оптимизировать сайт под ваши нужды. Это сделает сайт доступным на 120%.
Мы известны первоклассными сайтами и постоянно исследуем новые технологии. Мы рассматриваем возможность использования ИИ для рисования изображений по информации в атрибуте
alt.
На основании альтернативного текста «Длинное прямоугольное здание. Het Schip не только выглядит как корабль — он ещё и напоминает причудливое произведение искусства. Его облик нетрадиционен, с какой стороны ни посмотри. Внешний вид отличает ярко-оранжевый кирпич, башни и архитектурные элементы необычной формы» наши супер-алгоритмы ИИ сгенерировали следующее изображение:
Думаю, что большинство из вас не смогли получить доступ ко всей информации. Как ощущения? Особенно с моими дурацкими оправданиями. Довольно паршиво, правда? А теперь представьте, что вы получаете похожий опыт на большинстве посещаемых вами сайтов. Это не просто раздражает и приносит неудобства, но и заставляет злиться и грустить.
Пожалуйста, вспоминайте эти свои ощущения каждый раз, когда вы работаете над новым сайтом, страницей или компонентом. Делайте свои сайты доступными для всех, а не только для кого-то.
За кулисамиСкопировать ссылку
Вы, наверное, хотите знать, как я создал этот эксклюзивный сайт. Имейте в виду, что большинство следующих примеров кода (я выделил те, которые не являются плохими) иллюстрируют плохие и опасные практики. Я написал их просто для того, чтобы подчеркнуть: не используйте этот код на реальных проектах.
ЛейблыСкопировать ссылку
Трудно понять, о чём страница, если на ней нет <h1> или она не размечена должным образом.
<h1 aria-label="Архитектура экспрессионизма">Заголовок документа</h1>
Показано «Заголовок документа», но скринридер произносит «Архитектура экспрессионизма».
Примечание: aria-label не должен использоваться таким образом. Вам это не нужно, если уже есть текстовое содержимое.
Читать дальше:
Управляющие подсказкиСкопировать ссылку
Скринридеры предоставляют пользователям инструкции, как взаимодействовать с такими элементами, как ссылки. Дополнительные подсказки, вроде «нажмите на эту ссылку, чтобы…» или «нажмите эту кнопку», излишни.
<a href="https://en.wikipedia.org/wiki/Expressionism">
экспрессионизм
<span aria-hidden="true">(Кликните мышкой, чтобы открыть ссылку)</span>
</a>
Некоторые ссылки в моём эксперименте показывают дополнительную инструкцию «(Кликните мышкой, чтобы открыть ссылку)» рядом с текстом ссылки.
Читать дальше:
Другой языкСкопировать ссылку
Атрибут lang — важный. Будучи применен к элементу <html>, он сообщает скринридеру естественный язык страницы. Скринридер может не определить язык автоматически; атрибут lang помогает ему выбрать правильный профиль голоса.
Если вы меняете язык в предложении, вы можете использовать атрибут lang, чтобы пометить слово или фразу. (Это хорошая практика).
<p>
В воздухе витает конкретное <span lang="fr">je ne sais quoi</span>.
</p>
Если вы так не сделаете, это может привести к тому, что русский голосовой профиль будет произносить немецкое предложение с русским акцентом. Это может быть трудным для понимания и путать, как переключение языка в середине абзаца.
<p class="visually-hidden">
Архитектура экспрессионизма — один из трёх доминирующих стилей Модерна…
</p>
<p aria-hidden="true">
Expressionismus in einer der drei dominanten Stile der modernen Architektur…
</p>
Одно предложение на немецком, но оно спрятано от скринридеров.
Читать дальше:
ИзображенияСкопировать ссылку
Отсутствующий alt — плохо, но alt с неверной или бесполезной информацией не намного лучше. Пожалуйста, не раздражайте пользователей скринридера длинной, скучной или нерелевантной информацией.
Атрибут alt часто используется как место для хранения ключевых слов SEO или информации об авторских правах. Здесь я перевернул это и поместил всю бесполезную информацию в изображение.
<figure>
<img src="hetschip.jpg" alt="Длинное прямоугольное здание. Het Schip не только выглядит как корабль — он ещё и напоминает причудливое произведение искусства. Его облик нетрадиционен, с какой стороны ни посмотри. Внешний вид отличает ярко-оранжевый кирпич, башни и архитектурные элементы необычной формы"/>
<figcaption>Голландский экспрессионизм (Амстердамская школа), жилой дом Het Schip в Амстердаме, 1917–20 (Мишель де Клерк)</figcaption>
</figure>
Читать дальше:
Пустые ссылкиСкопировать ссылку
Пользователи скринридеров часто сталкиваются с пустыми ссылками и кнопками. Скринридер может озвучить им, что у них есть ссылка, но если она без текста, они не знают, куда она их приведёт.
Используя aria-label, я сделал лейбл доступным только для скринридеров.
<a href="https://" class="btn" aria-label="Het Schip в Википедии"></a>
aria-label часто используют, чтобы задать обозначения иконкам. Я не поклонник передачи информации только с помощью значков, потому что отсутствие текста повышает мою когнитивную нагрузку, требуя умственной обработки для выведения смысла.
Читать дальше:
Неправильный порядокСкопировать ссылку
Скринридеры произносят контент в порядке его появления в DOM, сверху вниз. Изменение порядка при помощи CSS не влияет на порядок в документе. Трудно перемещаться и понимать отношения между элементами, если они появляются в непонятном порядке.
<p aria-hidden="true">
Кирпичный экспрессионизм — особый вариант северной Германии этого движения и в западной и Нидерландах в.
</p>
<p class="visually-hidden">
Кирпичный экспрессионизм — особый вариант этого движения в западной и северной Германии и в Нидерландах.
</p>
Читать дальше:
Скрытый контентСкопировать ссылку
Разработчики нашли хороший костыль для ситуаций, когда слишком сложно сделать части страницы доступными: они просто добавляют aria-hidden="true" к элементу и скрывают его от скринридеров. Если его нет, его не нужно делать доступным. 🤙 *
<p style="filter: invert(1)">
Термин «Архитектура экспрессионизма…
</p>
Примечание: я пробовал использовать color: #ffffff и opacity: 0, чтобы скрыть текст визуально, но Axe слишком умный. У меня получилось обмануть этот инструмент с помощью filter: invert(1).
* Это был сарказм. Знаете, на всякий случай…
Читать дальше:
Нажмите здесьСкопировать ссылку
Скринридеры могут делать гораздо больше, чем просто зачитывать контент на странице. Они предоставляют различные способы навигации. Вы можете переходить от ориентира к ориентиру или от заголовка к заголовку, или вы можете перечислить все элементы формы или ссылки на странице. Если у этих элементов нет осмысленной метки, трудно, а иногда даже невозможно сказать, для чего они — как в параграфе, где каждая ссылка имеет одинаковую метку.
<p>
Среди важных событий в архитектуре экспрессионизма есть
<a href="/wiki/Werkbund_Exhibition_(1914)" aria-label="Выставка в Веркбунде (1914)">
нажмите здесь
</a>
, которая…
</p>
Читать дальше:
Чрезмерная вложенностьСкопировать ссылку
Структура страницы должна быть чистой и простой. Нет никакой пользы от 8 вложенных <article> или <ul>.
<ul aria-hidden="true">
<li>Стиль
<ul>
<li>характеризовался
<ul>
<li>ранним модернистским принятием
<ul>
<li>новых материалов,
<ul>
<li>формальными инновациями,
<ul>
<li>и очень необычным
<ul>
<li>подходом
<ul>
<li>.</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Читать дальше:
ФормыСкопировать ссылку
Создавать доступные и удобные для использования формы сложно, но есть несколько основ, которые просто необходимо соблюдать.
- Каждый элемент формы нуждается в лейбле.
- Лейблы должны содержать текст, а не только картинки или иконки.
- Лейблы и элементы формы должны быть сгруппированы так, чтобы и машины, и пользователи понимали связь между ними.
Я сделал правильный лейбл «плохо» доступным только пользователям скринридеров, скрыв его визуально, и отключил клик по нему, добавив pointer-events: none лейблу.
<p>
<input type="radio" id="rating2" name="rating">
<label for="rating2" style="pointer-events: none">
<span class="vh">плохо</span>
<span aria-hidden="true">Скруглённая белая звезда Скруглённая белая звезда</span>
</label>
</p>
И не только. Я могу порекомендовать Шаблоны проектирования форм Адама Сильвера, если вы хотите научиться создавать инклюзивные формы.
«Кнопки»Скопировать ссылку
Распространённая проблема доступности — наличие на странице элементов, которые выглядят как кнопки, но на самом деле они не являются <button>. Это обычно делает их менее доступными или недоступными для некоторых пользователей. Здесь я перевернул ситуацию: это настоящая кнопка, она выглядит как кнопка, но вы не можете нажать на неё.
<button style="pointer-events: none" type="submit" class="btn" onclick="alert('Спасибо за вашу оценку')">
Отправить
</button>
Читать дальше:
ЗаключениеСкопировать ссылку
Это был весёлый эксперимент, и я надеюсь, что вы получили удовольствие от чтения этой статьи. Лежащая в основе проблема, однако, совсем не весёлая. Просто это мой способ работы с серьёзными темами.
Ваш сайт, приложение или новая функциональность лишь наполовину хорошие, если только некоторые люди могут получить к ним доступ. Подумайте об инклюзивности и разнообразии в самом начале и тестируйте правильно. Соточка в Lighthouse или отсутствие ошибок в Axe не означают, что вы всё сделали правильно, это означает, что вы готовы приступать к ручному тестированию и тестированию с реальными пользователями, если это возможно. Прежде чем просто что-то создавать и запускать, подумайте о ваших пользователях и о том, как ваши решения могут влиять на них.
Вот доступная версия страницы про архитектуру экспрессионизма.
Спасибо, Кэри Фишер, за помощь со статьёй!
