Presentation is loading. Please wait.

Presentation is loading. Please wait.

State of California Day Two TOTAL TIME: 6 hours.

Similar presentations


Presentation on theme: "State of California Day Two TOTAL TIME: 6 hours."— Presentation transcript:

1 State of California Day Two TOTAL TIME: 6 hours

2 Agenda - Day 2 Level A Conformance Practice Double-A Conformance Lunch
Triple-A Conformance Best Practices Content Redevelopment Resources Summary Module 8 TIME: 45 minutes (8:30 - 9:15) Agenda to Objective slide: 10 minutes (8:30 - 8:40) DO: Welcome participants. Conduct a quick review of Day One by asking the following questions. Which version of HTML has the State adopted? What is one benefit of moving to CSS? What is one 508 requirement? ASK: Did anyone surf the Internet last night? Did you note any accessibility issues on your favorite websites? SAY: This morning we will learn how to raise our level of compliance with California standards from basic 508 compliance to WCAG 1.0 Level A conformance. Today’s focus includes: CONTINUED ON NEXT PAGE

3 Module 8 WCAG Level A Conformance
Objectives At the completion of this module, you will be able to: Explain the basic difference between Section 508 compliance and Level A conformance Explain the meaning of each Level A requirement Explain how to implement each Level A requirement DO: Introduce Module 8 by stating the objectives on the slide.

4 How WCAG and Section 508 Relate
Section 508 § is loosely based on WCAG 1.0 Priority 1 checkpoints WCAG has some Priority 1 checkpoints not included in Section 508 § § has some additional standards Module focus: WCAG Level A Conformance Level A = Meets all Priority 1 checkpoints We will look at each Priority 1 checkpoint SAY: Please turn to your Quick Reference chart. The Quick Reference chart is organized by category to allow you to quickly focus on the items of importance on your site. In addition, we have cross-referenced the Section 508 sub-paragraph where applicable. Section 508 is loosely based on the Priority 1 Checkpoints, but WCAG has some checkpoints that are not included in Section 508. Similarly, Section 508 has some additional standards that are not included in WCAG 1.0. In this module we are going to focus on Level A conformance, which requires meeting all WCAG Priority 1 checkpoints. We will look at each Priority 1 checkpoint.

5 Checkpoint 1.3 Multimedia
“Until user agents can automatically read aloud the text equivalent of a visual track, provide an auditory description of the important information of the visual track of a multimedia presentation.” Complements Section 508 § (b) DO: Read the checkpoint. SAY: Checkpoint 1.3 is complementary to sub-paragraph (b) (WCAG Checkpoint 1.4). Checkpoint 1.3 requires, for multimedia presentations, an audio equivalent of important visual content such as text and descriptions of action. In other words, if there are actions or words on the screen that are *not* included or described in the audio track, you need to include them. Due to time constraints, a demonstration of this technique is not possible in this course.

6 Checkpoint 4.1 Natural Language
“Clearly identify changes in the natural language of a document's text and any text equivalents (e.g., captions).” No Section 508 equivalent Important for Braille readers Multilingual speech synthesizers Appropriate use of machine translators DEMO: 5 minutes (8:45 - 8:50) DO: Read the checkpoint. SAY: Identifying changes in language is important because: Users who are reading the document in Braille will be able to substitute appropriate control codes (markup) where language changes occur to ensure that the Braille translation software will generate the correct characters (e.g., accent marks). Speech synthesizers that have multilingual capabilities will be able to generate the text with the proper pronunciation. Users will be able to have unfamiliar languages translated by machine translators. IMPORTANT: This also makes content available to the user who is illiterate in the primary language.

7 Natural Language Accessibility: Before
<p>And with a certain je ne sais quoi, she entered both the room, and his life, forever. <q>My name is Natasha,</q> she said. <q>Piacere,</q> he replied in impeccable Italian, locking the door.</p> SAY: With apologies for the cheesy, dime-store novel character of this prose, note that in this trilingual example, the changes in the natural language (English) are not identified. Note that when a person is speaking, we have used the proper XHTML structural markup for short quotations -- the <q> element.

8 Natural Language Accessibility: After
<p>And with a certain <span lang="fr">je ne sais quoi</span>, she entered both the room, and his life, forever. <q>My name is Natasha,</q> she said. <q lang="it">Piacere,</q> he replied in impeccable Italian, locking the door.</p> SAY: Here, the changes in the natural language are properly tagged. Note that the French phrase “je ne sais quoi” is wrapped in a <span> element and we have used the “lang” attribute with a value of “fr”. Where the quotation switches to Italian, we have given the <q> element a “lang” attribute value of “it”. The two-character language designations are ISO standards. The link to the ISO standards is included on the DOR Web Accessibility website. Oddly, calling out the default natural language of your page is a WCAG Priority 3 Checkpoint even though calling out changes in the language is a Priority 1 Checkpoint!

9 Checkpoint 6.2 Dynamic Content
“Ensure that equivalents for dynamic content are updated when the dynamic content changes.” No Section 508 equivalent DEMO: 5 minutes (8:50 - 8:55) DO: Read the checkpoint. Go to URL: SAY: This is a database-driven website where, for example, imagery is pulled dynamically. Therefore, the values of the alt attributes -- or the longdesc text -- must be generated dynamically as well. Let’s look at a code example.

10 Dynamic Content: Before and After
<img src="./gallery/<% =artArray(11,thisRow) %>_thumb.jpg" border="0" width="155" alt="Gallery Picture" /> <img src="./gallery/<% =artArray(11,thisRow) %>_thumb.jpg” alt="<% =artArray(5,thisRow) %>" /> SAY: This example shows ASP-generated content for an art gallery site. For each image, if the “alt” attribute were static, say “Gallery Picture,” this is not at all helpful to the visitor. The “alt” attributes should *also* be pulled from the database, so you get, for example, “‘El Olivo’ by David Smith-Harrison.” Any equivalent content also must be dynamically generated (e.g., alt and longdesc attribute values). In other words, if the image is dynamically determined (for example, from a database pull), the “alt” attribute value must also be dynamically determined. You may have to include additional fields in your database to contain the data necessary for the “alt” attribute values. Note that the “border” and “width” attributes have been removed. Standard XHTML/CSS markup has these attributes specified in CSS.

11 Checkpoint 6.3 Scripting “Ensure that pages are usable when scripts, applets, or other programmatic objects are turned off or not supported. If this is not possible, provide equivalent information on an alternative accessible page.” Section 508 (l) and (m) Checkpoint 6.3: 5 minutes (8:55 - 9:00) DO: Read the checkpoint and note its 508 complement. SAY: Use the <noscript> tag and avoid using Java applets or Active-X objects if at all possible. If applets or objects must be used, ensure that information provided by the applet or object is available in an alternative form. Turning off scripting still allows the page to be used. Go to URL: Disable Javascript using the Web Extension menu in Firefox 1.5, and reload the URL. (NOTE: This shows how the menu is still “accessible” even though you do not have JavaScript.) Due to time constraints, we will not work through an example of this in this course.

12 Checkpoint 8.1 Script/Applet Compatibility with User Agents
“Make programmatic elements such as scripts and applets directly accessible or compatible with assistive technologies [Priority 1 if functionality is important and not presented elsewhere, otherwise Priority 2].” No Section 508 equivalent Checkpoint 8.1: 5 minutes (9:00 - 9:05) DO: Read the checkpoint. Ask participants what event handlers do. SAY: There are several accessibility requirements around scripts and applets. They all come at the subject in different nuanced ways, but all are designed to get you to this goal: All scripts, applets and objects should be as directly accessible to the visitor as possible, and that all *important information* provided by the script or applet is available even if the script or applet is not available. One way to make scripts directly accessible is to avoid using device-dependent handlers like “mouseover,” using “focus” instead. Due to time constraints, we will not work through an example in this course.

13 Checkpoint 14.1 Clear Language
“Use the clearest and simplest language appropriate for a site's content.” No Section 508 equivalent Checkpoint 14.1 to end of module: 10 minutes (9:05 - 9:15) DO: Read the checkpoint. ASK: What are some examples of confusing language you have seen on the Web? SAY: This is one of the most important requirements of content creation, and yet it is also the most overlooked.

14 Clear Language: Suggestions
Links Topic sentence at beginning of paragraph One main idea per paragraph Avoid slang, jargon, specialized meanings Use common words Active voice Avoid complex sentences SAY: These suggestions for clear writing should help make the content of your site easier to read for everyone, especially people with reading and/or cognitive disabilities. Strive for clarity and accuracy. Use short link phrases that make sense out of context or in the context of a series of links. Some user agents allow the visitor to browse a list of all of the links on a page. Hearing “click here,” “click here,” “click here” over and over can be frustrating. Use informative headings so users can scan rather than read in detail. The idea is to allow the visitor to scan the page aurally almost as fast as someone could scan it visually. State the topic of the sentence or paragraph at the beginning of the sentence or paragraph (this is called "front-loading"). This will help people who skim visually or with speech synthesizers. Limit each paragraph to one main idea. CONTINUED ON NEXT PAGE

15 Clear Language Tool: The Fog Index
Brian Reed: Hehe. Fox” index???? Alison de Grassi: Foggy or Foxy? I’m guessing the fog rules! Clear Language Tool: The Fog Index Fog Index = Average number of words per sentence + Percentage of words with 3 or more syllables X 0.4 Lower score means easier to read For example: Mark Twain, the Bible, TV Guide have a Fog Index of around 6 Time, Newsweek, and The Wall Street Journal have a Fog Index of around 11 SAY: To help determine whether your document is easy to read, consider using a measure of readability called the Fog Index. To calculate the Fog Index: Find the average number of words per sentence. Take a fair sample of 5 to 8 sentences. Count clearly independent clauses as separate sentences. Example: “When I saw the monster I ran; I jumped; I hid." This counts as three sentences. Calculate the percentage of words that are three syllables or more. Don't count proper names. Don't count verbs that make three syllables or have an added -es or -ed. Add these two figures. Example: if your average number of words per sentence was 15, and the percentage of words three syllables or more was 12 percent, add 15 and 12 to get 27. Multiply that sum by 0.4. The resulting number is the Fog Index, a rough measure of how many years of schooling it would take to understand what you have written. In our example, multiplying 27 by 0.4 equals a Fog Index of 10.8. CONTINUED ON NEXT PAGE

16 Module 8 Recap WCAG 1.0 guidelines overlap with Section 508 §1194.22
Both incorporated into State of California standards Level A conformance requires meeting all Priority 1 checkpoints DO: Briefly summarize the main points covered in Module 8. Ask participants for their overall reaction to Level A requirements (Priority 1 checkpoints). Ask what questions they have before they practice implementing Level A on their websites.

17 Module 9 Practice - Level A
Objectives At the completion of this module, you will be able to: Describe Level A problem areas you found on your websites Explain what steps you took (or can take) to correct the problems Explain why you took (or would take) these steps Module 9 TOTAL TIME: 50 minutes (9: :05) DO: Introduce Module 9 by stating the objectives on the slide. Large Group Activity: 10 minutes (9:15 - 9:25) Explain that participants will now have an opportunity to practice making modifications to their own websites. They will work in the same pairs as earlier. ASK: Ask for one URL of a participant site where there are known accessibility issues. Have the class identify 1 to 2 elements on the site that do not conform to Level A requirements.

18 Practice Activities Work in pairs:
Identify compliance issues in your own websites Refer to your Quick Reference Guide Use the worksheets on pages 35 and 36 Make at least one modification to bring an element into compliance NOTE: Later today you will be creating an action plan for further changes to your site. As you work, think about what those actions might be. Small Group Activity: 40 minutes (9: :05) DO: Explain that participant pairs will now spend 15 minutes looking at their own websites, identifying what needs to be changed to meet a Priority 1 checkpoint. Explain that optionally, if they feel comfortable, they may use TextPad to practice making modifications to bring an element into Level A conformance. Direct participants to the Quick Reference Guide and to the worksheets on pages 41 and 42 in their materials. ASK: What questions do you have before we begin? Time the activity: At 10 minutes, announce that in 5 minutes they will switch and look at their partner’s website. At 15 minutes, tell participants to switch. In 10 minutes, announce that 5 minutes remain. In 5 more minutes, end the activity. CONTINUED ON NEXT PAGE

19 Module 10 Double-A Conformance
Objectives At the completion of this module, you will be able to: Explain the basic difference between Level A and Double-A conformance Explain the meaning of each Double-A requirement Explain how to implement Double-A requirements Module 10 TOTAL TIME: 125 minutes (10: :25) DO: Introduce Module 10 by stating the objectives on the slide. SAY: The State has adopted Double-A conformance as a part of its Web accessibility standards. In previous modules, we learned how to achieve 508 compliance and Level A conformance. Now we are going to learn how to raise our websites up to Double-A conformance. We will do this in a two-part activity.

20 Research Activity Work in teams of five:
Research (40 min.) how to implement your three checkpoints Prepare (15 min.) to present what you learned to the class Present your findings to the class and answer questions (7 min.) Meaning of checkpoints and how to implement them Small Group Activity: 55 minutes (10: :15) DO: Assign five teams of five participants each. Direct each team to draw three slips of paper from a hat. Each slip gives a brief description of one Double-A requirement (i.e., Priority 2 checkpoint). Review the directions on the slide: Teams have 40 minutes to research how to implement their 3 checkpoints, 15 minutes to prepare to present their findings to the class, and 7 minutes to present to the class. They can use a flip chart and markers to present. They will have URLs to give to the instructor for display on-screen. Direct participants to the Quick Reference Guide and to pages 43 to 59 in their materials for a complete list of Priority 2 checkpoints, or online at Distribute flip charts and markers to each group. Ask what questions participants have before they begin. CONTINUED ON NEXT PAGE

21 Module 11 Practice - Double-A
Objectives At the completion of this module, you will be able to: Describe Double-A issues you found on your websites Describe how the items identified on the sites could be brought into compliance Module 11 TOTAL TIME: 65 minutes (1:25 - 2:30) DO: Introduce Module 11 by stating the objectives on the slide. ORAL QUIZ: 15 minutes (1:25 - 1:40) NOTE: This is to test participants’ learning up to this point. Teams compete to get the most correct answers. As an alternative to team competition, you may ask questions of the entire class. ASK: Ask each question (or as many as time permits) provided on the next two pages. Direct teams to discuss or do research to find the answers. When a team thinks they have the correct answer, they should raise their hands, and a team member (they select) states the answer. If it is correct, move on to the next question. If not, have the teams keep working to find the correct answer. First team with a correct answer to any question gets a point. Keep a tally of team points. The team with the most correct answers wins.

22 Team Challenge: Double-A Non-conformance
Work in teams of five: Surf the Web for Double-A violations Keep track of what you find Number of violations What Priority 2 checkpoint is violated You have 15 minutes! CHALLENGE ACTIVITY: 35 minutes (1:40 - 2:15) DO: Explain that participants will now have an opportunity to compete in an activity to see how many Double-A violations they can find. Keep the class in the same five teams as earlier. Explain the directions on the slide: Teams will have 15 minutes to surf the Web, looking at any websites they wish, to find possible Double-A issues. Explain that each team will keep track of the number of sites they looked at and how many and what type of Double-A issues they found. They should find as many different violations as possible, rather than repeated occurrences of the same problem. Teams should be specific about what they find. Explain that first- and second-place teams (with the most issues identified) will win a prize. NOTE: Prizes are optional; you can just declare a winning team. ACTIVITY DIRECTIONS CONTINUED ON NEXT PAGE

23 FACILITATOR REFERENCE (continued)
Elastic Design: Another benefit of using ems over keywords is that you can use ems to define the dimensions of your entire layout (including images!), which will then scale in proportion to the text. A great example of a scalable design is:

24 SAY: All of these grouping mechanisms should be used when appropriate and natural, i.e., when the information lends itself to logical groups. Content developers should not create groups randomly, as this will confuse all users.

25 Module 12 Triple-A Conformance Issues
Objectives At the completion of this module, you will be able to: Explain in general what is meant by Triple-A compliance State several Triple-A requirements Module 12 TOTAL TIME: 20 minutes (2:30 - 2:50) SAY: We now have the basic knowledge required to bring our sites to Double-A conformance. There is still one more level of WCAG conformance we can achieve. We briefly covered Triple-A conformance earlier. Our goal for Triple-A in this training is awareness, not technical proficiency. By the end of this module, you will be able to explain in general what we mean by Triple-A compliance (Priority 3 checkpoints), and state several of the Triple-A requirements. DO: ASK the questions on the following page, to help participants assess their current awareness of Triple-A requirements. CONTINUED ON NEXT PAGE

26 QUESTIONS (continued)
How must abbreviations and acronyms be handled in a Triple-A compliant document? A: Use the “title” attribute of the <abbr> and <acronym> elements to expand abbreviations and acronyms the first time they are used. What is the one word you would use to describe the presentation style of Web pages on a Triple-A compliant website? A: Consistent. If you wanted to use “newspaper columns” (parallel columns of text) on a Triple-A compliant website, what would you have to do? A: Provide a linear text alternative. SAY: Triple-A conformant sites must meet all Priority 3 WCAG checkpoints. Some of these items you may find difficult or impossible to achieve, given time, budget, or technological constraints. Others may seem subjective and difficult to evaluate. Remember that your user community is your customer and your best judge of conformance. CONTINUED ON NEXT PAGE

27 DO: Based on participant responses, debrief the class by offering detail or examples as needed from the following Facilitator Reference slides. Refer participants to pages 63 to 69 in their materials for taking notes on the Triple-A requirements. NOTE: If there is enough time, walk through all the information on the Facilitator Reference slides.

28 FACILITATOR REFERENCE
WCAG 1.0 Triple-A (Priority 3) (continued) 4.3 Identify the primary natural language of a document. In the <html> element, add the following attributes (note that some editors will add these automatically for you): <html xmlns=" xml:lang="en" lang="en"> Only the “lang” attribute is required for WCAG conformance, but other attributes are for XHTML 1.0 Strict compliance. 5.5 Provide summaries for tables using the “summary” attribute of the <table> element. 5.6 Provide abbreviations for table headers using the “abbr” attribute of the <th> element. 9.4 Create a logical tab order through links, form controls, and objects. Use a combination of layout and, for form controls, the “tabindex” attribute. MORE CHECKPOINTS NEXT PAGE

29 FACILITATOR REFERENCE
WCAG 1.0 Triple-A (Priority 3) (continued) 13.8 Place distinguishing information at the beginning of headings, paragraphs, lists, etc. 13.9 Provide information about document collections (i.e., documents comprising multiple pages). Content developers should use the LINK element and link types (refer to [HTML4], section 6.12) to describe document navigation mechanisms and organization. Some user agents may synthesize navigation tools or allow ordered printing of a set of documents based on such markup. Provide a means to skip over multi-line ASCII art. The craigslist.org forums are a good example of the use of multi-line ASCII art -- although it doesn’t meet Triple-A requirements. 14.2 Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page. If a picture is worth 1,000 words, to those who can’t see the picture the words are worth more. 14.3 Create a style of presentation that is consistent across pages.

30 Module 13 Best Practices Objectives
At the completion of this module, you will be able to: Describe several best practices adopted by the State of California IOUCA Module 13 TOTAL TIME: 20 minutes (2:50 - 3:10) DO: Introduce this module by saying that as a part of the Web Accessibility Initiative, the State has adopted a set of five best practices. The IOUCA approved these five best practices in addition to the Section 508 and WCAG Double-A requirements on July 14, 2006.

31 Module 13 Best Practices In addition to the Section 508 and WCAG Double-A requirements adopted by the State of California, the following five best practices were approved: 9.c - Avoid using small images or text as links. [Ref: CA DOR #1] 12.a - Avoid using frames. [Ref: CA DOR #2 Based on WCAG 10] 18.c - If a downloadable document cannot be provided in an accessible electronic format, provide information on how to request an alternate format. [Ref: CA DOR #3] 19.a. - Provide contact information. [Ref: CA DOR #4] 20.a. - Test for accessibility. [Ref: CA DOR #5] DO: Refer participants to the references noted on pages 71 and 72 in their materials. Briefly review each best practice. 9.c - Avoid using small images or text as links. [Ref: CA DOR #1] Make sure that images used for links are reasonably large, preferably 32 pixels by 16 pixels or larger. Use standard or enlarged font sizes for text links, and avoid using text links that are shorter than four characters in length. Additionally, avoid placing small links close together. 12.a - Avoid using frames. [Ref: CA DOR #2 Based on WCAG 10] Use frames sparingly. If a frame is not necessary for page content, eliminate it. 18.c - If a downloadable document cannot be provided in an accessible electronic format, provide information on how to request an alternate format. [Ref: CA DOR #3] Provide information regarding whom to contact to obtain the document in alternate formats (e.g., Braille, large-print, or audio-cassette). Alternate formats must be available in a timely manner. CONTINUED ON NEXT PAGE

32 BEST PRACTICES (continued)
19.a. - Provide contact information. [Ref: CA DOR #4] List accessibility contact information on the home page or contact page. Inquiries about accessibility, especially requests for materials in alternate format, need to be handled in a timely manner. 20.a. - Test for accessibility. [Ref: CA DOR #5] Use browser and operating system accessibility features and leading assistive technology software such as screen readers and magnifiers to test for functional accessibility. Use an automated testing tool to identify common accessibility problems. If possible, do user testing with people with disabilities. GROUP DISCUSSION: 10 minutes ASK what issues participants think they will have in complying with the best practices? Announce a 15-minute BREAK (3:10 - 3:25)

33 Module 13 Recap The State of California has adopted five “Best Practices” in addition to the requirements of Section and WCAG Double-A requirements. DO: Briefly summarize the main points of Module 13.

34 Module 14 Content Redevelopment
Objectives At the completion of this module, you will be able to: Explain why we don’t post documents Name one example of a document conversion tool Explain some of the issues related to Accessible JavaScript Explain some of the issue related to Accessible Flash Module 14 TOTAL TIME: 10 minutes (3:25 - 3:40) DO: Introduce Module 14 by stating the objectives on the slide.

35 Why Not to Post Documents
MS Office documents are not natively accessible Word, PowerPoint, etc. Presents usability problems (visitors must have MS Office) Conversion tools available Convert Word & PowerPoint to “accessible HTML” SAY: Microsoft Office documents such as Word, PowerPoint, etc. are not natively accessible. They prevent usability problems if visitors do not have Microsoft Office. Even if they do, the browser pops up a dialog box asking them what application to open in, then they have to find the application, then they may be told to upgrade their version of the application…etc. XHTML is the native language of the Web and you should use it *unless there is a compelling reason not to*! For example: WYSIWYG is required for legal purposes Users specifically have requested non-XHTML format Conversion tools are available that will convert Word and PowerPoint to what is called “accessible HTML.” However, the conversion is fairly suspect and automated tools can only do so much. Automated conversion does not obviate the webmaster’s responsibility to check the accessibility of the document thoroughly after conversion.

36 Accessible PDFs (1 of 2) PDF files are not inherently accessible
PDF viewer required Post PDFs only when necessary When WYSIWYG documents are required Forms intended for off-line submittal Conversion to HTML represents constitutes “undue burden” Many PDF-to-HTML conversion tools available Reference: SAY: PDF files are not inherently accessible. A PDF viewer is required for one thing, so the visitor goes through the “open in application” rigmarole again. This is inherently disruptive to the browsing process. Post PDFs only when *there is a compelling need to do so*: WYSIWYG documents are required Legal reasons Forms for off-line submittal Conversion to HTML presents an undue burden There are many PDF-to-HTML conversion tools available.

37 Accessible PDFs (2 of 2) When posting PDFs Further Reading
Go back to original file (e.g., Word) and clean it up! Create a tagged PDF file with appropriate accessibility markup Further Reading Facts and opinions About PDF accessibility PDF Accessibility SAY: If you *must* post a PDF: Try to go back to the source document (e.g., a Word file) and clean up the document as much as possible. Use Word styles properly (Heading 1, Heading 2, etc.) Use internal hyperlinking, footnotes, etc. Tag images with alt attributes Use Acrobat Pro (7 or later) to create a tagged PDF file with appropriate accessibility markup. Use the accessibility features in Acrobat to create and adjust tags There is a lot of material on the Web on this subject. Cited here are two great articles on PDF and accessibility.

38 Accessible JavaScript (1 of 2)
Content and functionality must be made accessible to assistive technologies Page must be fully navigable via the keyboard To make JavaScript accessible: Use object detection! Use device-independent handlers .mouseover => .focus .mouseout => .blur SAY: Accessibility of JavaScript is a hotly debated subject and is constantly evolving. To make content and functionality accessible to assistive technologies, the page must be fully navigable via the keyboard. To make JavaScript accessible, use object detection. Object detection allows you to find out if a particular object/method is supported before you use it! Example: If (IE-style object exists) then do something with it ElseIf (Mozilla-style object exists) then do something with that ElseIf (standard object exists) then use that End If Device-independent handlers do not require the use of the mouse. Use “focus” and “blur” as opposed to “mouseover” and “mouseout”. Note that these are the standard DOM events as opposed to the old onMouseOver, onFocus events.

39 Accessible JavaScript (2 of 2)
Do not modify or override normal browser functionality - causes confusion If native accessibility cannot be achieved, provide alternative content Page should “transform gracefully” if JavaScript is not present (or not fully present) SAY: Do not modify or override normal browser functionality. It causes confusion. Yes, we all know that you can change the way the “back” button works, etc., but it’s not a cool thing to do from a usability perspective. If native accessibility cannot be achieved, provide alternative content. This means if you cannot make your scripts natively accessible using device-independent event handlers and object detection, provide alternative content using the <noscript> element. The page should “transform gracefully” if JavaScript is not present (or not fully present). This means that all of the *important information* and functionality should be available even if JavaScript is not.

40 Flash JK Rowling Site www.jkrowling.com features Keyboard navigation
Accessibility menu Ability to Enlarge text and other content Pause movement Turn off background sounds Sound glossary Adapts to presence of screen reader technology DO: Demo all the features of the JK Rowling site listed on the slide. SAY: There are compelling reasons to use Flash. For example, if you are trying to capture the imagination and attention of your audience, or if you are trying to convey a difficult concept. J.K. Rowling of Harry Potter fame launched this site in early 2006. Building this site took a small army of experts. Shows what you can do if you sell a bazillion books! Only the latest version of Flash (MX) does what you see here. There’s a great article on accessible flash: “Creating Accessible Macromedia Flash Content” URL: The upshot is that well thought-out and well designed Flash can be quite accessible. Well designed Flash is, unfortunately, difficult and rare.

41 Module 14 Recap Content redevelopment for accessibility Rationale
Tools and methods Examples MS Office PDF JavaScript Flash DO: Briefly summarize the main points covered in Module 14.

42 Module 15 Resources Objectives
At the completion of this module, you will be able to: Use the Web Accessibility Resources website created by Design Media Find resources for XHTML and CSS Find online resources for Section 508 and WCAG requirements Module 15 TOTAL TIME: 5 minutes (3:40 - 3:45) DO: Introduce Module 15 by stating the objectives on the slide. Direct participants to pages 75 and 76 in their materials. Briefly point out the categories of resources listed there. Link to the DOR Web Accessibility website. Briefly walk through the site.

43 Module 16 Summary Objectives
At the completion of this module, you will be able to: List the key points of the training Identify specific steps you will take to bring your websites into compliance Module 16 TOTAL TIME: 15 minutes (3:45 - 4:00) DO: Introduce Module 16 by stating the objectives on the slide.

44 Key Points California has adopted accessibility standards for State websites Section 508 § WCAG Double-A Five “Best Practices” WCAG Triple-A is an additional, higher standard XHTML and CCS are tools for standards-based markup Resources are available to help you make websites accessible Online validation tools do not take the place of user community testing and developer judgment Accessible design makes Web access easier for all users DO: Summarize the key points from the course.

45 Eating the Elephant Overwhelmed? Take Small Bites!
Start with XHTML & CSS The Elephant is Smaller Than You Think Working with Non-Compliant Templates Section 508, etc. Daily Practices SAY: At this point you probably feel overwhelmed by the amount of work required to bring your site fully into compliance with California’s Web accessibility requirements. This is understandable. But don’t worry! It is not necessary to do this all at once. You don’t have to “eat the elephant” in one gulp! Small Bites To make the elephant easier to get down, one suggestion would be to eat it in small bites. Start by committing today to writing good, clean, structurally sound XHTML from here on out. “Starting tomorrow, every page I touch will be brought into compliance with XHTML 1.0 Strict requirements.” This will go a long way toward making your site more accessible. The Elephant is Smaller Than You Think In the DOR Web Accessibility Quick Reference, you’ll notice that the requirements are organized into categories like “Scripting” and “Frames.” Well, if your site doesn’t use frames, you get to ignore those requirements! That elephant just got a little bit smaller!

46 Your Individual Action Plan
Describe what you will do to bring your websites into Section 508 compliance and WCAG 1.0 Double-A conformance Share your plans with your partner DO: Direct participant to the Action Plan on page 79 in their materials. Explain that this is an opportunity for them to identify some specific things they will do as a result of what they have learned in the last two days. Direct them to spend 5 minutes filling out the Action Plan. After 5 minutes, direct them to share their plans with their partner. After a few minutes of sharing, ask the group for a few examples. CLOSE THE CLASS: Address any Post-it® questions still remaining on the flipchart. ASK what remaining questions participants have. Refer to the class roster and encourage people to contact each other in the future if they have questions. Thank participants for their time and contribution. Distribute the Evaluation forms and ask participants to fill them out and give them to you before they leave.


Download ppt "State of California Day Two TOTAL TIME: 6 hours."

Similar presentations


Ads by Google