Transcript Slide 1
Basic Accessible Design
Techniques
Introduction to Web Accessibility
Copyright © 2005 Knowbility, Inc.
2005.12.19
Accessible Web Design Techniques
1
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.
Accessible Web Design Techniques
2
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
3
Who is responsible for web accessibility?
‣
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)
‣
‣
User Agent Accessibility Guidelines (UAAG)
‣
‣
Copyright © 2005 Knowbility, Inc.
These are the rules for people who create
software like Dreamweaver and FrontPage
and Content Management Systems.
Rules for people who create user agents,
like browsers (for example, Firefox and
Internet explorer) and assistive
technology (screenreaders.and speech
recognition software)
Accessible Web Design Techniques
4
How-General Web Development 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)
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
5
How is XHTML different than HTML?
►
well-formed
►
all elements must either have closing tags
►
►
all the elements must nest properly
►
►
<p><strong>Help!</strong></p>
lower case
►
►
<p></p> or <br />
lower case for all HTML element and attribute names
quotes
►
attribute values must be quoted
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
6
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.
Accessible Web Design Techniques
7
Making Simple Elements Accessible
►
Alternatives for
Images
Maps
Multimedia
►
Considerations in using color and contrast
►
Quality link text
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
8
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
9
Alternative Text Examples
<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” />
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
10
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)
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
11
Alternate Text Problems
►
Too Long
►
►
Makes reference to link
►
►
“link to aeronautics home page”
File information
►
►
“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.”
“spacer.gif 236 bytes”
Meaningless out of context
►
“button”
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
12
Alternate Text Problems
►
►
A big problem is deciding what is meaningful and
what is purely visual
alt=“” or alt=“people using library services”
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
13
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”
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
14
longdesc Example
Some images need
“long descriptions” like
charts and graphs
<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 …
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
15
longdesc “Alternative”
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
16
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
17
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>
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
18
Image Maps
<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>
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
19
Image Maps
<area shape=poly
coords=“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,2
43,87,243,88,229,88,229,92,207,92,206,90,186,9
0,184,85,173,82,170,45,172,30,172,7,174,8”
href=“ ... “
alt=“North Dakota, Minnesota, South Dakota,
Nebraska, Iowa”>
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
20
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
21
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
22
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
23
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
24
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
25
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
26
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
27
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
28
Color: What not to do
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
29
Color: How to fix it
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
30
Color Contrast
‣
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
31
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
32
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
33
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
34
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
35
Exercise – Link Lists
►
Imagine you are visually impaired and
listening to the list of links for the a
university’s course catalogues.
You hear:
program course
program course
program course
program course…
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
36
Link examples
Which goes with which?
To go where?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
37
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
38
Quality Link Guidelines
Will 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.
Accessible Web Design Techniques
39
Making Complex Elements Accessible
►
Cascading Style Sheets
►
Data Tables
►
Frames
►
Scripts
►
Forms
►
Navigation
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
40
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
41
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
42
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;
►
}
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
43
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
44
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
45
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
46
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
47
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
48
Simple Data Tables
<table summary=“Fund performance for 19982000”>
<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>
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
49
Complex DataTables
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
50
Complex Data Table Code
<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>
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
51
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
52
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
53
Working with Frames
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
54
Frameset Code
<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>
...
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
55
Frames example
As seen with Lynx:
FRAME: frame 70890
FRAME: frame 70888
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
56
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
57
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
58
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
59
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
60
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
61
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
62
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
63
Accessible Forms
Input control
Text prompt
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
64
Accessible Forms
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
65
Accessible Forms: Example
<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>…
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
66
Accessible Forms: Title
►
►
Some times there is no text to use with Label:
<INPUT type=“radio” ... title=“disagree 3”>
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
67
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
68
Exercise
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
69
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”
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
70
A Skip Navigation Solution
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
71
Skip Navigation Example
<a href=“#ContentArea”>
<img src= … alt=“Skip to main content” ...
<a name=“ContentArea”></a> … Updated: 12:03 …
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
72
Skip Navigation
‣
Far Left Technique
#skiplink {
position:absolute;
left:-999px; width:990px;
}
‣
Do Not Use display:none
#skiplink {display:none}
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
73
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.
Accessible Web Design Techniques
74
Things to Avoid
►
Pop Ups
►
Timed Responses
►
Flickering Content
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
75
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
76
Popup Windows
‣
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
77
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
78
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
79
Exercise –
Read this important
information
►
Fundamentally transforming well designed
actionable information whose semantic
content is virtually null.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
80
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
81
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.
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
82
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
83
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
84
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
85
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?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
86
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
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
87
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
88
Accomplishments & Next Steps
►
What have you learned today?
►
Next Steps
►
What accessibility actions do you plan to take next?
►
What do you need now?
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
Thanks!
…for your time, your interest and your commitment to accessibility
…join us online on the Accessibility SIG
http://knowbility.org/mailman/listinfo/accessibility_sig_knowbility.org
Copyright © 2005 Knowbility, Inc.
Accessible Web Design Techniques
90