Тестирование ARIA-LIVE с display:none и innerHTML — Блог Дэвида Макдональда, посвященный доступности веб-сайтов, тестирование, обучение и обсуждение
Ниже приведены два примера отображения/скрытия контента, запускаемого с помощью кнопки. В первом примере «Hello World» внедряется с помощью innerHTML, а во втором примере display:none заменяется на display:block . Мы хотим посмотреть, будут ли оба они читаться популярными программами чтения с экрана, когда контент отображается на странице визуально после нажатия соответствующей кнопки.
Пример 1: Тестирование aria-live с помощью innerHTML
Пример 2: Тестирование aria-live путем поворота контейнера с aria-live из display:none в блокировку
Пример 2a: Тестирование aria-live путем поворота контейнера from display:none, чтобы заблокировать местонахождение aria-live в родительском элементе.
Hello world
Пример 2b: Тестирование aria-live путем поворота контейнера с aria-live из display:none в блок
Пример 3: Тестирование aria-live путем поворота дочернего элемента контейнера с aria-live из дисплея :нет для блока
Привет, мир, я вежлив
Пример 4.
Тестирование aria-live путем превращения дочернего элемента контейнера с aria-live=assertive из display:none в блокПривет, мир, я настойчив
Пример 5: Проверка aria-live путем превращения дочернего элемента контейнера с aria-live=assertive из display:none в блок
Привет, мир, я настойчив
Пример 6: Проверка ARIA Live на кнопке корзины покупок InnerHTML
Используемый код Пример 1
Javascript
function myfun() {
document.getElementById(" демо").innerHTML = "Привет, мир!";
}
Код, используемый в примерах 2 и 2a
Hello world
Javascript
ПРИМЕЧАНИЕ : Изменение значения aria-live на «напористый» не изменило результатов. Не применять aria-live к элементу, который отличается от Не стесняйтесь оставлять комментарии в Твиттере @davidmacd Дэвид Макдональд — ветеран-член WCAG, соредактор книги «Использование WAI ARIA в HTML5» и член рабочей группы по доступности HTML5. Мнения мои собственные. Все статьи блога Есть несколько способов показать или скрыть элементы DOM в ванильном JavaScript. Стиль Большинство элементов HTML имеют тип отображения встроенный или блочный . Содержимое встроенного элемента перемещает слева и справа от него. Блочные элементы HTML отличаются тем, что они *заполняют* всю строку и не отображают содержимое по бокам. Чтобы скрыть элемент, установите Чтобы отобразить элемент, установите для свойства Как скрыть элемент в Javascript Включите JavaScript Как скрыть элемент в Javascript Другой способ показать или скрыть элементы DOM в JavaScript — использовать свойство стиля Чтобы скрыть элемент, установите для свойства Чтобы снова отобразить элемент, установите для свойства Свойство стиля jQuery предоставляет н/д элемента. н/д Оба примера работают в Safari для iOS Голосовой помощник (Talkback) на Samsung Galaxy (Android) н/д н/д Оба примера работают в Chrome для Android н/д Заключение
display:none с display:block . Поместите его на родителя или попробуйте innerHTML вместо этого. Информация об авторе:
Как скрыть и показать элементы DOM с помощью JavaScript
В этой статье мы рассмотрим два способа скрыть или отобразить элементы DOM с помощью JavaScript. Скрытие и отображение элементов с помощью CSS
display property display свойство используется для установки и получения типа отображения элемента в JavaScript. отображение свойство для нет : document.querySelector('.btn').style.display = 'none'
display значение block (или любое другое значение, кроме none ): document.querySelector('.btn').style.
display = 'block'
Скрыть и показать элементы с помощью CSS
свойство видимости видимость . Это похоже на приведенное выше свойство display . Однако, если вы установите display: none , он скроет весь элемент из DOM. visible:hidden скрывает содержимое элемента, а элемент HTML остается в исходном положении и размере. видимость значение скрытый : document.querySelector('.btn').style.visibility = 'скрытый'
visibility значение visible , как показано ниже: document.querySelector('.
btn').style.visibility = 'visible'
видимость только скрывает элемент, но не удаляет пространство, занимаемое элементом. Если вы также хотите удалить пробел, установите display: none с помощью отображает свойство . Создание методов
show() и hide() hide() , show() и toggle() служебные методы, которые используют встроенные стили для обновления свойства display
Давайте воспользуемся свойством
в стиле для создания вышеуказанных методов jQuery в ванильном JavaScript: // скрыть элемент
константа скрыть = элемент => {
элемент.style.display = 'нет'
}
// показать элемент
константное шоу = элемент => {
elem.style.display = 'блок'
}
// переключаем видимость элемента
константный переключатель = элемент => {
// если элемент виден, скрыть его
если (window.
getComputedStyle(elem).display !== 'none') {
скрыть (элемент)
возвращаться
}
// показываем элемент
шоу (элемент)
}
Теперь, чтобы скрыть или показать любой элемент DOM, используйте описанные выше методы:
// скрыть элемент
скрыть (document.querySelector ('.btn'))
// показать элемент
показать (document.querySelector ('.btn'))
// переключить видимость
переключить (document.querySelector ('.btn'))
Обратите внимание на использование метода getComputedStyle()
, который мы только что изучили на днях, для проверки того, виден ли уже элемент. Мы использовали этот метод, потому что свойство
стиля имеет дело только со встроенными стилями, заданными с помощью элемента 9.0003 атрибут стиля . Но HTML-элемент можно скрыть с помощью встроенного элемента 
getComputedStyle(elem).display !== 'none') {
скрыть (элемент)
возвращаться
}
// показываем элемент
шоу (элемент)
}