• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Digital A11Y

Digital A11Y

Your Accessibility Partner

  • About
  • Articles
  • WAI-ARIA
  • WCAG
  • Resources
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / Web Accessibility / WCAG / Understanding SC 2.4.7 Focus Visible

Understanding SC 2.4.7 Focus Visible

Last Modified: February 27, 2018 by Raghavendra Satish Peri Leave a Comment

Focus Visible: Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)

Focus visible is very important for low vision users, people with motor disability & attention disorders. If there is no visible focus on any active element or the element that receives keyboard focus users might not be able to determine where their current focus is & will be lost. While browsers handle the default visible focus for active elements it is always a best practice to provide visible focus to the elements using the CSS techniques.

Points to Remember

  • Let browsers handle the visible focus for active elements
  • ensure that active element is provided with visible focus.
  • Ensure that when the user is navigating through the page using keyboard visible focus moves along for every element presented on the page
  • Ensure that there is sufficient contrast between the visible focus & the background of the element, for example if the visible focus is black & the background of the element is black then focus visible is not visually distinguishable.
  • Code Example

    For the current site the visible focus is provided in style.css in the following way

    a:focus {
    outline: thin dotted;
    }
    a:hover,
    a:active {
    outline: 0;
    }

    References

    Understanding Success Criterion 2.4.7

    Share A11Y Love

    • Twitter
    • LinkedIn
    • Facebook
    • Reddit

    More Accessibility Articles

Filed Under: WCAG Tagged With: browser, focuus, navigation, visible, WCAG

About Raghavendra Satish Peri

Raghavendra Satish Peri is a digital accessibility evangelist working at Deque Systems as Senior Accessibility Consultant breaking web accessibility & mobile accessibility challenges. He authors an Accessibility Blog & is galvanizing the adoption of accessibility by inspiring the local tech community with meetups and mentorship. He propelled this thought by founding HelloA11y, a community of accessibility professionals, developers and enthusiasts. When away from his computer, Raghava can be found at local cafes & restaurants sampling cuisines, attending local meetups, listening to audio books or writing on his Personal Blog. Raghavendra Satish Peri also helps small business & individuals with Digital Marketing Trainings & SEO consulting… He has been building websites & doing SEO Consulting for more than 14years.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name
  • Knowbility looking for mentors in its Accessible Internet Rally
  • Understanding SC 2.5.2 Pointer Cancellation

Recent Comments

  • Al on Understanding SC 4.1.2 Name, Role, Value
  • Randy on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Screen Readers & Browsers! Which is the Best Combination for Accessibility Testing?
  • Raghavendra Satish Peri on Understanding SC 1.4.12 Text Spacing
  • Raghavendra Satish Peri on Understanding SC 4.1.2 Name, Role, Value

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • Uncategorized
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y