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 (alt text) are the primary method used to make non-text based content accessible to assistive technology. The goal of alternative text is to convey the purpose of a non-text element so all users can benefit from a complete understanding of the presented content. All non-text MDS components include methods to provide text alternatives.
Text alternatives are typically implemented by adding the relevant content to an alt attribute on an image, e.g.
<img src="advisor.png" alt="An advisor meets with their client to discuss investment opportunities.">
alt="An advisor meets with their client to discuss investment opportunities."
alt="Man wearing charcoal gray, double-breasted suit with a navy tie and silver tie clip."
alt="Employees working in our floor to ceiling window-lined conference room."