PATINS Logo
Promoting Achievement through Technology and INstruction for all Students

Accessible Digital Content

Web Content Accessibility Guidelines (WCAG) 2.1 

Guiding document created by the World Wide Web Consortium (W3C). Widely accepted and adopted into policy around the world. The U.S. Department of Justice has consistently required compliance with WCAG 2.0 in many judgements. This document has broken down accessibility into four areas, P.O.U.R - Perceivable, Operable, Understandable, Robust 

Perceivable 

  • Alt text - no images of text with the exception of logos
  • Closed captions or transcript
  • Sufficient contrast
  • Legible fonts & proper spacing
  • Meaning not solely conveyed by color
  • Meaningful sequence

Operable

  • Clear headings / info structure
  • Descriptive links
  • Keyboard operation
  • No flashing content
  • Sufficient time to respond / interact

Understandable

  • Clear directions / models
  • Consistent navigation
  • Plain language
  • Define abbreviations
  • Indicate document language
  • Error identification

Robust

  • Test for accessibility
  • Test for use with basic assistive technology

Design & Accessibility Elements


Headings

  • Use Heading 1 for the topic of the page or document 
    • Use only one Heading 1 per page or document
  • Headings 2-4 follow
    • Most web pages won’t use headings past level 4
  • Don’t skip heading levels

Color & Contrast 

Images & Alt text - Image Description

  • Keep all images “In Line with Text” and use the alignment buttons to change the location of the image. Images not inline will not be read by a screen reader.
  • All images conveying meaning should have alt text added to the description field of the alt text dialog box
  • Decorative images do not require alt text
  • Avoid images of text
    • If using an image of text, it must be given alt text to the description field of the alt text dialog box
  • Detailed images should have detailed descriptions
    • Add long descriptions as a caption or in a separate doc or appendix that is hyperlinked to the image caption or adjacent text
  • Ensure inserted text boxes images, shapes, SmartArt, videos, charts, and embedded objects also have alt text

Videos: Captions & Audio Descriptions

  • All video content must be captioned
  • Videos should not automatically start playing or loop
  • Video command buttons must be present
  • Automatic captions are available for live presentations in Google Slides & Microsoft PowerPoint
  • Additional captioning resources
  • Audio descriptions describe nonverbal content in a video

Recognizable Links That Are Clear

  • Links should be visually distinguishable
    • (Typically) blue & underlined
    • Reserve all underlines for hyperlinks
  • Hyperlinks should be descriptive describing where the link goes or what it does
    • Avoid “click here” or "read more" as these are not descriptive
  • Use shortened links when URL must be given
  • Links should open in the same window or the user should be alerted when opening a new window

Font & Writing

  • Write between 5th-8th grade reading level
  • Use true text (avoid images of text)
    • Logos are the exception; still need alt text
  • Avoid justified & centered text
  • Avoid using all CAPS & Italics
    • If needing to bring attention to your text, consider adding an asterisk or text like, "Please Note" to indicate importance to users of screen readers in addition to any visual indicators like bold or highlights
  • Use basic Sans Serif fonts like Arial, Verdana, Helvetica
  • Be mindful of line length (60-70 characters per line)

Charts & Tables

  • Don’t use tables for layout
  • Avoid merged cells
  • Tables should have headers
    • Use a simple table structure, and ensure that you have a header for each column. You must also specify column header information. *Grackle will assist with this. In Word, you’ll want to make sure that Header Row is checked on the Table Tools Design tab (this is the default setting)
    • If a table spans more than one page, you’ll need to ensure the header row is repeated on each page:
      • Right click on table > Table Properties > Row > Check “Repeat as header row at the top of each page
    • Verify table structure with tab key
  • Charts should be given alt text 
    • Info displayed in chart should be described in narrative form or included in a table

Lists & Spacing

  • Use provided buttons for bulleted or numbered lists & indentation
    • Don’t create lists with shapes or symbols & spacebar or tab key
  • Create white space with Paragraph & Spacing (Line spacing) button (if available) rather than Enter

Slide Accessibility

Layouts & Titles

  • Use the provided slide layouts; creating your own layout causes disruption in the reading order for use with a screen reader
  • All slides need unique titles:
    • When information continues onto a new slide, make it unique by adding numbers to the titles (i.e. Accessibility 1, Accessibility 2, etc…)
    • If you don’t want a title to be shown, you can adjust its visibility in PowerPoint from the Home tab > Select > Selection Pane > turn off visibility by clicking the eye icon

Videos & Captions

  • Make sure all videos are properly captioned with controls to turn captions on or off and to stop, start, and pause the video
  • Use live subtitles in Google Slides (Slides demo video) or PowerPoint (built-in captions for Mac or PC demo video) *Please note that PowerPoint may need to be updated on your Mac or PC in order to access the automatic caption feature in this program. 
    • Use Microsoft PowerPoint's Present Live feature for paid 365 subscribers to provide access to translated captions for students or attendees as well as some additional presentation features like live reactions (Present Live demo videos).

Alt Text

  • Ensure inserted text boxes images, shapes, SmartArt, videos, charts, and embedded objects have alt text by right-clicking on the image and selecting “Alt text / Edit Alt Text”
    • The alt text should be added to the Description field
    • If you are adding a logo to all of your slides, add it to first slide with alt text and then insert it into the rest of your slides via the slide master

Lists & Spacing

  • Avoid “hard enters.” Instead of adding extra space by pressing enter, adjust your line spacing with spacing button in the toolbar, or simply accept the automatic formatting Office or GSuite offers you
  • When adding a bulleted or numbered list, use the bulleted or numbered list and indent buttons in the top menu ribbon during creation
    • Do not create lists with symbols and the space or tab keys; these are not read correctly by screen readers

Links

  • Use meaningful hyperlinks that describe what the link does rather than adding long URL links
  • If wanting to show the link, create a shortened link at bitly.com or tinyurl.com

Font & Reading Order

  • Use sufficient font size and avoid the use of multiple fonts:
    • Approx. 40 point titles and approx. 20 point or larger font for text
  • Ensure that slide has a sensible reading order:
    • Reading order can be tested in both PowerPoint and G Slides by clicking on the title slide and using the tab key to move object to object. The order in which items are highlighted is the slide reading order
      • You can also check the reading order in PowerPoint from the Home tab > Select > Selection Pane. The Selection Pane also allows users to turn off the visibility of items while remaining in the reading order
    • Recommendation for fixing an illogical reading order - create a new slide and then copy and paste in items from inaccessible slide onto the new slide in the order you want them to be read starting with the title

Color & Contrast

  • Ensure slide backgrounds and font include sufficient contrast
  • Color should not be the only way you convey meaning
  • Avoid flashing content

Accessibility Testing Tools

Accessibility testers don’t find all of the errors; however, they do offer a good place to start. Website testing by an individual with disabilities and/or formal consulting company is preferred. AEM Center’s list of consulting companies.

GSuite

  • Download the Grackle add-on for an accessibility audit in G Slides, Sheets, and/or Docs

Office 365

  • An accessibility checker (“Check Accessibility” button) is built into Office 365 products on the Review tab 

Chrome Extensions

Bookmarklets

3 Things to Remember

  • Remember to run all of your pages through the checkers
  • Checkers won’t catch everything; human intervention will be needed
  • Check pages when adding new content

Accessibility Statement/Policy

Shares the district’s or co-op’s commitment to accessibility 
  • The Department of Justice has consistently required compliance with WCAG 2.0
  • Good faith effort matters
  • Include steps have you taken & acknowledge the desire to correct errors
  • Can include list of assistive technologies or built-in features to help access content
  • Include grievance procedure with contact information
  • Examples
  • Campus Suite Policy Template helps create an internal district or co-op policy

Copyright © 2015- PATINS Project
To Top