storyboard
DESCRIPTION
Storyboards for EDET 603 Final ProjectTRANSCRIPT
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
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION ONE : SLIDE 02
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)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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,
SECTION ONE : SLIDE 03
TRANSITION
Cross fade
CONTENT
Accessibility Types
(disability graphic)
(technology graphic)
GRAPHIC—disability GRAPHIC—technology
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION ONE : SLIDE 04
TRANSITION
Cross fade
CONTENT
Types of disability
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Types of Disability
1. Visual: blindness or poor eyesight
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.
SECTION ONE : SLIDE 05
TRANSITION
Cross fade
CONTENT
Types of disability
1. Visual: blindness or poor eyesight
GRAPHIC—braille overlay
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Types of Disability
2. Motor/mobility: inability to use hand due to various medical conditions or
loss of fine motor control
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.
SECTION ONE : SLIDE 06
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
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Types of Disability
3. Auditory: deafness or impairment
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.
SECTION ONE : SLIDE 07
TRANSITION
Cross fade
CONTENT
Types of disability
3. Auditory: deafness or impairment
GRAPHIC—sound symbol or hearing aid/cochlear implant
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Types of Disability
4. Seizures: photoepileptic seizures due to flashing or strobe
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.
SECTION ONE : SLIDE 08
TRANSITION
Cross fade
CONTENT
Types of disability
4. Seizures: photoepileptic seizures due to flashing or strobe
GRAPHIC—flashing light
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Types of Disability
5. Cognitive/intellectual: developmental or learning
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.
SECTION ONE : SLIDE 09
TRANSITION
Cross fade
CONTENT
Types of disability
5. Cognitive/intellectual: developmental or learning
GRAPHIC—child or adult concentrating
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION ONE : SLIDE 10
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
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION ONE : SLIDE 11
TRANSITION
Cross fade
CONTENT
Review
Definition (reveal as discussed) Categories of Accessibility Limitation (reveal as discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION ONE : SLIDE 12
TRANSITION
Cross fade
CONTENT
Why is accessibility important?
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Consequences
Technological•Structural•
Sense Deficiency•
AUDIO
We will discuss three categories of consequences, including: technological, structural, and sense deficiency.
SECTION TWO : SLIDE 02
TRANSITION
Cross fade
CONTENT
Consequences
Technological (reveal as discussed) Structural (reveal as discussed) Sense Deficiency (reveal as discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION TWO : SLIDE 03
TRANSITION
Cross fade
CONTENT
Technological
GRAPHIC—missing flash plug-in/broken media link
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION TWO : SLIDE 04
TRANSITION
Cross fade
CONTENT
Structural
GRAPHIC—common web page without graphics or css loaded (before and after)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION TWO : SLIDE 05
TRANSITION
Cross fade
CONTENT
Sense Deficiency
GRAPHIC—media with close captioning
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION TWO : SLIDE 06
TRANSITION
Cross fade
CONTENT
Review
Who is affected? (reveal as discussed) Why is accessibility important? (reveal as discussed)
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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?
SECTION TWO : SLIDE 07
TRANSITION
Cross fade
CONTENT
How do we create web accessibility?
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION THREE : SLIDE 02
TRANSITION
Cross fade
CONTENT
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
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:
SECTION THREE : SLIDE 03
TRANSITION
Cross fade
CONTENT
Perform a Site Audit
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Perform a Site Audit
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.
SECTION THREE : SLIDE 04
TRANSITION
Cross fade
CONTENT
Perform a Site Audit
Accessibility Evaluation Tools
GRAPHIC—logos and URLs of web accessibility tools
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Perform a Site Audit
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.
SECTION THREE : SLIDE 05
TRANSITION
Cross fade
CONTENT
Perform a Site Audit
Life without Plug-ins
GRAPHIC—flash plug-in with X through it
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Perform a Site Audit
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.
SECTION THREE : SLIDE 06
TRANSITION
Cross fade
CONTENT
Perform a Site Audit
Evaluate structure and coding standards
GRAPHIC—code validators with URLs
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION THREE : SLIDE 07
TRANSITION
Cross fade
CONTENT
Plan Site Structure
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Plan Site Structure
Develop properly-formed structure
AUDIO
Develop properly-formed structure
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.
SECTION THREE : SLIDE 08
TRANSITION
Cross fade
CONTENT
Plan Site Structure
Develop properly-formed structure
GRAPHIC—interactive feature
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Plan Site Structure
Style text consistently and appropriately
AUDIO
Style text consistently and appropriately
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.
SECTION THREE : SLIDE 09
TRANSITION
Cross fade
CONTENT
Plan Site Structure
Style text consistently and appropriately
GRAPHIC—table comparing incorrect and correct text markup
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
Identify Content Type
AUDIO
Identify Content Type
Assign appropriate meta tags to identify encoding type and device suitability.
Include CSS files optimized for screen readers and alternate output devices.
SECTION THREE : SLIDE 10
TRANSITION
Cross fade
CONTENT
Identify Content Type
GRAPHIC—code examples of proper meta and alternate css tags
COLIN GRAY | EDET 603 FINAL PROJECT | 27 OCT 2008
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.
SECTION THREE : SLIDE 11
TRANSITION
Cross fade
CONTENT
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
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.
SECTION THREE : SLIDE 12
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/