Title: Creating Accessible Online Content
1Creating 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
2Creating 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 cant decode the text
3Creating 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.
4Creating 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
5Creating Accessible Online Content
- Its 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
6Creating 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.
7What 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
8Creating Accessible Online Content
Link to AVI file playing sound of navigating
a Website, but no images.
9Creating 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
10Creating Accessible Online Content
- Demographic trends (based on 2001 figures)
- 15 of worlds 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)
11Creating 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
12Creating 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
13Creating 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
14Creating 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
15Creating 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)
16Creating 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
17Creating 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
18Creating 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
19Creating 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 elements (and other text) as content.
20Creating 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.
21Creating 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.
22Creating Accessible Online Content
- Canadian Treasury Board Common Look and Feel
- Working Group
-
23Creating 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 W3Cs WCAG Guidelines
24Creating 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
25Creating 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
26Creating Accessible Online Content
- Separating document structure from presentation
- I will discussing three ways to ensure that a
- documents structure is distinct from its
appearance - 1. Writing valid HTML
- 2. Using style sheets
- 3. XML
27Creating Accessible Online Content
- Writing valid HTML (Transitional 4.01)
- An example of a structural element of an HTML
- document, is a table element, ltTABLEgt, or a
- paragraph element, ltPgt
- A presentation element is used to specify how a
- document should be presented, e.g. ltBgt or
- ltCENTERgt
- The example I will discuss is why tables should
- be used for display of data only, not for
layout - of pages
28Creating Accessible Online Content
Use of tables for page layout
29Creating Accessible Online Content
Code showing use of table elements for layout
30Creating Accessible Online Content
- JAWs interpretation of the Papyrus page
-
31Creating 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
-
32Creating 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 dont
support - style sheets
- Allow disabled users to apply their own style
- sheets to web pages
33Creating 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 ltBgt 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
34Creating Accessible Online Content
- Stylesheet example boldface text
- h2
- font-family arial, helvetica, sans-serif
- font-size 14px
-
- text-decoration none
font-weight bold
35Creating 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)
36Creating Accessible Online Content
- Comment out style sheets
- Example
-
37Creating 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
38Creating 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
39Creating 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.exampleafter
- content End Example
-
40Creating Accessible Online Content
- Aural style sheets controls (_at_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)
-
41Creating Accessible Online Content
- Aural style sheets controls (_at_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
42Creating Accessible Online Content
- Example of how aural style sheet can be used with
- screen reader
- JAWS
43Creating Accessible Online Content
44Creating Accessible Online Content
- Example of how aural style sheet can be used with
- screen reader
- JAWS
45Creating Accessible Online Content
- Example of how aural style sheet can be used with
- screen reader
- JAWS
46(No Transcript)
47(No Transcript)
48(No Transcript)
49Creating 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