Accessibility

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

• W3C WCAG 2.0 - Name, Role, Value

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.

Additional Resources

• W3C WCAG 2.0 - Keyboard

Text Alternatives

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

Best Practices

• Summarize the purpose of an image as succinctly as possible. Overly long alternative text creates a cumbersome user experience, requiring more time from the user to get through the page.
• The ideal length of alternative text is less than 125 characters. If more characters are needed to provide clarity, this is allowed but not encouraged.
• Do not copy and paste captions as alternative text; captions work in correlation with an image. If an image isn’t defined, captions lose all value.
• When constructing text alternatives, consider how a screen reader will read it:
  • Write out dates, e.g., December 1, 2018, and not 12/1/2018.
  • Avoid non-text symbols like slashes and mathematic symbols.
  • When describing a date or time range, use the word “to” rather than a dash.
• Proper punctuation is crucial. Most assistive technology will take a pause for commas and a breath at the end of a sentence.
• Never use phrases such as “an image of” or “a picture of”; semantic code will inform the user of the nature of an object.
• It is okay to reference relevant colors if they are pertinent to understanding the image.
• If the type of image (illustration, chart, equation, etc.) is essential to understanding the image, it is acceptable to include.
  • “Dog jumping through a hoop. Illustration.”
• If the only content of a link is non-textual, the element’s text alternative should describe the unique function of the link.

Text Alternative Examples

• If the image is used for an article about advisors meeting with their clients...
  • An advisor meets with their client to discuss investment opportunities.
  • alt="An advisor meets with their client to discuss investment opportunities."
• If the image is used for a clothing and apparel store...
  • Man wearing charcoal gray, double-breasted suit with a navy tie and silver tie clip.
  • alt="Man wearing charcoal gray, double-breasted suit with a navy tie and silver tie clip."
• If the image is used to promote a new office space...
  • Employees working in our floor to ceiling window-lined conference room.
  • alt="Employees working in our floor to ceiling window-lined conference room."

• If the image is used for background decoration of a webpage
  • No alternative text needed, image is purely decorative and should have a null attribute.
  • alt=""

Additional Resources

• W3C WCAG 2.0 - Non-text Content