Accessibility at Chegg

In a recent Chegg UX coffee chat, I presented on the importance of accessible design, the basics of accessibility, and how we practice accessibility at Chegg. Here’s the written version of the presentation I shared. Join us at our next UX coffee chat to learn more about UX at Chegg.

TL;DR

• Accessibility is all around us. Accessible design helps all types of users, even if they do not use assistive devices.
• Some of the most common web accessibility issues are a lack of contrast and poorly structured content.
• Chegg prioritizes accessibility by offering in-depth accessibility training to the entire UX team, having an accessible design system, and collaborating with other functions like engineering on accessibility challenges

What is accessibility?

Accessibility means the ease with which a product can be used by a wide range of people, including those with disabilities. Designers should strive to make their product accessible for all people to improve the quality of the user experience for everyone.

Accessibility is all around us

Wheelchair users can go up steps using a ramp. Ramps are also helpful for those with limited mobility, those who have strollers, those who have suitcases, and many other people who may find steps more challenging. Source

Visually impaired individuals can safely use a crosswalk button with Braille. Source

This bathroom sign uses universal symbols which make it accessible to those who do not read the language of the local area. Source

Closed captions allow hearing impaired individuals to enjoy audio content. They also help those with auditory processing difficulties and those in crowded or loud environments. Source

Common Web Accessibility Issues

The most common type of web accessibility issues I encounter are lack of contrast and poorly structured page content.

Lack of contrast

• Lack of color contrast
• Lack of text contrast
• Lack of contrast between states

Example of how Chegg checks for adequate color and text contrast in our design system.

Tip: Try the squint test. Squint to distort your vision. If you can’t really read it, it’s probably not accessible. Make sure to double check your results with an accessibility plugin.

Poorly structured page content

Structuring the page content within appropriate HTML tags is important for allowing individuals using assistive technologies to navigate the page.

An example of a multi-step modal

One example of a poor structure is using multi-step modals. A user navigating via keyboard may use the browser back button and lose all their progress inside the modal.

Another example of poorly structured content is skipping directly to a success state for a form after the user clicks a call-to-action. This does not meet accessibility standards because:

• There’s no opportunity to validate or correct information before submitting
• Users can easily make an error or click tab or enter unintentionally

There are even some laws in place in different countries that require an extra step before a checkout flow that allows a user to confirm their information before submitting the order. It’s important to be aware of these, especially if you are designing for an international audience.

Tip: If it’s user controlled data — financial or legal — it must be at least one of the three: reversible, checked, confirmed

And remember, even if you know your design passes accessibility standards, accessible does not always equal good. Accessibility is the bare minimum. If there is an element you want to make sure an individual does not miss, it may require larger text, higher contrast, etc.

How Chegg does accessible design

Accessibility training

All UX team members are offered a comprehensive accessibility training subscription through Deque University. The courses include videos of individuals using many types of assistive devices to navigate the web in addition to quizzes that help you remember the course content. UX researchers and content designers are recommended different courses within the curriculum, best tailored to their fields. It covers a lot of content! My favorites:

• Form fields and validation
• Images and animation
• Visuals and colors

I found this training helpful in becoming a better accessibility advocate. After completing it, I can handle more accessibility issues and questions on my own. I’ve also been able to help catch potential issues in design critiques with other designers.

Accessible Design System

We have a dedicated design system team to make components that pass accessibility standards. Things defined in our design system include:

• Font sizes
• Line height
• Colors
• Component active/hover/focus states
• Animation guidelines, and more

Designers can use components straight from the design system, and do not have to check that they meet basic accessibility standards. The components also include guidelines to ensure additional accessibility criteria are meant, like organizing components in a meaningful order.

Collaboration across teams

In addition to training and a design system, Chegg also supports accessibility in a variety of other ways.

Engineers and UX team members can ask questions and collaborate in our #accessibility slack channel. This channel helps engineers and designers collaborate to answer accessibility questions and ensure features are accessible.

Additionally, we recently hired an accessibility program manager at Chegg to continue making accessibility a priority and to support teams across Chegg in building accessible products and features.

Want to learn more about life on the Chegg UX team?

Follow our Eventbrite page to join us on zoom for our next UX team coffee chat.