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:
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.
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.
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.
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
|$mds-box-shadow-focus||0 0 4px 2px rgba(#0077cf, .8);|
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.