Web Accessibility Tip of the Month

Web Accessibility - Tip of the MonthOffered as a service from the WebAIM website, Maine CITE provides the following “tip” on how to make your website more accessible to all people.

Focus Indicator Contrast

WCAG 2.0 requires that a keyboard focus indicator (sometimes called a “focus ring”) be visible. A focus indicator is vital for sighted keyboard users to know what item currently has keyboard focus when navigating a web page. While not specifically defined in WCAG 2.0 (though the 2.1 draft addresses this), it’s important that this focus indicator be visually distinctive and have sufficient contrast. CSS allows customization of the focus indicator with outline styles. A new proposal will allow CSS :focus-ring styles distinct from mouse click focus indicators. You can customize the outline to match your visual design, yet still provide adequate contrast.

Here’s an excellent video by Google External link demonstrating focus outline and :focus-ring.

For more information about web accessibility, please visit the WebAIM website.External link

See also information about how you can subscribe to the monthly WebAIM Newsletter which contains lots of great information about web accessibility.


Updated: 04/04/2017