Правильная обработка WCAG для вновь добавленных регионов

Если у меня есть 3 кнопки на странице, и выбор одной из них приводит к их скрытию, а затем показывает другой div, содержащий некоторые элементы формы, я хочу правильно уведомить показанный новый добавленный контент. Насколько я понимаю, это динамические изменения содержимого, такие как отображение необходимости правильной обработки региона с точки зрения WCAG. Есть ли стандартный способ справиться с этим с точки зрения aria / html?

Я пробовал aria-live, так как это часто предлагается для этого сценария, на внешней div новой области, но даже с aria-live="polite" я получаю нежелательные побочные эффекты. Скажем, показанная область содержит маленькую форму. Когда фокус перемещается в текстовое поле и я начинаю печатать, у меня возникает странное поведение: JAWS постоянно начинает читать метку снова и снова для каждого отдельного нажатия клавиши, когда пользователь вводит символы во вводе. Если я удалю атрибут aria-live в родительском элементе div, то при переходе через форму метка будет прочитана только один раз в фокусе поля и больше не будет прочитана, когда пользователь вводит текст.

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

Такое странное поведение, по-видимому, подразумевает, что aria-live лучше подходит для небольших изолированных элементов, таких как ошибки / предупреждения, добавляемые на страницу, а не для больших областей.

Должен ли я вместо этого использовать роль?

<form role="form" action="/submit" method="post">
    <div hidden id="section1" aria-live="polite">
        <h2>Form Header</h2>        
        <div>
            <label for="RequestNumber">Request Number*</label>
            <input id="RequestNumber" name="RequestNumber" type="text" />           
        </div>
    </div>
</form>

person AaronLS    schedule 05.11.2019    source источник


Ответы (2)


Золотое правило - не используйте ARIA, пока не исчерпаны все остальные возможности.

На самом деле вы хотите просто сосредоточиться.

Когда вы нажимаете одну из трех кнопок, я предполагаю, что отображается другая форма. 99% программ чтения с экрана могут справиться с этим без проблем (а для тех, кто не может, они используют без JavaScript, поэтому убедитесь, что ваш веб-сайт работает без него, если это возможно).

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

Об остальном позаботится программа чтения с экрана.

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

Визуально скрытый класс для справки

Используйте приведенный ниже CSS, чтобы скрыть встроенный диапазон внутри кнопки, если вы считаете, что это соответствующая информация, которая может понадобиться программе чтения с экрана.

.visually-hidden { 
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap; /* added line */
}
person Graham Ritchie    schedule 06.11.2019

Это звучит как случай простого прогрессивного раскрытия информации. То, что делает JAWS, - это не ошибка, а именно то, как работает aria-live. Aria-live создает чувствительную область DOM, которая запускает высказывание Assistive Tech всякий раз, когда эта область изменяется. Вот почему оборачивать форму в aria-live было бы неразумно.

Если это действительно прогрессивная ситуация раскрытия информации, когда форма выстраивается раньше пользователя на основе его выбора, уведомления aria-live не нужны. Пока фокус пользователя логически перемещается по элементам формы, поскольку они относятся к их текущей задаче, и содержимое, стоящее за пользователем, не меняется, никаких предупреждений не требуется.

В вашем примере вы также обертываете поля формы и метки. Возможно, вы захотите просто добавить H2 в область aria-live, которая ограничит объявление только этим элементом.

(Приносим извинения, если я неправильно понимаю ситуацию, но если при выборе одной из кнопок набор кнопок исчезает и добавляется div, тогда реальный вопрос заключается в том, где приземляется фокус?)

person Seabizquik    schedule 05.11.2019
comment
Вы объяснили, почему я наблюдаю поведение aria-live, из чего я пришел к выводу, что aria-live не было правильным решением для моей ситуации. Итак, вопрос действительно в том, какое решение является правильным, и похоже, что это вопрос принудительного сосредоточения внимания на первом элементе в скрытой форме. - person AaronLS; 07.11.2019
comment
Я бы не стал заставлять сосредотачиваться. Просто откройте его и позвольте пользователю перейти к нему, как будто он продолжает форму. - person Seabizquik; 08.11.2019