Responsive UI - изменить порядок чтения в программах чтения с экрана?

Question

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

Cancel - Remind Me Later - Learn More

... и программа чтения с экрана читает слева направо.Однако на мобильном устройстве порядок кнопок располагается вертикально и упорядочен как обратная сторона рабочего стола:

Learn more Remind me later Cancel

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

Может ли программа чтения с экрана изменять порядок чтения в зависимости от области просмотра?

Answer 1

Как правило, программа для чтения с экрана игнорирует CSS (*).Порядок вашей DOM - это порядок, в котором программа чтения с экрана будет читать его.Даже если вы используете tabindex, это будет контролировать только порядок табуляции через интерфейс.Если вы используете CSS для изменения положения элементов, будь то через flexbox, grid или float, программа для чтения с экрана проигнорирует это.

Пользователь программы чтения с экрана может просто пройти DOM (**) с помощью клавиш со стрелками вверх / вниз.(** Пользователь на самом деле не ходит по DOM, а по дереву доступности , но он похож на DOM. Не каждый элемент в DOM будет в дереве доступности, но это аналогия).

Таким образом, единственный способ «контролировать» порядок, в котором программа чтения с экрана слышит элементы, - это изменение порядка элементов в DOM.

(*) (Если у вас есть псевдоэлемент :before или :after со свойством content, это свойство будет считываться программой чтения с экрана, как указано в шаге2F из вычисления " Доступное имя и описание ")

Answer 2

Есть ли способ для программы чтения с экрана изменить порядок чтения в зависимости от области просмотра?

Одно из решений - это иметь два набора одного и того же меню и использовать медиазапросы дляиспользуйте один или другой

<div class="desktop">Cancel - Remind Me Later - Learn More</div>
<div class="mobile">
Learn more
Remind me later
Cancel
</div>

CSS:

.mobile {display:none}
@media screen and (max-width: 600px) {
   .desktop {display:none}
   .mobile {display:block}
}

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

Answer 3

Это общая проблема, и есть несколько решений, которые вы можете сделать.Не зная о вашей кодовой базе, вот несколько советов для вас:

Не зная, насколько сложна ваша разметка, вы можете предоставить версию элементов формы, которые видны только на маленьких экранах.Таким образом, вы можете явно контролировать древовидную структуру специальных возможностей.

Другой вариант, вы можете использовать CSS (flexbox или grid) для изменения положения кнопок на основе вашего медиазапроса для небольших экранов.

Хотя это будет работать, я бы не советовал использовать "tabindex =" 1 "," 2 "," 3 "" ... "для управления порядком вкладок, видя, как ваш пользовательский интерфейс не рендеритв любом случае в правильном порядке.

Надеюсь, это поможет. Удачи в вашем проекте.