Web Accessibility
Accessibility
Webaim
This is a pretty prolific site that has a cool little toolbar to install to your bowser.
It’s called Wave. It’s a great tool, but it is also easy to fool. Just because your site
passes with no accessibility errors, does not mean it’s accessible. It only means it
technically meets minimum requirements.
Colorblindness Simulators
WeAreColorBlind – This tool is pretty high level, but it gives you a good idea
about the need for consideration to you color blind audience. Color contrast is
important, and there are a few great examples of the right and wrong way to
display your data, when considering a color blind audience.
CDAC – Digital Accessibility Center
CDAC provides a number of services that vary based on the type of web
content. Static, content managed and dynamic web sites can benefit from our
accessibility review service. Rich media content, such as Microsoft Word
documents, Adobe Acrobat PDF files and multimedia can benefit from our review
Image Alt Text
Alt= Screen shot of CQ5 text/image component
alt text and advanced settings dialog box
Alt Text Everywhere
Alt text in Word 2011 & 2012
Alt text in PDF
(using Adobe Acrobat Pro)
Alt Text Resources
• W3C Techniques for providing useful text
alternatives
http://www.w3.org/TR/html-alt-techniques/
• NCAM Effective practices for describing
science content
http://ncam.wgbh.org/experience_learn/educ
ational_media/stemdx
Notate Links to Documents
• When linking to a word document, PDF or
other file, make sure to note in your link what
the document is and hyperlink that notation
Fill out the Camp Counselor Application (PDF)
Register for Volunteer Weekend (Word Doc)
Proper Headings
<h1>Main heading/title of the page</h1>
<h2>Secondary heading</h2>
<h3>First subheading in this section</h3>
<h3>Second subheading in this section</h3>
<h2>Another secondary heading</h2>
Proper Headings Example
<h1>Application Process
<h2>Undergraduate Admission
<h3>Admission Requirements
<h3> Application Process
<h2>Graduate Admission</h2>
<h3>OU Graduate College Requirements
<h3>College of Blank Requirements
Headings For All Docs…
Not Just Web
Headings even (especially)
in PDF!
Speaking of PDFs…..
Create Accessible PDFs
• Not all PDFs are equal:
– Image PDFs
– PDFs with text, but no structure
– Tagged PDF (the only accessible type)
• Can create an accessible PDF from scratch
– Using a tool that supports tagged PDF (e.g., Word)
– Save as tagged PDF
• Can fix an inaccessible PDF using Adobe
Acrobat Pro
Fixing PDFs in Acrobat Pro
1. Convert to text (if needed)
2. Add tags to document (if needed)
3. Touch up reading order,
add alt text to images
4. Check/correct headings and other tags
5. Create links from URLs (if needed)
6. Define document language
7. Run an accessibility check
PDF Accessibility Resources
http://uw.edu/accessibility/pdf.html
• Includes workflows for:
– Making a PDF accessible from scratch
– Exporting from Word to tagged PDF
– Repairing and creating inaccessible PDFs and PDF forms
using Acrobat Pro
PDFs are great for documents where:
• Appearance is critical. Document must be the same
across all platforms.
• Security is critical. Document requires encryption,
digital signatures, watermarks, etc.
Mark Up Tables Appropriately
Include markup that clearly communicates the
relationship between table headers and the cells
within their scope:
Color Contrast Checker
WCAG 2.0 Level AA:
– Contrast ratio of 4.5:1 for normal text
– or 3:1 for large text (18 pt or 14 pt bold)
WCAG 2.0 Level AAA:
– Contrast ratio of 7:1 for normal text
– Or 4.5:1 for large text
Color Contrast Example
http://www.paciellogroup.com/resources/contrast-analyser.html
Respect white space
• Space between lines
• Space between paragraphs
• Can help users who have difficulty tracking
text horizontally.
• Contributes to a cleaner, more aesthetically
pleasing interface for everyone.
Clean & Simple is Good
Use Text, Not Pictures of Text
• Pictures become blurry when enlarged
• Pictures take longer to download
• Pictures that contain text are not readable on
a screen reader
• Text in an image is not searchable
Think Twice About the
Words You Choose
• Word length and sentence complexity have an
effect on the ability of certain individuals to
decode the words on a page.
• Juicy Studio Readability Test:
http://juicystudio.com/services/readability.php
• Struggling with Understandability:
http://terrillthompson.com/blog/10
Make Text Easier to Read
•
•
•
•
Understandable  “easier to read”
Manipulated  Changed
Subsequently  Later
“Testimonials from individuals with
disabilities…” 
“People with disabilities talk about…”
Become a Closed
Captioning Master
3 Common terms to know:
• .SRT File common subtitle file that has the timecode
and text
• Video Hosting Site this site is a 3rd party site where
your video lives (i.e. YouTube or Vimeo). For every
video you upload you will have a URL
• CC the abbreviation for Closed Captioning
CC on YouTube
You want to host your video through a service like
YouTube. Use a captioning service like Overstream.net,
CaptionTube or Amara to generate your captioning file.
Closed Captioning
Closed Captioning
Closed Captioning
Closed Captioning
Closed Captioning
• Don’t forget to describe content that is
otherwise only accessible to people who can
see it. Examples:
– Words on the screen
– Critical actions
– Other critical details about the setting, etc.
• Script the description
• Sync description with the video.
http://listeningislearning.org/background_what-isdescription.html
Get Involved
• Follow #a11y on Twitter
• Contact the Disability Resource Center and get
involved with the Web Accessibility Higher
Education project
• EDUCAUSE IT Accessibility Constituent Group
– Working to get accessibility on the radar of
EDUCAUSE, CIO’s, and other IT Leaders
– http://educause.edu/groups/itaccess
Test Content on
Mobile Device
• 71.8% of screen reader users now use a screen
reader on a mobile device
Source: WebAIM Screen Reader User Survey
#4: http://weba.im/survey4
• Test on iPhone using VoiceOver. Some tips:
http://webaim.org/articles/voiceover/
Test on Screen Reader
• JAWS
http://freedomscientific.com/products/fs/jawsproduct-page.asp
• Window-Eyes
http://www.gwmicro.com/Window-Eyes/
• NVDA (Free!)
http://www.nvda-project.org
• VoiceOver (built in to Mac OS X and iOS)
http://www.apple.com/accessibility/voiceover/