#html #accessibility #wcag2.0
#HTML #Специальные возможности #wcag2.0
Вопрос:
Мы унаследовали веб-сайт, который в настоящее время пытаемся сделать совместимым с WCAG2.0 AA
Одна из страниц не соответствует правилу порядка заголовков, поскольку на ней есть <h3> <h4> теги и, но нет предшествующего <h1> или <h2>
Мы находимся в процессе добавления <h1> тега (поскольку он должен быть у всех страниц), но в <h2> теге нет необходимости, и для изменения <h3> и <h4> потребуется большой рефакторинг различного кода jQuery и CSS
Есть ли какие-либо хитрости, чтобы сделать страницу доступной? Мне не нравится вводить скрытый <h2> тег, поскольку программы чтения с экрана, по-видимому, подхватят это. Или они игнорируют скрытые теги, и тогда страница становится совместимой?
Комментарии:
1. Если у вас нет заголовка уровня 2, ваши текущие заголовки уровня 3 и уровня 4 по сути являются заголовками уровня 2 и уровня 3. Вы уверены, что не можете просто запустить
sed s/h3/h2/ | sed s/h4/h3/всю свою кодовую базу?2. Как нет необходимости в h2? Если бы вы должны были создать оглавление этой страницы, где бы располагались h3 и h4? как упоминал Дзета, h3, вероятно, на самом деле будет h2 . Если вы говорите, что это h3, потому что его стиль — h3, то, скорее всего, у вас сбой WCAG 1.3.1 с рядом признанных критериев отказа, перечисленных здесь
3. @Zeta, уровни 3 и 4 автоматически не становятся заголовками уровня 2 и уровня 3. Это предполагает, что алгоритм описания документа существует, но это не так. Однако ваше предложение о поиске и замене кажется наиболее простым, не видя кода для этого сайта.
4. @Mike, ты можешь управлять контейнерами? Если это так, что-то вроде этого JS может помочь динамически изменять уровни заголовков, хотя это чертовски сложно: codepen.io/aardrian/pen/VKkwwE?editors=0010
5. @aardrian ошибка, я не имел в виду автоматически. Я имел в виду: «если вы используете
<h1>and<h3>и<h4>, вы не используете последние два семантически правильно».
Ответ №1:
Вы пытаетесь удовлетворить WCAG 2.0 AA или пытаетесь сделать страницу доступной?
Обычно это одно и то же, но иногда нет.
Скрытый <h2> будет передавать WCAG в зависимости от того, как вы его скрываете. Это, однако, не сделало бы страницу более доступной.
Хотя это может быть отстойно, лучший и самый правильный подход — исправить <h3> s и <h4> s, чтобы они стали правильными уровнями (это мой ответ, остальное — пух). Ваш вопрос может быть более уместным, если вместо этого вы предоставите несколько примеров кода и попросите советов о том, как написать регулярное выражение или иным образом выполнить эти замены в унаследованной системе.
Если вам говорят, что у вас нет времени на то, чтобы сделать это правильно, тогда примеры кода (или образец сайта) все равно могут быть полезны для получения некоторых рекомендаций.
Комментарии:
1. Руки вниз, это правильный путь. Если, однако, это устаревший код, и его практически невозможно реорганизовать (все равно нужно!), Есть также возможность использовать
role="heading"witharia-level. Это позволило бы изменить семантику, чтобы отразить правильную иерархическую структуру … но это должно быть последним средством и протестировано на всех поддерживаемых программах чтения с экрана, чтобы убедиться, что все они поддерживают это.
Ответ №2:
Я действительно видел эту ситуацию раньше и на самом деле сам попал в эту ловушку. Применяя стили к h3 и h4, можно придать странице вид, ну, определенным образом. Однако, глядя на теги заголовка, их цель — добавить семантику в документ, как мы все хорошо знаем. Поэтому имеет ли смысл иметь схему документа, в которой есть h3, но нет h2 ? Программы чтения с экрана и другие средства обеспечения доступности используют эту информацию заголовка, и некоторые из них могут запутаться. Мой самый важный момент при принятии решений: «как пользователь будет использовать эту информацию?» Смогут ли они его использовать? Имеет ли смысл пропускать уровень заголовка? Я изначально думаю, что нет, но, пожалуйста, дайте мне знать о вашем ином мнении!
Ответ №3:
Если вы действительно заботитесь о доступности, предоставление пустого h2 (даже неявного, что имеет место, когда вы его опускаете) может не дать пользователям подсказки в некоторых программах чтения с экрана об объявленном разделе, когда они будут перемещаться по контуру документа (1).
При этом я нигде не могу найти (ни документацию WCAG, ни документацию HTML5), где говорится, что вы не можете пропустить один уровень заголовков.
Единственным официальным (для HTML5.1) требованием является использование «заголовков более низкого ранга» для запуска новых подразделов, что должно означать, что вы можете использовать a h3 непосредственно под a h1 , но не можете использовать другой h1
Даже WCAG приводит пример с использованием пропущенных рангов, в котором говорится, что этот пример не предназначен для указания уровня для определенного раздела.
(1) HTML5.1 предоставляет общий алгоритм, в котором мы можем прочитать о «подразумеваемых заголовках» или об использовании ранга при наличии элемента содержимого заголовка
Ответ №4:
Я бы сказал, что лучший способ обеспечить соответствие — это реорганизовать код, который находится в javascript / CSS. Чтобы скрыть элементы, вы можете использовать hidden атрибут или aria-hidden .
https://www.paciellogroup.com/blog/2012/05/html5-accessibility-chops-hidden-and-aria-hidden/