Website Accessibility

This page was created for Spring 2017 WAPED Conference as an introduction to Website Accessibility. Creators: Jason Varnado and Krista Greear.

History of Web and Web Content Accessibility Guidelines (WCAG)

What you need to know – Web

  • Web 1.0 (1989)
    • static, share text, not always up to date
    • Think “read-only”
  • Web 2.0 (1999, 2003-2004 ish)
    • dynamic, interaction with elements like posting, commenting, collaboration, etc.
    • Think Facebook, YouTube, Flickr
  • Web 3.0 = (???)
    • Artificial intelligence, future of web
    • Think whatever you want to think

What you need to know – WCAG

  • Web Content Accessibility Guidelines (WCAG) are guidelines published by the Web Accessibility Initiative (WAI) of the World Wide Web Consortium (W3C).
  • Success Criteria are the requirements to reach specific levels of accessibility. 2.0 AA is often seen as the minimum standard of accessibility
  • Developers need to be familiar with WCAG

Activity

WCAG 2.0 Theme Song

Resources

W3C’s WCAG Introduction Website
Wikipedia’s page on WCAG
WCAG Quick reference
Short article – What are the major differences among Web 1.0, 2.0 and 3.0?

HTML Basics

What you need to know

  • An HTML element usually consists of a start tag and end tag, with the content inserted in between
    • <p>WAPED is simply the best.</p>
  • Common elements
    • <h1> refer to headings
    • <p> refer to paragraphs
    • <a> refer to links
    • <img> refer to images
  • The visible part of the HTML document is between <body> and </body>
  • You can write HTML by hand in Notepad, Notepad++

Activity

  1. Go to WAPED website.
  2. View the source code (unique to browser and device)

Resources

HTML Basics
HTML Elements

Keyboard Accessibility

What you need to know

  • Ensure that everything can be reached via the “tab” key
  • Know that keyboard accessibility is an indicator, but not dictator, of screen reader accessibility
  • Keyboard shortcuts will make your life easier!!

Activity

Go to your institution’s website (you can use Gonzaga or University of Washington). Navigate to the Disability Office’s site using only your keyboard. HINT: use the TAB key to move, and ENTER or RETURN key to select. Holding down SHIFT+TAB moves cursor backwards.

Resources

WebAIM Keyboard Accessibility Resource

Using Wave WebAIM Toolbar

What you need to know

  • No automated checker or reporting tool will tell you everything inaccessible about a website (let alone fix it for you)
  • Use automated tools like WAVE Toolbar as (1) a starting place for remediation, (2) an educational tool, or (3) a tool to spot check potential trouble areas during website creation

Activity

  • Choose any website (perhaps your DS homepage)
  • Copy the URL (ctrl+c on Windows or cmd+c on Mac)
  • Paste the URL into the WAVE Toolbar (ctrl+v on Windows or cmd+v on Mac)
  • Poke around and see what the tool is telling you
  • Share with a neighbor one red error and one green feature

Resources

WAVE Toolbar by WebAIM (web accessibility evaluation tool)
WAVE Browser Extensions

Color

What you need to know

  • Test color combinations as you cannot always visually tell if they pass WCAG standards
  • Avoid using color as a sole means of representation/communication
  • Know that colors may look different in different environments (browsers, devices)

Activity

Pick one of the tools below and choose a color combination from any website. You can pick your own combo or use one of the following:
Hex #062F56 and #69BE28
Hex #062F56  and #99CAF0

Tools

WebAIM Color Contrast Checker (need to know the hex code of the color, web-based)
Colour Contrast Analyser (allows you to pick colors, Windows and Mac install)
Color Contrast Analyzer (scans whole webpage, has a mask feature to check contrast, web-based)

Resources

Penn States’ Color Accessibility Site

Headings

What you need to know

  • Avoid using bold, italics, and underlines to organize information
  • Do not skip headings. For example, if you have an H1, the next heading should be another H1(new topic) or an H2 (sub point)
  • Headings styles in Word are modifiable, which could make document creation easier
  • Heading styles in Word create an outline

Activity

Use the WAVE Toolbar to identify the number of H1, H2 and H3 headings on the WAPED Web Accessibility page (aka this page). HINT: WAVE Toolbar has 4 icons on the left side. The outline view is one of them.

Resources

WebAIM Semantic Structure
MS Word Add a Heading
W3C’s Organize with Headings site

Links

What you need to know

  • The words that you click on to be taken to a different webpage is called “linked text”
  • Use linked text that is a good “tour guide”, meaning it will tell the user where they will be taken
  • Ensure the linked text is unique and understandable out of context

Activity

Go to your institution’s website (can use Gonzaga or University of Washington). Locate the option to search the whole website. Search for the phrase “Click Here”. Identify the number of search results.

Resources

WebAIM Links and Hypertext

Images

What you need to know

  • Text that is meant to explain the important information in an image, and is often not visible, is called “alternate text” or “alt text” for short
  • The context surrounding an image may change what should be included in the alt text
  • Be aware of decorative images or “eye candy”
  • Keep alt text succinct
  • Writing alt text is more of an art than a science

Activity

Resources

WebAIM Alternative Text
OSU Alternative Text for Images