WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: beautiful visible focus indicators

for

From: Mallory van Achterberg
Date: Dec 4, 2014 10:12AM

It's not beautiful but tabbing through products here is interesting:
http://www.pci-supplies.nl/kantoormachines-3d-printers-3d-printers/116/

There's a select dropdown, filter checkboxes, number inputs and submit
buttons. Product boxes where you are focussing on something inside get
a glowy outline.

_mallory

On Thu, Dec 04, 2014 at 09:31:56AM -0500, Bourne, Sarah (ITD) wrote:
> 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
>
> > >