Button States and Web Accessibility

 

Buttons are the essential element to user-initiated action in your designs. Because they enable action, their button states should be considered upfront when creating your designs. Here, we are going to outline the basic accessibility rules for buttons.

So what are the button states that you should consider in your designs?

Default
Hover
Focus
Pressed
Inactive

We are going to talk about these various states in terms of accessibility and usage as defined by the Web Content Accessibility Guidelines (WCAG) published by the World Wide Web Consortium (W3C). WCAG 2.1 (updated in 2018) is a set of guidelines for making content on the Web more accessible to users with disabilities such as limited mobility or color blindness. W3C uses a strategy of keeping adjacent colors above a certain ratio (color contrast ratio) to keep web elements highly visible, even for users with a color blindness disablilty. But what is color contrast and how is the proper ratio achieved?

Color contrast is the difference between the luminance of two colors next to each other.
Luminance is a measurement that is used to calculate the perceived brightness from the color.

The minimum color contrast ratio outlined in the WCAG is 3:1 (large text) or 4.5:1 (small text) -- more on this below.

**Pro-tip: You don’t need to calculate this on your own! There are color contrast checking plug-ins out there that will automatically do this for you. Stark is a plug-in for both Sketch & Figma and will make suggestions for you if your ratio is below standards.

Now, let’s see how the contrast ratio and other guidelines apply to making button states accessible.

 

Default
The Default button state is going to be the most used state when creating your designs. The default button state is what the user sees before they interact with it. To meet the rules outlined in WCAG, the color contrast ratio needs to be at least 4.5:1 for small text (16 pt font size and less, unbolded) or 3:1 for large text (18 pt font size, regular or at least 14 pt font size bolded).

 

Hover
The Hover state is initiated when the user hovers with their mouse over the button and indicates the possibility of interaction to the user (ie. you can click this button!). This state’s contrast must meet at least 3:1 ratio (4.5:1 ratio for small text). **Pro-tip: Hover states aren’t needed for apps or mobile-only experiences, only desktop applications and websites.

 

Active
The Pressed or Active state shows a user-initiated tap or click. This state needs to meet the 3:1 contrast ratio (or 4.5:1 for small text). It is not clearly outlined in the guidelines, but this state is usually designed with an additional element indicating it’s active status - an icon, an outline, elevation change, or slight shape change.

 

Focus
The Focus state is presented when a user tabs through a website using their keyboard or another device. The focus state is especially important when a user is using a screen reader or has limited mobility and is using a mechanism different than a mouse to navigate a page. Only one element can be focused on at a single time on the page and it should be blatantly obvious to the user where they are on the page. A simple background color change won't do here! A Focus state should be a clear, separate element that makes this state stand out from the rest when enabled. And like the other active button states, the contrast ratio must be at least 3:1.
A couple of visual solutions might be a separate outline in a high contrast color for a solid button or a thick underline under a text-only button. Added elements to indicate focus should be at least 2px and should be completely unique to the Focus state. For example, the selected state of a button might have a dark 2px outline. If this is the case, then your focus state needs to have a separate and unique indicator.

 

Disabled
The Disabled state is used when the button is inactive or unclickable. This is the only button state that technically doesn’t need to meet the contrast ratio because the W3C rules state that “text or images of text that are part of an inactive user interface component...have no contrast requirement.” Common designs for an inactive state are a grayed out button, lowered opacity (Material.io uses a 38% opacity on it’s inactive button states), and/or lowered elevation if your default button has a shadow. Neither of these states will consistently pass the 3:1 (or 4.5:1) contrast ratio but again, they don’t technically need to in order to meet the accessibility guidelines. This is a somewhat contentious topic as it is argued by web accessibility advocates that ALL button states should be designed for all users. I imagine in the coming months/years, this will continue to be a hot topic in web accessibility design.

https://www.boia.org/blog/is-there-a-legal-requirement-to-implement-wcag
Section 508 of the Rehabilitation Act of 1973 was added in 1998 to require federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities, including both employees and members of the public. In 2017, Section 508 was revised with the requirement that by January, 2018, all federal agencies and contractors must, among other revisions, comply with WCAG 2.0 A/AA.
So in the context of federal government agencies, the answer is simple: WCAG is formalized under law as the accessibility standard.
https://www.federalregister.gov/documents/2017/01/18/2017-00395/information-and-communication-technology-ict-standards-and-guidelines
https://www.essentialaccessibility.com/blog/web-accessibility-lawsuits
https://www.jdsupra.com/legalnews/court-finds-domino-s-pizza-violated-the-2182635/
https://www.boia.org/blog/is-there-a-legal-requirement-to-implement-wcag
Hover state rules are still a little unclear - https://uxplanet.org/active-hover-and-focus-states-for-designers-d789531fe767
https://www.w3.org/WAI/GL/wiki/Post_WCAG_2#Contrast_of_Hover_and_Link_Text_States
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html