Basic Web Accessibility
Nick Ogrizovich
Universal Design Technology Lab
Roadmap for today
What really prompted the web?
 “The power of the Web is in
its universality.
Access by everyone
regardless of disability is an
essential aspect.”
Tim Berners-Lee, W3C
Director and inventor of
the World Wide Web
Legal Basics
The Very Basics
 Web Accessibility in a nutshell
 Basics laws that govern accessibility the US
What is Section 508?
 Federal law
 Part of Rehabilitation Act of 1973, as amended in
1998
 Section 508 standards added in 2001
 Previously was a guideline; standards carry the
weight of law.
 Applies to federal government
Section 508
 Applies to electronic and information technology
(E&IT)
 Includes Web access/development and software
development
 At its heart, Section 508 is procurement law.
The 508 Philosophy
 Section 508 is about creating an open door.
 Section 508 uses the purchasing power of the
government to induce vendors to create accessible
products.
 The overall goal of Section 508 is a more accessible
society.
However…
 States are not part of the federal government.
 Our college is not part of the federal government.
State Laws
 All 50 states have laws on Web access
 23 states have statutes, policies, regulations, or
guidelines regarding procurement
Scope
 Some states have requirements that carry the weight of
law; others are guidelines.
 Georgia Tech has listing of state laws
 VT: We have some loosely worded “Policies” and pretty
much only for “state websites”
POUR Guidelines
Web Content Accessibility Guidelines
 Provides an international set of guidelines
 Developed by the Worldwide Web
Consortium
 Basis of most web accessibility laws in the
world.
 Version 2.0 of these guidelines, published
in December 2008, are based on four
principles:
Perceivable
Operable
Understandable
Robust
Perceivable
 Available to the senses (vision and hearing primarily)
 Through the browser
 Through assistive technologies (e.g. screen readers, screen enlargers)
Operable
 Users can interact with all
controls and interactive elements
using either the mouse, keyboard,
or an assistive device.
Understandable
 Content is clear and limits confusion and ambiguity.
Robust
 A wide range of technologies (including old and new user
agents and assistive technologies) can access the content.
The goal of providing accessible
written content can be
accomplished by being a POUR
writer.
Are you a POUR writer?
 Understandable:
“Information and the operation of user interface must
be understandable.
“This means that users must be able to understand the
information as well as the operation of the user
interface (the content or operation cannot be beyond
their understanding).”
What is plain language and how can it
help fulfill the WCAG 2.0
“Understandable” requirement?
Plain language is …
 Plain language is writing that can be understood the first
time people read or hear it.
 … easy to read
 … understandable
 … usable
Why is a lot of web content
bad?
The approach is wrong
 The wrong people write web content.
 The institution or “powers that be” dictate what content
goes on the organization’s website.
 Or actually, “go create a webpage for __topic__ , now!
 People write content without considering their
audience.
Writers forget to consider …
 People scan content (they don’t read it).
 It’s hard to read large blocks of text. (TLDR)
 There are people with low literacy skills.
 Some people have low language proficiency.
 Some people have cognitive impairments.
 Some people are dyslexic.
TL, DR
Ensure links make sense out of context
 Every link should make sense if the link text is read by itself.
 Screen reader users may choose to read only the links on a
web page.
 Certain phrases like "click here" and "more" must be
avoided. Try “…for more information on UVM Hockey..”
 Search engines use incoming link text to determine what a
page is about.
Headings & Structure
Use headings properly
 Headings communicate document structure.
 They help screen reader users, search engines, and more.
 Headings should form an outline of the page (H1 = the
main page heading, H2 = secondary headings, etc.)
 Nearly all document authoring tools supporting headings
at various levels
Adding headings in CK Editor
Adding headings in HTML
<h1>This is the main heading</h1>
<h2>This is a secondary heading</h2>
<h2>This is another secondary heading</h2>
DON’T: Use <h1> after using <h2>, <h3> etc. Headings
are not visual formatting tools in html.
Adding headings in Word
Adding headings in Adobe Acrobat
Alternate (ALT) Text
Alt Text
Add proper alt text to images
 People who can’t see images depend on alternate text
versions of image content
 Almost every document authoring tool supports alt text.
Right click on the image to access Image Properties or
equivalent, then enter a brief description.
 Keep alt text short and sweet.
Adding alt text in Dreamweaver
Adding alt text in HTML
<img src=“uvmlogo.gif ” alt=“uvm logo”>
Adding alt text in Word
Adding alt text in Adobe Acrobat
Accessible PDF’s
3. 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 a PDF in Acrobat Pro
1. Convert to text (if needed)
2. Add tags to document (if needed)
3. Touch up reading order,
4.
5.
6.
7.
add alt text to images
Check/correct headings and other tags
Create links from URLs (if needed)
Define document language
Run an accessibility check
More on PDF Accessibility
 http://uw.edu/accessibility/pdf.html
 Includes workflows for:
 Making a PDF accessible from scratch
 Exporting from Word to tagged PDF
 Repairing an inaccessible PDF using Acrobat Pro
 Repairing inaccessible PDF forms using Acrobat Pro
 Creating accessible PDF forms using Acrobat Pro
 Creating accessible PDF forms using LiveCycle Designer
 Also includes additional resources
Know when to use PDF
PDF is 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.
For many documents, HTML or Word may be a better choice
Captioned Videos
Caption videos
 Captioned video is accessible to people
who can’t hear it
 Captions make video full-text searchable (YouTube)
 Captions can be automatically translated to other
languages during playback (YouTube)
 Captions can be used to generate an interactive
transcript (YouTube)
Example YouTube Video with Captions
Provide a transcript
 Benefits individuals who are deaf-blind (easier to read
than captions with a Braille device)
 Benefits individuals with low Internet bandwidth (who
can’t play the media)
 Benefits all users by allowing them to access content
quickly
 Benefits Google, who indexes the content and ranks
them in results
Who can use this service?
 Anyone Within The University using
Audio/Visual material for University
purposes.
 How does one make a Captioning
request?
 Follow the link ‘Captioning Request
Form’ at
http://www.uvm.edu/caption/
 Simply click on the link below the
‘faculty’ section, provide the
information required, submit the
form and await our reply!
 For more information, contact Steven
Airoldi (caption@uvm.edu)
In closing
 By addressing these basic principles, you will ensure greater
accessibility of your web content to everyone.
Resources
Resources – General
 Section 508, Accessible IT: http://www.section508.gov/
 Georgia Tech Research Institute, State IT Database:
http://accessibility.gtri.gatech.edu/sitid/stateLawAtGlance.php
For Vermont:
http://accessibility.gtri.gatech.edu/sitid/state_prototype.php?state=45#Content
 University of Vermont ASPtech Accessibility Guidelines:
http://www.uvm.edu/~asptech/?Page=accessibility.html&SM=accesssubmenu.html
 Worldwide Web Consortium (W3C): http://www.w3.org/
Resources - POUR
 WCAG 2.0 Principles of Accessibility:
http://www.w3.org/TR/UNDERSTANDING-WCAG20/intro.html
 Constructing a POUR Website: http://webaim.org/articles/pour/
Resources - Plain Language
 Plain Language Checklist:
http://www.plainlanguage.gov/howto/quickreference/checklist.cfm
 Comprehensive Plain Language Guidelines:
http://www.plainlanguage.gov/howto/guidelines/FederalPLGuidelines/FederalPLGuidelines.pdf
 Test Your Content (methods):
http://www.plainlanguage.gov/howto/guidelines/FederalPLGuidelines/testing.cfm
 Center for Plain Language: http://centerforplainlanguage.org
 PlainLanguage.gov: http://www.plainlanguage.gov
 Plain Language Association International:
http://www.plainlanguagenetwork.org
Resources - Writing Content
 Content and Usability: Web Writing: http://www.webcredible.co.uk/userfriendly-resources/web-usability/web-content.shtml
Resources - Great Alt Text
 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/educational_media/stemdx
 About.com Description of good alt text:
http://webdesign.about.com/od/accessibility/a/great_alt_text.htm
 University of Vermont ASPtech Alt Text Guide:
http://www.uvm.edu/~asptech/?Page=alttext.html&SM=accesssubmenu.html
Resources – PDF Accessibility
 Adobe PDF Accessibility: http://www.adobe.com/accessibility/
 California State PDF Tutorials:
http://teachingcommons.cdl.edu/access/docs_multi/pdf_vid_tut/pdf_access_intro/pdf_accessib
ility_intro.shtml
 University of Vermont ASPtech PDF Accessibility Guide:
http://www.uvm.edu/~asptech/?Page=pdfcheck.html&SM=accesssubmenu.html
 University of Washington, PDF Accessibility:
http://uw.edu/accessibility/pdf.html
 WebAIM PDF Accessibility: http://webaim.org/techniques/acrobat/
Resources - Testing Accessibility
 WAVE: http://wave.webaim.org/
 HiSoftware® Cynthia Says™: http://www.contentquality.com/
 FAE: http://fae.cita.uiuc.edu/
Contact
 Nick Ogrizovich – nogrizov@uvm.edu
 Nick Hall – nbhall@uvm.edu
 ASP Tech – asptech@uvm.edu
 Captioning – caption@uvm.edu
 Universal Design Technology Lab telephone: (802) 656-5537