Можете ли вы использовать aria-live более одного раза на веб-странице?

Question

Я создаю из которого есть ошибки проверки, показанные ниже соответствующих входных данных. Чтобы сделать форму более доступной, я добавил aria-Life в div, который будет содержать сообщение об ошибке. Если у вас будет более одного aria-live, будет ли это хуже для пользователей?

<div
    id="awesome-id">
    <label for="awesome-id--input">
        This is a label
    </label>
    <input
        type="tel"
        id="awesome-id--input"
        required>
    <div
        role="region"
        aria-live="polite"
        id="awesome-id--error-message">
    </div>
</div>

<div
    id="another-id">
    <label for="another-id--input">
        This is another label
    </label>
    <input
        type="tel"
        id="another-id--input"
        required>
    <div
        role="region"
        aria-live="polite"
        id="another-id--error-message">
    </div>
</div>

Answer 1

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

Тем не менее, я бы удалил role=“region”, Это спецификация элемента Region в MDN Web Docs:

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

Ориентиры, такие как Регион, позволяют пользователю быстро перемещаться к ним. Но добавление всех сообщений об ошибках в этот список ориентиров, на мой взгляд, только испортило бы это. Вместо этого вы должны рассмотреть возможность добавления role=“alert”, Также убедитесь, что aria-live присутствует на странице загрузки - даже если она пуста. В противном случае некоторые браузеры не будут знать, чтобы прослушать изменения в нем.

Наконец, не забудьте также переключаться aria-invalid=“true/false” на входе, чтобы обеспечить скрин-ридер правильной обратной связью.