Чтение последнего элемента div вместо первого элемента в доступности с помощью клавиш со стрелками

Question

Чтение - некоторый текст на странице загружается, затем нет вместо Да

<div>
    <div role="alert" aria-live="assertive"> Some text on page load</div>
    <div>
        <button> Yes</button>
        <button> No</button>
    </div>
</div>

Answer 1

Вы не можете.

Ваше сообщение помечено тегами nvda и accessibility, тогда доступность для вас важна.

Руководство WCAG 2.4.3 утверждает, что

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

Вы должны создать логический порядок табуляции , который означает, что если ваш порядок чтения языков ltr (слева направо). Элементы слева должны быть сфокусированы перед элементами справа.

Для rtl (справа налево) языков вы должны располагать элементы в том же порядке, в каком они отображаются в DOM сверху снизу и справа налево и для определения атрибута dir="rtl".

Answer 2

если кнопки будут перемещаться через tab вместо стрелки, вы можете использовать tabindex, чтобы упорядочить их соответственно.

<div>
<div role="alert" aria-live="assertive"> Some text on page load</div>
<div>
<button tabindex="2"> Yes</button>
<button tabindex="1"> No</button>
</div>
</div>

Answer 3

Нет другого решения, кроме как поменять местами две кнопки, как предлагает DILEEP THOMAS.

Документ / просмотр / виртуальные курсоры программы чтения с экрана всегда читают контент в порядке дерева доступности, которое более или менее так же, как дерево DOM. Нет способа изменить порядок чтения. Если вы хотите, чтобы контент читался в определенном порядке, он должен отображаться в этом порядке в дереве. Точка.

Если он не отображается визуально в правильном порядке, то ваша ответственность - исправить CSS, чтобы он выглядел так, как вы хотите. Однако дважды подумайте, прежде чем делать это: почему пользователи программы чтения с экрана должны читать «нет», а затем «да», в то время как обычные пользователи должны сначала видеть «да» перед «нет»?

Очень часто это сигнал плохой дизайн и плохой дизайн для всех пользователей (независимо от того, есть у вас зрение или нет).

Обратите внимание, что если вы используете CSS для визуального переключения кнопок,

• В зависимости от Точный код используется, некоторые программы чтения с экрана учтут ваш CSS, а другие - нет. Большинство из них этого не сделают, но вы никогда не можете быть на 100% уверены в этом.
• У пользователей со слабым зрением и только с клавиатуры все еще будет проблема, потому что порядок табуляции будет в неожиданном / нелогичном порядке, то есть люди в западной культуре ожидают, что порядок табуляции будет выполняться сверху вниз и слева направо, в то время как ваш код CSS обязательно подразумевает обратное. Для этого последнего пункта использование других значений, отличных от 0 и -1, для tabindex - очень плохая идея (увеличьте мой отрицательный голос по этому ответу). Подробности о том, почему уже были освещены во многих местах в Интернете.

Answer 4

Вы можете просто изменить порядок элементов, как показано ниже

<div>
<div role="alert" aria-live="assertive"> Some text on page load</div>
<div>
<button> No</button>
<button> Yes</button>
</div>
</div>