Date post: | 25-Dec-2015 |
Category: |
Documents |
Upload: | myles-dickerson |
View: | 220 times |
Download: | 3 times |
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]
State of California Department of Rehabilitation 2006 © 3
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
State of California Department of Rehabilitation 2006 © 5
Module 1Welcome/Introduction
Objectives
At the completion of this module, you will be able to:
State the purpose of the training
State of California Department of Rehabilitation 2006 © 6
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
State of California Department of Rehabilitation 2006 © 7
Course Materials
• Participant guide
Classroom resource plus a reference tool
• Class roster
For networking
• DOR Web accessibility resource site
Lists other trained developers
State of California Department of Rehabilitation 2006 © 8
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
State of California Department of Rehabilitation 2006 © 9
State of California Department of Rehabilitation 2006 © 10
Module 2Section 508 - What’s It All About?
Objectives
At the completion of this module, you will be able to:
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
State of California Department of Rehabilitation 2006 © 11
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
State of California Department of Rehabilitation 2006 © 12
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.”
State of California Department of Rehabilitation 2006 © 13
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)
State of California Department of Rehabilitation 2006 © 15
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
State of California Department of Rehabilitation 2006 © 16
Module 2 Recap
• Training Focus
Section 508 §1194.22
• 16 requirements
State of California Department of Rehabilitation 2006 © 17
Module 3Why We Care
Objectives
At the completion of this module, you will be able to:
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
State of California Department of Rehabilitation 2006 © 18
Drawing on Experience
Have you ever experienced a disabilitytemporary or permanentthat interfered with how you used the Web?
State of California Department of Rehabilitation 2006 © 20
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?
State of California Department of Rehabilitation 2006 © 21
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
State of California Department of Rehabilitation 2006 © 22
State of California Department of Rehabilitation 2006 © 23
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
State of California Department of Rehabilitation 2006 © 24
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
State of California Department of Rehabilitation 2006 © 25
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
State of California Department of Rehabilitation 2006 © 26
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
State of California Department of Rehabilitation 2006 © 27
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
State of California Department of Rehabilitation 2006 © 28
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!
State of California Department of Rehabilitation 2006 © 29
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
State of California Department of Rehabilitation 2006 © 30
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
State of California Department of Rehabilitation 2006 © 31
Standards-Based Markup
• A prerequisite for achieving accessibility
• Tools: XHTML and CSS
• Module focus:
Standards
Why they are important
Online resources for using them
State of California Department of Rehabilitation 2006 © 32
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
State of California Department of Rehabilitation 2006 © 33
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
State of California Department of Rehabilitation 2006 © 34
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
State of California Department of Rehabilitation 2006 © 35
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
State of California Department of Rehabilitation 2006 © 36
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>
State of California Department of Rehabilitation 2006 © 38
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
State of California Department of Rehabilitation 2006 © 39
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
State of California Department of Rehabilitation 2006 © 40
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">
State of California Department of Rehabilitation 2006 © 42
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
State of California Department of Rehabilitation 2006 © 43
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” />
State of California Department of Rehabilitation 2006 © 44
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
State of California Department of Rehabilitation 2006 © 45
XHTML Code Validation
All XHTML code should be checked for conformance to W3C recommendations and other standards
http://validator.w3.org/
State of California Department of Rehabilitation 2006 © 46
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!
State of California Department of Rehabilitation 2006 © 47
CSS
• Why is it important?
• What are its benefits?
• “Zen Garden” example
Radically redesign a site, fast – and without touching the XHTML code!
State of California Department of Rehabilitation 2006 © 49
CSS Zen Garden
Zen Garden, default style sheet
State of California Department of Rehabilitation 2006 © 50
CSS Zen Garden
Zen Garden, alternate style sheet
State of California Department of Rehabilitation 2006 © 51
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
State of California Department of Rehabilitation 2006 © 52
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)
State of California Department of Rehabilitation 2006 © 54
CSS: Before and After
Step by step demo:
Create style sheet
Move display markup from the XHTML page to the style sheet
State of California Department of Rehabilitation 2006 © 55
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; }
State of California Department of Rehabilitation 2006 © 56
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" />
State of California Department of Rehabilitation 2006 © 57
CSS: Rework Content
Before
State of California Department of Rehabilitation 2006 © 58
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>
State of California Department of Rehabilitation 2006 © 59
CSS: Size and Scaling
• Use “em” units as much as possible
• Set the default font size as a percentage
State of California Department of Rehabilitation 2006 © 60
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
State of California Department of Rehabilitation 2006 © 61
Help Session
• Facilitated information exchange
• Networking
State of California Department of Rehabilitation 2006 © 63
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
State of California Department of Rehabilitation 2006 © 64
Module 6Section 508 Compliance
Objectives
At the completion of this module, you will be able to:
Explain the meaning of each §1194.22 element
Explain how to implement each §1194.22 element
State of California Department of Rehabilitation 2006 © 65
(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
State of California Department of Rehabilitation 2006 © 66
(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
State of California Department of Rehabilitation 2006 © 68
(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” />
State of California Department of Rehabilitation 2006 © 69
(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
State of California Department of Rehabilitation 2006 © 70
(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>
State of California Department of Rehabilitation 2006 © 71
(b) Multimedia
Sec. 508: Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation
• WCAG Checkpoint 1.4
• 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
State of California Department of Rehabilitation 2006 © 72
(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
• WCAG Checkpoint 2.1
• In other words: Don’t use color to convey information
State of California Department of Rehabilitation 2006 © 73
(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>
State of California Department of Rehabilitation 2006 © 74
(d) Style Sheets
Sec. 508: Documents shall be organized so they are readable without requiring an associated style sheet
• WCAG Checkpoint 6.1
• 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
State of California Department of Rehabilitation 2006 © 75
(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
State of California Department of Rehabilitation 2006 © 76
(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>
State of California Department of Rehabilitation 2006 © 77
(d) Style Sheets: Designing a site that transforms gracefully (2 of 3)
2. Structure your document logically
• Use XHTML {to describe structure}, not the layout or visuals!
3. Use Hidden Classes if needed
.hidden {display: none;
}
State of California Department of Rehabilitation 2006 © 78
(d) Style Sheets: Designing a site that transforms gracefully (3 of 3)
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>
State of California Department of Rehabilitation 2006 © 79
(e) Image Maps - Server-Side
Sec. 508: Redundant text links shall be provided for each active region of a server-side image map
• WCAG Checkpoint 1.2
• 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)
State of California Department of Rehabilitation 2006 © 80
(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>
State of California Department of Rehabilitation 2006 © 81
(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
• WCAG Checkpoint 9.1
• 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
State of California Department of Rehabilitation 2006 © 83
(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:
State of California Department of Rehabilitation 2006 © 84
(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:
State of California Department of Rehabilitation 2006 © 85
(g) Tables - Row and Column Headers
Sec. 508: Row and column headers shall be identified for data tables
• WCAG Checkpoint 5.1
• 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
State of California Department of Rehabilitation 2006 © 86
(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>
State of California Department of Rehabilitation 2006 © 87
(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>
State of California Department of Rehabilitation 2006 © 88
(g) Tables - Row and Column Headers - “After” (2 of 3)
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>
State of California Department of Rehabilitation 2006 © 89
(g) Tables - Row and Column Headers - “After” (3 of 3)
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
State of California Department of Rehabilitation 2006 © 90
(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
• WCAG Checkpoint 5.2
• 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
State of California Department of Rehabilitation 2006 © 91
(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:
State of California Department of Rehabilitation 2006 © 93
(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)
State of California Department of Rehabilitation 2006 © 94
(i) Frames
Sec. 508: Frames shall be titled with text that facilitates frame identification and navigation
• WCAG Checkpoint 12.1
• In other words: Title frames so that they can be easily navigated
• Be sure to use the FRAMESET DOCTYPE and include <noframes> content
State of California Department of Rehabilitation 2006 © 96
(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>
State of California Department of Rehabilitation 2006 © 97
(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>
State of California Department of Rehabilitation 2006 © 98
(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
• WCAG Checkpoint 7.1
• 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
State of California Department of Rehabilitation 2006 © 99
(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
• WCAG Checkpoint 11.4
• 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
State of California Department of Rehabilitation 2006 © 100
(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
State of California Department of Rehabilitation 2006 © 102
(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
State of California Department of Rehabilitation 2006 © 103
(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.”
• No corresponding checkpoint
• In other words: All form controls, information, help, and cues must be available to those using assistive technologies to complete the form
State of California Department of Rehabilitation 2006 © 104
(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">
State of California Department of Rehabilitation 2006 © 105
(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>
State of California Department of Rehabilitation 2006 © 106
(o) Navigation
Sec. 508: A method shall be provided that permits users to skip repetitive navigation links
• No corresponding checkpoint
• 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)
State of California Department of Rehabilitation 2006 © 107
(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
• No corresponding checkpoint
• In other words: When there are time-outs, let visitors request additional time to respond
State of California Department of Rehabilitation 2006 © 108
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
State of California Department of Rehabilitation 2006 © 110
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/
State of California Department of Rehabilitation 2006 © 111
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/
State of California Department of Rehabilitation 2006 © 112
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)
State of California Department of Rehabilitation 2006 © 113
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
State of California Department of Rehabilitation 2006 © 114
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
State of California Department of Rehabilitation 2006 © 115
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
State of California Department of Rehabilitation 2006 © 116
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
State of California Department of Rehabilitation 2006 © 118
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
State of California Department of Rehabilitation 2006 © 119
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
State of California Department of Rehabilitation 2006 © 120
Module 7Practice: Implementing Section 508
Objectives
At the completion of this module, you will be able to:
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
State of California Department of Rehabilitation 2006 © 121
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.
State of California Department of Rehabilitation 2006 © 124
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
State of California Department of Rehabilitation 2006 © 125
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