HTML5 Специальные возможности: роль ARIA = поддержка браузера предупреждений

1. роль = оповещение, что это делает?
2. Разные методы
3. Метод 1 createElement (), insertAttribute (), createTextNode () и appendchild ()
4. Метод 2 из 3
5. Отображение метода 3: нет для отображения: блок | встроенный и т. Д.
6. Способ 4: createTextNode + ограничения
7. Какие браузеры поддерживают какие методы?
8. Отличающиеся реализации браузера - боль в
9. Методология тестирования

ARIA role = alert поддерживается во всех современных браузерах и вспомогательных технологиях, но реализация в браузерах различается, что может привести к тому, что role = alert окажется неподдерживаемым.

роль = оповещение, что это делает?

Когда элемент имеет роль role = alert, он запускает событие оповещения в реализованных в браузерах API специальных возможностей. Это определяется вспомогательной технологией (AT), и текстовое содержимое элемента объявляется, обычно с добавлением суффикса или префикса словом «alert». Он не перемещает фокус в браузере или вспомогательных технологиях на элемент, он просто приводит к объявлению текстового содержимого элемента. Это полезно, потому что сообщения на экране могут передаваться пользователям АТ без нарушения последовательности навигации по их страницам или текущего фокуса. Они получают аналогичный опыт для других пользователей, когда отображается текстовое сообщение.

WAI-ARIA Authoring Guide состояния:

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

Примечание: роль = оповещение является одним из многочисленные функции ARIA которые недоступны как родной HTML функции.

Разные методы

Существует множество способов отображения содержимого на странице после ее загрузки. Проблема заключается в том, что в некоторых браузерах разные методы не дают желаемого эффекта запуска события оповещения в браузере, когда в отображаемом содержимом присутствует функция role = alert.

Метод 1 createElement (), insertAttribute (), createTextNode () и appendchild ()

Используя этот метод, текстовое оповещение может быть отображено на странице:

1. создание нового элемента
2. добавление атрибута роли со значением alert
3. создание текстового контента
4. добавление текстового содержимого к созданному элементу

Примечание: этот метод в настоящее время работает только с FireFox и Chrome

Метод 2 из 3

Используя этот метод, на страницу можно добавить элемент с атрибутом роли со значением оповещения и текстовым содержимым:

elementX.innerHTML = «<div role = 'alert'> текст предупреждения </ div>»;

Примечание: этот метод в настоящее время работает только с FireFox и Chrome

Отображение метода 3: нет для отображения: блок | встроенный и т. Д.

При использовании этого метода на странице может отображаться элемент уже в DOM с атрибутом роли со значением оповещения и текстовым содержимым.

Примечание: этот метод в настоящее время работает только с IE, FireFox и Chrome

Способ 4: createTextNode + ограничения

Примечание: к сожалению, метод 4 является большим взломом, но это единственный метод, который обеспечивает поддержку через браузеры / AT и платформы.

Используя этот метод, к существующему элементу без текстового содержимого можно добавить текстовое содержимое. У этого метода есть дополнительные ограничения, чтобы он работал с IE, Chrome и Safari (Mac / iPhone / iPad). Рабочий пример: Тестовая страница - метод 4

основные:

alertText = document.createTextNode ("текст предупреждения"); elementX.appendChild (alertText);

Ограничения:

• Элемент не может быть скрыт (для сафари) до добавления текста, поэтому используется CSS clip () и изменяется до добавления текста.
• Свойство видимости CSS элементов должно быть переключено (для IE)
• Требуется дополнительная функция role = alert для внешнего элемента контейнера, а затем необходимо только установить role = alert для внутреннего элемента с помощью сценариев перед добавлением текста.

Чтобы достичь этого внешнего элемента, его свойство CSS clip изначально установлено в rect (0px, 0px, 0px, 0px), для внутреннего элемента добавлено role = alert, а свойство CSS clip для внешнего элемента установлено в auto с помощью сценариев (для Chrome), затем после (для Safari) текстового узла добавляется свойство видимости CSS (для IE).

HTML:

<div id = "display2" role = "alert"> <span id = "add1"> </ span> </ div>

JavaScript:

function addError () {// установить атрибут роли для внутреннего элемента elem1.setAttribute ("role", "alert"); ? // изменить исходное свойство клипа на auto document.getElementById ('display2'). style.clip = 'auto'; // создаем и добавляем текстовый узел alertText = document.createTextNode ("alert via createTextnode ()"); elem1.appendChild (alertText); // переключаем видимость с видимого на скрытый и обратно elem1.style.visibility = 'hidden'; elem1.style.visibility = 'видимый'; }

CSS:

/ * клип установлен, чтобы изначально скрывать элемент, так как он не может быть скрыт отображением: нет или видимость: скрыто для совместимости с Safari * / # elem1 {clip: rect (0px, 0px, 0px, 0px); }

Примечание: этот метод, как описано, работает с FireFox, Chrome, IE в Windows и Safari (Mac, iPhone и iPad?).

Какие браузеры поддерживают какие методы?

Если отображение текста предупреждения вызвало событие MSAA SYS_ALERT (в Windows), этот метод считается поддерживающим role = alert после специального тестирования с использованием NVDA и JAWS. На Mac, iPhone и iPad? если VoiceOver объявляет текст предупреждения, метод считается поддерживающим роль = предупреждение.

Примечание. Результаты, отмеченные звездочкой, указывают на то, что, хотя определенный метод поддерживается, поддержка является хрупкой, поскольку, например, предупреждение не вызывается, если метод повторно создается на той же странице после первоначального использования. Другими словами, единственный браузер с надежной поддержкой - это Firefox.

метод браузера 1 метод 2 метод 3 метод 4 FireFox 13 Да Да Да Да IE 9 Нет Нет Да *
Да *
Chrome 19 Да *
Да *
Да *
Да *
Safari 5 (Mac / iPad / iPhone) Нет Нет Нет Да *

Отличающиеся реализации браузера - боль в

Как видно из приведенной выше информации, из-за проблем с поддержкой IE и Safari получение роль = предупреждение для работы между браузерами и кросс-браузерами крайне болезненно, но, как показано, это возможно. Возможно, я что-то упустил, и есть гораздо более простое решение, если так, пожалуйста, поделитесь!

Методология тестирования

принять приложение с отображенным событием SYS_ALERT

На Mac, iPhone и iPad VoiceOver использовался с Safari для тестирования различных методов. В Windows для Firefox, IE и Chrome Accevent использовался для прослушивания события SYS_ALERT, которое срабатывает при отображении текстового предупреждения. Также JAWS и NVDA использовались для проверки того, был ли объявлен текст предупреждения.

Примечание: JAWS отлично работал с IE для всех методов, так как он не зависит от события SYS_ALERT, но NVDA работает только в IE с метод 4 так как он полагается на событие SYS_ALERT.