Accessibility and Inclusivity

On Tuesday, March 25, Dan, Terrill, and I presented at the TechConnect conference here on campus at the University of Washington. We walked through the following material:

Accessible Technology at the UW

Visit the Accessible Technology at the UW site and learn all about what is happening at the UW in making technology work for everyone.

The Basic Methods for Accessible Websites

1. Validated HTML
2. Semantic element types (headings, paragraphs, lists, tables, etc.)
3. Headings and sub-headings used hierarchically
4. ALT texts on images, where meaningful
5. Page titles
6. Meaningful link texts
7. Form labels
8. Table headers and captions
9. Captioning on videos

Useful Tools

Websites

• Accessible University — http://www.washington.edu/accesscomputing/AU/
• All About Color Blindness — http://www.color-blindness.com/
• Contrast-A: Find Accessible Color Combinations — http://www.dasplankton.de/ContrastA/
• WebAIM Color Contrast Checker — http://webaim.org/resources/contrastchecker/
• Living Validator — http://validator.nu/
• Validome Validator — http://www.validome.org/
• WebAIM WAVE accessibility evaluation tool — http://wave.webaim.org/

Download-ables and Plug-in-ables

• Color Oracle: Color Blindness Simulator — http://colororacle.org/
• Paciello Color Contrast Analyzer — http://www.paciellogroup.com/resources/contrastAnalyser
• Colour Contrast Analyzer — http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download/colour-contrast-analyser-2-2-for-web-pages
• Web Develolper Toolbar (for Chrome) — https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=en-US
• Web Developer Toolbar (for Firefox) — https://addons.mozilla.org/en-US/firefox/addon/web-developer/

Accessibility Problem Examples

Problems With Focus Indicator

No Focus Indicator

• Galaxy S4 Mobile Hotspot — http://www.fixedbyvonnie.com/2013/06/how-to-turn-your-galaxy-s4-into-a-mobile-hotspot/
• University of Kentucky — http://www.uky.edu/
• New York University — http://www.nyu.edu/

Reverse Focus Indicator (for mouse)

• Debian Distribution — http://www.debian.org/distrib/

Mystery Focus Indicator

• ESPN — http://espn.go.com/

Enhanced Focus Indicator

• WebAIM: Good use of focus indicator — http://webaim.org/
• University of Washington: Focus indicator changes — http://www.washington.edu/
• Penn State: Enhanced default — http://www.psu.edu

Skipnav

• Visible On focus — Ohio State University — http://www.osu.edu/
  University of Southern Florida — http://www.usf.edu/
• Always visible — AccessSTEM — http://www.washington.edu/doit/Stem/
• Not visible — White House — http://www.whitehouse.gov/
  New York University — www.nyu.edu
• Broken — Columbia Basin College — http://www.columbiabasin.edu/index.aspx?page=6

Tab Order

• Olympic College: Unexpected, goes to central pane first — http://www.olympic.edu/index.htm
• Yahoo; Left nav first, skips top nav:  — (due to cursor in search box by default, something to discuss, is this a good technique? On most pages, probably not, but on portal/search pages, it's probably appropriate, esp. with proper form label in place) — https://www.yahoo.com/
• Oklahoma State University: Lots and lots and lots of menu items to tab through — http://go.okstate.edu/

Contrast and color

• Yahoo: High contrast by default (except purple nav bar) — https://www.yahoo.com/
  Oklahoma State University — http://go.okstate.edu/
• Martinsburg Police Department: Too much contrast? Does it hurt? — http://www.martinsburgpd.org/
• CSS Teagarden: Where is nav, where is content? — http://csszengarden.com/213/
• CSS 204: Foreground vs background problems — http://www.csszengarden.com/204/<</li>
• CSS 186: Fade to invisible — http://www.csszengarden.com/186/

Menus

• University of Washington: Good — http://www.uw.edu
• Washington State University: Mouseover vs keyboard focus, what do you get? — http://wsu.edu/

Default Text Size

• Washington State University: Too small? — http://wsu.edu/

Headings

• Washington State University: Limited, all H1 — http://wsu.edu/
• University of Kentucky: Mysterious use of headings — http://www.uky.edu/
• West Virginia State University: Only one heading on page, in home graphic — http://www.wvstateu.edu/
  Oklahoma State University — http://go.okstate.edu/
• New York University: Some text is not in heading tag? — www.nyu.edu (NVDA is not reading all of the "University Life" header)