WebAIM - Web Accessibility In Mind

E-mail List Archives

::before pseudo element not receiving focus in Safari

for

From: Bethmann, Jen
Date: Dec 11, 2017 9:06AM

I have a question about a link has been designed from our logo which has visual focus issues in Safari for keyboard-only users.

The text of the link has been visually hidden. The logo is in a ::before pseudo element with an absolute position. With the addition of CSS, the VFI appears in all browsers, except Safari. In Safari, it skips right over the logo-link as if the link does not exist.

It is believed this issue has everything to do with being an absolute positioned item. As soon as we turn off the absolute position CSS property, the logo receives a VFI. The z-index has no effect on making that "findable" through the keyboard. Has anyone else is encountered this in Safari? If so, how can we get this element to receive keyboard and visual focus as it does in other browsers?

Sincerely,
Jen Bethmann
Web Accessibility Coordinator | Web & Interactive Communications (WEB)
Illinois State University
Old Union 224, Campus Box 6350
p: (309) 438-0706
Email: <EMAIL REMOVED>