Web

Digital Accessibility/Make it Accessible/Web

It’s everyone’s responsibility

There are lots of decisions that affect how accessible a website is to people with disabilities. As an editor or a content creator some of them are probably out of your control.

But just as we proofread content to make sure spelling, grammar and usage errors don’t get in the way of communication, we’re all responsible for tending to the details that ensure people with disabilities get the information they need.

If you update a website or publish content to a social media account, here’s what you need to know.

  • Alt Text for Complex Images/ Data Visuals

    When you add a complex image or data visualization, ensure you include a two-part alternative text description: short and long. […]Read More…

  • Alternative (Alt) text

    You chose that picture for a reason. Provide description for your images and graphics so blind users can benefit from them too. […]Read More…

  • Audio description

    When a video has stretches where information is shown but not narrated, people who can’t see have no way to access the information. […]Read More…

  • Captions & Transcripts (video)

    Make sure your video has text alternatives for people who can’t hear it’s spoken audio and other sound. […]Read More…

  • Color contrast

    Make sure you have enough contrast between your background color and text. […]Read More…

  • Google sites

    Issue: Google Sites are free to use, but keyboard navigation is difficult to impossible when site structure is more than a couple of layers deep. Who’s affected: People who navigate by keyboard (hand mobility disabilities), people who use screen readers WCAG standard: Guideline 2.1: Keyboard accessible  What to do: Avoid using Google Sites when possible.…

  • Graphics with text

    When we create a graphic element with letters or numbers embedded in it, that information often can’t be read by screen readers. […]Read More…

  • Hashtags

    Issue: A screen reader will try to “sound out” hashtags or handles that run together. The result can sound like gibberish. All-lowercase hashtags can also be misunderstood by on-disabled users.  Who’s affected: Screen reader users, people with cognitive disabilities WCAG standard: Guideline 3.1.2 – Readable: Language of Parts What to do: Use camel case on…

  • Heading hierarchy

    Use your word processor’s styles to create headings, and structure your page like an outline. […]Read More…

  • How to: Color contrast checker

    We like the WebAIM color contrast checker because it includes an eyedropper tool that lets you sample colors from a graphic or image before you upload it to the web. Use it to make your graphics accessible before you finalize and share them. Color contrast ratio comes from comparing the relative luminence of the foreground…

  • How to: Keyboard navigation

    Checking that a page can be navigated without a mouse is one of the easiest accessibility tests you can do. It ensures that people who need to – or prefer to – navigate the web with their keyboard can get to the functionalities they need. Transcript / text description […]Read More…

  • How to: Screen readers

    You’ll hear a lot about making things accessible to screen readers, and it might make you wonder if we care about people with disabilities who aren’t blind. It’s true that screen readers, which parse through a web page’s underlying code and speak the content out loud, are critical to helping people with visual impairments use…

  • How To: WebAIM Color contrast checker

    The WebAIM color contrast checker includes an eyedropper tool that lets you sample colors from a graphic or image before you upload it to the web. Use it to make your graphics accessible before you finalize and share them. Color contrast ratio comes from comparing the relative luminence of the foreground and background colors. The…

  • Keyboard Navigation Demo

    Checking that a page can be navigated without a mouse is one of the easiest accessibility tests you can do. It ensures that people who need to – or prefer to – navigate the web with their keyboard can get to the functionalities they need. Transcript / text description […]Read More…

  • Link text

    Link text should describe where the link leads. […]Read More…

  • List formatting

    Issue A group of more than two related items is presented in paragraph form, separated by commas or is presented as a list but not marked up (coded) as a list. 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…

  • Screen Reader Demo

    […]Read More…

  • Social alt text

    When your post contains an image or a graphic with text in it, make sure it has alt text. […]Read More…

  • Tables

    Issue: If you don’t use meaningful language in your header and set your top row (and your left column if applicable) as a header, a screen reader will read your table from left to right, line by line and the listener will lose all context for relationships between headers and data. Who’s affected: Screen reader…

  • Text description

    When information is part of a graphic, include it in an alternate form. […]Read More…

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