Takeaways from “If It’s Interactive, It Needs a Focus Style”

At the March 2020 Chicago Digital Accessibility and Inclusive Design virtual meetup, Eric Bailey explained the importance of inclusive design in creating focus styles for interactive web elements.

Thanks to the livestream recording, I watched the online presentation with dozens of other attendees. Here are my notes from the presentation.

If It’s Interactive, It Needs a Focus Style

• Works of art, like the Mona Lisa, as well as everyday objects, like a hammer, are both beautiful and useful. Depending on the lens you use to view them.
• The CSS declaration of * { outline: none; } applies to everything on a website, removing all outlines. Years ago, some CSS resets included the the declaration to remove outlines. Why? Because there was a perception that outlines were ugly, compared to the layout you get with printed content.
• Thankfully, over time, CSS resets were updated when CSS reset authors learned how important outlined elements were to people who rely on them.
• Focus styles aren’t ugly. They’re an integral part of the web.
• Well-designed links include a good focus style, which helps people who rely on them to navigate the web.
• Use descriptive text to describe where a link will take you. For example, “your profile” is better descriptive text than “click here”
• Text that describes a link is called an affordance. Affordances are hints on how something should be used. Another way to think of affordances: cheatsheets for operating things.
• Another affordance used on links is color, which is used to distinguish links from surrounding non-link text.
• The color blue is commonly understood to be a link color by people. Why is it so common? It’s the fallback color used in many browser stylesheets.
• One more affordance used in links is the underline, which has been around since the early days of the Internet. People understand underlined text is a link.
• When hovering or using a track pad, removing the underline of a link indicates the cursor has been placed in an area that can be interacted with.
• Avoid relying on color alone to indicate change
• Focus styles works similarly to the hover style
• Every browser ships with a fallback focus style, if no focus style is provided or customized by the website author. However, not all browser-provided focus styles meet the color contrast requirements of the Web Content Accessibility Guidelines (WCAG). Example: Firefox’s dotted outline style for focus may be problematic for low-vision users.
• You can override browser fallback focus styles with your own CSS styles that are WCAG color contrast compliant. Example: add an outline around the text or solid background color (creating a shape) behind the text (and change text color) to make the text stand out.
• Make sure each of your link states, for example, for the anchor element—a:, a:hover, a:active, a:focus, a:visited— are styled differently from each other.
• Styling the a:visited is often not done, but is helpful in use cases such as a tutorial list or navigating a table of contents
• Options for styling visited links are limited, due to privacy and security concerns
• Need to quickly style your hover and focus state? Combine the two selectors in one CSS declaration, using something like a:hover, a:focus { text-decoration: none; }.
• Buttons also have discrete states you can style, hover, focus, active, and disabled state.
• Lack of affordances can cause issues for your users, open you up to lawsuits, as well as affect your bottom line. Example: the current design of Fast Company only uses color to distinguish links in their main content. There is no underline.Their chosen link color is not a good color contrast to non-link text, making it challenging to identify links in their main article content.
• Accessibility is more than semantic markup. An automated accessibility checker might miss the issue with low color contrast and lack of underline in Fast Company links.
• Disabling links is technically possible. Buy it can wreak havoc on assisted technology. It’s best not to do it.
• People with low-vision may use high contrast mode to help them read. Be sure to check your styled states to see if they hold up under high contrast mode. Note: high contrast mode will strip some CSS, including box shadow.
• Good user experiences meet people where they are, not where we hope they will be.

The livestream for the presentation has been published on YouTube, but captions and transcript will be added later.