Quantcast
Channel: Issues for Drupal core
Viewing all articles
Browse latest Browse all 292228

Add focus styling to all elements

$
0
0

Moving from #418306: Adding Visual Focus to Form Elements and sparked by this recent webaim post on easy accessibility tips.

"Sighted keyboard users generally navigate through the links and form fields on a web page using the Tab and Shift+Tab keys on the keyboard. To help ensure they can visually identify which link or form field they have navigated to, you can add the following to your CSS file:

a:focus {
outline:1px solid red;
background:yellow;
}

The colors may need to be customized to fit your site design, but they should be fairly distinctive.

To take this tip one step further, you can search your CSS files for a:hover and in each instance change it to a:hover, a:focus. This will ensure that keyboard users get the same visual highlighting when they navigate to items as mouse users get when they hover over an item."

After a little discussion it was discussed that although this should be brought up with the browsers, having a theme specific focus for elements on focus elements could be a very nice touch:
https://twitter.com/opdavies/status/333590693731782656

In Drupal 7 this was seen as a browser responsibility, particularly with the form elements. However, the link focus as suggested by webaim provides one that will benefit a broader group of elements.


Viewing all articles
Browse latest Browse all 292228

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>