creating accessible online content a different experience of the web a different experience of the...

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


A ‘different’ experience of the webA ‘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


Reasons why you might not be able to performReasons why you might not be able to perform

the most basic of tasks on the web:the most basic of tasks on the web:

If you cannot see the website, you are likely blind,If you cannot see the website, you are likely blind,

or have low vision.or have low vision.

If you are not able to use a mouse you may be blind,If you are not able to use a mouse you may be blind,

or have a mobility impairment.or have a mobility impairment.

If you are not able to hear the audio in a video clipIf you are not able to hear the audio in a video clip

or in the Flash animation, you are likely deaf oror in the Flash animation, you are likely deaf or

hearing impaired.hearing impaired.


If you cannot interpret the information on theIf you cannot interpret the information on the

screen it is likely that you have a cognitivescreen it is likely that you have a cognitive

impairment, such as a learning disability orimpairment, such as a learning disability or

developmental disability, or perhaps you havedevelopmental disability, or perhaps you have

suffered a stroke or some form of brain injurysuffered a stroke or some form of brain injury


It’s so simple you just … It’s so simple you just …

A disabled person may encounter difficulties as theyA disabled person may encounter difficulties as they

surfsurf the web and try tothe web and try to

search an online databasesearch an online database

buy something from Ebay or Amazon.combuy something from Ebay or Amazon.com

place a hold on a book tape or large print book atplace a hold on a book tape or large print book at

their local librarytheir local library

register for classes at their university/collegeregister for classes at their university/college

participate in an online workshop or courseparticipate in an online workshop or course


Rather than talk about the difficulties of the disabledRather than talk about the difficulties of the disabled

in the online environment, I would like to demonstratein the online environment, I would like to demonstrate

to you what you might experience if you were blind,to you what you might experience if you were blind,

for example, and were using a screen readingfor example, and were using a screen reading

program like JAWS. Explain what screen reader does.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


Link to AVI file playing sound of navigating aLink to AVI file playing sound of navigating aWebsite, but no images.Website, but no images.


An argument for accessibilityAn 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


Demographic trends (based on 2001 figures):Demographic trends (based on 2001 figures):

15% of world’s population are disabled15% of world’s population are disabled

10% of online users have some form of disability10% of online users have some form of disability

An estimated 54 million people in the U.S. areAn estimated 54 million people in the U.S. are

disabled, with $1 trillion in disposable incomedisabled, with $1 trillion in disposable income

One in seven Canadians over 14 years of age hasOne in seven Canadians over 14 years of age has

a disability, with $25 billion in disposal incomea disability, with $25 billion in disposal income

A skill shortage & growing number of employeesA skill shortage & growing number of employees

with disabilitieswith disabilities require workplace accommodationrequire workplace accommodation

for disability (including IT accommodation)for disability (including IT accommodation)


Numbers of people using assistive technologies: Numbers of people using assistive technologies:

In Canada the number of people who use assistiveIn Canada the number of people who use assistive

technologies, (e.g. wheel chairs, screen readers)technologies, (e.g. wheel chairs, screen readers)

and who require more of these technologies isand who require more of these technologies is

459, 930459, 930

In Alberta 85, 490 people between the ages of 15In Alberta 85, 490 people between the ages of 15

and 64 use assistive technologies and they needand 64 use assistive technologies and they need

more of those technologiesmore of those technologies


Increasing reach/sales of your product:Increasing reach/sales of your product:

Existing North American marketplace - high ratesExisting North American marketplace - high rates

of Internet use in the U.S., and Canada, especially,of Internet use in the U.S., and Canada, especially,

western Canadawestern Canada

Overall Overall growth in online services – offering servicesgrowth in online services – offering services

to your disabled clientele will increase yourto your disabled clientele will increase your

customer basecustomer base

Changing climate – providers of online contentChanging climate – providers of online content

in the U.S. and Europe, will be compelled to offerin the U.S. and Europe, will be compelled to offer

accessible options or lose marketsaccessible options or lose markets


How does inaccessibility affect reach/sales:How does inaccessibility affect reach/sales:

Disabled users are three times less likely toDisabled users are three times less likely to

achieve success when performing routine webachieve success when performing routine web

tasks, such as, searching for information, andtasks, such as, searching for information, and

purchasing online than are able-bodied userspurchasing online than are able-bodied users

The majority of these failures are caused byThe majority of these failures are caused by

inaccessible websites, not the incompetence of inaccessible websites, not the incompetence of

the usersthe users

The result – a loss in sales and in goodwillThe result – a loss in sales and in goodwill


Reducing your legal liability:Reducing your legal liability:

National Federation of the Blind (NFB) vs. AOLNational Federation of the Blind (NFB) vs. AOL

The NFB successfully sued AOL for web-basedThe NFB successfully sued AOL for web-based

discriminationdiscrimination

The U.S. government mandates web accessibilityThe U.S. government mandates web accessibility

for all of its IT suppliers, under Section 508for all of its IT suppliers, under Section 508 of theof the

Rehabilitation Act.Rehabilitation Act.

By mid-2002 only one in fourBy mid-2002 only one in four North AmericanNorth American

companiescompanies had made theirhad made their websites accessible towebsites accessible to

people with disabilitiespeople with disabilities


Accessibility Guidelines/LegislationAccessibility 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)


W3C Web Content Accessibility Guidelines:W3C Web Content Accessibility Guidelines:

Fourteen guidelines in allFourteen guidelines in all

Each guidelines had one or more ‘checkpoints’,Each guidelines had one or more ‘checkpoints’,

that is either met, not met, or not applicable to sitethat is either met, not met, or not applicable to site

Each checkpoint has a priority rating, from 1 to 3Each checkpoint has a priority rating, from 1 to 3

Each checkpoint has a list of techniques (type ofEach checkpoint has a list of techniques (type of

technology, language or coding convention) thattechnology, language or coding convention) that

can be applied to ensure that the requirements ofcan be applied to ensure that the requirements of

the checkpoint are metthe checkpoint are met


Compliance Levels:Compliance Levels:

Single-A: All Priority 1 checkpoints metSingle-A: All Priority 1 checkpoints met

Double-A: All Priority 1 and 2 checkpoints metDouble-A: All Priority 1 and 2 checkpoints met

Triple-A: All Priority 1, 2, and 3 checkpoints metTriple-A: All Priority 1, 2, and 3 checkpoints met

A website or page is described as being Single-A, ifA website or page is described as being Single-A, if

it meets all priority 1 checkpoints or Double-Ait meets all priority 1 checkpoints or Double-A

Compliant, if it meets all priority one and twoCompliant, if it meets all priority one and two

checkpointscheckpoints


Example of WCAG Checkpoint:Example of WCAG Checkpoint:

1.1 1.1 Provide a text equivalent for every non-textProvide a text equivalent for every non-text

element (e.g., via "alt", "longdesc", or in elementelement (e.g., via "alt", "longdesc", or in element

content). content). This includesThis includes: images, graphical: images, graphical

representations of text (including symbols),representations of text (including symbols),

image map regions, animations (e.g., animatedimage map regions, animations (e.g., animated

GIFs), applets and programmatic objects, asciiGIFs), applets and programmatic objects, ascii

art, frames, scripts, images used as list bullets,art, frames, scripts, images used as list bullets,

spacers, graphical buttons, sounds (playedspacers, graphical buttons, sounds (played

with or without user interaction), stand-alonewith or without user interaction), stand-alone

audio files, audio tracks of video, and video.audio files, audio tracks of video, and video.

[Priority 1] [Priority 1]


HTML Example: HTML Example: Use "alt" for the IMG, INPUT, and APPLET Use "alt" for the IMG, INPUT, and APPLET elements, or provide a text equivalent in the elements, or provide a text equivalent in the content of the OBJECT and APPLET content of the OBJECT and APPLET elements. elements.

For complex content (e.g., a chart) where the For complex content (e.g., a chart) where the "alt" text does not provide a complete text "alt" text does not provide a complete text equivalent, provide an additional description equivalent, provide an additional description using, for example, "longdesc" with IMG or using, for example, "longdesc" with IMG or FRAME, a link inside an OBJECT element, or FRAME, a link inside an OBJECT element, or a a description link. .

For image maps, either use the "alt" attribute For image maps, either use the "alt" attribute with AREA, or use the MAP element with A with AREA, or use the MAP element with A elements (and other text) as content.elements (and other text) as content.


Section 508:Section 508:

Section 508 was enacted to eliminate barriers inSection 508 was enacted to eliminate barriers in

information technology, to make available newinformation technology, to make available new

opportunities for people with disabilities, and toopportunities for people with disabilities, and to

encourage development of technologies that willencourage development of technologies that will

help achieve these goals. help achieve these goals.

The law applies to all Federal agencies when theyThe law applies to all Federal agencies when they

develop, procure, maintain, or use electronic anddevelop, procure, maintain, or use electronic and

information technology.information technology.


What this means for you:What this means for you:

Companies or consultants selling services or Companies or consultants selling services or

products to the U.S. federal government and itsproducts to the U.S. federal government and its

agencies must comply with this legislation. agencies must comply with this legislation.

To ensure that they retain their business or gainTo ensure that they retain their business or gain

their business you will need to ensure that your their business you will need to ensure that your

products (software) and services (consulting)products (software) and services (consulting)

comply with Section 508.comply with Section 508.


Canadian Treasury Board – Common Look and FeelCanadian Treasury Board – Common Look and FeelWorking Group:Working Group:


Canadian Treasury Board – Common Look and FeelCanadian Treasury Board – Common Look and FeelWorking Group:Working Group:

Guidelines used to assist federal departments andGuidelines used to assist federal departments and

agencies with the implementation of the Treasuryagencies with the implementation of the Treasury

Board Common Look and Feel (CLF) Standards onBoard Common Look and Feel (CLF) Standards on

their web sites (intranet/extranet)their web sites (intranet/extranet)

Designed to accommodate both employees andDesigned to accommodate both employees and

clientsclients

Follow the W3C’s WCAG GuidelinesFollow the W3C’s WCAG Guidelines


Techniques for Enhancing AccessibilityTechniques 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


Separating document structure from presentation:Separating document structure from presentation:

The structure of a document is how it is organizedThe structure of a document is how it is organized

logically, i.e. a table of contents, an outlinelogically, i.e. a table of contents, an outline

Presentation of a document is how the documentPresentation of a document is how the document

is rendered, i.e. as print document, synthesizedis rendered, i.e. as print document, synthesized

speechspeech


Separating document structure from presentation:Separating document structure from presentation:

I will discussing three ways to ensure that a I will discussing three ways to ensure that a

document’s structure is distinct from its appearancedocument’s structure is distinct from its appearance

1. Writing valid HTML1. Writing valid HTML

2. Using style sheets2. Using style sheets

3. XML3. XML


Writing valid HTML (Transitional 4.01):Writing valid HTML (Transitional 4.01):

An example of a structural element of an HTMLAn example of a structural element of an HTML

document, is a table element, <TABLE>, or adocument, is a table element, <TABLE>, or a

paragraph element, <P>paragraph element, <P>

A presentation element is used to specify how aA presentation element is used to specify how a

document should be presented, e.g. <B> ordocument should be presented, e.g. <B> or

<CENTER><CENTER>

The example I will discuss is why tables shouldThe example I will discuss is why tables should

be used for display of data only, not for layoutbe used for display of data only, not for layout

of pagesof pages


Use of tables for page layoutUse of tables for page layout


Code showing use of table elements for layoutCode showing use of table elements for layout


JAWs interpretation of the Papyrus pageJAWs interpretation of the Papyrus page


Style sheets and online accessibilityStyle sheets and online accessibility

Style sheets allow you to enhance the presentationStyle sheets allow you to enhance the presentation

of content in a variety of ways, including addingof content in a variety of ways, including adding

alternative ways of rendering a content, i.e. foralternative ways of rendering a content, i.e. for

projection on a screen, for print, or for speechprojection on a screen, for print, or for speech

synthesizerssynthesizers


Techniques for enhancing accessibility with styleTechniques for enhancing accessibility with stylesheets:sheets:

Separate structure (HTML elements) fromSeparate structure (HTML elements) from

presentation (style sheet) presentation (style sheet)

Allow for commenting out of style sheet, usefulAllow for commenting out of style sheet, useful

when older or text-only browsers don’t supportwhen older or text-only browsers don’t support

style sheetsstyle sheets

Allow disabled users to apply their own styleAllow disabled users to apply their own style

sheets to web pagessheets to web pages


Separate structure from presentation:Separate structure from presentation:

Instead of using HTML presentation elements, allInstead of using HTML presentation elements, all

presentation elements are contained in a style sheetpresentation elements are contained in a style sheet

external or internalexternal or internal

For example, instead of using <B> for bold in the For example, instead of using <B> for bold in the

body of an HTML document for every instance inbody of an HTML document for every instance in

which you want to boldface text, decide what youwhich you want to boldface text, decide what you

want in boldface and use a stylesheet to specifywant in boldface and use a stylesheet to specify

to which element boldfacing appliesto which element boldfacing applies


Stylesheet example – boldface text:Stylesheet example – boldface text:

h2 {h2 {

font-family: arial, helvetica, sans-serif;font-family: arial, helvetica, sans-serif;

font-size: 14px;font-size: 14px;

text-decoration: none;text-decoration: none;

}}

font-weight: bold;font-weight: bold;


Comment out style sheets:Comment out style sheets:

Makes provision for users accessing web throughMakes provision for users accessing web through

older browsers who do not use style sheetsolder browsers who do not use style sheets

Disabled people tend to have lower incomes andDisabled people tend to have lower incomes and

older technology (hardware and software)older technology (hardware and software)


Comment out style sheets:Comment out style sheets:

ExampleExample


Allow user style sheet to take precedence:Allow user style sheet to take precedence:

Do not use !important in your stylesheetDo not use !important in your stylesheet

Types of user who may have personal style sheetTypes of user who may have personal style sheet

with !important specified:with !important specified:

Users who are color blind who want to avoidUsers who are color blind who want to avoid

certain color combinationscertain color combinations

Users who need large font sizes to view aUsers who need large font sizes to view a

page, i.e. people with low vision, or cognitivepage, i.e. people with low vision, or cognitive

difficultiesdifficulties


Techniques for enhancing accessibility with styleTechniques for enhancing accessibility with stylesheets:sheets:

Provide contextual cues for users (e.g. automaticallyProvide contextual cues for users (e.g. automatically

generated numbers, markers)generated numbers, markers)

Render content in alternative formats, e.g. of auralRender content in alternative formats, e.g. of aural

style sheetsstyle sheets


Contextual cues for users:Contextual cues for users:

:before and :after pseudo-elements and the content:before and :after pseudo-elements and the content

propertyproperty

Allows a website designer to insert markers (e.g.Allows a website designer to insert markers (e.g.

counters and content strings, such as, “Endcounters and content strings, such as, “End

Example”Example”

DIV.example:after {DIV.example:after {

content: End Examplecontent: End Example

}}


Aural style sheets controls (@media screen):Aural style sheets controls (@media screen):

Volume – controls volume of spoken textVolume – controls volume of spoken text

Speak Speak –– controls whether content is spoken, or controls whether content is spoken, or

spelledspelled

Pause – ‘pause before’ and ‘pause after’, controlsPause – ‘pause before’ and ‘pause after’, controls

pauses before and after content is spoken,pauses before and after content is spoken,

separates content for better comprehensionseparates content for better comprehension

Cue – ‘cue’, ‘cue-before’, and ‘cue-after’ specify aCue – ‘cue’, ‘cue-before’, and ‘cue-after’ specify a

sound to be played before and after content,sound to be played before and after content,

valuable for orientation (like visual icon)valuable for orientation (like visual icon)


Aural style sheets controls (@media screen):Aural style sheets controls (@media screen):

Play-during controls background sounds, whilePlay-during controls background sounds, while

element is rendered, like a background imageelement is rendered, like a background image


sound to be played before and after content, sound to be played before and after content,


‘ ‘Azimuth’ and ‘elevation’ provide dimension toAzimuth’ and ‘elevation’ provide dimension to

soundsound

Speech quality controlled by ‘speech-rate’, ‘pitch’,Speech quality controlled by ‘speech-rate’, ‘pitch’,

‘ ‘voice-family’, ‘pitch-range’, ‘stress’, ‘richness’voice-family’, ‘pitch-range’, ‘stress’, ‘richness’


Example of how aural style sheet can be used withExample of how aural style sheet can be used withscreen reader:screen reader:

JAWSJAWS


VoiceVoice


Example of how aural style sheet can be used withExample of how aural style sheet can be used withscreen reader:screen reader:

JAWSJAWS


Voice-family:Voice-family:

Play-during controls background sounds, whilePlay-during controls background sounds, while

element is rendered, like a background imageelement is rendered, like a background image


sound to be played before and after content, sound to be played before and after content,


‘ ‘Azimuth’ and ‘elevation’ provide dimension toAzimuth’ and ‘elevation’ provide dimension to

soundsound

Speech quality controlled by ‘speech-rate’, ‘pitch’,Speech quality controlled by ‘speech-rate’, ‘pitch’,

‘ ‘voice-family’, ‘pitch-range’, ‘stress’, ‘richness’voice-family’, ‘pitch-range’, ‘stress’, ‘richness’

creating accessible online content a different experience of the web a different experience of the...

Documents

online video

online workshop

online database

online environment

accessibility techniques

surfthe web

weba different experience

course slide