Contrib.social

Add focus styling to all interactive elements

Open on Drupal.org →
Created on 13 May 2013, over 11 years ago
Updated 30 May 2023, over 1 year ago

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.

📌 Task
Status

Needs work

Version

1.0

Component

Look and Feel

Created by

🇨🇦Canada mgifford Ottawa, Ontario

Live updates comments and jobs are added and updated live.
  • Accessibility

    It affects the ability of people with disabilities or special needs (such as blindness or color-blindness) to use Drupal.

  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment over 1 year ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    Here is some documentation around this from the GDS https://design-system.service.gov.uk/get-started/focus-states/

  • Status changed to Needs work over 1 year ago
  • Comment over 1 year ago →
    🇨🇦Canada mgifford Ottawa, Ontario

    @pameeela I'm moving this back to Needs work, with a clarification. Using the default browser focus/outline is ok. But if you look at the keyboard focus state examples above, you can see that the default looks weak by comparison. It's even hard to read "tag2" because the blue line is so close around that.

    It's just much less pronounced and less designed as it is now. It just looks like an afterthought letting the browser determine this. It would be more clearly an accessible theme if the focus styling was considered and aligned with the rest of the look/feel of the core Drupal themes.

    Just closing another issue and bringing forward this comment from that thread:
    https://www.drupal.org/project/drupal/issues/2942487#comment-12645241 🐛 Improve link styles for better accessibility Closed: duplicate

    Outline it's default styles to mark link or any interactive element as focused (for major browsers). Advantage of outline that it can be added not only for links but for other elements and styles will be consistence. Plus it's possible to adjust outline color according to styleguide. And practice shows that best way to highlight focused items its to use outline, its more visually noticeable. Underline and color change its also good practice but its can be added as additional to outline.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024