Firefox не позволяет сфокусировать тег привязки с помощью кнопки роли

Question

В Firefox если я укажу <a role="button" tabindex="0">Something</a>, я не смог найти способ сделать этот элемент фокусируемым с помощью Tab .

В Safari / Chrome это работает как и ожидалось. Но в Firefox это не сработает, если я не поменяю его на <div role="button" tabindex="0">Something</div>.

Когда я смотрю на инструменты доступности, я вижу, что в обоих случаях роль pushbutton, но Firefox полностью игнорирует <a>. Это ошибка в Firefox или я что-то упустил?

Я на ОС Ma c, так что я знаю, что это зависит от настроек, но если Safari может сфокусироваться на данном элементе, как получается Firefox нет?

Answer 1

Короткий ответ

Используйте элемент <button>, если это кнопка, если только вам не нужен запасной вариант JavaScript, в этом случае сделайте вашу гиперссылку действительной с атрибутом href.

Более длинный ответ

Невозможно воспроизвести эту проблему, но это может быть проблема Ma c OS + Firefox (так как я на Windows, и данный пример работает как ожидалось в Firefox .)

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

Гиперссылка должна имеет действительный атрибут href. Без этого он не будет регистрироваться как гиперссылка.

Если вы не намерены, чтобы это было гиперссылкой (которая, учитывая тот факт, что вы дали role="button", говорит мне, что вы не собираетесь делать это гиперссылкой), то почему бы не использовать <button> элемент.

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

Если вы намерены сделать это гиперссылкой (единственная причина, по которой это нужно сделать, - это предоставить запасной вариант для нет JavaScript), тогда вам нужно добавить href="link", чтобы сделать эту ссылку действительной.

Вам не нужно tabindex="0", так как теги привязки по умолчанию могут фокусироваться (если они действительны, как указано).