Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Storyboard

1,263 views

Published on

Storyboards for EDET 603 Final Project

  • Be the first to comment

  • Be the first to like this

Storyboard

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

×