Five Core Skills

You have the power to dramatically improve the accessibility of the documents, websites and presentations you create by building five core skills into your habits and workflows. They may take a little extra time at first, but you’ll get that time back many times over as you begin to create, share and re-use things that don’t need to be “fixed”.

These skills address some of the most common accessibility issues in websites and documents worldwide, as identified by the Institute for Disability Research, Policy, and Practice’s WebAIM Million Report

  • Alternative (Alt) text

    Issue

    If you don’t provide descriptive text for images on your website, digital document or social post, the information in those images will be hidden from some users. Alternative (alt) text is a special kind of description designed to work with technology that reads digital content aloud.

    Who’s affected

    Screen reader users (blind), people with slow or weak internet (alt text is what shows up on the screen if the image is slow to load)

    WCAG standard

    Guideline 1.1: Text alternatives for non-text content

    What to do

    Every time you place an image, describe what you see. One approach that can be helpful is to imagine you’re writing an AI prompt to generate a picture like the one you’ve used.

    Some AI tools can analyze a photo and suggest alt text. This is fine as a starting point, but AI doesn’t understand context, so you’ll need to review any generated alt text to make sure it makes sense in your context.

    Keep it concise. Eliminate “A picture of” from your description and don’t include information in the alt text that can’t be seen and understood from the picture. Try to keep the length to 200 characters or less.

    Recommended Resources


  • Color contrast

    the words "weak contrast hides information" in light blue on a slightly darker blue background
    the words "strong contrast makes content legible" in dark text on off-white background

    Issue

    A combination of foreground and background colors that’s difficult to read because of a lack of contrast (ie. light gray text on white background)

    Who’s affected

    People with low vision or color deficiencies

    WCAG standard

    Guideline 1.4.1 Contrast (minimum)

    What to do

    Elements in the Forty-two design system will have accessible levels of color contrast in their default state.  If you change the foreground (text) or background color of an element, make sure the color contrast is 4.5:1 or greater. (There are some exceptions and variance around logos, decorative elements and large text. Check with C&M if you’re unsure)

    Recommended tools

    Also see: How to: Color contrast checker


  • Heading hierarchy

    Issue

    It’s not uncommon for people to create headings by just selecting a piece of text and making it bigger and bolder in the editing toolbar. This seems innocent enough, but it leads to a cascade of accessibility and usability problems.

    Who’s affected

    People who use screen readers to access the web (blind, low vision) and ask the screen reader to read all the headings on a page, people who navigate by keyboard (hand mobility issues) people with cognitive disabilities.

    WCAG standard

    What to do

    Use the headings available in the text formatting tools of your editing software (Heading 1-Heading 6) to organize content on a web page in an outline-like order. Make your page title a Heading 1 and identify your main topics with heading 2s and any sub-topics with heading 3s, etc.

    This helps all users and technologies understand how each part relates to the next. Nest headings sequentially (h3’s should be subcategories under an h2, for example) and don’t skip levels.

    TIP: If you’re working in Word or Google Docs, turn on “outline view” to see your document’s heading hierarchy.

    Recommended tools

    • Outline view (in Word and Google Docs)
    • Accessibility Insights extension (available for Chrome & Edge). To see the heading structure on a live web page, use the “Ad hoc tools.”


  • Link text

    Issue

    You never know how other people are going to approach your content. Some use shortcuts that provide a list of all the links on the page, so it’s important that your links make sense, even when they’re out of context.

    Who’s affected

    Screen reader users who ask the screen reader to read all the links on a page, also non-disabled users who are scanning the page.

    WCAG standard

    Guideline 2.4.4: Link Purpose (in Context)

    What to do

    Write link text that describes the destination or purpose of the link. (ie. “Please take our admissions survey” (link is just for demo purposes, does not go to a survey).

    DO

    DON’T

    Recommended tool

    This one requires your judgement!


  • List formatting

    Issue

    A group of more than two related items is a list. Presenting it in paragraph form makes it harder to scan and harder for most people to process.

    Who’s affected

    People with cognitive disabilities, screen reader users and anyone scanning the page. The bulleted or numbered (depending on the list) structure conveys meaning and helps the user focus.

    WCAG standard

    Guideline 1.3.1 Information and Relationships

    What to do

    Use the bulleted or numbered list styles available in the text formatting tools of your editing software to designate the items as a list. This ensures that both your audience and any technologies accessing your content will understand the list as a list. If your items must be in a particular order or ranking, use a numbered (ordered) list. Otherwise, use a bulleted (unordered) list.

    Recommended tools

    WAVE accessibility checker – Use the structure tab to see if a list is actually marked up as a list.


Find more tools and guidance at accessibility.umich.edu, the university’s repository for digital accessibility knowledge.