Storyboards for EDET 603 Final Project

1. INTRODUCTION: SLIDE 01
AUDIO
Welcome to this instructional module introducing
the concept of web accessibility. We will begin by
reviewing the navigation tools and options that will GRAPHIC—technology
be available throughout the module.
Introduction to Web Accessibility
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.
GRAPHIC—human interaction
If you have trouble following the audio voiceover,
a captioned option is also available for greater
accessibility and learning.
TRANSITION CONTENT
Cross fade Introduction to Web Accessibility (centered)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

2. INTRODUCTION : SLIDE 02
AUDIO
We will discuss the following topics in this course:
1. First, we will introduce the topic of web acces- Overview
sibility, including scope and definitions.
2. Then we will discuss the consequences of
poorly planned or badly executed web acces- • Introduction
sibility, and who is affected.
• Consequences
3. Finally, we will discuss some easy ways to
integrate web accessibility into your new or
• Integration
existing learning environment.
TRANSITION CONTENT
Cross fade Overview
Each element fades in as discussed Introduction (fades in as text is read)
Consequences (fades in as text is read)
Integration (fades in as text is read)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

3. SECTION ONE : SLIDE 01
AUDIO
First, we will complete an Introduction to web ac-
cessibility.
As the internet has developed, technologies have
SECTION ONE
gradually enabled a variety of users to access con-
tent using assistive devices.
With the advent of government-mandated ac-
Introduction to Web Accessibility
cessibility standards, accessibility standards have
become both more complex and more necessary.
TRANSITION CONTENT
Cross fade Section One: Introduction to Web Accessibility
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

4. SECTION ONE : SLIDE 02
AUDIO
To begin, we will need to establish a working
definition of web accessibility, so that we can
adequately gauge our progress throughout this
Working Definition
course.
According to Wikipedia, Web accessibility refers to Web accessibility refers to the practice of
making websites usable by people of all
the practice of making websites usable by people
of all abilities and disabilities.
abilities and disabilities.
(Wikipedia)
TRANSITION CONTENT
Cross fade Working Definition
Web accessibility refers to the practice of making websites usable by people of all abilities and disabilities. (reveal when
discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

5. SECTION ONE : SLIDE 03
AUDIO
There are two primary categories of accessibility
that must be considered as we approach the topic
of web accessibility:
Accessibility Types
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-
GRAPHIC—disability GRAPHIC—technology
ment. This includes factors such as browser and
standards compliance,
TRANSITION CONTENT
Cross fade Accessibility Types
(disability graphic)
(technology graphic)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

6. SECTION ONE : SLIDE 04
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 Types of Disability
benchmark is important to make all web experi-
ences boundary-free.
TRANSITION CONTENT
Cross fade Types of disability
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

7. SECTION ONE : SLIDE 05
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
Types of Disability
developing accessibility with this legislation as a
benchmark is important to make all web experi-
ences boundary-free. 1. Visual: blindness or poor eyesight
GRAPHIC—braille overlay
TRANSITION CONTENT
Cross fade Types of disability
1. Visual: blindness or poor eyesight
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

8. SECTION ONE : SLIDE 06
AUDIO
Types of Disability
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
2. Motor/mobility: inability to use
developing accessibility with this legislation as a hand due to various medical conditions or
benchmark is important to make all web experi-
ences boundary-free. loss of fine motor control
GRAPHIC—screen reader
TRANSITION CONTENT
Cross fade Types of disability
2. Motor/mobility: inability to use hand due to various medical conditions or loss of fine motor control
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

9. SECTION ONE : SLIDE 07
AUDIO
Accessibility standards are mandated by the
government for disabled users through Section
508 legislation. Several categories of web sites
Types of Disability
are required to be compliant with this statute, but
developing accessibility with this legislation as a
benchmark is important to make all web experi- 3. Auditory: deafness or impairment
ences boundary-free.
GRAPHIC—sound symbol or hearing aid/cochlear implant
TRANSITION CONTENT
Cross fade Types of disability
3. Auditory: deafness or impairment
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

10. SECTION ONE : SLIDE 08
AUDIO
Accessibility standards are mandated by the
Types of Disability
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
4. Seizures: photoepileptic seizures
benchmark is important to make all web experi- due to flashing or strobe
ences boundary-free.
GRAPHIC—flashing light
TRANSITION CONTENT
Cross fade Types of disability
4. Seizures: photoepileptic seizures due to flashing or strobe
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

11. SECTION ONE : SLIDE 09
AUDIO
Accessibility standards are mandated by the
Types of Disability
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
5. Cognitive/intellectual:
benchmark is important to make all web experi- developmental or learning
ences boundary-free.
GRAPHIC—child or adult concentrating
TRANSITION CONTENT
Cross fade Types of disability
5. Cognitive/intellectual: developmental or learning
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

12. SECTION ONE : SLIDE 10
AUDIO
Although technological impairment is certainly sec-
ondary to disability related disenfranchisement, it is
an important part of developing a quality learning
product.
Technological Impairment
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. GRAPHIC—browser icons GRAPHIC—flash and java
Your primary user should not be unnecessarily (Safari, IE, FireFox, et al) plug-in icons
limited in their web experience because they lack a
certain browser or plug-in.
TRANSITION CONTENT
Cross fade Technological Implications
(pictures of browser icons and common plug-in icons)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

13. SECTION ONE : SLIDE 11
AUDIO
Let’s review the things we just learned about web
accessibility:
Do you remember the components of the defini- Review
tion for web accessibility. The definition includes
the following: “Web accessibility refers to the prac-
• Definition (inset quote)
tice of making websites usable by people of all
abilities and disabilities.”
We also discussed two categories of accessibility
• Categories of Accessibility Limitation
limitation: disability and technologically related. We
will focus on the first user segment for the majority
of this course.
TRANSITION CONTENT
Cross fade Review
Definition (reveal as discussed)
Categories of Accessibility Limitation (reveal as discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

14. SECTION ONE : SLIDE 12
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.
Why is accessibility important?
TRANSITION CONTENT
Cross fade Why is accessibility important?
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

15. SECTION TWO : SLIDE 01
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- SECTION TWO
Consequences
tion.
TRANSITION CONTENT
Cross fade Consequences
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

16. SECTION TWO : SLIDE 02
AUDIO
We will discuss three categories of consequences,
including: technological, structural, and sense
deficiency. Consequences
• Technological
• Structural
• Sense Deficiency
TRANSITION CONTENT
Cross fade Consequences
Technological (reveal as discussed)
Structural (reveal as discussed)
Sense Deficiency (reveal as discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

17. SECTION TWO : SLIDE 03
AUDIO
Technological limitations can take a variety of forms.
Missing plug-ins is the most common manifestation
of technological inaccessibility. This occurs when Technological
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-
GRAPHIC—missing flash plug-in/broken media link
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 CONTENT
Cross fade Technological
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

18. SECTION TWO : SLIDE 04
AUDIO
Structural considerations make up a large segment
of accessibility issues, as they account for many of
the most common disability-related limitations.
Structural
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-
GRAPHIC—common web page without graphics or css loaded (before and after)
tural context for text to be understood.
TRANSITION CONTENT
Cross fade Structural
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

19. SECTION TWO : SLIDE 05
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.
Sense Deficiency
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
GRAPHIC—media with close captioning
integration, are inaccessible to the visually-chal-
lenged.
TRANSITION CONTENT
Cross fade Sense Deficiency
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

20. SECTION TWO : SLIDE 06
AUDIO
Now, let’s review what we have just discussed:
A variety of users are affected by accessibility de-
ficiencies, including technologically disadvantaged Review
and sense deprived users. These users can be
helped by proper structural markup and adequate
• Who is affected?
fall-back measures.
Accessibility is important as it ensures a quality
experience for all users, regardless of technology
• Why is accessibility important?
or disability.
TRANSITION CONTENT
Cross fade Review
Who is affected? (reveal as discussed)
Why is accessibility important? (reveal as discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

21. SECTION TWO : SLIDE 07
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?
How do we create web accessibility?
TRANSITION CONTENT
Cross fade How do we create web accessibility?
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

22. SECTION THREE : SLIDE 01
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
Integration
TRANSITION CONTENT
Cross fade Section Three: Integration
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

23. SECTION THREE : SLIDE 02
AUDIO
We will discuss three categories of integration,
including: performing a site audit, planning site
structure, and identifying content type. Integration
• Site Audit
• Plan Site Structure
• Identify Content Type
TRANSITION CONTENT
Cross fade Integration
Site Audit (reveal as discussed)
Plan Site Structure (reveal as discussed)
Identify Content Type (reveal as discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

24. SECTION THREE : SLIDE 03
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:
Perform a Site Audit
TRANSITION CONTENT
Cross fade Perform a Site Audit
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

25. SECTION THREE : SLIDE 04
AUDIO
Check existing site content with accessibility
evaluation tools. Perform a Site Audit
Use standards web sites like W3C.org to locate a
Accessibility Evaluation Tools
variety of web accessibility evaluators, including
screen readers, code analysis, and other tools.
GRAPHIC—logos and URLs of web accessibility tools
TRANSITION CONTENT
Cross fade Perform a Site Audit
Accessibility Evaluation Tools
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

26. SECTION THREE : SLIDE 05
AUDIO
Experience limited views of site with the
browser plug-ins. Perform a Site Audit
Try disabling javascript, Java, flash, and other web
Life without Plug-ins
add-ons. Then, try visiting your site, and see what
changes may result.
GRAPHIC—flash plug-in with X through it
TRANSITION CONTENT
Cross fade Perform a Site Audit
Life without Plug-ins
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

27. SECTION THREE : SLIDE 06
AUDIO
Examine structure and markup procedures, evaluat-
ing for correct semantic usage. Perform a Site Audit
Once again, you can use standards-compliant
Evaluate structure and coding standards
evaluation tools (like WC3) to evaluate the quality
of your code and markup.
GRAPHIC—code validators with URLs
TRANSITION CONTENT
Cross fade Perform a Site Audit
Evaluate structure and coding standards
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

28. SECTION THREE : SLIDE 07
AUDIO
When developing a new project, or when creating
a plan to update existing content, be sure to plan
your site structure.
Plan Site Structure
TRANSITION CONTENT
Cross fade Plan Site Structure
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

29. SECTION THREE : SLIDE 08
AUDIO
Develop properly-formed structure Plan Site Structure
Use header structure to style text and communi-
cate hierarchy (<h1> to <h6>).
Develop properly-formed structure
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.
GRAPHIC—interactive feature
Properly identify table headings, footers, and data
areas with captioning.
TRANSITION CONTENT
Cross fade Plan Site Structure
Develop properly-formed structure
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

30. SECTION THREE : SLIDE 09
AUDIO
Style text consistently and appropriately
Plan Site Structure
Use <strong>, <em>, and related tags to style text
in-line.
Use <div> and <span> tags to structure content in Style text consistently and appropriately
meaningful ways.
Use proper CSS markup to style text and other
content, separating display (based on accessibility
method) from content. GRAPHIC—table comparing incorrect and correct text markup
TRANSITION CONTENT
Cross fade Plan Site Structure
Style text consistently and appropriately
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

31. SECTION THREE : SLIDE 10
AUDIO
Identify Content Type
Assign appropriate meta tags to identify encoding
type and device suitability. Identify Content Type
Include CSS files optimized for screen readers and
alternate output devices.
GRAPHIC—code examples of proper meta and alternate css tags
TRANSITION CONTENT
Cross fade Identify Content Type
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

32. SECTION THREE : SLIDE 11
AUDIO
Now, let’s review what we have just discussed:
Always develop a content-based plan before start- Review
ing the development process by performing a site
or content evaluation.
Use web standards and a consistent, semantically- • How to Plan?
valid approach to structure your site.
• How to Structure?
Use meta tags and alternate css files to target a
wide variety of devices and accessibility scenarios.
• How to Identify?
TRANSITION CONTENT
Cross fade Review
How to Plan? (reveal as discussed)
How to Structure? (reveal as discussed)
How to Identify? (reveal as discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008

33. SECTION THREE : SLIDE 12
AUDIO
You may find these resources helpful during the
Resources
evaluation process.
• 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/
TRANSITION CONTENT
Cross fade 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/
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008