Accessibility: Instructional Design, Web Design, and Beyond

From WebAIM's Resources for Designers

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

Site Checkers

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

HTML and CSS Resources

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

Fonts

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

Color Pickers

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