Creating Accessible Online Content - PowerPoint PPT Presentation

1 / 49
About This Presentation
Title:

Creating Accessible Online Content

Description:

not being able to use a mouse. not being able to hear the dialogue in an. online video ... JAWs interpretation of the Papyrus page. Creating Accessible Online Content ... – PowerPoint PPT presentation

Number of Views:45
Avg rating:3.0/5.0
Slides: 50
Provided by: sandr80
Category:

less

Transcript and Presenter's Notes

Title: Creating Accessible Online Content


1
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

2
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 cant decode the text

3
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.

4
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

5
Creating 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

6
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.
7
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
8
Creating Accessible Online Content
Link to AVI file playing sound of navigating
a Website, but no images.
9
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

10
Creating 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)

11
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

12
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

13
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

14
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

15
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)

16
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

17
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

18
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
19
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 elements (and other text) as content.
20
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.

21
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.

22
Creating Accessible Online Content
  • Canadian Treasury Board Common Look and Feel
  • Working Group

23
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 W3Cs WCAG Guidelines

24
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

25
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

26
Creating 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

27
Creating 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

28
Creating Accessible Online Content
Use of tables for page layout
29
Creating Accessible Online Content
Code showing use of table elements for layout
30
Creating Accessible Online Content
  • JAWs interpretation of the Papyrus page

31
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

32
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 dont
    support
  • style sheets
  • Allow disabled users to apply their own style
  • sheets to web pages

33
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 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

34
Creating Accessible Online Content
  • Stylesheet example boldface text
  • h2
  • font-family arial, helvetica, sans-serif
  • font-size 14px
  • text-decoration none

font-weight bold
35
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)

36
Creating Accessible Online Content
  • Comment out style sheets
  • Example

37
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

38
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

39
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.exampleafter
  • content End Example

40
Creating 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)

41
Creating 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

42
Creating Accessible Online Content
  • Example of how aural style sheet can be used with
  • screen reader
  • JAWS

43
Creating Accessible Online Content
  • Voice

44
Creating Accessible Online Content
  • Example of how aural style sheet can be used with
  • screen reader
  • JAWS

45
Creating 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)
49
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
Write a Comment
User Comments (0)
About PowerShow.com