Accessibility: Design, Teaching, and Other Resources

The four main guiding principles of accessibility in WCAG 2.0 are

Perceivable

• Provide text alternatives for non-text content
• Provide captions and other alternatives for multimedia
• Create content that can be presented in different ways, including by assistive technologies, without losing meaning
• Make it easier for users to see and hear content

Operable

• Make all functionality available from a keyboard
• Give users enough time to read and use content
• Do not use content that causes seizures
• Help users navigate and find content

Understandable

• Make text readable and understandable
• Make content appear and operate in predictable ways
• Help users avoid and correct mistakes

Robust

• Maximize compatibility with browsers and user tools

Download POUR as a handout  [PDF]

Image: Evolve Creative Group

These interactive websites were built to demonstrate and explain some common web design problems:

• Before and After Demonstration (BAD) created by the Web Accessibility Initiative
• Accessible University 3.0 created by the University of Washington
• Handling common accessibility problems - Mozilla Developer Network

• Quick Reference Guide to WCAG
• WAI's Easy Checks - Checklist for conducting a first review of accessibility
• Writing for the Web

Screen Readers

• Audio interface
• Convert text into synthesized speech
• Primarily use keyboard for navigation
• May also be an option provided by a website, including some of our research databases
  • Look for an icon similar to:

How screen readers read web pages

• Linear (left to right, top to bottom)
• Users can use keyboard shortcut to skim through content

Software

Use these applications to test how well the screen readers do on your website.

• JAWS (Job Access With Speech) - Windows only; paid subscription
• NVDA  (Non Visual Desktop Access) - Windows only; free download
• Apple VoiceOver - built-in macOS and iOS app
• ChromeVox - built-in Google Chromebook app
• Narrator - built-in Windows app

There are many, many, many more options. Choose one that meets your needs and with a voice you life.

Navigation Without a Mouse

How to Test Keyboard Accessibility

1. Unplug your mouse
2. Use keyboard only
   • Tab key (Shift + Tab: go back a step) to navigate
   • Enter key to activate links, buttons
   • Esc key to cancel dialogs, menus

Touch Screens on Mobile Devices

• Customize iOS Accessibility Settings
• Android Accessibility Options

These tools will help you be compliant with ADA / Section 508 / WCAG 2.0 so that all visitors to your web site can navigate it easily.

• WAVE Web Accessibility Tool - browser plugin from WebAim for Chrome and Firefox
• tota11y  -  browser plugin developed by the Khan Academy to check web pages
• WAVE - Check individual pages by URL, without a plugin
• Google Lighthouse - check web sites
• Chrome Dev Tool - Accessibility audit tool built-in to the browser
• Firefox Accessibility Reference -  Accessibility audit tool built-in to the browser
• WAI's Easy Checks - Checklist for conducting a first review of accessibility
• Evaluation Tools - long list of tools gathered (but not endorsed by) WAI

• W3C Markup Validation Service - check the syntax of HTML code
• W3Schools.com CSS tutorials
• CSS tutorials on LinkedIn Learning - formerly Lynda.com

• Web-safe fonts
• Dyslexia Friendly Style Guide
• OpenDyslexic- font and browser plugins available

For accessibility, make sure that you color and font choices have high contrast ratios.

• Color Contrast Checker - Test color combinations using this tool from WebAIM
• HTML Color Picker - Hexagonal, web-safe
• Work With Color - Donut-shaped
• Color Scheme Designer - Pick a color, get codes for similar hues
• Adobe Photoshop - Use the dropper tool
• ColorZilla - Firefox add-on that lets you use the dropper tool on any web page

Not sure whether an image needs alternative text? Use the alt text decision tree

Image descriptions can be use for more than alt text. Learn more with the Describing Visual Resources Toolkit

Royal, Bria. "My Unapologetic Accessible Protest Pack." Bria M. Royal, 2018. www.briaroyal.com/pocket-healing-zines.

This is an animated comic-style checklist to encourage accessibility in protest spaces. Despite being a complex image, the creator added a robust text description which appears in different places depending on the web site.

• Tumblr post: image description appears as text below the image and tags
• Web page: image description appears when you hover over the image

Write clearly

• Keep it short. Use the simplest language appropriate for your content
• Use illustrations, icons, etc. to supplement text.
• Check spelling, grammar, and readability.
• Be careful with abbreviations, jargon, complex language, or anything that might confuse the reader.
• AVOID THE USE OF ALL CAPS. IT CAN BE DIFFICULT TO READ.

Structure your content instead of styling your content

• Use true heading styles <h1>, <h2>, <h3>, etc. to organize the elements on the page
  • Do not skip levels between heading styles
  • The headings will outline the content on the page, making it easier to navigate with screen readers and mouse-less interfaces
  • Can get to desired content more quickly
• Use true bullets <ul> and numbers <ol> for lists
• Do not rely upon font changes in color, size, boldness, to indicate a new section
• Do not rely upon spaces or tabs to place content

Think about users with visual impairments

• Use strong contrast between text and background colors
• Do not use color alone to convey meaning
• Do not use descriptions that rely on sight (such as "click on the left square")

Ensure links are descriptive

• Avoid phrases such as
  Click here to access MyOtis
• Use active phrases such as
  Sign in to MyOtis
• Do not list URLs as links

Provide alternate text for images, video, audio, and tables

• Audio files must have a transcript or text equivalent readily available
• Video files must have closed captions and/or transcripts
• Provide transcripts of dialog in comics and other complex images
• Use alt tags to describe what's important about this image in relation to the other content on the page
  • Describe the image in context ; will the alt text make sense when read aloud
  • Put a period at the end of alt tag; it makes screen readers pause
• For purely decorative images, use <img alt="">; screen readers will skip it
  • When in doubt, use the alt text decision tree graphic
• Transcribe text for screenshots, including tweets and other social media
• For data tables, use table, row, and column headings

Adapted from Creating Accessible Electronic Content