Digital Accessibility

Provide accurate captions, transcripts, and audio descriptions.

Dos and Don'ts for Audio

1. Do include volume controls to adjust how loud or soft audio plays.
2. Don’t play audio automatically. 

Best Practices for Audio

• When recording audio, have minimal background noise. This makes it easier for everyone to listen.
• Users should have the option to start and pause.
• If a file is strictly audio (like a podcast), then a transcript should be available for individuals without hearing.
• Review and edit transcripts and closed captions to ensure accuracy.

Example #1

Audio recording of a speaker: A link to a text transcript is provided immediately next to the recording clip.

Example #2

Animation with text call-outs: An animated video shows how to assemble a table. There’s no spoken audio, and the video contains text describing the steps. Since there’s an explanation present in the video tutorial, no transcript or captions are needed.

Example #3

No spoken audio in a recording: If there’s an action being performed but there isn’t any spoken audio, then include an audio (caption) track describing the actions.

Supporting Resources for Audio

• Making Audio and Video Media Accessible
• Media Accessibility Powered by Panopto
• Understand Audio Description in a Couple of Minutes (video)

⏲️ Implementation estimation: Less than 5 minutes per page.

Appropriate color contrast allows everyone to easily read and understand information.

Dos and Don'ts for Color Contrast

1. Use tools like the WebAIM color contrast checker, and the MPS color contrast handout.
2. Do include text explanations so that everyone can understand.
3. Don’t rely on color alone to convey meaning.

Best Practices for Color Contrast

• Use patterns in combination with colors for data representation (like charts and graphs).
• Use the hex color codes in the MPS brand for consistency.
• Follow these text guidelines for MPS color combinations:
  • White text on MPS colors: red, purple, blue, dark blue, and black
  • Black text on MPS colors: yellow, orange, green, gray, white
• Use additional visual distinctions (in addition to color) to prompt actions. For example, required information should be denoted with an asterisk symbol (*).

Color Contrast Example

Color Contrast Supporting Resources

• Handout: MPS Brand in WCAG Color Contrast
• MPS Brand Guidelines
• Video: Color Contrast - Digital Accessibility
• WebAIM online color contrast tool

⏲️ Implementation estimation: Less than 5 minutes for every basic image and 20-30 minutes for every complex image.

Positioning and placement of visuals should not hinder a user’s ability to successfully use a website, or obstruct information. Images need to include alternative text or “alt-text” to support screen readers.

Dos and Don'ts

1. Do not use images for text. This includes screenshots. Screen readers cannot read the text inside an image, and instead rely on alt-text to convey the general purpose of an image.
2. Don't leave the alt-text for decorative images blank. Do use double quotation marks “” to inform screen readers that an image is decorative.
3. Do utilize proper punctuation. Always end alt-text with a period, even if it isn’t a full sentence. 

Best Practices for Writing Alt-Text

• Alt-text should be clear and concise. Generally speaking, 100-150 characters is sufficient.
• You do not need to begin alt-text with "Image of..." or "Photo of..." as screen readers will indicate that the alt-text is describing a visual. However, to provide context, you can identify the type of image (like chart, graph, screenshot, headshot, selfie, etc.)
• Alt-text descriptions should aim to answer these questions: What's happening? What's the purpose of the visual? What's the visual trying to convey?

Image Types

1. Charts, Diagrams, and Figures: Write a short description to clearly communicate the data. Whenever possible include a table of "normal" text detailing data; this way it can be understood by screen readers.
2. QR Codes: Say that the image is a QR code, and identify the website or page the QR code points or links to.
3. Decorative Images: Decorative images lack relevant information or context. To determine if an image is decorative, ask yourself: "Would removing the image impact the learning experience?" If the answer is "no", then it’s a decorative image.
4. Functional Images: Functional images perform an action. Many functional images are used as buttons or links. Alt-text for functional images should describe exactly what happens when a user interacts with the image.
5. Informative Images: Informative images provide context, and can range from simple to complex. Alt-text for informative images should convey the meaning or intent of the information that's displayed.

Resources for Writing Alt-Text

• Diagram Center: Specific Image Description Guidelines (Chemistry, Math, Diagrams, Graphs, etc)
• Carleton University: Describing People in Alt-text
• Harvard University: Write helpful alt-text to describe images
• Nielson Norman Group: What to write for alt-text

Step-by-Step Guidance

• Add alt-text to Google applications (video)
• Add alt-text in Finalsite
• Add alt-text in SharePoint

⏲️ Implementation estimation: Less than 2 minutes per link.

Making URLs and links descriptive supports clear information and plain language. Prevent confusion by informing users how links will act. Additionally, descriptive links improve screen reader user experience.

Dos and Don'ts

1. Don’t use ambiguous, or generic versions like, “click here” or “read more”.
2. Do use descriptive links.

Best Practices for Links

• Full URLs: If you need to include a full URL, (like for a citation) do not link it. Instead, copy the URL as normal text, and place it inside brackets to avoid confusion.
• Inform behavior: Let users know how the link will work (refresh, open in a new tab, open a pop-up, etc).
• Whenever possible, use anchor links to direct users to a specific point or section of a resource.

Link Examples

These nondescript links both point to the same destination:

• Ambiguous: Learn more
• Long URL: https://www.mpschools.org/about-mps/mps-brand-guidelines

Meanwhile, here's a descriptive version of the same link: MPS brand guidelines

Links and URLs Supporting Resources

• Canva: add hyperlinks
• Steps to add links in Google Docs, Slides, Sheets, etc:
  1. Highlight desired text.
  2. Click Ctrl+K (Windows) or Cmd+K (MAC)
  3. Add the URL in the box that opens.

Oftentimes PDFs are not properly structured, which can make them difficult to use. 

Dos and Don'ts

1. Do open the Tags panel and properly assign tags.
2. Do adjust the Reading Order.
3. Don't export or save a PDF that's only an image. Cursors should be able to highlight text in an accessible PDF.

Best Practices for PDFs

• Be mindful of security settings.
• Set file properties.
• Always run the accessibility checker; address identified issues before sharing a PDF.

Resources for PDFs

• Acrobat Pro: Create and verify PDF accessibility
• Adobe Acrobat: Creating accessible PDFs
• Harvard University: Creating Accessible PDFs
• Microsoft: Create accessible PDFs
• MN State IT Services PDF 101 video training series
• Section 508: Create Accessible PDFs

⏲️ Implementation estimation: 15-25 minutes for every page.

Reduce confusion and improve comprehension by using plain language. Creating clear, consistent, and intuitive information helps everyone.

Dos and Don'ts

1. Do write at an 8th-12th grade reading level, so that everyone can comprehend your writing.
2. Don't write large paragraphs of text.
3. Do break up large sections of text with meaningful headings. This helps learners quickly find what they need.

Best Practices for Plain Language

• Spell out acronyms the first time you use them.
• Avoid jargon and technical terms.
• Avoid idioms and figurative phrases.
• Use headings in a logical (sequential) order to keep things organized.
• Provide clear instructions if learners need to interact with content (like, “click the play button to watch the video” or “click the button to open in a new tab”).
• To avoid confusion, limit the use of consecutive blank spaces.
• Limit to a maximum of three different fonts to improve readability and keep things simple.
• Use numbers and bullets for lists to keep them neat and easy to follow.
• Sentences should be 15-20 words in an active voice.
• Paragraphs should be 3-5 sentences.
• Write at an 8th grade reading level as this is the national average in the United States.

Supporting Resources for Writing in Plain Language

• MPS Writing Style Guide
• Plain Language Resources from the Communications Department

Dos and Don'ts

1. Do use slide text boxes (title, subtitle, body) as intended. Respecting hierarchy supports screen readers.
2. Don't use screenshots in place of text. Screen readers can't understand text within an image.

Best Practices for Slides

• Give each slide a unique title. 
• Choose a preset layout for each slide. These preset layouts provided by Google Slides or PowerPoint automatically set the reading order and create headings that appropriately guide learners using a screen reader.
• If there are many items on a slide, adjust the reading order. By default, screen readers will read objects on a slide in the order in which they were added.

Slides Supporting Resources

• Adjust Google Slide reading order
• Change layout in Google Slides
• Google Slides support page
• Handout: Best practices for slide presentations
• Present slides with captions
• Use Google Slides with a screen reader

⏲️ Implementation estimation: 10 minutes per 30 cells.

Tables should be easy to read, and created in a way that doesn't confuse screen readers.

Dos and Don'ts

1. Do use tables to express data.
2. Don't use tables as a layout or design approach.
3. Don't use screenshots of tables, as these are inaccessible and cannot be read by screen readers.

Best Practices for Tables

When using tables:

• Avoid blank cells.
  • Add in text like, “no data available, unknown, N/A, not applicable”, etc.
• Avoid merged cells.
  • Ask yourself, “Can I remove the merged cell(s)?”
• Include header rows to clearly label data and categories.
• Tables should read left to right, top to bottom. 
  • To test this, first position the cursor in the top left cell. Next, click the "tab" key on the keyboard to move through the cells.
• Provide a table caption above every table to briefly introduce information explained by the table.
• Include a table summary. A table summary is alternative text which expands on information not provided by the table caption.

Example

Criterion Film Collection

Table Summary: The table shows information for film title, director, year of release, and what accessibility features are available.

Table Supporting Resources

• Google Docs: Add and edit tables
• Microsoft Word: Format a table
• Video: Create accessible tables in Word

⏲️ Implementation estimation: Twice the length of a recording. For example, expect to spend 10 minutes adding captions for a 5 minute video.

Videos must contain closed captions. Closed captions display spoken dialogue and other important audio information like speaker names, sound effects, and music. At MPS, we use the website Eduvision to add and edit closed captions for videos.

Dos and Don'ts

1. Do include close captions.
2. Don’t solely rely on auto-generated closed captions, as these often contain errors.
3. Do add closed captions to videos hosted in Google Drive that are linked in a Google Slide presentation.
4. Do remember that color contrast still applies to videos.

Best Practices for Videos

• Avoid quick or sudden flashes to prevent seizures.
• Break caption lines at natural pauses or punctuation to improve readability and comprehension.
• Review and revise closed captions to address errors.
• When sharing a video, avoid links that play video content automatically. Viewers should be given the freedom to start and stop a video as they see fit.
• Click the “CC” button on videos to review captions. If a “CC” button is missing, it’s because the video doesn’t have captions.

Supporting Resources for Closed Captions

• Eduvision: Closed Captions
• Google Drive: Add caption tracks to your video files
• Media Accessibility Powered by Panopto
• Present slides with captions
• Screencastify: Generate captions
• Screencastify: Captions in World Languages
• YouTube: Adjust default captions option
  1. Go to youtube.com/account_playback
  2. Select or deselect "always show captions" and/or "include auto-generated captions"