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 
  • 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 

Alt text - Image Description

  • All images conveying meaning should have alt text
    • Traditional alt text should be added to the Description field
      • A short title can be added to the Title box if the alt text is longer than normal - this gives screen reader users a chance to preview what the image is to choose whether or not they hear the full image description
  • Decorative images do not require alt text
  • Avoid images of text
  • Detailed images should have detailed descriptions
    • Add long descriptions as a caption
  • 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
    • Avoid “click here”
  • 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 text & centered text
  • Use basic 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

  • 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, keep it there but make it transparent
  • Make sure all videos are properly captioned with controls to turn captions on or off and stop, start, pause the video
  • 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
    • You can add a short title to the Title box - this gives screen reader users a chance to preview what the image is to choose whether or not they hear the full image description
  • Avoid “hard enters.” Instead of adding extra space by pressing enter, adjust your line spacing with the icon, 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 icons only
    • Do not create lists with symbols and the space or tab keys; these are not read correctly by screen readers
  • 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
  • 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
  • Use sufficient font size and avoid the use of multiple fonts:
    • Approx. 36 point titles and approx. 18 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
    • 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
  • Ensure slide backgrounds and font include sufficient contrast
  • Color should not be the only way you convey meaning
  • Avoid flashing content
  • 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. 

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
  • 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

Print Email

Copyright 2015- PATINS Project