Укладка изображения в фокусе

Question

Я пытаюсь улучшить доступность на сайте WordPress, где «фокус» отсутствует в таблице стилей.

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

Вот что я поставил - довольно просто:

a img:hover {border-bottom: 3px dashed #000;} 
a img:focus {border-bottom: 3px dashed #000;} 

Он работает для висения, но не фокус!

Любые идеи?

Answer 1

Пользовательские агенты обычно не учитывают img элементы как принимающие фокус. От the w3 CSS spec:

The: фокус псевдо-класс применяется, если элемент имеет фокус (принимает события клавиатуры или другие формы ввода текста).

Вы можете включить фокусировку на img элементов, добавив tabindex атрибут (<img src="foo.png" tabindex="0" alt="photo of foo">), но я бы не рекомендовал его, если у вас нет какой-то конкретной причины для этого. Если элемент фактически не принимает ввод с клавиатуры, добавив его в порядок табуляции, он не добавляет преимущества для пользователей AT (и действительно, может быть запутанным).