Статья Что нужно знать о предстоящих изменениях WCAG
Опубликовано: 2022-10-07В сентябре 2022 года W3C объявил, что следующая версия WCAG достигла статуса кандидата в рекомендации. За исключением каких-либо внесенных изменений, версия 2.2 стандарта должна быть ратифицирована в ближайшее время. Изменения относительно незначительны, но любой, кто отвечает за создание или обслуживание веб-сайта, должен знать, что будет дальше.
Если вы уже знакомы с WCAG, вы можете пропустить обзор и сразу перейти к интересным деталям, в противном случае читайте дальше.
Что такое WCAG и почему они важны?
Руководство по доступности веб-контента (WCAG) включает набор критериев, призванных помочь веб-разработчикам, дизайнерам и администраторам контента обеспечить доступность их веб-сайтов для людей с широким спектром ограниченных возможностей. За стандарт отвечает группа Инициативы веб-доступности W3C. W3C и WAI представляют собой консорциум лидеров отрасли и экспертов в данной области, стремящихся сделать Интернет более доступным.
WCAG организована в соответствии с четырьмя принципами доступности. Эти принципы гласят, что веб-сайт должен быть заметным, удобным в использовании, понятным и надежным. Внутри каждого из этих принципов есть рекомендации, описывающие основные цели. В каждом руководстве есть критерии успеха, описывающие конкретную измеримую цель, которой должны соответствовать разработчики веб-сайтов, чтобы соответствовать требованиям WCAG.
Каждый критерий успеха имеет индикатор уровня соответствия A, AA или AAA. Критерии уровня A легче выполнить, тогда как AAA является наиболее строгим.
Подадут ли мне в суд, если мой веб-сайт не соответствует требованиям WCAG 2.2 AA?
Окончательный ответ: «может быть».
В США законы неоднозначны, и ADA прямо не касается веб-сайтов. Хотя существуют очень конкретные законы о размещении, которое должно быть сделано в физическом пространстве, единственное, что говорит ADA, что может применяться непосредственно к веб-сайтам, это то, что «объекты компании должны быть доступны». Даже в этом случае не все суды согласны с тем, считается ли веб-сайт средством компании, и нигде нет четкого определения «доступного». Обратите внимание, что речь идет о сайтах частных компаний и федеральных законах. Для федеральных веб-сайтов и веб-сайтов некоторых правительств штатов действуют соответствующие законы.
Поскольку нет четкого определения «доступного», мы обращаемся к WCAG, чтобы узнать, что делать при создании или обслуживании веб-сайта. Никакие законы США не рекомендуют какую-либо версию WCAG (или любого другого стандарта) для общедоступных веб-сайтов. Тем не менее, стремление соответствовать любой версии критериев успеха WCAG — хорошая цель. Это должно вести к сайту, доступному для всех.
Как разрабатываются стандарты?
Вопреки распространенному мнению, разработка стандартов не осуществляется в башне из слоновой кости избранной горсткой участников. В то время как большая часть работы выполняется сотрудниками организаций-членов, большая часть работы выполняется приглашенными экспертами и другими людьми, которые увлечены этой темой и готовы потратить время. Кроме того, многие команды по стандартизации имеют открытые общедоступные форумы, на которых члены сообщества в целом поощряются к участию, задавая вопросы или поднимая новые проблемы.
Что касается WCAG, общественность может прочитать о стандартах и прокомментировать их, открыв новую проблему, запрос на включение или просто участвуя в существующих обсуждениях в репозитории WCAG на Github. Приходя в группу с идеей, всегда разумно просмотреть все существующие проблемы и запросы на вытягивание, чтобы убедиться, что ваша идея еще не была вынесена на обсуждение. Если вы думаете о том, чтобы внести свой вклад в WCAG с помощью запроса на вытягивание, всегда находите время, чтобы открыть вопрос и сначала обсудить свою идею. Есть очень хороший шанс, что вы можете избавить себя от ненужной работы.
Вклад в стандарты может быть разочаровывающим и трудным, но это также очень полезно. В большинстве своем участники очень приветливы и терпеливы. Если вы уделяете время изучению своих идей, проявляете должную осмотрительность, вежливы и уважительны к другим, тогда ваш вклад будет приветствоваться. Худший возможный исход — вы познакомитесь с предметом лучше, чем вы когда-либо могли себе представить.
Что меняется?
Один существующий критерий успеха был изменен в WCAG 2.2, и были добавлены девять совершенно новых критериев успеха. Здесь мы ограничимся только уровнями A и AA, поскольку мы редко ориентируемся на AAA. Чтобы увидеть все новые критерии, ознакомьтесь с полной статьей W3C,
2.4.7 Видимый фокус (A)
Этот критерий изменился с уровня AA на уровень A, который является самой низкой планкой для соответствия WCAG. Одна из причин, по которой он существует, заключается в том, что в не столь отдаленном прошлом люди, которые создавали веб-сайты, удаляли кольца фокусировки обычной практикой. В конце концов, они не были частью дизайна. Это означало, что пользователи, которые перемещались по веб-странице с помощью клавиатуры, не могли видеть, где они находятся на странице. Имеет смысл переместить этот критерий в одиночный-A, потому что такое большое количество пользователей зависит от навигации с помощью клавиатуры, даже те, у которых нет каких-либо нарушений.
Все основные веб-браузеры по умолчанию отображают кольца фокусировки. Ключевое требование здесь — не нарушать встроенный функционал.
W3C – Понимание видимого фокуса
2.4.11 Внешний вид фокуса (AA)
Этот новый критерий определяет некоторые уточняющие правила относительно видимости колец фокусировки. Они должны иметь коэффициент контрастности 3:1 с окружающими пикселями и пикселями, которые они заменяют. Они также должны либо окружать элемент или подкомпонент, находящийся в фокусе, либо быть размером с линию толщиной 4 пикселя вдоль кратчайшего края элемента.
Опять же, кольца фокусировки браузера по умолчанию обычно соответствуют этому критерию. Поскольку пользователи привыкли к значениям по умолчанию, их следует переопределять только в случае необходимости. Одним из примеров может быть недостаточный цветовой контраст между кольцом фокусировки по умолчанию и основным цветом вашего бренда. Браузеры обычно по умолчанию используют синие кольца фокусировки, поэтому, если в палитре вашего бренда есть синий цвет, может возникнуть конфликт.
W3C — Понимание внешнего вида фокуса
2.4.12 Фокус не перекрыт (минимум) (AA)
Этот критерий гласит, что фокус не должен полностью загораживаться пользовательским контентом. Это сделано для того, чтобы многоуровневый контент, такой как липкая навигация (строка меню, которая остается в верхней части окна, пока пользователь прокручивает), не закрывал индикаторы фокуса.
Самое простое решение здесь — просто не иметь липких элементов. Однако современные веб-сайты широко используют липкую навигацию и плавающие CTA, так что это, скорее всего, не вариант. Есть некоторые ожидания, что CSS-свойства scroll-padding и scroll-margin когда-нибудь позволят нам определить смещение, которое будет соответствовать закрепленной навигации. На данный момент эти свойства используются исключительно для элементов, использующих привязку прокрутки.
Это оставляет нас с JavaScript. Как правило, наша цель — использовать JavaScript в браузере только при необходимости. Эта функция StickyFix будет отслеживать элементы, на которые можно навести фокус, внутри основного элемента, и если они скрыты липкой навигацией, когда они получают фокус, они будут прокручиваться в поле зрения.
Чтобы использовать эту функцию, просто включите ее в файлы JavaScript вашего сайта.
/** * A minimal function that will detect if a focusable element is obscured by sticky navigation * This only works for sticky elements at the top of the page, but could be extended * @author Donovan Buck <dbuck@brandextract.com> * @param {string} selector - A valid CSS selector string for the sticky element * @param {number} offset - An additional offset for the focused element * * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors * @tutorial https://www.brandextract.com/Insights/Articles/Changes-to-the-Web-Content-Accessibility-Guidelines/ * @license MIT */ function stickyFix(selector, offset = 0) { // Find the height of our sticky element const sticky = document.querySelector(selector); let stickyRect = sticky.getBoundingClientRect(); let stickyHeight = stickyRect.bottom - stickyRect.top; // Select all the focusable elements within the main element const focusables = document.querySelectorAll('main button:not([disabled]), main [href], main input:not([disabled]), main select:not([disabled]), main textarea:not([disabled]), main [tabindex]:not([tabindex="-1"]):not([disabled]), main details:not([disabled]), main summary:not(:disabled)'
); // Add a listener to each focusable element focusables.forEach(focusable => { focusable.addEventListener('focus', (event) => { const targetRect = event.target.getBoundingClientRect(); if(targetRect.top < stickyHeight + offset) { window.scrollTo({ top: targetRect.top + window.scrollY - stickyHeight - offset }); } }); }); };Затем вы можете вызвать функцию:
// Wait for the document to load document.addEventListener("DOMContentLoaded", function() { stickyFix('.sticky', 24); });Понимание фокуса без затемнения (минимум)
2.5.7 Движения перетаскивания (AA)
Этот критерий гласит, что если перетаскивание является частью пользовательского интерфейса, то должен быть предоставлен альтернативный метод, позволяющий выполнять простые действия типа «укажи и щелкни». Примером этого может быть форма, которая позволяет пользователям перетаскивать файлы со своего компьютера в браузер для загрузки. Вы должны убедиться, что пользователь также может использовать свой диалог загрузки файлов, чтобы выбрать, какие файлы следует загружать. Перетаскивание, как правило, не требуется в большинстве интерфейсов веб-сайтов, за одним исключением.
Понимание движений перетаскивания
2.5.8 Целевой размер (минимальный) (AA)
Любая цель указателя должна иметь размер не менее 24 x 24 пикселей, если только эта цель не находится на расстоянии не менее 24 пикселей от каждой соседней цели или цель не находится в предложении или блоке текста. Проверяя дизайн по этому критерию, будьте очень внимательны и проверяйте ссылки на социальные сети, которые используют только значки и все ваши списки навигации.
Понимание целевого размера (минимум)
3.2.6 Постоянная помощь (A)
Предположим, ваш веб-сайт содержит контактную информацию, вариант самопомощи или любой контактный механизм, который отображается на нескольких страницах. В этом случае эти элементы должны отображаться в том же порядке, что и другой контент страницы на вашем сайте. Это в значительной степени функция хорошего, последовательного дизайна, и этому критерию не должно быть трудно соблюсти.
Понятие согласованной справки
3.3.7 Доступная аутентификация (AA)
Принуждение пользователя к запоминанию имени пользователя и пароля может создать чрезмерное бремя для лиц с когнитивными нарушениями. Из-за этого веб-разработчики никогда не должны создавать процесс входа в систему, который запрещает использование менеджеров паролей или копирование и вставку. Этот критерий допускает альтернативные методы аутентификации, если они не зависят от проверки когнитивных функций, такой как запоминание пароля или решение головоломки.
Понимание доступной аутентификации
3.3.9 Резервный вход (А)
Этот критерий гласит, что любая информация, ранее введенная пользователем в ходе того же процесса, будет автоматически заполнена или доступна пользователю для выбора, вместо того, чтобы повторно вводить информацию вручную. Очевидно, что это должно быть ожидаемым удобством для всех.
Понимание избыточной записи
использованная литература
- Что нового в проекте WCAG 2.2
- Репозиторий WCAG W3C на Github