Skip to main content

Accessibility

Abstract art page banner

What is accessibility?

Accessibility is the concept of whether or not a product or service can be used by everyone, however they encounter it. Accessibility laws exist to aid people with disabilities, but to create a sustainable product, we should try and accommodate all potential users in many contexts of use. WCAG is the source of truth for accessibility and defines it as the following: “Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.” (World Wide Web Consortium)

Why should I care?

Put customers first

We at Salesloft care about our customers, and by making our app accessible, we are allowing everyone to succeed. With active accessibility requests, it is vital that we do this in order to enable our customers to do their jobs effectively. Read our Customer Deep Dive to see how an inaccessible product directly affects our customers.

Moral reasons

Being inclusive and caring about others is human. Creating inaccessible content excludes others and perpetuates the idea that non-disabled people are more valuable than disabled people.

Each website is required to meet WCAG 2.0 requirements in order to abide by non-discrimination laws. Failing to meet these requirements can result in lawsuits, fines or your company being shut down. As we expand into other countries, these laws also become stricter.

Financial reasons

Nearly 15% of the world’s population has a disability. By excluding that group of people, you’re excluding that revenue. Including as many people as possible to your platform results in quicker growth. As solutions like Salesforce and Microsoft embrace accessibility, it will become an expectation among our current and future customers.

Code quality

Several of our accessibility issues have less to do with accessibility and more to do with incorrect HTML usage. By writing accessible code, you’re writing better code.

Make tech accessible

Screen Readers

People who are blind rely on the use of screen readers to read web content. By using semantic HTML and including descriptive aria-labels and alt attributes, you’re allowing the screen reader to accurately describe each element and instruct the user on how to interact with it.

Keyboard users

People with a physical disability that limits hand usage may be unable to use a mouse and therefore need to use the keyboard or another assistive device to navigate the screen. Through the use of semantic HTML, each interactive element (i.e. a button) will be able to be accessed and interacted with using only the keyboard.

Color contrast

Users may have trouble reading and interacting with a page if the contrast isn’t high enough. Consider using a color contrast plugin to ensure that you’re meeting the standards of color contrast.

Acceptable contrast
  • WCAG 4.5+ for text
  • WCAG 3.0+ for iconography or important non-text elements

Accessibility Checklist

Use the correct HTML

Semantic HTML conveys meaning to both the developer and the browser. By using elements appropriately, we create a better experience for our users and allow for a solid foundation in terms of both code readability and accessibility needs. For example, using a button element instead of a div with a click handler allows for the screen reader to accurately convey to the user what the intended action is and what steps to take next.

Allow for keyboard navigation

An interactive element is one that a user would interact with - i.e. a button, link or form element. A non-interactive element is a read or view only element - such as a paragraph. If your element is interactive, it must have a focus state and be able to be accessed from the keyboard. The keyboard usage requirements for each element can be found in the w3.org docs.

Include labels for input elements

Input elements must include an attached label element. The label can be visually hidden through specific css styling.

Add aria-labels when appropriate

In order to communicate with the screen reader, an aria-label must be used on elements without visible text on the screen and only on interactive, landmark, img, iframe or widget role elements. For example, a button showing only an icon.

Include alt text for images

Images must include descriptive alt text in order for those with a vision impairment to be able to hear a description of the image.

If the purpose of the element is to move the user to another page and you have an href, use a link. Otherwise use a button.

Hide decorative elements from the screen reader

Decorative elements, such as a non-interactive svg or a dividing line, should be hidden from the screen reader by using aria-hidden=”true”.

Include HTML landmarks

In order to allow a person using assistive technology to find the section of the page they’re looking for rather than having to look through each element, include appropriate HTML landmarks, such as main, nav and footer.

Not opening in new tabs

Avoid opening a link in a new tab.

Additional resources

Guidelines

Courses

Books

Articles