storyboard

COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

Introduction to Web Accessibility

AUDIO

Welcome to this instructional module introducing the concept of web accessibility. We will begin by reviewing the navigation tools and options that will be available throughout the module.

The forward and back buttons are located along the bottom of the screen, and you can track your progress with the colored bar below the naviga-tion.

If you have trouble following the audio voiceover, a captioned option is also available for greater accessibility and learning.

INTRODUCTION: SLIDE 01

TRANSITION

Cross fade

CONTENT

Introduction to Web Accessibility (centered)

GRAPHIC—technology

GRAPHIC—human interaction


Overview

Introduction•Consequences•

Integration•

AUDIO

We will discuss the following topics in this course:

First, we will introduce the topic of web acces-1. sibility, including scope and definitions.

Then we will discuss the consequences of 2. poorly planned or badly executed web acces-sibility, and who is affected.

Finally, we will discuss some easy ways to 3. integrate web accessibility into your new or existing learning environment.

INTRODUCTION : SLIDE 02

TRANSITION

Cross fade

Each element fades in as discussed

CONTENT

Overview

Introduction (fades in as text is read) Consequences (fades in as text is read) Integration (fades in as text is read)


SECTION ONEIntroduction to Web Accessibility

AUDIO

First, we will complete an Introduction to web ac-cessibility.

As the internet has developed, technologies have gradually enabled a variety of users to access con-tent using assistive devices.

With the advent of government-mandated ac-cessibility standards, accessibility standards have become both more complex and more necessary.

SECTION ONE : SLIDE 01

TRANSITION

Cross fade

CONTENT

Section One: Introduction to Web Accessibility


Working Definition

Web accessibility refers to the practice of making websites usable by people of all

abilities and disabilities.(Wikipedia)

AUDIO

To begin, we will need to establish a working definition of web accessibility, so that we can adequately gauge our progress throughout this course.

According to Wikipedia, Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities.


TRANSITION

Cross fade

CONTENT

Working Definition

Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. (reveal when discussed)


Accessibility Types

AUDIO

There are two primary categories of accessibility that must be considered as we approach the topic of web accessibility:

The largest segment of accessibility is targeted toward disabled or cognitively limited users.

Technologically-based accessibility limitations are also an important aspect of quality web engage-ment. This includes factors such as browser and standards compliance,


TRANSITION

Cross fade

CONTENT

Accessibility Types

(disability graphic)

(technology graphic)

GRAPHIC—disability GRAPHIC—technology


Types of Disability

AUDIO

Accessibility standards are mandated by the government for disabled users through Section 508 legislation. Several categories of web sites are required to be compliant with this statute, but developing accessibility with this legislation as a benchmark is important to make all web experi-ences boundary-free.


TRANSITION

Cross fade

CONTENT

Types of disability


Types of Disability

1. Visual: blindness or poor eyesight

AUDIO



TRANSITION

Cross fade

CONTENT

Types of disability

1. Visual: blindness or poor eyesight

GRAPHIC—braille overlay


Types of Disability

2. Motor/mobility: inability to use hand due to various medical conditions or

loss of fine motor control

AUDIO



TRANSITION

Cross fade

CONTENT

Types of disability

2. Motor/mobility: inability to use hand due to various medical conditions or loss of fine motor control

GRAPHIC—screen reader


Types of Disability

3. Auditory: deafness or impairment

AUDIO



TRANSITION

Cross fade

CONTENT

Types of disability

3. Auditory: deafness or impairment

GRAPHIC—sound symbol or hearing aid/cochlear implant


Types of Disability

4. Seizures: photoepileptic seizures due to flashing or strobe

AUDIO



TRANSITION

Cross fade

CONTENT

Types of disability

4. Seizures: photoepileptic seizures due to flashing or strobe

GRAPHIC—flashing light


Types of Disability

5. Cognitive/intellectual: developmental or learning

AUDIO



TRANSITION

Cross fade

CONTENT

Types of disability

5. Cognitive/intellectual: developmental or learning

GRAPHIC—child or adult concentrating


Technological Impairment

AUDIO

Although technological impairment is certainly sec-ondary to disability related disenfranchisement, it is an important part of developing a quality learning product.

Because of the wide variety of web browsers, plug-ins, and operating system specific technology, web accessibility should be evaluated based on broad technology availability to the target population. Your primary user should not be unnecessarily limited in their web experience because they lack a certain browser or plug-in.


TRANSITION

Cross fade

CONTENT

Technological Implications

(pictures of browser icons and common plug-in icons)

GRAPHIC—browser icons (Safari, IE, FireFox, et al)

GRAPHIC—flash and java plug-in icons


Review

Definition (inset quote)•Categories of Accessibility Limitation•

AUDIO

Let’s review the things we just learned about web accessibility:

Do you remember the components of the defini-tion for web accessibility. The definition includes the following: “Web accessibility refers to the prac-tice of making websites usable by people of all abilities and disabilities.”

We also discussed two categories of accessibility limitation: disability and technologically related. We will focus on the first user segment for the majority of this course.


TRANSITION

Cross fade

CONTENT

Review

Definition (reveal as discussed) Categories of Accessibility Limitation (reveal as discussed)


Why is accessibility important?

AUDIO

Based on our overview of web accessibility, why do you think accessibility is important?

This will be the topic of the second section. We will discuss the consequences of web inaccessibility.


TRANSITION

Cross fade

CONTENT

Why is accessibility important?


SECTION TWO Consequences

AUDIO

We have discussed the two categories of users that are affected by web inaccessibility, but what do these users experience when web accessibility is not properly considered?

Those consequences will be the topic of this sec-tion.

SECTION TWO : SLIDE 01

TRANSITION

Cross fade

CONTENT

Consequences


Consequences

Technological•Structural•

Sense Deficiency•

AUDIO

We will discuss three categories of consequences, including: technological, structural, and sense deficiency.


TRANSITION

Cross fade

CONTENT

Consequences

Technological (reveal as discussed) Structural (reveal as discussed) Sense Deficiency (reveal as discussed)


Technological

AUDIO

Technological limitations can take a variety of forms.

Missing plug-ins is the most common manifestation of technological inaccessibility. This occurs when the web developer does not consider the full diversity of users that need to access a given set of content, especially when no “fall-back” method is planned to allow a quality experience for techno-logically-disadvantaged users.

Stringent browser or operating system require-ments can also manifest as technological inacces-sibility, in that they limit the segment of users that can experience the content as the content author originally intended.


TRANSITION

Cross fade

CONTENT

Technological

GRAPHIC—missing flash plug-in/broken media link


Structural

AUDIO

Structural considerations make up a large segment of accessibility issues, as they account for many of the most common disability-related limitations.

Missing images without defined alt text are not able to be read by accessibility devices such as screen readers or braille overlays.

Improper use of HTML markup (especially in the non-semantic use of certain tags, such as block-quote, table, and others) creates insufficient struc-tural context for text to be understood.


TRANSITION

Cross fade

CONTENT

Structural

GRAPHIC—common web page without graphics or css loaded (before and after)


Sense Deficiency

AUDIO

Sense deficiency is a broad category of inacces-sibility, describing any experience that cannot be replicated from user-to-user due to disability or technological impairment.

Special media types, such as audio and video, cannot be experienced by certain disadvantaged users, without captioning, descriptive alt text, or other accessibility information.

Access limitations, such as login prompts or captcha integration, are inaccessible to the visually-chal-lenged.


TRANSITION

Cross fade

CONTENT

Sense Deficiency

GRAPHIC—media with close captioning


Review

Who is affected?•Why is accessibility important?•

AUDIO

Now, let’s review what we have just discussed:

A variety of users are affected by accessibility de-ficiencies, including technologically disadvantaged and sense deprived users. These users can be helped by proper structural markup and adequate fall-back measures.

Accessibility is important as it ensures a quality experience for all users, regardless of technology or disability.


TRANSITION

Cross fade

CONTENT

Review

Who is affected? (reveal as discussed) Why is accessibility important? (reveal as discussed)


How do we create web accessibility?

AUDIO

Now that we understand the substance of web ac-cessibility, and the consequences when it is absent, how do we create proper accessibility support?


TRANSITION

Cross fade

CONTENT

How do we create web accessibility?


SECTION THREE Integration

AUDIO

Now that we have discussed the definition of web accessibility, and the disadvantages caused by inad-equate accessibility standards, we will discuss some techniques to integrate web accessibility into your new or existing web learning product.

SECTION THREE : SLIDE 01

TRANSITION

Cross fade

CONTENT

Section Three: Integration


Integration

Site Audit•Plan Site Structure•

Identify Content Type•

AUDIO

We will discuss three categories of integration, including: performing a site audit, planning site structure, and identifying content type.


TRANSITION

Cross fade

CONTENT

Integration

Site Audit (reveal as discussed) Plan Site Structure (reveal as discussed) Identify Content Type (reveal as discussed)


Perform a Site Audit

AUDIO

If you are evaluating a current web site or learning product, you should begin by performing a site audit. Follow these three steps to effectively evalu-ate your current accessibility integration:


TRANSITION

Cross fade

CONTENT




Accessibility Evaluation Tools

AUDIO

Check existing site content with accessibility evaluation tools.

Use standards web sites like W3C.org to locate a variety of web accessibility evaluators, including screen readers, code analysis, and other tools.


TRANSITION

Cross fade

CONTENT


Accessibility Evaluation Tools

GRAPHIC—logos and URLs of web accessibility tools



Life without Plug-ins

AUDIO

Experience limited views of site with the browser plug-ins.

Try disabling javascript, Java, flash, and other web add-ons. Then, try visiting your site, and see what changes may result.


TRANSITION

Cross fade

CONTENT


Life without Plug-ins

GRAPHIC—flash plug-in with X through it



Evaluate structure and coding standards

AUDIO

Examine structure and markup procedures, evaluat-ing for correct semantic usage.

Once again, you can use standards-compliant evaluation tools (like WC3) to evaluate the quality of your code and markup.


TRANSITION

Cross fade

CONTENT


Evaluate structure and coding standards

GRAPHIC—code validators with URLs


Plan Site Structure

AUDIO

When developing a new project, or when creating a plan to update existing content, be sure to plan your site structure.


TRANSITION

Cross fade

CONTENT

Plan Site Structure


Plan Site Structure

Develop properly-formed structure

AUDIO


Use header structure to style text and communi-cate hierarchy (<h1> to <h6>).

Write descriptive alt tags for all inaccessible media (including images and multimedia).

Use unordered and ordered lists for any list-orient-ed content, including navigation.

Properly identify table headings, footers, and data areas with captioning.


TRANSITION

Cross fade

CONTENT

Plan Site Structure


GRAPHIC—interactive feature


Plan Site Structure

Style text consistently and appropriately

AUDIO


Use <strong>, <em>, and related tags to style text in-line.

Use <div> and <span> tags to structure content in meaningful ways.

Use proper CSS markup to style text and other content, separating display (based on accessibility method) from content.


TRANSITION

Cross fade

CONTENT

Plan Site Structure


GRAPHIC—table comparing incorrect and correct text markup


Identify Content Type

AUDIO


Assign appropriate meta tags to identify encoding type and device suitability.

Include CSS files optimized for screen readers and alternate output devices.


TRANSITION

Cross fade

CONTENT


GRAPHIC—code examples of proper meta and alternate css tags


Review

How to Plan?•How to Structure?•How to Identify?•

AUDIO

Now, let’s review what we have just discussed:

Always develop a content-based plan before start-ing the development process by performing a site or content evaluation.

Use web standards and a consistent, semantically-valid approach to structure your site.

Use meta tags and alternate css files to target a wide variety of devices and accessibility scenarios.


TRANSITION

Cross fade

CONTENT

Review

How to Plan? (reveal as discussed) How to Structure? (reveal as discussed) How to Identify? (reveal as discussed)


Resources

http://www.access-board.gov/sec508/standards.•htm

http://www.w3.org/WAI/•http://www.webaim.org/•

http://www.section508.gov/ •http://wave.webaim.org/ •

AUDIO

You may find these resources helpful during the evaluation process.


TRANSITION

Cross fade

CONTENT

Resources

http://www.access-board.gov/sec508/standards.htm http://www.w3.org/WAI/ http://www.webaim.org/ http://www.section508.gov/; http://wave.webaim.org/

storyboard

Entertainment & Humor