Как реализовать ARIA на адаптивном сайте

Мы работаем над тем, чтобы сделать один из наших адаптивных сайтов более доступным, но изо всех сил пытаемся разобраться в ARIA, поскольку это, похоже, противоречит основному принципу отделения элементов дизайна от HTML.

Например, если элемент скрыт в aria, его можно указать как aria-hidden = "true". Однако большая часть видимости определяется медиа-запросами в зависимости от размера экрана и т. Д.

В других случаях элементы работают совершенно иначе в зависимости от медиа-запросов. Таким образом, для некоторых размеров подходит aria-haspopup = "true", в то время как при других разрешениях навигация всегда видна.

Я что-то упустил, или мы снова и снова сталкиваемся с тегами шрифтов с этим стандартом? Должны ли мы при необходимости добавлять / удалять теги aria с помощью javascript?


responsive-design accessibility wai-aria
person Kenneth Spencer    schedule 25.06.2015    source источник
comment
«WAI-ARIA (Инициатива веб-доступности - Доступные полнофункциональные интернет-приложения) - это техническая спецификация, опубликованная Консорциумом Всемирной паутины (W3C), в которой указывается, как повысить доступность веб-страниц, в частности, динамического контента и пользовательского интерфейса. компоненты, разработанные с использованием Ajax, HTML, JavaScript и родственных технологий » (Wikipedia) - поэтому, поскольку он в значительной степени ориентирован на динамические приложения, установка этих атрибутов с помощью JS, где / когда это необходимо, не должна казаться удивительная концепция, вы не согласны?   -  person CBroe    schedule 26.06.2015
comment
Одна из его основных целей - обеспечить доступность в «нелинейных потоках», таких как взаимодействие JavaScipt представляет страницу или приложение. Потому что например. динамическое отображение содержимого вне обычного «порядка» документа (если обычная веб-страница без таких JS-взаимодействий была прочитана программой чтения с экрана), создает проблемы доступности, особенно для пользователей, которые не используют носитель визуально, использование JS для динамической установки этих атрибутов имеет большой смысл.   -  person CBroe    schedule 26.06.2015
comment
Справедливо. Это кажется немного неестественным, но я могу с этим поработать.   -  person Kenneth Spencer    schedule 26.06.2015

Ответы (2)


arrow_upward
2
arrow_downward

На самом деле, Кеннет, ваш вопрос имеет большой смысл, и да - инструменты для адаптивных сайтов не идеальны. У меня нет ответа для вас, но то, что я хочу сказать, слишком длинное, чтобы быть комментарием ...

Рассмотрим следующий пример. В вашем приложении есть кнопка меню, которая открывает боковой ящик с помощью короткой скользящей анимации. Без особых соображений ваша работа проста (предположим, ящик находится слева и имеет ширину 250 пикселей):

@media ... (min-width: 1000px)
#drawer {
  left: 0;
}

@media ... (max-width: 999px)
#drawer {
  left: -250px;
}
#drawer.opened {
  left: 0;
}

(Не точный синтаксис, добавьте свое собственное волшебство для скользящей анимации)

Чтобы сделать это доступным, вам нужно будет выполнить одно из следующих действий:

Опция 1

Не используйте aria-hidden='true'. Обычно достаточно спрятать ящик с помощью visibility:hidden или display:none. Конечно, теперь вам нужно дождаться окончания выдвигающейся анимации, чтобы скрыть ящик (или вы потеряете анимацию).

вариант 2

Используйте aria-hidden='true'. Вам нужно будет поймать изменение размера окна и добавить / удалить aria-hidden='true' при переключении размеров (вы теряете магию медиа-запросов).

Подводя итог, вы правы. Определенно есть возможности для улучшения. Это особенно верно, учитывая общий сдвиг в сторону отказа от JS для обеспечения плавности 60 кадров в секунду.

person Barak    schedule 03.09.2015

arrow_upward
0
arrow_downward

Вы должны использовать функцию window.matchMedia

Например:

var mm = window.matchMedia("(min-width: 600px)");

mm.addListener(updateAriaHidden);
updateAriaHidden(mm);

var updateAriaHidden= function (obj) {
    if (obj.matches) {
        // set aria-hidden true/false when width >= 600px
    }
    else {
        // set aria-hidden true/false when width < 600px
    }
}

Например, используя jQuery, вы можете использовать селектор :hidden с настраиваемым классом CSS для динамической установки атрибута aria-hidden:

$(".toggleable:hidden').attr('aria-hidden', true);
$(".toggleable:visible').attr('aria-hidden', false);

Использование настраиваемого класса упрощает сопоставление элементов, которые будут меняться в зависимости от ваших медиа-запросов.

person Adam    schedule 07.08.2017