Transcript Creating Accessible Online Content

Creating Accessible Online Content

A different experience of the web

The argument for accessibility

Accessibility Guidelines

Techniques for enhancing accessibility

Choosing your design/authoring tools

Web accessibility evaluation tools

Recommendations
Creating Accessible Online Content
A ‘different’ experience of the web
Imagine …

not being able to see the website you need to
navigate

not being able to use a mouse

not being able to hear the dialogue in an
online video

not being able to interpret the information
onscreen because you can’t decode the text
Creating Accessible Online Content
Reasons why you might not be able to perform
the most basic of tasks on the web:

If you cannot see the website, you are likely blind,
or have low vision.

If you are not able to use a mouse you may be blind,
or have a mobility impairment.

If you are not able to hear the audio in a video clip
or in the Flash animation, you are likely deaf or
hearing impaired.
Creating Accessible Online Content

If you cannot interpret the information on the
screen it is likely that you have a cognitive
impairment, such as a learning disability or
developmental disability, or perhaps you have
suffered a stroke or some form of brain injury
Creating Accessible Online Content
It’s so simple you just …
A disabled person may encounter difficulties as they
surf the web and try to

search an online database

buy something from Ebay or Amazon.com

place a hold on a book tape or large print book at
their local library

register for classes at their university/college

participate in an online workshop or course
Creating Accessible Online Content
Rather than talk about the difficulties of the disabled
in the online environment, I would like to demonstrate
to you what you might experience if you were blind,
for example, and were using a screen reading
program like JAWS. Explain what screen reader does.
What you see is likely very little or nothing at all
so that you cannot rely on the kinds of visual
navigation cues that are so prevalent on
most websites
Creating Accessible Online Content
Link to AVI file playing sound of navigating a
Website, but no images.
Creating Accessible Online Content
An argument for accessibility
There are a number of reasons for opting for
accessibility:

Demographic trends (aging population, increased
immigration)

To increase reach/sales of products or services

To reduce your legal liability

To increase the ‘visibility’ of your goods/services

To build goodwill within disabled community
Creating Accessible Online Content
Demographic trends (based on 2001 figures):

15% of world’s population are disabled

10% of online users have some form of disability

An estimated 54 million people in the U.S. are
disabled, with $1 trillion in disposable income

One in seven Canadians over 14 years of age has
a disability, with $25 billion in disposal income

A skill shortage & growing number of employees
with disabilities require workplace accommodation
for disability (including IT accommodation)
Creating Accessible Online Content
Numbers of people using assistive technologies:

In Canada the number of people who use assistive
technologies, (e.g. wheel chairs, screen readers)
and who require more of these technologies is
459, 930

In Alberta 85, 490 people between the ages of 15
and 64 use assistive technologies and they need
more of those technologies
Creating Accessible Online Content
Increasing reach/sales of your product:

Existing North American marketplace - high rates
of Internet use in the U.S., and Canada, especially,
western Canada

Overall growth in online services – offering services
to your disabled clientele will increase your
customer base

Changing climate – providers of online content
in the U.S. and Europe, will be compelled to offer
accessible options or lose markets
Creating Accessible Online Content
How does inaccessibility affect reach/sales:

Disabled users are three times less likely to
achieve success when performing routine web
tasks, such as, searching for information, and
purchasing online than are able-bodied users

The majority of these failures are caused by
inaccessible websites, not the incompetence of
the users

The result – a loss in sales and in goodwill
Creating Accessible Online Content
Reducing your legal liability:

National Federation of the Blind (NFB) vs. AOL
The NFB successfully sued AOL for web-based
discrimination

The U.S. government mandates web accessibility
for all of its IT suppliers, under Section 508 of the
Rehabilitation Act.

By mid-2002 only one in four North American
companies had made their websites accessible to
people with disabilities
Creating Accessible Online Content
Accessibility Guidelines/Legislation

World Wide Web Consortium (W3C)’s Web
Accessibility Initiative (WAI), specifically the Web
Content Accessibility Guidelines or WCAG

Section 508 of Rehabilitation Act (U.S.A.)

Canadian Treasury Board – Common Look and Feel
Working Group

European Union, Technology Initiative for Disabled
and Elderly People (TIDE)
Creating Accessible Online Content
W3C Web Content Accessibility Guidelines:

Fourteen guidelines in all

Each guidelines had one or more ‘checkpoints’,
that is either met, not met, or not applicable to site

Each checkpoint has a priority rating, from 1 to 3

Each checkpoint has a list of techniques (type of
technology, language or coding convention) that
can be applied to ensure that the requirements of
the checkpoint are met
Creating Accessible Online Content
Compliance Levels:

Single-A: All Priority 1 checkpoints met

Double-A: All Priority 1 and 2 checkpoints met

Triple-A: All Priority 1, 2, and 3 checkpoints met
A website or page is described as being Single-A, if
it meets all priority 1 checkpoints or Double-A
Compliant, if it meets all priority one and two
checkpoints
Creating Accessible Online Content
Example of WCAG Checkpoint:
1.1 Provide a text equivalent for every non-text
element (e.g., via "alt", "longdesc", or in element
content). This includes: images, graphical
representations of text (including symbols),
image map regions, animations (e.g., animated
GIFs), applets and programmatic objects, ascii
art, frames, scripts, images used as list bullets,
spacers, graphical buttons, sounds (played
with or without user interaction), stand-alone
audio files, audio tracks of video, and video.
[Priority 1]
Creating Accessible Online Content
HTML Example:
Use "alt" for the IMG, INPUT, and APPLET
elements, or provide a text equivalent in the
content of the OBJECT and APPLET
elements.
For complex content (e.g., a chart) where the
"alt" text does not provide a complete text
equivalent, provide an additional description
using, for example, "longdesc" with IMG or
FRAME, a link inside an OBJECT element, or
a description link.
For image maps, either use the "alt" attribute
with AREA, or use the MAP element with A
Creating Accessible Online Content
Section 508:

Section 508 was enacted to eliminate barriers in
information technology, to make available new
opportunities for people with disabilities, and to
encourage development of technologies that will
help achieve these goals.

The law applies to all Federal agencies when they
develop, procure, maintain, or use electronic and
information technology.
Creating Accessible Online Content
What this means for you:

Companies or consultants selling services or
products to the U.S. federal government and its
agencies must comply with this legislation.

To ensure that they retain their business or gain
their business you will need to ensure that your
products (software) and services (consulting)
comply with Section 508.
Creating Accessible Online Content
Canadian Treasury Board – Common Look and Feel
Working Group:
Creating Accessible Online Content
Canadian Treasury Board – Common Look and Feel
Working Group:

Guidelines used to assist federal departments and
agencies with the implementation of the Treasury
Board Common Look and Feel (CLF) Standards on
their web sites (intranet/extranet)

Designed to accommodate both employees and
clients

Follow the W3C’s WCAG Guidelines
Creating Accessible Online Content
Techniques for Enhancing Accessibility

Separating document structure from appearance

Providing alternatives to visual content

Ensuring data is accessible

Making search and input options (form fields)
accessible

Designing interfaces that are device independent

Providing keyboard shortcuts

Using accessible file formats
Creating Accessible Online Content
Separating document structure from presentation:

The structure of a document is how it is organized
logically, i.e. a table of contents, an outline

Presentation of a document is how the document
is rendered, i.e. as print document, synthesized
speech
Creating Accessible Online Content
Separating document structure from presentation:

I will discussing three ways to ensure that a
document’s structure is distinct from its appearance
1. Writing valid HTML
2. Using style sheets
3. XML
Creating Accessible Online Content
Writing valid HTML (Transitional 4.01):

An example of a structural element of an HTML
document, is a table element, <TABLE>, or a
paragraph element, <P>

A presentation element is used to specify how a
document should be presented, e.g. <B> or
<CENTER>

The example I will discuss is why tables should
be used for display of data only, not for layout
of pages
Creating Accessible Online Content
Use of tables for page layout
Creating Accessible Online Content
Code showing use of table elements for layout
Creating Accessible Online Content
JAWs interpretation of the Papyrus page

Creating Accessible Online Content
Style sheets and online accessibility

Style sheets allow you to enhance the presentation
of content in a variety of ways, including adding
alternative ways of rendering a content, i.e. for
projection on a screen, for print, or for speech
synthesizers
Creating Accessible Online Content
Techniques for enhancing accessibility with style
sheets:

Separate structure (HTML elements) from
presentation (style sheet)

Allow for commenting out of style sheet, useful
when older or text-only browsers don’t support
style sheets

Allow disabled users to apply their own style
sheets to web pages
Creating Accessible Online Content
Separate structure from presentation:

Instead of using HTML presentation elements, all
presentation elements are contained in a style sheet
external or internal

For example, instead of using <B> for bold in the
body of an HTML document for every instance in
which you want to boldface text, decide what you
want in boldface and use a stylesheet to specify
to which element boldfacing applies
Creating Accessible Online Content
Stylesheet example – boldface text:

h2 {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
text-decoration: none;
}
Creating Accessible Online Content
Comment out style sheets:

Makes provision for users accessing web through
older browsers who do not use style sheets

Disabled people tend to have lower incomes and
older technology (hardware and software)
Creating Accessible Online Content
Comment out style sheets:

Example
Creating Accessible Online Content
Allow user style sheet to take precedence:

Do not use !important in your stylesheet

Types of user who may have personal style sheet
with !important specified:

Users who are color blind who want to avoid
certain color combinations

Users who need large font sizes to view a
page, i.e. people with low vision, or cognitive
difficulties
Creating Accessible Online Content
Techniques for enhancing accessibility with style
sheets:

Provide contextual cues for users (e.g. automatically
generated numbers, markers)

Render content in alternative formats, e.g. of aural
style sheets
Creating Accessible Online Content
Contextual cues for users:

:before and :after pseudo-elements and the content
property

Allows a website designer to insert markers (e.g.
counters and content strings, such as, “End
Example”
DIV.example:after {
content: End Example
}
Creating Accessible Online Content
Aural style sheets controls (@media screen):

Volume – controls volume of spoken text

Speak – controls whether content is spoken, or
spelled

Pause – ‘pause before’ and ‘pause after’, controls
pauses before and after content is spoken,
separates content for better comprehension

Cue – ‘cue’, ‘cue-before’, and ‘cue-after’ specify a
sound to be played before and after content,
valuable for orientation (like visual icon)
Creating Accessible Online Content
Aural style sheets controls (@media screen):

Play-during controls background sounds, while
element is rendered, like a background image

Cue – ‘cue’, ‘cue-before’, and ‘cue-after’ specify a
sound to be played before and after content,
valuable for orientation (like visual icon)

‘Azimuth’ and ‘elevation’ provide dimension to
sound

Speech quality controlled by ‘speech-rate’, ‘pitch’,
‘voice-family’, ‘pitch-range’, ‘stress’, ‘richness’
Creating Accessible Online Content
Example of how aural style sheet can be used with
screen reader:

JAWS
Creating Accessible Online Content

Voice
Creating Accessible Online Content
Example of how aural style sheet can be used with
screen reader:

JAWS
Creating Accessible Online Content
Example of how aural style sheet can be used with
screen reader:

JAWS
Creating Accessible Online Content
Voice-family:

Play-during controls background sounds, while
element is rendered, like a background image

Cue – ‘cue’, ‘cue-before’, and ‘cue-after’ specify a
sound to be played before and after content,
valuable for orientation (like visual icon)

‘Azimuth’ and ‘elevation’ provide dimension to
sound

Speech quality controlled by ‘speech-rate’, ‘pitch’,
‘voice-family’, ‘pitch-range’, ‘stress’, ‘richness’