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
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
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.
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.