Accessibility
The Morningstar Design System is built to allow people with diverse abilities to access, navigate and use Morningstar products to their fullest potential.
Adhering to the World Wide Web Consortium’s (W3C) Web Content Accessibility Guidelines (WCAG 2.0) ensures our components are perceivable, operable, understandable, and robust. This includes:
- Reusable color pairings that always meet contrast requirements.
- Components that facilitate and often enhance the use of assistive technologies.
- Full control of components with a keyboard or other input device.
- Text-based alternatives for all non-text content, such as images, videos, and icons.
Color Contrast
The W3C provides three levels of compliance for minimum contrast. The intent is to provide enough contrast between text and its background so that the text can be read by people with moderately low vision.
- Level A, contrast ratio of 3:1
The minimum level recommended for users with 20/20 vision. - Level AA, contrast ratio of 4.5:1 (Morningstar’s requirement)
Compensates for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/40 vision. - Level AAA, contrast ratio of 7:1
Compensates for the loss in contrast sensitivity usually experienced by users with vision loss equivalent to approximately 20/80 vision.
If you are combining colors outside of the MDS palette, there are a number of useful tools below to check the contrast ratio of your text and background. You can also read more about color-based accessibility on the Color page.
Additional Resources
- W3C WCAG 2.0 - Understanding Contrast (Minimum)
- Contrast Ratio Calculator by Lea Verou
- Color Contrast Grid by EightShapes
- Color Contrast Check Tool by Snook.ca
Standard Markup
Our System components incorporate markup and ARIA roles based on W3C standards and industry best practices. Following these standards allows assistive technologies to gather information, activate and keep current on the status of user interface controls in the content.
Each component has a section in its guidelines describing any special accessibility considerations that should be taken.
Additional Resources
Keyboard Control
The Morningstar Design System provides keyboard alternatives for all mouse-based actions by using HTML form controls and links. The System also provides guidance on keyboard-triggered event-handlers. Following these guidelines ensures full control of our components for those with low vision or who use alternate keyboards or input devices.
Finally, MDS components also include a custom visual focus state for use during keyboard control, implemented using a box-shadow constant.
| Variable Name | Value |
|---|---|
| $mds-box-shadow-focus | 0 0 4px 2px rgba(#0077cf, .8); |
Additional Resources
Text Alternatives
Text alternatives are a primary method used to make information accessible, because they can be rendered through any sensory modality (i.e., visual, auditory or tactile) to match the needs of a user. All MDS components include methods to provide text alternatives.