Introduction to Accessibility Presentation at Global Accessibility Awareness Day event Boston, May 9, 2012

1. Global Accessibility
Awareness Day
Boston - May 9, 2012

2. What is GAAD?
Global Accessibility Awareness Day
• Joe Devon
– Los Angeles area Web Developer
• Jennison Asuncion
– Toronto based Accessibility Evangelist

3. How Global is Global?
Global Accessibility Awareness Day
• Boston, USA
• Los Angeles, USA
• Los Angeles #2, USA
• San Diego, USA
• Washington D.C., USA
• Llandarcy, Wales UK
• Brisbane, Australia
• Melbourne, Australia
• Sydney, Australia
• Mumbai, India
• Bangalore, India
• Toronto, Canada

4. Goals of GAAD
• Raise the profile of accessibility
• Introduce Topics of Digital Accessibility
• Why accessibility matters
• Answer your Questions

5. How to participate
• Use your computer without the mouse
• Try out a screen reader
• Explore accessibility features of your
current Operating System or device
• Caption a video on YouTube
• Blog, tweet or Facebook about
Accessibility

6. Tonight’s Agenda
• Intro to Accessibility
• Live Demo of Access Technology
• “Click and Go” access to the Massachusetts
State House
• Boston Accessibility Group
• Open Discussion / Q & A

7. An Introduction to
Web Accessibility
For Content Developers

8. Why are we here?
• Get a better understanding of:
– Accessibility
– HTML – the language of the web
– How people of different abilities use the web
– How we can improve everyone’s web
experience by creating accessible content
• Live Demo of Access Technology
• Answer your Questions

9. What is Accessibility?
Accessibility is a general term used to describe the
degree to which a product, device, service, or
environment is available to as many people as
possible.
Accessibility can be viewed as the ability to access
and benefit from some system or entity.
Accessibility is often used in reference to people with
disabilities or special needs and their right of access
to entities, often through the use of assistive
technology.
Wikipedia : Accessibility

10. Then what is WEB Accessibility?
Web accessibility refers to the inclusive
practice of making websites usable by
people of all abilities and disabilities.
When sites are correctly designed,
developed and edited, all users
can have equal access to information
and functionality.
Wikipedia : Web Accessibility

11. The Four Principals of Web Accessibility
(WCAG 2.0)
• Perceivable - Text alternatives for non-text elements,
captioned and described media, adaptable presentation.
• Operable - Make it keyboard accessible, provide
navigation aids, avoid time-outs. Avoid flashing and
scrolling content.
• Understandable - Make content readable, predictable,
easy to navigate, read and understand. Provide input
assistance.
• Robust - Maximize compatibility with current and future
user agents, including assistive technologies.

12. How does a person with a disability access
the web?
• Access/Assistive/Adaptive Technology
(let's just call it AT)
• AT is a term that describes assistive,
adaptive, and rehabilitative devices or
software for people with disabilities that
attempt to reduce the impact or remove
the disability entirely.

13. Examples of AT
• Screen reading software: Uses synthesized speech to read
what is being displayed on a visual output device
• Braille terminals or Refreshable Braille displays:
Renders text as Braille characters (usually by means of raising
pegs through holes in a flat surface).
• Screen magnification software: Enlarges and modifies
the contrast/coloring of what is being displayed on the
computer monitor, making it easier to read for vision
impaired users.
• Speech recognition software: Accepts spoken commands
to the computer, or turns dictation into grammatically correct
text.
• Keyboard overlays or specialized keyboards: Makes
typing easier and more accurate for those who have motor
control difficulties.

14. Typical Features of an Accessible Web Site
Accessible web sites have:
• Text Equivalents for Images
• Links that make sense out of context
• Text that is large or enlargeable and of high contrast
• Clickable items that are large and indicate focus
• Pages that can be used with a keyboard or switch
device
• Videos that are closed captioned and audio described
• Content that is written in plain English and
augmented with instructional diagrams
• Adherence to widely accepted paradigms
• Semantically Meaningful HTML/Markup

15. Let’s get started!
Time for some learnin’

16. Provide Meaningful
Page Titles

17. Navigational Aids
Provide a way for users to skip repetitive content

18. structural/semantic
HTML elements
(headings, lists, blockquotes, etc.)

19. Semantically Meaningful HTML/Markup
<h1>A web Page about HTML</h1>
<h2>Elements of HTML</h2>
<h3>Lists</h3>
<p>There are two main types of lists; ordered and
unordered:</p>
<h4>Unordered Lists</h4>
<ul>
<li>I'm the first item in an unordered list</li>
<li>I'm the second</li>
</ul>
<h4>Ordered Lists</h4>
<ol>
<li>I'm the first item in an unordered list</li>
<li>I'm the second</li>
</ol>
<h3>Links</h3>
<p>Let's <a href="http://www.google.com>visit
Google</a></p>

20. Semantically Meaningful HTML/Markup
Screen readers use structural information to help make
reading more efficient. For example, most screen readers
can skip from heading to heading, announce the number
of items in a list, and identify the current row and
column in a data table.
Identify headings, paragraphs, lists, quotations, etc., using
the appropriate markup instead of relying solely on
formatting. For example, use <h1> tags to identify the
top-level heading rather than simply making its text
large and bold.
Do not misuse structural markup for formatting effects,
such as using <blockquote> to indent a paragraph.

21. Use heading elements
• Properly used Headings give a web page a machine
readable structure that reveals the topics discussed on a
page and how they are hierarchically related to each
other.
• Access technologies operate just like "machines" and can
provide a means for a user to navigate that structure with
speed and with ease.
• Properly used Headings enable a visually impaired user
to quickly "scan" a page for specific content or relevant
topics much like a sighted person would.
• Harvard Pilgrim Healthcare – Members
• CNN

22. Use Headings (in order)
Heading Level 1
<h1>This is the title of the page or article</h1>
Heading Level 2
<h2>This is a subsection of the page or article</h2>
Heading Level 3
<h3>This is a subsection of the current subsection</h3>
Heading Level 4
<h4>This is a subsection of the current subsection</h4>
Heading Level 5
<h5>This is a subsection of the current subsection</h5>
Heading Level 6
<h6>This is a subsection of the current subsection</h6>

23. Use Lists to identify series of related items
Screen readers identify the number and type of items in a
list and enable users to easily skip all or part of the list if
desired.
Unordered Lists (bulleted)
<ul>
<li>This is the first list item</li>
<li>This is the next</li>
</ul>
Ordered Lists (numbers)
<ol>
<li>This is the first list item</li>
<li>This is the second</li>
</ol>

24. Use Blockquotes (for quoted text)
Do not misuse structural markup for formatting effects,
such as using <blockquote> to indent a paragraph
<blockquote>
Four score and seven years ago our
fathers brought forth on this
continent, a new nation, conceived
in Liberty, and dedicated to the
proposition that all men are created
equal.
</blockquote>

25. Provide alternative
text for nontext
elements

26. MYTH: Images are bad for accessibility
• Technically, images are only inaccessible to
people who are totally blind. What about people
with:
– low vision
– color-blindness
– Deafness
– motor disabilities
– cognitive disabilities
• Images are not bad for accessibility. They
actually increase comprehension and usability
for most audiences.

27. Using ALT text effectively
• Images can often ENHANCE accessibility for
sighted individuals by providing visual cues that
aid comprehension:
– illustrations:
– icons
– animations
• Graphics can be especially useful to individuals
with certain reading disabilities, learning
disabilities, attention deficit disorders, or
cognitive disabilities.

28. How Images Are Used
Images on Web sites are used in three main ways:
• to convey important content
• to provide visual enhancements which offer no
real content
• to link to other areas of the site
The most appropriate alt text depends on the way
in which the image is used and communicates
the purpose of the graphic, not its appearance.

29. A Practical example – The Mona Lisa
Introductory art class giving examples
of different types of art:
alt=“Painting of a woman”
Paintings by Leonardo DaVinci:
alt=“The Mona Lisa”
Article about works by Italian Artists:
alt=“Leonardo DaVinci, The
Mona Lisa”
Art History Class:
alt=“The Mona Lisa, oil on
poplar panel, Leonardo
DaVinic, 16th
Century”

30. Images of Text
Images of text should have ALT text that reflects
the text in the image. Common examples of
images of text are:
– Banners
– Headers
– Buttons

31. NULL (Empty) Alt text
Is it ever OK to skip using ALT text? YES
• Images that do not provide any content to the
user (rounded corners, transparent images,
spacer images)
• Images that are used solely for decorative
purposes
• Images (linked or not) that are described by
nearby text
Do not leave the ALT Text out entirely! Simply
create an empty alt attribute: alt=“”

32. Action or Linked Images
Some images represent actions and may be the
only content in the link.
alt=“Like us on
Facebook”
alt=“Subscribe to
our RSS Feed”
alt=“Follow us
on Twitter”
alt=“Send us an
email”

33. Accuracy and brevity
Alternative text for images should be as accurate
and as succinct as possible.
Make sure that your alt text conveys all of the
important information relevant to its
purpose, but don't burden users with
excessively long alt text.
Screen readers or refreshable Braille devices
always read the alt text, which can make
image-heavy pages rather long.

34. Summary : ALT text
• Always put an alt attribute on your images.
• Use an empty alt attribute if the image is purely
decorative or is followed by text that equally
describes the image.
• Think about the best alt text for your image. It
depends on what the image represents. Is it a call to
action, a work of art, or additional content for the
page?
• Test your page by disabling images and style
sheets. Is all the information there? Does it all still
make sense?

35. Use color and
contrast with care

36. Use font size, color and contrast carefully
The vast majority of visually-impaired
people have some degree of usable vision.
Most conditions that affect vision are
highly sensitive to lighting and contrast.
Age related vision loss is a perfect
example of a condition that is worsened
by low contrast or tiny fonts.
Join the Contrast Rebellion!
http://contrastrebellion.com/
• Boston Complete Streets
• FCC.gov

37. Give links unique
names and make
them descriptive.

38. Give links descriptive and unique names
Screen reading software provides a very popular option to
browse the links on a page out of context. There should
never be two links on a page that use the same text.
Link text should describe the action to be performed or
destination of the link.
Not only do screen reader users and those with cognitive
difficulties benefit from this, but search engines can also
use the descriptive text to create context and relationships
between link text and link destinations.
• Link text should make sense
• Don’t be device specific
• Avoid repetitive link text
• Include relevant information
Read more…
More…
Click here

39. Create forms
the right way!

40. Creating Accessible Forms
• All important information for forms, such
as form instructions, must be presented
before the form itself. (screen reader
users go through forms linearly)
• The submit button must be the last form
element contained within a form.
(remember this computer?)
• All form fields must be associated with
their labels using the <label> HTML tag.

41. Creating Accessible Forms
• All forms should clearly indicate which form
fields are required prior to the actual form
inputs. Avoid cryptic hints such as the use of the
asterisk or different colors as the sole means of
indicating mandatory information requirements.
• Form fields that are logically related should be
grouped in a field set. If appropriate, the field
set should be labeled with a legend. (think billing
and shipping address)
• Avoid putting non-focusable text between
form fields. (like format suggestions)

42. Keyboard
Accessibility

43. Ensure that all content is keyboard accessible
• The use of a mouse requires hand-eye coordination. This
presents a problem for most visually impaired computer
users as well as those with mobility issues who may be
interacting with their computers using a switch or "sip
and puff" device. One of the most frequently encountered
accessibility barriers involves the inability to interact
with an interface which requires the use of a point and
click device.
• Use “Go” or “Submit” buttons with select
lists/combo boxes. Avoid “auto-submit”

44. Self Evaluation

45. Self Evaluation
• Evaluation Tools (Browser Extensions)
– Web Developer Toolbar
– WAVE Toolbar
– Worldspace Fire-eyes
– Juicy Studio Accessibility Toolbar
• Code Review (Browser Extension)
– Firebug
• AT Testing
– JAWS (www.freedomscientific.com)
– NVDA (www.nvda-project.org)
– Voiceover (Command F5)
– Your Keyboard

46. Stay in touch!
@gbla11yday
#GAAD
@cptvitamin
@briancharlson
@carrollcenter
www.globalaccessibilityawarenessday.org
www.facebook.com/globalaccessibilityawarenessday