Я работаю с SPA с Angular, и в дизайне указано, что есть кнопка «Назад», и она находится перед заголовком уровня страницы, обычно это H1. Для SPA общепринятой практикой является то, что мы изначально фокусируемся на нагрузке в заголовке H1, поскольку перезагружается только содержимое главной страницы.

С точки зрения специальных возможностей я считаю, что размещение кнопки «Назад» перед заголовком нарушает 2.4.3 — Порядок фокуса, поскольку есть интерактивный элемент, который может быть пропущен после первоначального фокуса на странице. Считаете ли вы, что это нарушение доступности, если перед заголовком в порядке DOM размещена кнопка «Назад». Мысли?

Back button placement

2
Ramji Seetharaman 26 Ноя 2020 в 00:03

1 ответ

Лучший ответ

Я думаю, вы имели в виду SC 2.4.3 как SC 2.4.7, есть ли видимый индикатор фокусировки (просто во избежание путаницы).

Не подведет ли это SC 2.4.3?

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

Этот критерий заключается в том, чтобы убедиться, что вы не нажимаете Tab от кнопки «Назад» к нижнему колонтитулу (в крайнем случае), что может вызвать путаницу у пользователей клавиатуры.

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

«Кнопка «Назад» действительно нужна?» Это первый вопрос, который вы должны себе задать.

То есть, если я вернусь в браузере, я предполагаю, что он выполняет точно такое же действие, как и возврат с помощью вашей кнопки?

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

Для пользователей, не использующих средства чтения с экрана и использующих клавиатуру, они увидят кнопку «Назад» и поймут, что могут нажать Shift + Tab на кнопку, если захотят.

Если ответ отрицательный, кнопка «Назад» в браузере работает не так, как ваша кнопка «Назад», поэтому нам нужно сделать ее более доступной. (На самом деле я бы сказал, что вам нужно исправить все, что мешает вашей навигации, поскольку они оба должны совпадать!)

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

Вы видите, что это по-прежнему соответствует логической части логического порядка фокуса, логично, что первым действием на странице после прочтения заголовка будет кнопка «Назад».

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

Однако убедитесь, что порядок DOM отражает порядок фокуса.

<h1>Test Page Heading</h1>
<button><- Back</button>

и используйте CSS для визуального изменения порядка.

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

Резюме

  1. Это не нарушит логического порядка фокусировки, даже если вы ничего не делаете.
  2. Если кнопка «Назад» в браузере делает то же самое, вы можете оставить ее как есть.
  3. Если кнопка «Назад» в браузере работает не так, как кнопка «Назад» в вашем приложении, попробуйте сначала исправить это.
  4. Если по какой-то причине ваша кнопка «Назад» должна работать по-другому, кнопка «Назад» должна иметь фокус после заголовка, даже если она появляется визуально раньше.
  5. Убедитесь, что в заголовке нет визуального индикатора фокуса, а на кнопке есть.
  6. Поменяйте порядок DOM и измените визуальный порядок с помощью CSS.

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

2
Graham Ritchie 25 Ноя 2020 в 11:43
1
Большое спасибо за ваш подробный конспект. Я думаю, это имеет смысл. Я склоняюсь к тому, что вы упомянули. Не все согласны с тем, когда вы работаете в команде, поскольку Доступность — это туманный зверь, и у каждого есть своя собственная интерпретация. Я хотел получить второй глаз и дает мне уверенность, что я рекомендую доступное решение. ПРИМЕЧАНИЕ. Я обновил свой вопрос, чтобы отразить правильные критерии успеха. Большое спасибо, что указали.
 – 
Ramji Seetharaman
26 Ноя 2020 в 00:08
1
Рад, что был полезен для вас, удачи в проекте!
 – 
Graham Ritchie
26 Ноя 2020 в 00:10