Как показать состояние фокуса через API специальных возможностей для пользовательских элементов управления в React? Достаточно ли HTMLElement.focus()?

При рассмотрении возможных сбоев по WCAG критерию успеха 4.1.2 я столкнулся с загадочным Failure of Success Criterion 4.1.2 due to the focus state of a user interface component not being programmatically determinable or no notification of change of focus state available"(https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/F79).

Хотя в статье указана ошибка, в ней не поясняется, как добиться соответствия для пользовательских компонентов.

Следовательно, вопрос — каков стандартный способ отображения состояния фокуса через API специальных возможностей для пользовательских элементов управления в React? HTMLElement.focus() справляется с этим изящно или нужны какие-то другие действия?


reactjs accessibility web-accessibility
person Anastasia Pevtsova    schedule 31.01.2020    source источник
comment
Обычно любой элемент, с которым вы хотите, чтобы пользователь взаимодействовал с помощью мыши, должен иметь tabfocus, если невозможно добраться до него с помощью вкладки иначе (обычно формы и ссылки). Если у вас есть элемент на странице, который является интерактивным, должна быть возможность перейти к нему, используя только клавиатуру, вот и все.   -  person David T    schedule 06.02.2020
comment
Можете ли вы опубликовать код пользовательского элемента, для которого возникла эта проблема. В идеале предоставление информации о роли, состоянии и значении пользовательскому компоненту должно решить проблему.   -  person tarzen chugh    schedule 02.05.2020

Ответы (1)


arrow_upward
0
arrow_downward

Вы действительно можете вызвать focus() только для элемента, который имеет атрибут tabindex. (Исключениями из этого правила являются «родные» элементы пользовательского интерфейса, такие как button, a и input, которые по умолчанию являются фокусируемыми).

Если вы хотите focus() что-то без включения в последовательность вкладок, используйте tabindex="-1".

Для компонентов вам придется тщательно выбирать, куда поместить tabindex. Обычно вы помещаете этот атрибут в элемент, который несет семантику. (т. е. если вы хотите сосредоточиться на <h1>, используйте <h1 tabindex="-1">, а не на каких-либо элементах-оболочках или потомках). Это может быть сложнее с компонентами, особенно если компонент представляет собой составной виджет, но это уже другая история.

person brennanyoung    schedule 10.02.2020