Michael Gaigg: Über UI/UX Design

30Oct0

Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 (German)

Posted by Michael Gaigg

Spreading the word about WCAG 2.0 is definitely good news. Yesterday Shawn Lawton Henry, WAI Outreach Coordinator and Chair of the WAI Education and Outreach Working Group, announced the publication of the German Authorized Translation of Web Content Accessibility Guidelines (WCAG) 2.0:

Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 (German)

http://www.w3.org/Translations/WCAG20-de/

The WCAG 2.0 are also available in

I also suggest you to have a look at my blog entries about WCAG 2.0: Overview and Structure and Section 508: WCAG 1.0 or WCAG 2.0?

Tagged as: , , , , , , , , , , , , No Comments
1May4

Best Practices for Accessible Stylesheets

Posted by Michael Gaigg

Cascading Style Sheets (CSS), or short Stylesheets, is a language used to describe the presentation (that is, the look and formatting) of a document written in a markup language like HTML.

The stylesheet language as described in CSS level 2 revision 1 helps to separate presentation from structure and thus adds flexibility to the look and feel of a web page. Stylesheets are useful for the following reasons:

  • Can be re-used for many documents
  • Saves download times by caching by the browser
  • Presentational changes are fast and easy and only in one document
  • Development can be done independently from content and logic
  • Increases ability to program for device independence
  • Application of different styles for different output formats (e.g. print)

Basic Rules

  • Add Stylesheets whenever possible (minimize number of stylesheets)
  • Use them consistently across all pages
  • Use linked stylesheets rather than embedded styles; avoid inline stylesheets
  • Stylesheets do not substitute correct and meaningful structure

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Organize documents so they may be read without style sheets 6.1 d Ensure that important content appears in the document object and is not generated by style sheets (i.e. through :before and :after pseudo-elements).

Level 2


Level 2 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Use style sheets to control layout and presentation 3.3 n/a
<HEAD>
<TITLE>Drop caps</TITLE>
<EM class="highlight" title="provide STYLE element">STYLE</EM> type="text/css">
.dropcap { font-size : 120%; font-family : Helvetica }
</EM class="highlight" title="provide STYLE element">STYLE</EM>>
</HEAD>
<BODY>
<P><SPAN class="dropcap">O</SPAN>nce upon a time...
</BODY>

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Create a style of presentation that is consistent across pages 14.3 n/a A consistent style of presentation on each page allows users to locate navigation mechanisms more easily but also to skip navigation mechanisms more easily to find important content.

Template

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="BaseStyleSheet.css" />
</head>
<body>
Hello World
</body>
</html>


/* Base CSS Document */
/**
Elements
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
font-family: Arial, Helvetica, sans-serif;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/**
Classes
*/
/**
IDs
*/

References

Tagged as: , , , , , 4 Comments
25Mar2

Question: How can Internet Mapping Applications be made accessible?

Posted by Michael Gaigg

Following I will identify areas that make web-based maps inaccessible as per WCAG 1.0 (please see section: 'Questions and Possible Research Areas').

Shout for Help

Question: How can Internet Mapping Applications be made accessible for users with disabilities?

If you are currently working on resolving any (or all) of these issues, know of somebody that is working on them or even know existing solutions, I would greatly appreciate if you pointed them out to me.

It is absolutely impossible to continue with our current approach to seek exceptions as a 'work-around'!

Background

It is important to note that I'm not talking about simple Google maps like driving directions or locate services that could be described through alternative, textual output.
Many times a map is the means to select, query, mix and eventually analyze data across multiple layers from multiple services. The input requires good vision and motor skills (mouse) and same applies to the output that is highly visual as well.
A simple example that illustrates this fact pretty well is shown in Figure 1, Drive Times from a specific location based on traffic grid.

ESRI Map, Drive Times

Figure 1: ESRI Map: Drive Times; produced using ArcGIS JavaScript API, http://mapapps.esri.com/serverdemos/siteselection/index.html

The Law

Section 508 as explained by Authority 29 U.S.C. 794d: “Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.”
This law is extended and applicable to companies that develop applications for the agency, i.e. ESRI has to adhere to the Section 508 Standards.
The Section 508 Checkpoints were translated into Web Content Accessibility Guidelines which cover most of Section 508 and describe its implementation in terms of HTML & CSS.

Current ‘Solution’

So far, exceptions to this law have been granted for the specific case of online maps. It is believed to impose an ‘undue burden’ to the agency/contractor to make maps accessible. In many cases a 1-800 number was provided that would help the user to get the same information.

Questions and Possible Research Areas

Currently the following WCAG checkpoints are Level 1 (A) show-stoppers and need to be solved/researched/implemented:

Checkpoint 1: Provide equivalent alternatives to auditory and visual content

How to read a map when blind? E.g. redundant text for active regions/content.

Checkpoint 2: Don’t rely on color alone

Map application could provide different color schemes/black&white/shades of gray?!

Checkpoint 6: Ensure that pages featuring new technologies transform gracefully

How to provide a map (or alternative) that can be used when scripts are turned off?

Checkpoint 8: Ensure direct accessibility of embedded user interfaces

Do not write event-handlers that rely on mouse-coordinates (device-independence; see also Checkpoint 9)

Checkpoint 9: Design for device-independence

How to navigate a map without a mouse?

Checkpoint 12: Provide context and orientation information

How to describe the content of a map (especially after a change, e.g. query)?

You know of a solution?

Please get in touch with me if you know of solutions to these problems!

I hope that solutions for these problems can be found and maps become available to everyone. As always, not only users with disabilities will benefit from these efforts but also the applications themselves, e.g. better SEO (search engine optimization), alternative support for mobile user agents, assistance for elderly people, etc.

Tagged as: , , , , , , , , 2 Comments
20Feb0

Best Practices for Accessible Frames

Posted by Michael Gaigg

Frames are hardly used anymore (thanks God) but they can be useful and a good method to organize huge sites with lots of content, e.g. document libraries, API documentation, etc.

The 508 standard has no objection against frames and screen readers can handle frames well even though it might be difficult to comprehend the structure. The following basic rules and best practices outline how one can make frames accessible:

Basic Rules

  • Title frameset and frames with meaningful names (descriptive instead of location, i.e. ‘navigation’ instead of ‘left’)
  • Provide an alternative (NOFRAMES tag)

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Provide a text equivalent for every non-text element 1.1 a <FRAMESET cols="50%,50%" title="...">

<FRAME src="sitenavbar.htm" ...>

<FRAME src="story.htm" ...>

<NOFRAMES>

[<A href="sitenavbar.htm" title="...">Table of Contents</A>] [<A href="story.htm" title="...">Story</A>]

</NOFRAMES>

</FRAMESET>
Title each frame to facilitate frame identification and navigation 12.1 i <FRAMESET cols="10%, 90%" title="Our library of electronic documents">

<FRAME src="nav.html" title="Navigation bar">

<FRAME src="doc.html" title="Documents">

</FRAMESET>

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Describe the purpose of frames and how frames relate to each other if it is not obvious by frame titles alone 12.2 i <FRAME src="sitenavbar.htm" name="navbar" title="Sitewide navigation bar" longdesc="frameset-desc.htm#navbar">

<FRAME src="story.htm" name="story" title="Selected story - main content" longdesc="frameset-desc.htm#story">

Template

<frameset cols="50%,50%" title="Our library of electronic documents">
<frame src="navigation.htm" title="Navigation bar">
<frame src="start.htm" title="Main Content">
<noframes>
[<a href="navigation.htm" title="Navigation bar">Table of Contents</a>]
</noframes>
</frameset>

References

Tagged as: , , , , , , , , , , , , , No Comments
27Jan2

Section 508: WCAG 1.0 or WCAG 2.0?

Posted by Michael Gaigg

Timeline for the adaption of WCAG 2.0 as the new Section 508 law.

Answer

In short: WCAG 1.0, at least for the next couple of years.

Standards Compliancy - Pro's and Con's.

The Web Content Accessibility Guidelines (WCAG) 2.0 are a final Web Standard "W3C Recommendation" and offer many advantages over WCAG 1.0. Blogs like Opera Developer Network suggest to use WCAG 2.0 rather than 1.0 because "[it] is easier and clearer to use, contains test statements (known as Success Criteria), can be applied to all web technologies (and not just W3C technologies like WCAG 1.0) and comes with lots of supporting documentation".

Standards compliancy will benefit your project in many ways, from code maintenance (faster code review/debugging) and repurpose (separate content from presentation) to bandwidth (master stylesheet helps reducing size of individual pages).

On the flip-side standards add load and thus expenses to projects and developers and are controversial in many cases.

Section 508 is a US law

Philosophy aside, Section 508 is a US law that renders above discussion obsolete and needs to be taken seriously. Not directly related but still a wake-up call is Target's non-compliance with the Unruh Civil Rights Act, California Civil Code §§ 51 et seq., the Disabled Persons Act, California Civil Code §§ 54 et seq., and the Americans with Disabilities Act, 42 U.S.C. §§ 12181 et seq. which resulted in a six million dollars settlement this month. Sorry to get you down to earth so quickly.

Timeline for Section 508 to adapt WCAG 2.0

Gregg Vanderheiden:

508 is undergoing a revision over the next couple years.

The first stage of that was an Advisory committee (TEITAC) that came up with recommendations
http://www.access-board.gov/sec508/update-index.htm

The advisory committee contained several WCAG Working group members and both TEITAC and WCAG worked together to harmonize. And, though they weren't completely harmonized (since both changed a bit at the end) all comments from members to access board were to continue harmonization in further steps.

Jim Tobias:

The Access Board's advisory committee on 255/508 (TEITAC) recommended that any new regs harmonize with WCAG 2.0, and the report's own proposed provisions themselves were pretty well harmonized, as Judy Brewer, Gregg Vanderheiden, and others from WCAG were on TEITAC. Expect Access Board action in 2009. View the report here:
http://www.access-board.gov/sec508/refresh/report/

Scott Plumlee:

Short version is that the recommendation is that 508 be harmonized with WCAG 2.0. You can subscribe to updates from the Access Board (I think, I can't find the link now) at access-board.gov. If you allow 2.5 years from the turning in of the report to the actual date the new guidelines take effect, look for 2011 or so. IIRC, the 2.5 years is how long it took for 508 to really go into effect the first time, but I could be wrong.

Outlook

Don't get me wrong, W3C WAI (and myself) recommends using WCAG 2.0, instead of WCAG 1.0 but to satisfy the law one needs to comply with WCAG 1.0.

That doesn't mean your company shouldn't prepare for the transition, not at all. To help you move to WCAG 2.0, WAI currently offers the following tutorials/articles:

What are your experiences?

Tagged as: , , , , , , , , , , 2 Comments
7Jan0

Best Practices for accessible Images

Posted by Michael Gaigg

Graphics can be of great benefit to the accessibility of a Web page by providing

  • Illustrations
  • Icons
  • Animations
  • other visual cues that aid comprehension for sighted individuals

When designing for people with disabilities too often we forget that we are not designing only for the blind. We must consider disabilities of all types. Graphics can be useful especially to individuals with certain reading disabilities, learning disabilities, attention deficit disorders, or cognitive disabilities.

Basic Rules

  • Do not use color alone to convey meaning
  • Choose contrast so that text is easily distinguishable from the background
  • Communicate the purpose of the graphic (not its appearance) through meaningful alternative text
  • When graphics require complex descriptions use the longdesc attribute, a link to an alternative page, a description in the context itself, or a “D” link
  • Use empty alt text for decorative, transparent, spacer, and redundant images
  • Try to limit the amount of text in graphics
  • Do not use effects that flicker or produce a strobe-like effect
  • Use images as backgrounds only if they do not convey important content (since it is impossible to add alt text to background images)

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Ensure that all information conveyed with color is also available without color 2.1 c Ensure that information is available through other style effects (e.g., a font effect), through context (e.g,. comprehensive text links) or through mark-up (e.g., the title attribute).
Until user agents allow users to control flickering, avoid causing the screen to flicker 7.1 j n/a
Provide text equivalent for Images, graphical or animated buttons, spacers, bullets 1.1 a <FORM action="..." method="post">

  <INPUT type="button" alt="Click this button to verify form" value="Verify" onclick="verify()">

  <INPUT type="image" name="submit" src="button.gif" alt="Submit form">

</FORM>

Level 2

Level 2 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen 2.2 c For more information check the online paper about Effective Color Contrast.
When an appropriate markup language exists, use markup rather than images to convey information 3.1 n/a Mark up complex equations with e.g. MathML.
Avoid causing content to blink 7.2 n/a n/a
Avoid movement in pages 7.3 n/a i.e., hide/show content or change presentation (movement and colors).

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Supplement text with graphic or auditory presentations where they will facilitate comprehension of the page 14.2 n/a n/a

References

Tagged as: , , , , , , , , , , , , , , , , , , , , , , , , No Comments
4Jan0

Get started with Screen Readers

Posted by Michael Gaigg

Browsers

The following browsers have support for Accessible Rich Internet Applications (ARIA) and are supported by several screen readers that also offer support for ARIA.

Screen Readers

The most popular screen readers for Windows are:

  • JAWS (free demo, Standard: $895, Professional: $1,095)
  • Window-Eyes (free demo, Standard: $895)
  • NVDA (Firefox 3 only, Open Source under GNU 2)

Installation

Please refer to Todd Kloots' fine blog entry on how to 'Configure your machine for testing with a screen reader'. This is a summary of his installation steps:

  1. Install virtualization software
  2. Install browsers & take a snapshot of that state
  3. Install and configure screen readers
  4. Restart the virtual machine & take a snapshot of that state

Which screen reader are you using? What are your experiences?

Tagged as: , , , , , , , , , , , , No Comments
19Dec2

Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure

Posted by Michael Gaigg

Overview

Last week the W3C announced the publishing of the Web Content Accessibility Guidelines (WCAG) 2.0 as a final Web Standard "W3C Recommendation". This is good news for many reasons:

  • Guidelines are more specific, e.g. specifying contrast ratio or time-based actions in seconds.
  • Success Criteria are written in a technology neutral fashion.
  • Success Criteria are written as testable statements.
  • Past killer arguments like "Javascript is forbidden" are now included as a technique to enhance accessiblity.
  • Gathering 'implementation experience' is now part of the W3C Process.
  • Guidelines include requirements related to informing users of data entry errors.
WCAG 2.0 Overview showing Principles, Guidelines, and Success Criteria (Level A, Level AA, Level AAA).

WCAG 2.0 Overview showing Principles, Guidelines, and Success Criteria (Level A, Level AA, Level AAA).

But what I personally like the best is the revamped structure called layers of guidance:

Structure

The four principles of Web accessibility: perceivable, operable, understandable, and robust.

The four principles of Web accessibility: perceivable, operable, understandable, and robust.

The WCAG 2.0 define a logical hierarchy of accessibility guidelines called layers of guidance. All of these layers work together to provide guidance on how to make content more accessible.

Principles

The foundation is built on four principles that are essential for anyone to access and use Web content, i.e. every Web content must be:

  1. Perceivable
  2. Operable
  3. Understandable
  4. Robust

These principles are the four pillars of Web accessibility and describe at a high level what can be done to assist users with varying needs to successfully access your content.

Guidelines

The 12 WCAG 2.0 Guidelines provide basic goals for creating accessible content.

The 12 WCAG 2.0 Guidelines provide basic goals for creating accessible content.

The 12 guidelines are basic goals that authors of Web content should work toward in order to create accessible content. None of them are testable and are only meant as a framework of overall objectives. The guidelines are:

  • 1.1 Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
  • 1.2 Provide alternatives for time-based media.
  • 1.3 Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
  • 1.4 Make it easier for users to see and hear content including separating foreground from background.
  • 2.1 Make all functionality available from a keyboard.
  • 2.2 Provide users enough time to read and use content.
  • 2.3 Do not design content in a way that is known to cause seizures.
  • 2.4 Provide ways to help users navigate, find content, and determine where they are.
  • 3.1 Make text content readable and understandable.
  • 3.2 Make Web pages appear and operate in predictable ways.
  • 3.3 Help users avoid and correct mistakes.
  • 4.1 Maximize compatibility with current and future user agents, including assistive technologies.

Success Criteria

WCAG 2.0 Success criteria shown in three column: column 1 (red) are Level A, column 2 (yellow) are Level AA, column 3 (green) are Level AAA.

WCAG 2.0 Success criteria shown in three column: column 1 (red) are Level A, column 2 (yellow) are Level AA, column 3 (green) are Level AAA.

Now, the success criteria is where the meat is. For each Guideline, testable success criteria are provided. Every Web content or series of Web content (complete web page or series of connected pages) can be tested and evaluated against these criteria and further assigned a true/false (equals pass or fail) value.
These success criteria are further divided into three levels of conformance, meaning satisfying all the requirements of a given standard, guideline or specification:

  • Level A (lowest; minimum level of conformance)
  • Level AA
  • Level AAA (highest)

The notion of conformance is so important that I will discuss it in a separate blog entry.

Sufficient and Advisory Techniques

Up until now all the principles, guidelines, and success criteria are written in a technology neutral fashion. That's great but what now? The Working Group has identified and published examples for HTML implementations that should serve as examples and tutorials and are kept in the living document called Techniques for WCAG 2.0. This document explains a variety of techniques on how to implement the given guideline for each success criteria. The list is not complete and will be expanded as new techniques are discovered.

The techniques fall into two categories:

  • Sufficient techniques: considered to be sufficient to meet a success criteria.
  • Advisory techniques: enhance accessibility, but did not qualify as sufficient techniques.

Most Success Criteria have multiple sufficient techniques listed. Any of the listed sufficient techniques can be used to meet the Success Criterion. Also there may be other techniques which are not documented by the working group that could also meet the Success Criterion. This is especially true for content that is not HTML.

Resume & Criticism

I'm really excited about the WCAG 2.0, their clear structure and promising, almost marketing-like wording. I also like the amount of effort taken to document examples, techniques and common failures.
What I miss is the programmer perspective that outlines each element with its associated success criteria and code samples, e.g. how can I make tables accessible, what about links, captcha, maps, etc.? I think this work is up to us and I will continue to tackle this issue by grouping, summarizing and compiling elements so I can publish them on this blog.

What are your opinions on WCAG 2.0?

Tagged as: , , , , , , , , , , , , , , , , , , , , , , , 2 Comments
20Nov1

Best Practices for accessible Tables

Posted by Michael Gaigg

The purpose of a table is to layout data. Unlike regular text, tables are generally difficult to comprehend. It takes time and effort to understand the structure, capture the data and interpret its meaning. This is even more difficult when the table is viewed and read out by a screenreader. Additional attributes are needed to relate headers with column and rows.

Tables might be used to layout content. The current recommendation for content tables is to explicitely state this purpose upfront so that users with screenreaders can avoid investigating the table's structure. Convey this meaning using the summary attribute:

<table border="0" summary="Layout table with two columns: menu and content">

Basic Rules

General:

  • Use proper HTML
  • Use tables for displaying tabular data
  • Use block elements (e.g. DIV) and CSS for layout purposes
  • Use proportional sizing rather than absolute sizing

Data Tables:

  • Describe tables with a name or title (caption tag)
  • Provide a summary (summary attribute)
  • Designate Row and Column Headers (TH tag)
  • Associate the data cells with the appropriate headers (scope & id attributes)
  • Avoid spanned rows or columns (workaround: normalize table)
  • Avoid tables with more than two levels of row and/or column headers

Layout Tables:

  • Linearize content (literal order in the code equals the linearized reading order)
  • Use the simplest table configuration possible

Best Practices

Level 1

Level 1 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
For data tables, identify row and column headers 5.1 (g) <TR>
<TH>Name</TH>
<TH>Cups</TH>
<TH abbr="Type">Type of Coffee</TH>
<TH>Sugar?</TH>
</TR>
For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells 5.2 (h) <TABLE border="1">
  <CAPTION>Travel Expense Report</CAPTION>
  <TR>
    <TH></TH>
    <TH id="header2" axis="expenses">Meals
    <TH id="header3" axis="expenses">Hotels
    <TH id="header4" axis="expenses">Transport
    <TD>subtotals</TD>
  <TR>
    <TH id="header6" axis="location">San Jose
    <TH> <TH> <TH> <TD>
  <TR>
    <TD id="header7" axis="date">25-Aug-97
    <TD headers="header6 header7 header2">37.74
    <TD headers="header6 header7 header3">112.00
    <TD headers="header6 header7 header4">45.00
    <TD>
  <TR>
    <TD id="header8" axis="date">26-Aug-97
    <TD headers="header6 header8 header2">27.28
    <TD headers="header6 header8 header3">112.00
    <TD headers="header6 header8 header4">45.00
    <TD>
  <TR>
    <TD>subtotals
    <TD>65.02
    <TD>224.00
    <TD>90.00
    <TD>379.02
</TABLE>

Level 2

No Level 2 requirements.

Level 3

Level 3 Checkpoints - Section 508 Compliancy Standards
Description W3C 508 Example
Provide summaries for tables 5.5 n/a <TABLE summary="This table charts the number of cups of coffee ...">
Provide abbreviations for header labels 5.6 n/a <TABLE ...>
<TH scope="col">Name</TH>
<TH scope="col">Cups</TH>
<TH scope="col" abbr="Type">Type of Coffee</TH>
<TH scope="col">Sugar?</TH>
</TABLE>
Provide a linear text alternative (on the current page or some other) for all tables that lay out text in parallel, word-wrapped columns 10.3 n/a n/a

References

Tagged as: , , , , , , , , , , , , , , , , , 1 Comment
1Nov4

Understand Web Content Accessibility Guidelines & Section 508

Posted by Michael Gaigg

So you know what Accessibility is and how it improves your ROI and why everybody benefits. Now what exactly is Section 508 and how does it correlate with W3C's Web Content Accessibility Guidelines (WCAG 1.0)? And most important, how can you create an accessible.htm that complies with these standards?

Overview: WCAG & Section 508

Section 508 and Web Content Accessibility Guidelines

The main institutions involved (as shown in the illustration above) are:

  • GSA (U.S. General Services Administration) represented by the IT Accessibility and Workforce (ITAW) who is the governments principal advocate and coordinator for Section 508 implementation. Other agencies and organizations may offer similar information, but ITAW is recognized as the governmentwide policy resource for Section 508.
  • World Wide Web Consortium (W3C) represented by the Web Accessibility Initiative (WAI) who developed the Web Content Accessibility Guidelines 1.0 that was approved in May 1999 and is currently the stable and referenceable version.
  • Users that visit websites. In the illustration I mention Government websites as the institution with the biggest need, that is because the Accessibility Guidelines are mandatory for governmental implementations.

Before I continue to explain how the WCAG relate to the Section 508 Standards it is important to get a grasp of what the respective guidelines propose and which checkpoints are included.

Checkpoints: Section 508 Standards

The purpose of Section 508 Standards is explained by Authority 29 U.S.C. 794d: “The purpose of this part is to implement section 508 of the Rehabilitation Act of 1973, as amended (29 U.S.C. 794d). Section 508 requires that when Federal agencies develop, procure, maintain, or use electronic and information technology, Federal employees with disabilities have access to and use of information and data that is comparable to the access and use by Federal employees who are not individuals with disabilities, unless an undue burden would be imposed on the agency. Section 508 also requires that individuals with disabilities, who are members of the public seeking information or services from a Federal agency, have access to and use of information and data that is comparable to that provided to the public who are not individuals with disabilities, unless an undue burden would be imposed on the agency.”

Section 508 Standards [SECTION508-STANDARDS]
Checkpoint Description 508
Non-text elements A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content). (a)
Multimedia presentation Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. (b)
Color Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup. (c)
Style Sheets Documents shall be organized so they are readable without requiring an associated style sheet. (d)
Server-side image maps Redundant text links shall be provided for each active region of a server-side image map. (e)
Client-side image maps 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. (f)
Data tables Row and column headers shall be identified for data tables. (g)
Markup & tables 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. (h)
Frames Frames shall be titled with text that facilitates frame identification and navigation. (i)
Flickering Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz. (j)
Text-only page 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. (k)
Scripting languages 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. (l)
Applets, plug-ins or other applications 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). (m)
Electronic forms 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. (n)
Navigation links A method shall be provided that permits users to skip repetitive navigation links. (o)
Timed response When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. (p)

Checkpoints: Web Content Accessibility Guidelines

The guidelines as described by the W3C explain how to make Web content accessible to people with disabilities. “The guidelines are intended for all Web content developers (page authors and site designers) and for developers of authoring tools. The primary goal of these guidelines is to promote accessibility. However, following them will also make Web content more available to all users, whatever user agent they are using (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.). Following these guidelines will also help people find information on the Web more quickly. These guidelines do not discourage content developers from using images, video, etc., but rather explain how to make multimedia content more accessible to a wide audience.”

Web Content Accessibility Guidelines [WCAG10]
# Description
01. Provide equivalent alternatives to auditory and visual content.
02. Don't rely on color alone.
03. Use markup and style sheets and do so properly.
04. Clarify natural language usage.
05. Create tables that transform gracefully.
06. Ensure that pages featuring new technologies transform gracefully.
07. Ensure user control of time-sensitive content changes.
08. Ensure direct accessibility of embedded user interfaces.
09. Design for device-independence.
10. Use interim solutions.
11. Use W3C technologies and guidelines.
12. Provide context and orientation information.
13. Provide clear navigation mechanisms.
14. Ensure that documents are clear and simple.

Considerations when implementing for Section 508 Compliancy

Section 508 has three Levels of priority: Level 1, Level 2 and Level 3. WCAG has also three levels of priority, but they are slightly different and named A, AA, AAA. This is an important distinction especially when testing with automated tools like Bobby because - and be aware of this - Level A compliancy NOT EQUALS Level 1 compliancy. Here is why:
When the ITAW handed Paragraph 1194.22 to the WAI (step 1) and after the WCAG 1.0 were completed and handed back to the ITAW (step 2) the Access Board released a Note to §1194.22:

  1. The Board interprets paragraphs (a) through (k) of this section as consistent with the following priority 1 Checkpoints of the Web Content Accessibility Guidelines 1.0 (WCAG 1.0) (May 5, 1999) published by the Web Accessibility Initiative of the World Wide Web Consortium:
    Section 1194.22 Paragraph WCAG 1.0 Checkpoint
    (a) 1.1
    (b) 1.4
    (c) 2.1
    (d) 6.1
    (e) 1.2
    (f) 9.1
    (g) 5.1
    (h) 5.2
    (i) 12.1
    (j) 7.1
    (k) 11.4
  2. Paragraphs (l), (m), (n), (o), and (p) of this section are different from WCAG 1.0. Web pages that conform to WCAG 1.0, level A (i.e., all priority 1 checkpoints) must also meet paragraphs (l), (m), (n), (o), and (p) of this section to comply with this section.

Item 2 is especially important because it means that a discrepancy between WCAG and Section 508 exists that requires a Section 508 Level 1 conformant site has to meet more than just Level A of the WCAG.

Step 3 and step 4 complete the process to create accessible.htm - it is basically up to you to apply the guidelines and produce accessible code.

Best Practices for Accessiblity

Follow my Best Practices blog entries to get more in-depth knowledge on what exactly you need to do to meet all the Section 508 compliancy checkpoints as outlined by the WCAG. Blog entries available so far:

References

Tagged as: , , , , , , , , , , , , , , , , , , 4 Comments
   Older Entries »

RSS Recent Posts

Categories

  • collapseAccessibility (13)
  • expandCode Samples & Tips (4)
  • expandDesign Guidelines (11)
  • expandGo figure (7)
  • expandGood News (11)
  • expandHere and there (11)
  • expandThis Week’s Highlights (23)
  • expandUsability & UCD (14)
  • expandWeb Design (13)

Popular Posts

People that inspire me

Tags

508 Accessibility accessible analytics Ben Gremillion best practices book Cameron Chapman chrome color content contrast css design design guideline Design Guidelines esri facebook free google guidelines harry brignull jacob nielsen javascript jeff sauro Joel Reyes jquery level 1 level 2 level 3 navigation scott berkun section 508 speed techniques trends typography UCD ui usability UX w3c wcag web Web Design

What I'm Doing...

Posting tweet...