Upload
ginger-barton
View
215
Download
0
Embed Size (px)
Citation preview
Copyright © 2005 Knowbility, Inc. 1Accessible Web Design Techniques
Introduction to Web Accessibility
Basic Accessible Design Techniques
2005.12.19
2Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Introductions & Pretest
► Who you are?► Why Are You Here? ► Accessibility Knowledge Level
► 0 – don’t know a thing► 1 – Accessibility Novice► 3 – solid accessibility knowledge ► 5 - Expert
Copyright © 2005 Knowbility, Inc. 3Accessible Web Design Techniques
Course Objectives‣ Learn the Basics of How to Make Web Elements Accessible
‣ Alternatives: images, maps, multimedia, color, quality link text
‣ Stylesheets, Tables, Frames, Scripting, Forms, Navigation
‣ Things to Avoid: Pop-ups, Timed Processes, Flicker
4Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
‣ we can only control how sites & pages are built
‣ techniques we use have significant impact on accessibility
‣ Web Content Accessibility Guidelines (WCAG)
‣ others are responsible too‣ Authoring Tool Accessibility Guidelines (ATAG)
‣ These are the rules for people who create software like Dreamweaver and FrontPage and Content Management Systems.
‣ User Agent Accessibility Guidelines (UAAG)
‣ Rules for people who create user agents, like browsers (for example, Firefox and Internet explorer) and assistive technology (screenreaders.and speech recognition software)
Who is responsible for web accessibility?
5Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
‣ HyperText Markup Language (HTML and XHTML)
‣ Semantic, structural markup (headings, lists, quotes, etc
‣ Includes things not in Section 508 (acronyms, abbreviations, language changes, validation)Related Guidelines: WCAG 3.1, 3.5, 3.7, 5.4
‣ Cascading Style Sheets (CSS)‣ JavaScript (JS)
How-General Web Development Techniques
6Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
How is XHTML different than HTML?► well-formed
► all elements must either have closing tags
► <p></p> or <br />
► all the elements must nest properly
► <p><strong>Help!</strong></p>
► lower case
► lower case for all HTML element and attribute names
► quotes
► attribute values must be quoted
7Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Mandatory XHTML Elements<!DOCTYPE…>
<head>
<title></title>
<head>
<html>
<body>
</body>
</html>
► Recommended DOCTYPE is XHTML 1.0 Transitional
► Tutorial on XHTML - http://www.w3schools.com/xhtml/
► Validate your XHTML at http://validator.w3.org/
Copyright © 2005 Knowbility, Inc. 8Accessible Web Design Techniques
Making Simple Elements Accessible► Alternatives for
Images
Maps
Multimedia
► Considerations in using color and contrast
► Quality link text
9Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Providing Alternatives► people that are blind or have low-vision
can/may not see images
► they need a description of the purpose of the image
10
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
<IMG src=… alt=“United Nations Flag” ... />
<IMG src=… alt=“Aeronautics” width=… />
Possibly:
title=“Visit the Aeronautics Home Page”
<IMG src=“spacer.gif”
alt=“” width=“1” height=“1” />
Alternative Text Examples
11
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Alternate Text Guidelines► Every image must have a valid alt attribute.
► Images which are not active and which do not convey information should have alt=“”
► Image links must have a non-empty alt attribute.
► Each INPUT of TYPE=“IMAGE” must have alt-text specifying the purpose of the button
► Each AREA of a MAP must have a valid alt attribute (more later)
12
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Alternate Text Problems► Too Long
► “Image of the United Nations Flag (Blue background with white olive branches surrounding map of world) about one and a quarter inches by one inch.”
► Makes reference to link
► “link to aeronautics home page”
► File information
► “spacer.gif 236 bytes”
► Meaningless out of context
► “button”
13
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Alternate Text Problems► A big problem is deciding what is meaningful
and what is purely visual
► alt=“” or alt=“people using library services”
14
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Long Descriptions► Sometimes short alt text is not enough
► an HTML attribute longdesc is available but isn’t necessarily the best solution
► longdesc points to a URL that has a “long description” of the image
"A picture is worth a thousand words... some people need the thousand words... And some people might want and need both”
15
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Some images need Some images need “long descriptions” “long descriptions” like charts and like charts and graphsgraphs
<img src=“traffic.jpg” longdesc=“traffic.htm” alt=“traffic density graph” />
traffic.htm:
<p>This graph shows traffic density on
Main and Center streets measured in …
longdesc Example
17
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Alternate Text Guidelines(a) A text equivalent for every non-text element
shall be provided (e.g., via "alt", "longdesc", or in element content)Guidelines: 508 1194.22(a), WCAG 1.1, IBM 1.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
18
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Image Maps
<map name=m> <area coords=“0,0,52,52” href=“r/c1”> <area coords=“53,0,121,52” href=“r/p1”> <area coords=“122,0,191,52” href=“r/m1”> <area coords=“441,0,510,52” href=“r/wn”> <area coords=“511,0,579,52” href=“r/i1”> <area coords=“580,0,637,52" href=“r/hw”></map>
19
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
<map name=m> <area coords=“0,0,52,52” ... alt=“Calendar”> <area coords=“53,0,121,52” ...
alt=“Messenger”> <area coords=“122,0,191,52”... alt=“Check
Email”> <area coords=“441,0,510,52”... alt=“What’s
New”> <area coords=“511,0,579,52”...
alt=“Personalize My Yahoo”> <area coords=“580,0,637,52” ... alt=“Help”></map>
Image Maps
20
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
<area shape=polycoords=“173,7,181,9,180,10,227,9,232,10,233,12,238,11,244,12,250,13,257,14,263,15,267,17,259,27,251,27,245,36,249,41,246,48,254,53,256,57,257,61,258,66,262,68,263,73,264,75,263,77,262,78,260,78,259,80,258,82,257,84,256,86,254,87,243,87,243,88,229,88,229,92,207,92,206,90,186,90,184,85,173,82,170,45,172,30,172,7,174,8” href=“ ... “ alt=“North Dakota, Minnesota, South Dakota, Nebraska, Iowa”>
Image Maps
21
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Image Map Guidelines(e) Redundant text links shall be provided for each
active region of a server-side image map.
(f) Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
Server side maps require the use of a mouse. Many disabled users cannot use a mouse. Related Guidelines: 508 §1194.22(e, f), WCAG 1.2, 9.1; IBM 2.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
22
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Multimedia Strategy► Include a text transcript for informational audio
file.
► Provide synchronized text equivalents (captions) for the audio content of a multimedia presentation.
► Provide synchronized audio descriptions of significant video information in multimedia presentations.
23
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Multimedia Solutions► MAGPie - free software that helps you caption
► http://ncam.wgbh.org/webaccess/magpie
► Sample video with captions and audio descriptions:
► NCAM Rich Media Project
24
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Multimedia Guidelines(b) Equivalent alternatives for any multimedia
presentation shall be synchronized with the presentation. Related Guidelines: 508 §1194.22(a, b); WCAG 1.1, 1.4; IBM 4.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
25
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise – Issues with Color
► What happens when we use color in our design to convey information?
► What else do we need to consider when using color in our design?
28
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise – Issues with Color
► How can we overcome the problems with color blindness or lack of color in the previous example?
► How might we do the same on a web page?
31
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
‣ Can you read me?
‣ Can you read me now?
‣ Can you read me now?
‣ Can you read me now?
‣ Can you read me now?
‣ Use the color contrast analyzer:
‣ http://juicystudio.com/services/colourcontrast.php
Color Contrast
32
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise - Color & Links
► Do you underline your links?► Or are your links obvious by color
alone?► Example
► Imagine you are colorblind► Tell me how many links are in the
second paragraph of information: en.wikipedia.org/wiki/Abraham_lincoln
35
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Color Guidelines(c) Web pages shall be designed so that all
information conveyed with color is also available without color, for example from context or markup.
Related Guidelines: 508 §1194.22(c); WCAG 2.1, 2.2; IBM 12.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
36
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise – Link Lists
► Imagine you are visually impaired and listening to the list of links for the a university’s course catalogues.
program course program course program course program course…
You hear:
37
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Which goes with which?
To go where?
Link examples
38
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Quality Link Text► Will link text make sense out of context, in a list of
links?
► Descriptive link text lets users know where the link goes.
► Links to the same place should have the same text; Links to different pages should be different.
► Test the links out of context.
► Raw links (where the link is the http://url) may be hard for those using a screen reader to interpret. The screen reader just reads the whole long URL but doesn't convey information.
► Avoid duplicate adjacent links
39
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Quality Link GuidelinesWill link text make sense out of context, in a list
of links?
Related Guidelines: WCAG 13.1. Note: this is NOT part of the 508 guideline. It will be part of WCAG 2.0.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc. 40
Accessible Web Design Techniques
Making Complex Elements Accessible► Cascading Style Sheets
► Data Tables
► Frames
► Scripts
► Forms
► Navigation
41
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Cascading Style Sheets► Cascading Style Sheets (CSS) is a simple
mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
► CSS is an effective way to separate content from presentation
42
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Issues with Stylesheets► When using a hybrid approach to web design,
some people use CSS for simple things like text properties but still use tables for layout.
► This presents a possible problem if CSS is off/broken or not supported.
43
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Issues with Stylesheets► Users have the ability to override stylesheets and
create their own. They might, for example, create a light text on dark background stylesheet.
► CSS colors should be declared in pairs so that if they are overridden, they are overridden together.
► #header {
► color: #000;
► background-color: #ccc;
► }
44
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Issues with Stylesheets► Most modern browsers support stylesheets,
but we can’t always guarantee that they are used and/or delivered.
► We need to ensure that pages are readable without stylesheets as well.
► This includes checking for positioning/content order, color issues, and generated content
45
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
CSS Guidelines(d) Documents shall be organized so they are
readable without requiring an associated style sheet.
Related Guidelines: 508 §1194.22(d); WCAG 6.1; IBM 11.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
46
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Other CSS Issues► Use relative units to allow pages to “resize”
based on user need
► Use percentages to specify the width of tables. This refers to the percentage of the screen that the table will fill
► Use percent (%), em, or the terms larger, smaller, etc. for the font-size property. This sets font-size relative to the defaults specified by the user, and allows him or her to change font sizes as needed using the browser
► Related guidelines: WCAG 3.4
47
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
The Power of CSS► Designing with CSS
► Separate content from presentation
► Make maintaining a site more effective and efficient
► See CSS in Action at www.csszengarden.com
*note – sites at csszengarden are not necessarily accessible
48
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Working with Data Tables► Visually we can map column and row headings
to find the data in their intersection points, and find the appropriate headings from the intersection points in a data cell
► We need to provide the same type of functionality to those that need the assistance of a screen reader.
49
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
<table summary=“Fund performance for 1998-2000”> <caption>Performance</caption> <tr> <td width=“20%”></td> <th width=“10%” scope=“col”>1998</th> <th width=“10%” scope=“col”>1999</th> <th width=“10%” scope=“col”>2000</th> </tr> <tr> <th scope=“row”>Fund</th> <td>17.7</td>
... </table>
Simple Data Tables
51
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
<table border=“1” bgcolor=“#ffffcc”> <caption>travel Expense Report</caption> <tr> <td></td> <th id=“meals”>Meals</th> <th id=“hotels”>Hotels</th> <th id=“transport”>transport</th> <td id=“subtotals”>subtotals</td> </tr> <tr> <th id=“sanjose”>San Jose</th> <td></td><td></td><td></td><td></td> </tr> <tr> <th id=“25aug” >25-Aug-97</th> <td headers=“meals sanjose 25aug”>37.74</td> <td headers=“hotels sanjose 25aug”>112.00</td> <td headers=“transport sanjose 25aug”>45.00</td>
Complex Data Table Code
52
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Effective Data Tables► Place column headings in the first row and place row
headings in the first column.
► Use the TH element for all heading cells.
► Use the scope attribute on all heading cells specifying whether the heading labels a column or a row e.g., scope=“row”.
► For complex tables: Assign an id to each heading cell and string of id’s as the header attribute for each data cell to say which are heading cells for that data cell.
► Use the summary attribute and/or CAPTION element.
53
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Table Guidelines(g) Row and column headers shall be identified
for data tables.
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
Related Guidelines: 508 §1194.22(g, h); WCAG 5.1, 5.2; IBM 10.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
55
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
<frameset rows=“40,*” ><frame src=“Title.htm” name=“Title” frameborder=“yes” title="Title Content“ />
<frameset cols=“150,*,150”>
<frame src=“Left.htm” name=“Main_Navigation” frameborder=“yes” title=“Main Navigation” />
<frameset rows=“40,*” border=“2”> <frame src=“Banner.htm” name=“Banner_Ad” frameborder="yes" title="Banner Ad“ />
<frame src=“Content1.htm” name=“Main_Content” frameborder=“yes” title=“Main Content” /> </frameset> <frame src=“Right.htm” name=“Local_Navigation” frameborder=“yes” title=“Local Navigation” /> </frameset><noframes>
...
Frameset Code
56
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
As seen with Lynx:
FRAME: frame 70890 FRAME: frame 70888
Frames example
57
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Frames Guideline(i) Frames shall be titled with text that facilitates
frame identification and navigation.
Related Guidelines: 508 §1194.22(i); WCAG 12.1; IBM 9.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
58
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Alternate/Text-only Version► No other way to make content accessible
► Text only version is up-to-date with “main” version
► Text only version provides equivalent functionality as “main” version
59
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Text-only Guidelines(k) A text-only page, with equivalent information
or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
Related Guidelines: 508 §1194.22(k); WCAG 11.4.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
60
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Scripting and Interactivity► Some user agents don’t support all or any
JavaScript
► To be interoperable we need to ensure that our pages work with scripting on or off
► Scripting traditionally involves the mouse, but what about people that can’t/don’t use a mouse?
► Avoid using JavaScript that breaks the way that things are expected to work
61
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Scripting Guidelines(l) When pages utilize scripting languages to
display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
Related Guidelines: 508 §1194.22(l); WCAG 6.3, 6.4, 8.1, 9.3; IBM 5.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
62
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Applets and Plugins
► When you click on a link to a PDF in your web browser, what happens to the PDF?
► When you go to a web site that is Flash based, where does the Flash movie run?
► If you go to a site that uses a Java Applet, it runs in the browser, embedded in the HTML page itself.
► What issues do all of these cause for someone who doesn’t have those plugins? what about for Sam, who is using a screen reader?
63
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Applet/Plugin Guidelines(m) When a web page requires that an applet,
plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through (l).
Related Guidelines: 508 §1194.22(m); WCAG 6.3, 6.4, 8.1; IBM 6.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
64
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Text prompt Input control
Accessible Forms
65
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
1. Position text prompts immediately adjacent to input controls
2. Associate text prompts with the corresponding input element using the label element with the for attribute
3. Use the title attribute on form controls when text not available for label
Accessible Forms
66
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
<label for=“lname”>Last Name:</label> …
<input size=“20” type=“text” id=“lname” name=“last-name” /> …
<input type=“radio” id=“old” name=“visited” value=“yes” />
<label for=“old”>I have visited before.</label>…
<input type=“radio” id=“new” name=“visited” value=“no” />
<label for=“new”>I am a new user</label>…
Accessible Forms: Example
67
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Accessible Forms: Title
► Some times there is no text to use with Label:
► <INPUT type=“radio” ... title=“disagree 3”>
68
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Forms Guidelines(n) When electronic forms are designed to be completed on-line,
the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
Related Guidelines: 508 §1194.22(n); WCAG 10.2, 12.4, 9,3; IBM
7
What is the accessibility problem?What is the solution?Does anyone else benefit from this guideline?
70
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Skip Navigation► Generally, if there are navigation links before
the main content of the page, provide a link at the top of the page that jumps over the navigation to the main content.
► the most common phrase is “skip to main content”
► can be used in other places as well to skip “blocks”
72
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
<a href=“#ContentArea”> <img src= … alt=“Skip to main content” ...<a name=“ContentArea”></a> … Updated: 12:03 …
Skip Navigation Example
73
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
‣ Far Left Technique
#skiplink {
position:absolute;
left:-999px; width:990px;
}
‣ Do Not Use display:none
#skiplink {display:none}
Skip Navigation
74
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Skip Navigation Guidelines(o) A method shall be provided that permits users
to skip repetitive navigation links.
Related Guidelines: 508 §1194.22(o); WCAG 13.5, 13.6; IBM 8
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc. 75
Accessible Web Design Techniques
Things to Avoid
► Pop Ups
► Timed Responses
► Flickering Content
76
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Popup Windows► bad reputation as ad delivery mechanism
► popup blockers integrated into browsers.
► disorienting when not expected and loses browser history
► unaware that new window(s) opened
77
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
‣ do not launch them automatically
‣ inform the user in text before the link, or in text as part of the link
‣ provide a simple way to close the popup
‣ allow the window to be resized to accomodate variations in text size
‣ Related guidelines: WCAG 10.1.
Popup Windows
78
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise – Read this important information
► Perhaps a re-engineering of your current world view will re-energize your online nomenclature to enable a new holistic interactive enterprise internet communication solution.
79
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise – Read this important information
► Upscaling the resurgent networking exchange solutions, achieving a breakaway systemic electronic data interchange system synchronization, thereby exploiting technical environments for mission critical broad based capacity constrained systems.
80
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise – Read this important information
► Fundamentally transforming well designed actionable information whose semantic content is virtually null.
81
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise – Read this important information
► To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue.
82
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Exercise – Read this important information
► In integrating non-aligned structures into existing legacy systems, a holistic gateway blueprint is a backward compatible packaging tangible of immeasurable strategic value in right-sizing conceptual frameworks when thinking outside the box.
83
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Timing is Everything► In the last example, the slide switched every 3
seconds. Were you able to read it all?
► What would it be like to read changing content if the content was in a language you were learning?
► What if you had reading difficulties?
84
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Timed Response
► What if you could only type one letter every three seconds while filling out a form?
► What impact does this have on someone that is filling out larger forms?
85
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Timed Response: Options?► Do not set a time limit on the users response.
► Notify the user if a process is about to time-out
► Provide a prompt asking whether additional time is needed.
► Let people know ahead of time how long the process will take, and inform them if they will need certain documentation so they can collect it
86
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Timed Response Guidelines(p) When a timed response is required, the user
shall be alerted and given sufficient time to indicate more time is required.
Related Guidelines: 508 §1194.22(p)
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
87
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Flicker – Don’t Do It!► Did you know that flickering images on the
screen can cause some people to have seizures?
► Anyone here have photosensitive epilepsy?
► If No – then go to
► ncam.wgbh.org/richmedia/media/flicker_demo.html
88
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Flicker Guidelines(j) Pages shall be designed to avoid causing the
screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
Related guidelines: 508 §1194.22(j); WCAG 7.1; IBM 13.
What is the accessibility problem?
What is the solution?
Does anyone else benefit from this guideline?
Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques
Accomplishments & Next Steps► What have you learned today?
► Next Steps
► What accessibility actions do you plan to take next?
► What do you need now?