90
Copyright © 2005 Knowbility, Inc. 1 Accessible Web Design Techniques Introduction to Web Accessibility Basic Accessible Design Techniques 2005.12.1 9

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques 1 Introduction to Web Accessibility Basic Accessible Design Techniques 2005.12.19

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

16

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

longdesc “Alternative”

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?

26

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

27

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

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?

29

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Color: What not to do

30

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Color: How to fix it

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

33

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

34

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

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

50

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Complex DataTables

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?

54

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Working with Frames

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?

69

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

Exercise

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”

71

Copyright © 2005 Knowbility, Inc. Accessible Web Design Techniques

A Skip Navigation Solution

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?

90

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