Как заставить программу чтения с экрана правильно сказать «кнопка развернута», когда aria-extended имеет значение true

Question

Я работаю над тем, чтобы сделать наши аккордеоны доступными с надписями aria, такими как aria-extended.У меня есть значение ария-расширенного изменения правильно, когда нажимается заголовок триггера аккордеона или нажимается кнопка «возврат» на клавиатуре.По какой-то причине, хотя ChromeVox, который я использую для тестирования, сначала скажет «кнопка свернулась», а не «кнопка развернута», как только значение изменится после щелчка.

Я смотрел напримеры на других сайтах, таких как https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html и ChromeVox, правильно считывают оба состояния aria-extended там, так что я думаю, что это что-то вроде того, как структурирован мой код, который не позволяет ChromeVox объявлять «расширенное» состояние.

Вот пример одной секции аккордеона:

<div class="accordion-section">

    <button tabIndex="0" id="rules_list" class="accordion" aria-expanded="false" aria-controls="sectRules">
        <span class="title">Rules</span>
    </button>

    <div class="content" role="region" id="sectRules" aria-labledby="rules_list">

        <h4>What rules must all visitors follow?</h4>

        <ul class="list">
            <li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 1</li>
            <li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 2</li>
            <li style="list-style-type:disc; border-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:10px; overflow:visible;">rule 3 etc..</li>
        </ul>

    </div>

</div>

Соответствующий js:

/* Generic Accordion */
$('.accordion .title').click(function() {
    $(this).parent().parent().children('.content').toggle();
    $(this).toggleClass('open');

    $(this).hasClass("open") ? $(this).parent().attr("aria-expanded", "true") : $(this).parent().attr("aria-expanded", "false");
});

/* Adding support for keyboard */
$('.accordion').on('keydown', function(e) {
    if (/^(13|32)$/.test(e.which)) {
        e.preventDefault();
        $(this).find('.title').click();
    }
});

Соответствующий CSS:

.accordion + .content {
    display: none;
    margin-top: 10px;
    padding: 10px;
}

.accordion + .content.open {
    display: block;
    background-color: white;
}

Я в растерянности, любая помощь будет высоко ценится.

Answer 1

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

По моему мнениювам действительно следует рассмотреть возможность использования элемента button для переключения содержимого, поскольку это позволит избежать дополнительной работы, такой как:

• , обеспечивающей, что span охватывает всю кнопку, чтобы предотвратить нажатие кнопки, котораяничего не даст (произнесение этого вслух звучит странно), обработка
• фокусирует span,
• , гарантируя, что span правильно действует как button (щелчок, нажатие и др.)button связанных событий).

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

hidden + aria-labelledby

Я бы хотел сделать это как можно проще, используя атрибут hidden для содержимого, подлежащего переключению, и aria-expanded на кнопке, переключающей его.

Разборные секции«Книга инклюзивных компонентов» Хейдона Пикеринга очень хорошо прочитана, если вам нужны… ну, разборные разделы.На самом деле вся книга замечательная, вы не потратите время на ее чтение, если вы еще этого не сделали.

Атрибут hidden правильно обрабатывается программами чтения с экрана и скрывает элемент как визуально, так и издерево доступности.Вы можете использовать его практически во всех недавних веб-браузерах (https://caniuse.com/#search=hidden),, что делает его хорошим кандидатом на избежание манипулирования с классами и свойством CSS display.

Если вы хотите использовать aria-labelledby (между прочим, 2 "L", в вашем коде отсутствует один) для контента (и вы должны это сделать, поскольку вы объявили его как регион), с использованием текста button в качестве метки.

Однако, если вы планируете использовать текст, описывающий действие (например, «Показать правила» или «Скрыть правила» в зависимости от состояния), это больше не имеет значения, и вам придетсяиспользуйте другой элемент в качестве метки для этого ориентира. Элемент h4 в вашем коде, кажется, выполняет свою работу, а присвоение ему id позволит программам чтения с экрана легче идентифицировать регион.

Пример

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

Answer 2

Вы ставите обработчик щелчка на промежуток, а не кнопку? Это кажется неправильным и может быть причиной проблемы, поскольку aria-expanded находится на кнопке .

Voiceover, вероятно, ищет aria-expanded для цели события, которая является span, а не кнопкой. Конечно это не находит это.

Это может объяснить, почему она объявляет состояние, когда кнопка получает фокус, а не когда вы нажимаете на нее.

Так что проверьте, дает ли желаемый результат добавление щелчка по кнопке вместо диапазона. И если вы сделаете это, вы можете пропустить один из parent() шагов в toggle().

Кроме того, я бы установил aria-expanded на .content и синхронизировал его с атрибутом aria-expanded на кнопке.

Answer 3

Это было мое окончательное решение, это работает для нескольких разделов:

````
   let elementsArray = document.querySelectorAll(".rules-toggle");

   elementsArray.forEach(function(elem) {
      elem.addEventListener("click", function (evt) {
        const button = evt.currentTarget;
        const accordionSection = button.parentElement;
        const content = accordionSection.querySelector('.content');

       if ('hidden' in content.attributes) {
         content.removeAttribute('hidden');
         button.setAttribute('aria-expanded', true);
       } else {
        content.setAttribute('hidden', true);
        button.setAttribute('aria-expanded', false);
       }
     });
});