Foundations Accessibility

Accessibility compliance

Digital Guidelines is compliant to WCAG 2.1 AA standards. This means it accepts multiple structural markups, engages interactive components via assistive technologies, makes assistive content visible only to assistive technologies and utilizes sufficient color contrast. While our components are accessible by default, developers and designers must take additional steps to ensure that their app is accessible when using them, such as those listed in WCAG and the ones below.

Best practices

Visual impairments

Color contrast and images

• Adjust your content's color to ensure that people with limited vision can see it without needing to adjust their screen, and make sure that color isn't the only way for users to comprehend information.
• Small text must have a minimum color contrast ratio of at least 4.5:1. Small text is defined as being smaller than 24px, or 18px and bold. To ensure a proper color contrast ratio, use webAIMS' Color Contrast Checker.
  • Icons that are communicative, not decorative, should be treated the same as text and are therefore required to have a 4:5:1 ratio.
• Large text and interactive elements must have a minimum contrast ratio of 3:1.
  • Icons labeled with text or used decoratively also must have a 3:1 ratio.
• Provide descriptive alt text for images that can be read by a screen reader.

Text

• Size text using rem units to allow users to adjust font size.
• Ensure that headings briefly describe the sections they introduce.
• Ensure correct semantic use of headings.Use h1 - h6 to define your section headings, where h1 is the highest section level and h6 is the lowest.
  • Headings are semantically correct if they follow an ascending pattern, such as having an h4 follow an h3 and an h2.
  • If the default style for a heading is insufficient, use helper classes to style the text.
• Use only one h1 per page for the page title.

Audio

• Use audio cues to indicate changes in time, such as when it's time to move to another section.
• Provide methods for users to pause audio that plays for longer than three seconds or control said audio's volume without controlling their system's audio.

Spacing

• Make sure that text doesn't lose its content or functionality by setting the following properties:
  • Line height(line spacing) that's at least 1.5 times the font size
  • Spacing following paragraphs roughly 2 times the font size
  • Letter spacing(tracking) about 0.12 times the font size
  • Word spacing roughly 0.16 times the font size

Scrolling

Make sure that viewers can see your content without losing functionality and without needing to scroll in two dimensions for the following:

• Vertical scrolling content at a width that's equal to 320 CSS pixels
• Horizontal scrolling content at a height that's equal to 256 CSS pixels

Learn more about this requirement at the WCAG Understanding SC 1.4.10: Reflow(Level AA) page.

Motor impairments

• Ensure that your app is accessible via keyboard, as some people with motor impairments might use a keyboard device to navigate around apps.
• Don't limit your content to a single orientation.
• Utilize focus states for interactive elements.They're necessary because they make it easier for people who are unable to keep their assistive device still to use these elements.DG components have compliant focus states out of the box but be sure to follow the WCAG 2.1 guidelines for focus states whenever new elements are created.
• Allow hover states to stay a few moments after moving the mouse.This lets users with imprecise mouse movements access the hover states.

Cognitive load

• Organize information in a hierarchy from most important to least, use formatting such as text size hierarchy or bullet points, and identify words that are important by changing the styling to bold or italic.
• Opt for shorter paragraphs over longer ones and keep text and sentences as simple as they can be.
• Group similar information together, and separate unrelated information using spacing, boundaries, or containers.
• Ideally, work to avoid acronyms and abbreviations.When you do need to use them, provide the full name of abbreviations upon first reference with the abbreviation in parentheses directly after it.After that, you can use the abbreviation throughout the text.
• Don't have content disappear after a time.For content that does need to disappear after a period, allow users to extend the time frame that it stays up, or provide text alternatives.
• Make sure that your inputs identify their purpose via methods such as text, icons, and audio.
• Underlined text is used to identify links.For that reason, don't underline text other than link text.

Hearing impairments

• Provide closed captioning on live and prerecorded videos.
• Stay away from functionality that only relies on sound, and make sure that your content has more than one way to identify itself (such as color or text organization).

Accessibility law and other resources

Under the State of Michigan's Procedure 1650.02, applications need to comply with Title II of the Americans with Disabilities Act (ADA), Section 504 of the Rehabilitation Act, the Michigan Deaf Persons' Interpreters Act, and the Persons with Disabilities Civil Rights Act, to ensure that they are accessible to people with disabilities. The State of Michigan Look and Feel Standards and the Digital Guidelines help define how app designers and developers can meet those requirements.