WebAIM - Web Accessibility In Mind

E-mail List Archives

beautiful visible focus indicators

for

From: Bourne, Sarah (ITD)
Date: Dec 4, 2014 7:31AM

When advising people about the need for a visible indication of focus, I often mention that if they don't like the look of the browser-default focus indication they can change it, and that they may want to change because the browser-default is pretty minimal. The next thing I want to do is show them some attractive examples of how they can do this, except I can never think of where I saw things I liked.

I would love to hear about sites you've found (or made!) with well-done enhancements to focus indicators. Here are a few I have already. I'd really like some examples of form elements because they are harder to find.
- The WebAIM site (webaim.org) uses animation and a variety of border, background, and font color changes.
- The Deque site (deque.com) uses solid boxes - yellow in the banner and blue in the content.
- The Accessible ICT Procurement Toolkit site (mandate376.standards.eu) does a font/background reverse for links.
- Many sites add an underline to links when they have focus, and may also change the link color

Thanks in advance!
sb
Sarah E. Bourne
Director of IT Accessibility
Massachusetts Office of Information Technology
Commonwealth of Massachusetts
1 Ashburton Pl. rm 1601 Boston MA 02108
617-626-4502
<EMAIL REMOVED>
http://www.mass.gov/itd