Accessibility Principles

ARIA attributes are critical to helping those who use assistive technologies interact with a webpage or web application. Designed to fill the gap between standard HTML tags and the desktop-style controls found in dynamic web applications, ARIA provides roles and states that describe the behavior of most familiar UI widgets. They allow for screenreaders and navigation methods to interact with the page differently or more wholly than would be possible without them. These attributes are well documented on MDN and W3C. Further documentation on how one may use these attributes will appear in relevant parts of the design system, where applicable.

Color and contrast is critical to accessibility. In addition to building for the visually impaired, remember that environmental variables (such as sunlight or an old monitor) can also alter how a user may view or interact with a website. When used as described, colors and contrasts provided in the Design System are Level AA compliant. For more documentation about color contrast, check out the colors section.

Page structure, while important to SEO, is critical for users navigating with a keyboard or screen reader. Proper page structure involves using nav elements for navs, footer elements for footers, and sections and articles for content. Use header levels and progress through them in numerical fashion.

Proper use of elements is also important. For example, links and buttons have different behavior when listening through a screen reader. Use semantic HTML when possible – browsers and screen readers are better able to describe native elements compared to presentational HTML markup. If you must use an element that isn't appropriate for a specific section, aria tags must be used to override or complement the intended role. Aria roles are a key to enhancing the experience for all users. More documentation on how to use arias can be found on W3C.

Navigation methods include more than just a mouse. There are keyboard-only users, touch-screen users, and those who use an accessible device due to limited mobility. Ensure users can tab through sites and applications, dictate to a computer to select a certain part of a page, or interact with a menu from a phone without hover effects. While on-click may be how most users will interact with navigation, key down for space and enter should also be considered, as well as escape key for closing or leaving a page or window.

By using the Design System, toolkit, and by following accessibilty best practices, Mutual of Omaha can support our customers, help mitigate the risk associated with not being compliant, boost SEO, and increase the buying power of non-conventional users.