CSS outline or border hides focus indicator Accessibility Checkpoint

Description

The CSS outline or border style on this element makes it difficult or impossible to see the link focus outline.

Help

Do not remove the default outline style, and change any border styles to avoid obscuring the focus outline around focusable elements. See :focus-visible for more information.

Applicable standards

• ACT Rules oj04fd
• WCAG 2.0 F78 (Success Criteria: 2.4.7 level AA)
• WCAG 2.1 F78 (Success Criteria: 2.4.7 level AA)
• WCAG 2.2 F78 (Success Criteria: 2.4.7 level AA)
• Section 508 (2017) F78 (Success Criteria: 2.4.7 level AA)

Note: Section 508 Refresh (2017) checkpoints are equivalent to WCAG 2.0 level A and level AA checkpoints.

Change history

• 6.54 Oct 2024 Handle the inert attribute.
• 6.50 Oct 2023 Now maps to ACT Rules ‘Element in sequential focus order has visible focus’.
• 6.44 Mar 2022 Fixed false positive.
• 6.41 Jul 2021 Improved detection.
• 5.37 May 2020 Improved detection.
• 5.33 Apr 2019 Fixed false positive.
• 5.32 Feb 2019 Fixed false positive on unused CSS rules.
• 5.30 Jul 2018 Fixed false positive.
• 5.22 Jul 2016 Fixed false negative.
• 5.22 Jul 2016 Fixed false positive on print media.
• 5.21 Mar 2016 Fixed false positive on SharePoint sites.
• 5.9 Jun 2015 Fixed false positive on Chrome TABINDEX=-1 outline workaround.
• 5.5 May 2014 Updated to April 2014 version of Techniques for WCAG 2.0.
• 4.2 Dec 2010 Make outline:0 outline:none and outline-width:0 all equivalent.
• 3.5 Dec 2009 Corrected priority.
• 3.5 Dec 2009 Don’t fire on reset stylesheets that re-add outlines on links.
• 3.1 Feb 2009 Don’t fire when invalid units cause CSS rule to be ignored.
• 3.0 Dec 2008 Added.

This page describes a web site issue detected in HTML documents by SortSite Desktop and OnDemand Suite.

Rule ID: AccWcag2-F78-1