Why accessibility?

Making information, activities, and/or environments sensible, meaningful, and usable for as many people as possible. Accessibility allows the most amount of users, including those with diverse abilities, to navigate, understand, and use the Homebase UI.

 

Reference Point: WCAG

Homebase uses The Web Content Accessibility Guidelines (WCAG) as a reference point.

 

Content

• Avoid exceeding a 6th grade reading level when writing content. Keeping content simple decreases comprehension time and improves scanability of text.
• Avoid all caps when possible. Capitalizing all letters in a word or sentence can be visually difficult to read, and it causes a screen reader to read each individual letter instead of the word. Use acronyms and all-caps label text moderately, and always fully spell out an acronym on its first use on a page.
• Use descriptive titles, headers, and link text to provide added context.
• Ensure link text describes what you are linking to, which helps readers scan and anticipate where they will go when clicking a link, instead of vague link text like “Click here.”

 

Color

• Sufficient color contrast between elements can help users with low vision see and use the application.
• The larger the font and wider the stroke, the more legible it will be with lower contrast. Therefore the contrast requirement for larger font is lower. W3C recommends starting at 18 regular weight or 14 bold text. Homebase uses 16 regular as our default for testing color contrast.
• Never use color alone to denote differences, emphasis, and content meaning. Instead, add iconography and supporting text. This helps those who are color-blind and low-vision understand what you’re emphasizing.

 

Contrast Ratios

Contrast ratios represent how different one color is from another color, commonly written as 1:1 or 21:1. The greater the difference is between the two numbers in the ratio, the greater the difference in relative luminance between the colors. Homebase is committed to AA compliance.

The W3C recommends the following contrast ratios for body text and image text:

 

Understanding “AA”, “AAA” and “Does not pass”

 

 

 

Non-text Contrast

Follow the WCAG guidelines for not-text contrast. Providing a contrast of 3:1 (AA) or greater can make items more distinguishable when a person does not see a full range of colors.

 

 

Spacing

Generous spacing is encouraged to ensure accessibility. According to the WC3 success criteria, “as a best practice it is recommended that larger sizes are used to reduce the possibility of unintentional activations. This is particularly relevant if any of the following are true:

• A control is used frequently;
• Results of the interaction cannot be easily undone;
• The control is positioned where it will be difficult to reach, e.g. is near the edge of the screen;
• The control is part of a sequential task.”

 

Target size / Hit space

Based on WC3 success criteria, the minimum touch size (aka target, hit space) is 44 x 44px. This aligns with Apple’s Accessibility Guidelines as well: “on touchscreen devices, a hit target needs to measure at least 44x44 pt.”

 

Space between interactive elements

To reduce unintentional activation of controls, space elements apart by 60px from their centers.

 

Layouts

• Design workflows to accommodate a variety of users on a variety of screen sizes.
• Help users navigate by designing clear layouts with distinct calls to action. Overloading a screen with content and reduced white space can overwhelm all users, increasing abandonment rate and reducing time on pages. It can also increase time on task when a user has to hunt for the call-to-action.

 

Images

• Never embed text within an image. Instead, use text overlaid on an image.
• Always provide alt text for images and title for icons. These should include detailed descriptions.

 

Tab-through

Ensure content on a page can be navigated by keyboard. This helps power users as well as anyone navigating without a mouse.

 

 

Accessibility considerations

 

Language

Consider users who speak languages other than English. Some questions to think about:

a. Is the copy clear and direct enough that it can survive Google Translate? (Tip: Translate the copy to Spanish, Tagalog, or another language, and then translate it back to English.)
b. Are we providing translatable captions on videos?

 

Cognitive differences

Consider users with cognitive differences. Some questions to think about:

a. What’s the experience for people with anxiety disorders?
b. What’s the experience for people who are neurodivergent? (i.e. Are we overusing animations and trying to fill every white space?)
c. What’s the experience for people who have attention issues? Distracted or have ADD/ADHD. (i.e. Are we overloading with content and graphics or not making clear CTAs?)

 

Disabilities

Consider users with disabilities. Some questions to think about:

a. What’s the experience for people with visual impairments? (e.g. Are we optimizing for screen readers like JAWS? What about screen magnification?)
b. What’s the experience for people who are color-blind?
c. What’s the experience for d/Deaf or hard-of-hearing folks? (e.g. Are we providing captions for videos?)