E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: Bourne, Sarah (ITD)
Date: Thu, Dec 04 2014 7:31AM
Subject: beautiful visible focus indicators
No previous message | Next message →

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 ADDRESS REMOVED =
http://www.mass.gov/itd

From: Mallory van Achterberg
Date: Thu, Dec 04 2014 10:12AM
Subject: Re: beautiful visible focus indicators
← Previous message | No next message

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 ADDRESS REMOVED =
> http://www.mass.gov/itd
>
> > >