At REI we believe that the outdoors is for all. Delivering valuable, inspirational, and accessible experiences for all kinds of users, including those with disabilities, is everyone's responsibility.
The Cedar Design System is committed to designing and developing components, tokens, utilities, and styles that will help ensure that REI’s digital products meet or exceed the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG) 2.1 Level AA.
The design and development of Cedar is a starting point to incorporate required accessibility standards into our website. REI's aim is to make our digital products accessible and usable for all our customers, including those with disabilities. For more information about REI's position on accessibility, view the Accessibility Statement (opens new window).
However, how you use Cedar also affects the accessibility of a product. Read this page to learn about accessibility in general. Then, while you're working, use the accessibility guidelines for each Cedar component to help you make products that anyone can use.
Designing for accessibility means being inclusive to the needs of our users - including our target users, users outside our target demographic, users with disabilities, and even users from different cultures and countries. Understanding those needs is the key to creating better and more accessible experiences for all users.
Disabilities can be a mismatch between one's ability and one's environment. Some examples are:
Most accessibility principles can be implemented easily and will not impact the overall “look and feel” of REI’s website. Some of the key principles are:
Cedar components have accessibility attributes built in and provides guidelines for best practices in component documentation. The product team needs to ensure accessibility compliance when implementing Cedar components. This is a shared responsibility. The below table describes what is provided by Cedar and what is the product team's responsibility.
|Key principles||Cedar provides||Product team provides|
|Provide appropriate alternative text||CdrImage provides empty ||Write alt text to provide an equivalent to the image content. |
Write alt text to convey information or explain actions.
Write alt text to describe a link’s function.
|Content is well structured and clearly written||CdrText separates CSS styles from semantic structure. |
CdrText provides max width container and line-height spacing for readability.
|Organize content using true headings (e.g., |
Use illustrations, icons, etc. to supplement text.
Check spelling, grammar, and readability.
|Help users navigate to relevant content||CdrText and CdrList separates CSS styles from semantic structure. |
CdrTabs has keyboard interactions built into the component for the user to move focus between tabs, into the tab content, and back to the selected tab.
|Use existing REI website controls that allow the user to skip over navigation to the main content in the page. |
Use true headings to organize content.
|Provide headers for data tables||CdrDataTable provides ||Write captions to describe table contents. |
Use scope attribute to define column or row headers.
|Do not rely on color alone to convey meaning||Cedar’s color tokens ensure that color contrasts meet or exceed a Level AA contrast ratio of 4.5:1 contrast between the text color and the background.||Use Cedar’s color tokens appropriately. For instance, use dark text colors only on light background colors. |
Use color to enhance comprehension but do not use color alone to convey information.
|Ensure users can complete and submit all forms||CdrInput requires a label and positions it adjacent to input fields. |
If label is hidden, CdrInput sets the
CdrInput can display "Required" next to the label.
|Group checkboxes or radio buttons using CdrFormGroup.|
|Ensure links make sense out of context||CdrLink provides ||Avoid phrases such as “click here” or “start here” for links.|
|Caption and/or provide transcripts for media||Write captions and transcripts for video or audio.|
|Ensure accessibility of non-HTML content||Provide accessibility alternatives when appropriate.|
|Miscellaneous||Ensure that the page is readable and usable when fonts are enlarged 150-200%. |
Provide a descriptive page
Ensure events are available with both mouse and keyboard.
Limit pop-up windows and notify users when pop-ups are used.
Cedar Design System is only the foundation for accessible application development. We recommend that you review the accessibility of your web pages before release and ensure that it meets the WCAG 2.1 Guidelines at the AA Level.
We also recommend that you:
Cedar is working in tandem with the Accessibility team to provide standard testing processes for components and applications.
This is the largest single group of disabilities worldwide and these users may have difficulty with:
Ensuring accessibility for this group is often forgotten or an afterthought. Resources for understanding cognitive disabilities:
Users with visual disabilities may have difficulty with:
Color contrast has an impact for all users and especially for users with visual, physical, and cognitive disabilities
Color blindness involves difficulty in distinguishing between colors and sensitivity to color brightness. It affects approximately 1 in 12 men and 1 in 200 women worldwide.
Don't convey information using color alone. Use multiple visual cues, such as stroke weight, patterns, shape, or text.
When designing with color, use a color-blind simulator to review visibility of content.
Non-color blind user versus color-blind user
Below are a collection of tools that can be used for accessibility testing:
For testing readability level:
For testing keyboard interactions:
For images and writing alternative text:
For checking visual disability issues: