State of California Department of Rehabilitation 2006 © State Department of Rehabilitation Welcome...

State of California Department of Rehabilitation 2006 ©

State Department of Rehabilitation

Welcome

State of California

State of California Department of Rehabilitation 2006 © 2

Welcome

• [Logistics and contact info; customize]

• Your facilitator: [customize]


Agenda - Day 1

• Welcome/Introduction

• Section 508 - What’s it All About?

• Why We Care

• Web Content Accessibility Guidelines (WCAG)

• Web Accessibility - The Foundation

• Section 508 Compliance

Lunch

• Section 508 Compliance (continued)

• Practice - Implementing Section 508


Module 1Welcome/Introduction

Objectives

At the completion of this module, you will be able to:

State the purpose of the training


Purpose of the Training

• To increase your awareness of Web accessibility issues

• To give you a working knowledge of the Web accessibility requirements of Section 508


Course Materials

• Participant guide

Classroom resource plus a reference tool

• Class roster

For networking

• DOR Web accessibility resource site

Lists other trained developers


Sharing

Let’s capitalize on our collective knowledge and skills:

• Name

• Department

• How long you have been designing Web pages

• Tool you use to create Web pages

• One “burning question” you want answered today


Module 2Section 508 - What’s It All About?

Objectives


Name examples of accessibility issues addressed in Section 508

Describe the specific requirements of Section 508 subpart 1194.22

parts (a) through (p)

Describe examples of accessibility issues involving technology

other than the Web


Section 508

• Federal law Part of Rehabilitation Act of 1973, amended 1998

Applies to IT/electronic technology in Federal agencies

Provides Federal employees and members of the public

with disabilities access to information and data

•Comparable to that of people without disabilities

•Unless undue burden to agency


What Section 508 Says

“Section 508 of the Rehabilitation Act requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, they shall ensure that this technology allows:

Federal employees with disabilities to have access to and use of information and data that is comparable to that by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency, and

Individuals with disabilities, who are members of the public seeking information or services from a Federal agency, to have access to and use of information and data

that is comparable to that provided to the public who are not individuals with disabilities.”


Section 508 Examples

• Software Applications and Operating Systems (§1194.21 )

• Web-based Intranet and Internet information and applications (§1194.22)

Our focus in class

• Telecommunications products (§1194.23)

• Video or multimedia products (§1194.24)

• Self contained, closed products (§1194.25)


Our Focus: Section 508, §1194.22

• Covers Web accessibility and assistive technologies

• Defines specific compliance requirements for accessible websites

• Lists 16 requirements for Web-based Intranet and Internet

information and applications


Module 2 Recap

• Training Focus

Section 508 §1194.22

• 16 requirements


Module 3Why We Care

Objectives


Feel the frustration of using the Web if you are visually impaired,

hearing impaired, mobility impaired (unable to use keyboard or mouse),

or cognitively impaired.

State several ways in which a website can be a challenge to those

with a disability


Drawing on Experience

Have you ever experienced a disabilitytemporary or permanentthat interfered with how you used the Web?


How Was It?

• How did these experiences make you feel?

• What was most frustrating?

• How did limited accessibility diminish your experience?

• Ultimately, who is responsible for making websites accessible?


Why Web Accessibility?

• Puts Web-based content within reach of people with disabilities

• Makes Web content more available for all users

• Follows WCAG recommendations

• It’s the law!

Section 508, Rehabilitation Act of 1973

The State of California has adopted these standards


Module 3 Recap

• The Web experience can be frustrating for people with disabilities

• Developers should be aware and design for accessibility

– You are responsible for the accessibility of your pages!

• Assistive technologies can make the Web more accessible


Module 4Web Content Accessibility Guidelines (WCAG)

Objectives At the completion of this module, you will be able to:

Explain in broad terms the meaning of Level A, Double-A,

and Triple-A conformance levels

Explain what a WCAG 1.0 checkpoint is and how checkpoints relate

to conformance level

Identify where to find information on how to implement WCAG 1.0 guidelines


WCAG

• W3C Web Accessibility Initiative (WAI) recommendations

www.w3.org/TR/WAI-WEBCONTENT

• Three levels of conformance

• Intended to:

Promote accessibility

Make Web content more available to all users

• 14 WCAG guidelines

Each has “checkpoints” that define and clarify it

Each checkpoint is prioritized according to its impact on accessibility


WCAG Checkpoint Priorities Explained

Checkpoint Priority

Developer responsibility

Otherwise, one or more groups…

1 Must meetcheckpoint

will not be able to access the Web page’s information

2 Should meet checkpoint

will find it difficult to access the Web page’s information

3 May meet checkpoint

will find it somewhat difficult to access the Web page’s information


WCAG Checkpoint Priorities Determine Conformance Levels

• State of California has adopted Level Double-A conformance as a target for all State websites

Eventually you will need to make all your sites conform to WCAG 1.0 Level Double-A • In addition to meeting the requirements of Section 508 §1194.22, parts (a) through

(p)

You conform at this WCAG level If

A All Priority 1 checkpoints are met

Double-A All Priority 1 and Priority 2 checkpoints are met

Triple-A All Priority 1, 2, and 3 checkpoints are met


Beyond 508: WCAG Guidelines

• State websites must be Section 508 §1194.22 compliant

and conform to WCAG Double-A

• Some overlap, but additional standards within each

• Don’t “eat the elephant” in one bite!


Module 4 Recap

WCAG 1.0 - guidelines

Checkpoints, priorities, and conformance levels

• Overlaps with Section 508 subpart 1194.22

• Both incorporated into State of California standards


Module 5Web Accessibility: The Foundation

Objectives At the completion of this module, you will be able to:

Describe standards-based markup and why it is important

Explain the features of XHTML

Explain the benefits of CSS and how CSS works

Explain the benefits of Positional CSS over table layout

Identify online XHTML and CSS resources

Explain the value of code validation

Identify online validation tools


Standards-Based Markup

• A prerequisite for achieving accessibility

• Tools: XHTML and CSS

• Module focus:

Standards

Why they are important

Online resources for using them


Why Discuss Manual Markup?

• Go “under the hood” to see what’s really going on

• Once you understand what is happening, you can confidently use

DreamWeaver and FrontPage to create accessible Web pages


HTML vs. XHTML (1 of 2)

• HTML v4.01 is latest (and last) version Separates presentation from structure

Improves accessibility

• XHTML is replacing HTML Conforms with XML, enables “device portability”

To conform with XML, XHTML has strict coding rules that allow it be used with

Web applications and services


HTML vs. XHTML (2 of 2)

• XHTML is replacing HTML (continued)

“Semantics” same as HTML

Some “syntax” changed, requiring coders to “change their ways” in a few

situations

Stricter rules than HTML make for cleaner, clearer code and enhance

accessibility

• Strict vs.Transitional XHTML


Markup Issues for Accessibility

• Content - information for the user

• Structure - logical organization

• Display - rendering; presentation

• Separating them is important for accessibility

• HTML originally intended only to describe structure

Earlier versions inadequate to separate content, structure, and presentation

• Caused accessibility issues


Check Your Knowledge

Of the following, which are content, which are structural, and which are display?

<h1>de Finibus Bonorum et Malorum</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <strong>sed diam nonummy</strong> nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <span style=“color: red;”>Ut wisi enim ad minim</span> veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>


XHTML Requires…

• Lowercase for element and attribute names

• All attribute values enclosed in quotes

• All tags closed, and nested properly

• Structure separated from content

• Other changes, including some HTML tags, no longer allowed


XHTML Strict vs.Transitional

• Strict

Presentation fully separated from content and structure

•Uses CSS for presentation

Adopted as standard by the State of California

• Transitional

Permits use of deprecated tags and attributes in markup for controlling presentation


Use of DOCTYPE in XHTML

First line of XHTML code declares DOCTYPE

Strict - no deprecated tags, total separation of presentation and structure/content

Transitional - will validate with deprecated tags

• Not relevant to course

Frameset - for sites that use frames

• Not relevant to course

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1 -strict.dtd">


Impact of DOCTYPE on Rendering

• Using an incomplete or outdated DOCTYPE, or no DOCTYPE causes browser “quirks”

• Browser attempts to parse page in backward-compatible fashion


XHTML: Before and After

• HTML Code

• Upgraded to XHTML

<img> <br> <hr>

<img /> <br /> <hr />

<img src=./images/photo1.jpg>

<img src=”./images/photo1.jpg” alt=”Still Life with Candle” class=”thumbnail” />


Upgrading to XHTML: Online Resources

• HTML Tidy - automated HTML processor

http://tidy.sourceforge.net/

• The New York Public Library Online Style Guide

Excellent guide to adopting standards-based markup

www.nypl.org/styleguide/index.html


XHTML Code Validation

All XHTML code should be checked for conformance to W3C recommendations and other standards

http://validator.w3.org/


CSS (Cascading Style Sheets)

• Style sheets - define presentation elements for one or more Web pages

• Cascading - multiple style sheets can be applied to one Web page

• CSS gives developers and users more control over presentation

And reduces developer workload!


CSS

• Why is it important?

• What are its benefits?

• “Zen Garden” example

Radically redesign a site, fast – and without touching the XHTML code!


CSS Zen Garden

Zen Garden, default style sheet


CSS Zen Garden

Zen Garden, alternate style sheet


CSS Benefits

• Leads to lighter pages

• Serves multiple media

Specify different style sheets for different media types (screen, print, aural,

handheld, etc.)

Helps make Web accessible to people with various disabilities

• Eliminates the need for the “table hack” by using Positional CSS

Greatly enhances accessibility

Further reduces page weight


CSS Positioning

CSS Positioning

The State of California has adopted CSS Positioning as a best practice

WCAG 1.0 Priority 2 Checkpoint 5.3

• “Do not use tables for layout unless the table makes sense when linearized.” (or provide an alternative)

• Required for Double-A compliance!

A very complex subject worthy of a 2-day course itself

• Learn the Box Model!

• Learn the CSS bugs and workarounds (especially for Internet Explorer)


CSS: Before and After

Step by step demo:

Create style sheet

Move display markup from the XHTML page to the style sheet


CSS: Create a Style Sheet

• CSS styles require three parts – a selector, a property, and a property value. This is written as shown here:

• Thus, if we wish to apply a style to the <body> tag:

selector { property: value; }

body { background-color: #fffff; }


CSS: Reference a Style Sheet

• External style sheets are stored in .css files and are referenced using:

• Using the <link> tag.

• Warning: This method is visible even to older browsers!

<style type="text/css"> @import url(./includes/DOR-V1.css);

</style>

<link rel="stylesheet" type="text/css" href="DOR-V1.css" />


CSS: Rework Content

Before


CSS: Rework Content

After

<div class="mainCopy"> <div class="subDiv1"> <p><span class="dropCap">L</span> orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <span id="signature">Cicero</span> </div> </div>


CSS: Size and Scaling

• Use “em” units as much as possible

• Set the default font size as a percentage


Using CSS: Recommended Reading

• CSS Design: Size Matters www.alistapart.com/stories/sizematters/

• Elastic Design

www.alistapart.com/articles/elastic/

• CSS Positioning at Brainjar.com: www.brainjar.com/css/positioning

• Introduction to CSS Layout: www.oreillynet.com/pub/a/javascript/synd/2002/03/01/css_layout.html

• Cascading Style Sheets: The Definitive Guide, 2nd Edition, by Eric Meyer (O’Reilly Publishing)

• CSS accessibility standards and links: http://www.dezwozhere.com/links.html


Help Session

• Facilitated information exchange

• Networking


Module 5 Recap

• Standards-based markup enhances accessibility

Cleaner, clearer code than HTML

XHTML v1 Strict is the State of California standard

• CSS

Style sheets for different media, including accessibility technologies

Positioning allows us to eliminate the table hack

Recommend using em units for scaling, and scaling everything - including images


Module 6Section 508 Compliance

Objectives


Explain the meaning of each §1194.22 element

Explain how to implement each §1194.22 element


(a) Text Equivalents

Sec. 508: A text equivalent for every non-text element shall be provided (e.g., via “alt,” “longdesc,” or in element content)

• WCAG Checkpoint 1.1

• In other words: Images, animations, audio, and video require text equivalents

• What to do: See table on next slide


(a) Text Equivalents: What to do (1 of 2)

For: Do:

img, input, applet, object elements

Use “alt” or provide a text equivalent in the content of the OBJECT and APPLET elements

Complex content where “alt” text does not describe a complete text equivalent (e.g., charts)

Provide additional description; e.g., using “longdesc” with IMG or FRAME, a link inside an OBJECT element, or a description link


(a) Text Equivalents: Code example

Before:

After:

(Where elolivo.html contains a text description of the image. Note that the alt text is descriptive, not generic!)

<img src=”./images/photo1.jpg” class=”thumbnail” alt=”El Olivo, by David Smith-Harrison” longdesc=”./copy/elolivo.html” />

<img src=”./images/photo1.jpg” class=”thumbnail” />


(a) Text Equivalents: What to do

For: Do:

Image maps Either use “alt” with AREA, or use MAP with A elements (and other text) as content

Audio, video, and animations

All “important information” in audio, video, and animated presentations must be made available in text-only form as well


(a) Text Equivalents: Code example

Image Maps:

If you use <area>, use the “alt” attribute

If you use <a>, describe the active regions and provide redundant links (outside the map area)

<img src="welcome.gif" alt="Image map of areas in the library" usemap="#map1” /> <map name="map1"> <area shape="rect" coords="0,0,30,30" href="reference.html" alt="Reference"> <area shape="rect" coords="34,34,100,100" href="media.html" alt="Audio visual lab"> </map>


(b) Multimedia

Sec. 508: Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation


• In other words: Provide synchronized audio and text captioning of multimedia

• What to do: Is beyond the scope of this courserefer to captioning resources in your course materials


(c) Color

Sec. 508: Web pages shall be designed so that all informationconveyed with color is also available without color, for example from context or markup


• In other words: Don’t use color to convey information


(c) Color: Code Example

Before:

After:

All red fields are required<label style=”color: red;”>First Name</label>

All bold fields are required<label style=”color: red; font-weight: bold;”>First Name</label>


(d) Style Sheets

Sec. 508: Documents shall be organized so they are readable without requiring an associated style sheet


• In other words: Meet the goal of “graceful transformations” of pages into browsers incapable of rendering CSS

All important information should be available in browsers that can’t interpret the CSS

• What to do: Step-by-step procedure follows


(d) Style Sheets

An experiment: Disable CSS style sheets {and Javascript} in your browser

See how these sites transform:• Poor degradation

http://www.pbs.org/cringely/

• Graceful degradation

www.alistapart.com


(d) Style Sheets: Designing a site that transforms gracefully (1 of 3)

1. Hide CSS from old browsers (they would misinterpret it)Old browsers don’t support the @import rule, so use the following syntax:

<style type="text/css" media="screen, projection">@import "css/master.css";</style>



2. Structure your document logically

• Use XHTML {to describe structure}, not the layout or visuals!

3. Use Hidden Classes if needed

.hidden {display: none;

}



4. Use “alt” attributes effectively (see discussion under (a) non-text elements)

5. Use JavaScript alternatives

• Use the <noscript> tag

6. Test by disabling CSS and Javascript

<script type="text/javascript" src="myScript.js" /><noscript>Alternative html here. You can put entire layouts here if you need to.</noscript>


(e) Image Maps - Server-Side

Sec. 508: Redundant text links shall be provided for each active region of a server-side image map


• In other words: Place hyperlinks that are accessible to people who cannot use a mouse

• What to do: Provide an alternative list of image map choices and indicate the existence and location of the alternative list (e.g., via the

“alt” attribute)


(e) Image Maps - Server-Side: Code Example

Before:

After:

<a href="http://www.example.com/cgi-bin/imagemap/my-map"><img src="welcome.gif" alt="Welcome! (Text links follow)" ismap="ismap" /></a>

[<a href="reference.html">Reference</a>]<br />[<a href="media.html">Audio Visual Lab</a>]

<a href="http://www.example.com/cgi-bin/imagemap/my-map"><img src="welcome.gif" alt="Welcome!" ismap /></a>


(f) Image Maps - Client-Side

Sec. 508: Provide client-side image maps instead of server-side image maps except where the regions cannot be defined with an available geometric shape


• In other words: Because regions defined in client-side maps are accessible via keyboard (tabbing), use them whenever possible so that those who cannot use a mouse can access them


(f) Image Maps - Client-Side: Code Example

<a href="http://www.example.com/cgi-bin/imagemap/my-map"><img src="welcome.gif" alt="Welcome!" ismap /></a>

Before:


(f) Image Maps: Client-Side: Code Example

<object data="navbar1.gif" type="image/gif" usemap="#myMap"><map name="myMap"> <p>Navigate the site</p> [<a href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a>] [<a href="shortcut.html" shape="rect" coords="118,0,184,28">Go</a>] [<a href="search.html" shape="circle" coords="184.200,60">Search</a>] [<a href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0"> Top Ten</a>]</map></object>

After:


(g) Tables - Row and Column Headers

Sec. 508: Row and column headers shall be identified for data tables


• In other words: Associate data cells with their corresponding row and column labels clearly

• What to do: Use “headers” attribute to specify a list of header cells (row and column labels) associated with the current data cell

Requires each header cell to have an “id” attribute


(g) Tables - Row and Column Headers - “Before”

<table class="myTable"><tr>

<td>Name</td> <td>Cups</td> <td>Type of Coffee</td> <td>Sugar?</td>

</tr><tr>

<td>M. Leno</td> <td>10</td> <td>Espresso</td> <td>No</td>

</tr><tr>

<td>J. Dinnen</td> <td>5</td> <td>Decaf</td> <td>Yes</td>

</tr></table>


(g) Tables - Row and Column Headers - “After” (1 of 3)

Full code example in your Participant Guide

<table class="myTable" summary="This table charts the number of

cups of coffee consumed by each assemblyman, the type of coffee (decaf or regular), and whether taken with sugar.">

<caption>Cups of coffee consumed by each assemblyman</caption>

<tr> <th id="name">Name</th> <th id="cups">Cups</th> <th id="type" abbr="Type">Type of Coffee</th> <th id="sugar">Sugar?</th>

</tr><tr>



Full code example in your Participant Guide

<tr><td headers="name">M. Leno</td>

<td headers="cups">10</td> <td headers="type">Espresso</td> <td headers="sugar">No</td>

</tr><tr>

<td headers="name">J. Dinnen</td> <td headers="cups">5</td> <td headers="type">Decaf</td> <td headers="sugar">Yes</td>

</tr></table>



Cups of coffee consumed by each assemblyman

Name Cups Type of Coffee Sugar? M. Leno 10 Espresso No J. Dinnen 5 Decaf Yes

A speech synthesizer might render this table:

Caption: Cups of coffee consumed by each assemblyman

Summary: This table charts the number of cups of coffee consumed by each assemblyman, the type of coffee (decaf or regular), and whether taken with sugar.

Name: M. Leno, Cups: 10, Type: Espresso, Sugar: No

Name: J. Dinnen, Cups: 5, Type: Decaf, Sugar: Yes


(h) Tables: 2 or More Logical Levels of Row/Column Header

Sec. 508: 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


• In other words: Mark up data and header cells if there is more than one row or column header

• What to do: Use the “axis” attribute to place cells into conceptual categories


(h) Tables: 2 or More Logical Levels of Row/Column Header: Code Example

To view code, refer to your Participant Guide A browser might render this table as shown:


(h) Tables: 2 or More Logical Levels of Row/Column Header: Activity

We will work through the provided non-compliant code to make it compliant with Section 508 §1194.22 (h)


(i) Frames

Sec. 508: Frames shall be titled with text that facilitates frame identification and navigation


• In other words: Title frames so that they can be easily navigated

• Be sure to use the FRAMESET DOCTYPE and include <noframes> content


(i) Frames - “Before”

<frameset cols="10%, 90%"> <frame src="nav.html” /> <frame src="doc.html” /> <noframes> <a href="lib.html">electronic library</a> </noframes></frameset>


(i) Frames - “After”

<frameset cols="10%, 90%" title="Our library of electronic documents"> <frame src="nav.html" title="Navigation bar” /> <frame src="doc.html" title="Documents” /> <noframes> <a href="lib.html" title="Library link">electronic library</a> </noframes>

</frameset>


(j) Flicker

Sec. 508: Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz


• In other words: Avoid flicker at frequencies that can trigger seizures in some people

• What to do:

Do not use the <blink> tag (now deprecated)

Avoid creating items that blink on and off


(k) Alternative Page

Sec. 508: A text-only page, with equivalent information or functionality, shall be provided to make a website 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


• In other words: When no other solution is available, provide an alternative, compliant pagemake sure it is updated whenever the original, non-compliant page is updated


(l) Scripting

Sec. 508: 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

• No corresponding WCAG checkpoint

• In other words: On pages that use scripting to create content or elements (e.g., DHTML), provide accessible text equivalents for the information provided by the scripts


(m) Applets

Sec. 508: Embedded applets must meet the requirements of Section 508 §1194.21

• No corresponding checkpoint

• In other words: Embedded applets must meet the Section 508 standards for software applications and operating systems, which are specified at

http://www.section508.gov/index.cfm?FuseAction=Content&ID=12#Software

• Most of the requirements in §1194.21 relate to usability issues for people with vision impairments


(n) Forms

Sec. 508: “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 firm, including all directions and cues.”


• In other words: All form controls, information, help, and cues must be available to those using assistive technologies to complete the form


(n) Forms - What to Do (1 of 2)

• Lay out the form logically So it can be navigated easily with the [tab] key

• Use the <label> tag appropriately

<label for="name">Name</label><input id="name" type="text" name="textfield">


(n) Forms - What to Do (2 of 2)

Group related fields using the <fieldset> tag

<fieldset><legend>Choose a color:</legend><br><input id="blue" type="checkbox" name="checkbox" value="checkbox"> <label for="blue">Blue</label><br><input id="green" type="checkbox" name="checkbox2" value="checkbox"> <label for="green">Green</label><br><input id="yellow" type="checkbox" name="checkbox3" value="checkbox"><label for="yellow">Yellow</label></fieldset>


(o) Navigation

Sec. 508: A method shall be provided that permits users to skip repetitive navigation links


• In other words: Provide the option to skip links that repeat on page after page, so that people using assistive technologies have the equivalent experience to others (we tend to skip over such links)


(p) Time-outs

Sec. 508: When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required


• In other words: When there are time-outs, let visitors request additional time to respond


Section 508 and Code Validation

• Just because a page has passed a validation checker does not mean the page is accessible

• In designing sites, you should personally evaluate your response to every §1194.22 items (a) through (p) in addition to using the validation tool


Online Validation Tools for Accessibility

• W3C’s HTML validation service

http://validator.w3.org

• W3C CSS validation service

http://jigsaw.w3.org/css-validator/

• W3C WAI (Web Accessibility Initiative) offers a complete list of Web accessibility evaluation tools at

http://www.w3.org/WAI/ER/tools/


Online Validation Tools (continued)

From the W3C WAI website:

“Web accessibility evaluation tools are software programs or online services that help determine if a Web site meets accessibility guidelines. While Web accessibility evaluation tools can significantly reduce the time and effort to evaluate Web sites, no tool can automatically determine the accessibility of Web sites.”

From http://www.w3.org/WAI/ER/tools/


What Web Accessibility Evaluation Tools Can Do

• Reduce evaluation time/effort

• Help in design, implementation, and maintenance of accessible websites

• Help repair encountered barriers to accessibility

• Improve overall website quality

(paraphrased from http://www.w3.org/WAI/eval/selectingtools)


What Web Accessibility Evaluation Tools Cannot Do

• Take the place of human judgment and manual evaluation using different techniques

• Eliminate false or misleading results

• Therefore “results from evaluation tools should not be used to determine conformance levels unless they are operated by experienced evaluators who understand the capabilities and limitations of the tools….”

From http://www.w3.org/WAI/eval/selectingtools


W3C WAI Guidelines on Validation Techniques (1 of 2)

1. Use an automated accessibility tool and a browser validation tool

2. Validate syntax

3. Validate style sheets

4. Use a text-only browser or emulator

5. Use multiple graphic browsers with

• Sound and graphics loaded

• Graphics not loaded

• Sounds not loaded

• No mouse

• Frames, scripts, style sheets, and applets not loaded


W3C WAI Guidelines on Validation Techniques (2 of 2)

6. Use several browsers, old and new

7. Use various user agents/accessibility technologies

8. Use spell and grammar checkers

9. Review the document for clarity and simplicity

10. Invite people with disabilities to review the documents


Pros and Cons of Selected Validation Tools

• Tools like Bobby are not perfect; there are

Bugs

Inherent limitations

• Software checks are objective

• Many checkpoints are inherently subjective

• They are a good “first cut”

• Community feedback is indispensable


Claiming WCAG Conformance

• WCAG specifies templates for claiming compliance

• How to list which guideline(s) and what level of conformance

• http://www.w3.org/WAI/eval/template.html


Module 6 Recap

• Overview of Section 508 §1194.22 requirements

Meaning and rationale for each requirement

How to make pages compliant with each requirement

• Discussion of code validation for accessibility

Online validation tools

Developer judgment

User community testing


Module 7Practice: Implementing Section 508

Objectives


Identify elements of your own websites that are not in compliance with Section 508

Explain what steps you took to implement specific elements of §1194.22 on your own websites

Explain why you took the steps you did


Practice Activities

Work in pairs:

1. Identify compliance issues in your own websites

Refer to your Quick Reference Guide

Use the worksheet on page 36

2. Make at least one modification to bring an element into complianceNOTE: Tomorrow you will create an action plan for further changes to your website. As you work, think about what those actions might be.


Module 7 Recap

You:

• Identified elements of your own websites that are not in compliance with Section 508

•Explained what steps you took to implement specific elements of

§1194.22 on your own websites

•Explained why you took the steps you did


Day OneKey Points

• California has adopted Web accessibility standards Section 508 §1194.22 and WCAG Double-A

• Accessible design makes Web access easier for all users

• XHTML and CCS are tools for standards-based markup

• Resources are available to help

State of California Department of Rehabilitation 2006 © State Department of Rehabilitation Welcome...

Documents

Transcript of State of California Department of Rehabilitation 2006 © State Department of Rehabilitation Welcome...