Порядок чтения NVDA и JAWS с использованием React

Question

При использовании NVDA в Firefox, он читает в React по порядку строк. Как я могу изменить порядок чтения?

Пример кода:

<Row1>
  <row-item-left>{some content1-left}</row-item-left>
  <row-item-right>{some content1-right}</row-item-right>
<Row1>
<Row2>
  <row-item-left>{some content2-left}</row-item-left>
  <row-item-right>{some content2-right}</row-item-right>
<Row2>

Теперь он читает: «Некоторое содержимое1 слева, некоторое содержимое1 справа, некоторое содержимое2 слева и некоторое содержимое2-правильно."Я хочу, чтобы он читал: «некоторый контент1 слева, некоторый контент2 слева, некоторый контент1 справа» и «некоторый контент2 справа».

Я использую tabindex. Он хорошо работает с вкладками, но я не хочу фокусировать элементы. Также он не работает с клавишами со стрелками. Пожалуйста, помогите мне в этом.

Answer 1

Порядок чтения всегда тот же, что и в дереве доступности, а дерево доступности строится из DOM. Это основное правило не может быть изменено. CSS не влияет на порядок чтения.

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

<row-item-left>{some content1-left}</row-item-left> 
<row-item-left>{some content2-left}</row-item-left> 
<row-item-right>{some content1-right}</row-item-right> 
<row-item-right>{some content2-right}</row-item-right> 

Я оставляю CSS-эксперты, которые расскажут вам, как этого добиться

Answer 2

Во-первых, доступность - это не то, что вы хотите, никогда не пытайтесь изменить ожидаемое поведение.

При использовании программы чтения с экрана ожидается, что элементы будут перетекать слева направо, сверху вниздно в 99% случаев (как вы обычно читаете страницу).

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

Что касается фокусировки, никогда не вмешивайтесь в это, если это что-тоинтерактивный (интерактивная ячейка, ссылка и т. д.).

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

Текущий порядок чтения правильный, не мешайте ему.

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

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

Я не уверен, почему вы сказали, что не хотите фокусировать элемент, если ваши пользовательские элементы HTML в первую очередь имеют фокусотрегулируйте эти элементы (как вы, должно быть, добавили tabindex=0 или несколько JS к этим элементам, чтобы сделать их фокусируемыми, поскольку <divs> по умолчанию не фокусируются.)