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

Question

Если у меня есть 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>

Answer 1

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

То, что вы на самом деле хотите сделать, это просто управлять фокусом.

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

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

Программа чтения с экрана позаботится оrest.

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

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

Используйте приведенный ниже 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 */
}

Answer 2

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

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

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

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