Skip to content

Accessibility

At NerdWallet, we strive to build accessible products so we can truly help everyone make financial decisions with confidence.

Introduction

What is web accessibility?

Web accessibility (sometimes seen as the numeronym "a11y") is the practice of making a website usable by as many people as possible     . It’s the discipline around designing and building experiences that can be navigated, understood, and used by users of diverse abilities     .

Why is accessibility important?

In the United States, 1 in 4 adults have some type of disability     . Building accessible products ensures equal access and equal opportunity to those products, regardless of a user's abilities.

At NerdWallet, we build accessibile products becasue it is the right thing to do. However, accessibility is valuable from a business perspective as well. If your product isn't accessible, you may be excluding a quarter of all American adults from your product. Accessible sites can also be ranked higher by search engines     .

How is accessibility defined?

The Web Accessibility Initiative (WAI)      develops standards and support materials to help with understanding and implementing accessibility. Together, their standards and guidelines form the foundation of building accessible experiences.

The Web Content Accessibility Guidelines (WCAG)      are an internationally recognized standard for web accessibility developed by the WAI. These guidelines are organized around four principles:

  • Perceivable: information and user interface components must be presentable to users in ways they can perceive. This means that users must be able to perceive the information being presented (it can't be invisible to all of their senses).

  • Operable: This means that users must be able to navigate and operate the interface (the interface cannot require interaction that a user cannot perform).

  • Understandable: This means that users must be able to understand the information as well as the operation of the user interface (the content or operation cannot be beyond their understanding).

  • Robust: content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies. This means that users must be able to access the content as technologies and user agents evolve.

The WAI-ARIA (Accessible Rich Internet Applications)      standard defines a way to make web content and applications more accessible to people with disabilities. These guidelines are useful when building complex controls and advanced applications.

Accessibility at NerdWallet

NerdWallet is legally required to build products that meet the WCAG AA success criteria     . During both design and implementation, it's important to keep accessibility in mind.

To make it easy to craft accessible products, Currency components strive to be accessible by default. When additional care is required to ensure accessibility (such as passing in a text label), the requirements to do so are clearly documented.

Testing for accessibility

There's no such thing as perfect accessibility. However, thoughtful designs, careful implementation, and diligent testing can ensure that your experience is accessible to the broadest range of users possible.

WCAG/ARIA guidelines

The WCAG AA success criteria      outline the basic requirements of an accessible application. Running through the complete success criteria (or this condensed checklist from The A11y Project     ) can help ensure your application meets basic accessibility requirements.

When implementing a complex input or control, consult the WAI-ARIA Authoring Practices      to ensure that you're following best practices for well-known patterns.

Using a keyboard

Your page should be usable with only a keyboard. Ensure that all inputs, controls, and interactive components can be navigated and used with your keyboard.

Using a screen reader

Testing your application with a screen reader ensures that users with different vision abilities are still able to use and understand your application.

VoiceOver      is a screen reader included with macOS. You can activate VoiceOver with + F5. See Apple's official VoiceOver guide      or Deque's cheat sheet      for more instructions on how to activate and use VoiceOver.

If you're able to test on Windows, consider testing with JAWS      or NVDA     , two popular screen readers for Windows.

Lighthouse

Google Lighthouse      is an automated tool for improving the quality of webpages. Among other things, it provides basic reports on the accessibility of webpages. This can be a great starting point to identify potential areas of improvement for your page.

Note that a Lighthouse accessibility score of 100 does not mean your application is necessarily accessible. There are certain aspects of an accessible experience (like interacting with controls or ensuring that elements on your page are announced appropriately by screen readers) that Lighthouse does not test. Manually testing your page with a screen reader and checking compliance with WCAG and ARIA guidelines are necessary parts of ensuring an accessible experience.

Additional resources

Check out these other great resources on designing and building accessible experiences on the web:

If you have any further questions or concerns about accessibility, reach out to #web-accessibility      or #currency      on Slack!