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

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


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


‣ 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?


‣ 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


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


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/


Making Simple Elements Accessible► Alternatives for

Images

Maps

Multimedia

► Considerations in using color and contrast

► Quality link text


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


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


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


Alternate Text Problems► A big problem is deciding what is meaningful

and what is purely visual

► alt=“” or alt=“people using library services”

14


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


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


longdesc “Alternative”

17


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


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


<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


<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


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.




22


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


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


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.




25


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


27


28


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


Color: What not to do

30


Color: How to fix it

31


‣ Can you read me?

‣ Can you read me now?




‣ Use the color contrast analyzer:

‣ http://juicystudio.com/services/colourcontrast.php

Color Contrast

32


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


34


35


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.




36


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


Which goes with which?

To go where?

Link examples

38


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


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.




Copyright © 2005 Knowbility, Inc. 40

Accessible Web Design Techniques

Making Complex Elements Accessible► Cascading Style Sheets

► Data Tables

► Frames

► Scripts

► Forms

► Navigation

41


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


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


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


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


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.




46


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


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


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


<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


Complex DataTables

51


<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


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


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.




54


Working with Frames

55


<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


As seen with Lynx:

FRAME: frame 70890 FRAME: frame 70888

Frames example

57


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.




58


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


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.




60


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


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.




62


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


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.




64


Text prompt Input control

Accessible Forms

65


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


<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


Accessible Forms: Title

► Some times there is no text to use with Label:

► <INPUT type=“radio” ... title=“disagree 3”>

68


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


Exercise

70


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


A Skip Navigation Solution

72


<a href=“#ContentArea”> <img src= … alt=“Skip to main content” ...<a name=“ContentArea”></a> … Updated: 12:03 …

Skip Navigation Example

73


‣ Far Left Technique

#skiplink {

position:absolute;

left:-999px; width:990px;

}

‣ Do Not Use display:none

#skiplink {display:none}

Skip Navigation

74


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




Copyright © 2005 Knowbility, Inc. 75

Accessible Web Design Techniques

Things to Avoid

► Pop Ups

► Timed Responses

► Flickering Content

76


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


‣ 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


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



► 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



► Fundamentally transforming well designed actionable information whose semantic content is virtually null.

81



► To more fully clarify the current exchange, a few aggregate issues will require addressing to facilitate this distributed communication venue.

82



► 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


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


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


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


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)




87


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


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.





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


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