Michael Gaigg: Über UI/UX Design


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" ...>


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



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">


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">


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



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">


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



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: