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
| 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
| 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
| 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
- Chisholm. W., Vanderheiden, G., Jacobs, I.; CSS Techniques for Web Content Accessibility Guidelines 1.0; http://www.w3.org/TR/WCAG10-CSS-TECHS/
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
| 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
| 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
- WebAIM; Creating Accessible Frames; http://webaim.org/techniques/frames/
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
| 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
| 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
| 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
- Arditi, Aries PhD. Effective Color Contrast. http://www.lighthouse.org/color_contrast.htm
- Ion, P., Miner, R. (editors); Mathematical Markup Language. http://www.w3.org/TR/REC-MathML/
- WebAIM; Creating Accessible Images. http://webaim.org/techniques/images/
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
| 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
| 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
- WebAIM; Creating Accessible Tables; http://webaim.org/techniques/tables/
Best Practices for accessible Links
Posted by Michael Gaigg
It is essential that users can find, identify, and comprehend hypertext links quickly. Even though there are no Level 1 (A) checkpoints associated with links it is pretty easy to fulfill Level 2 and even Level 3. It's definitely worthwhile the little effort with the added benefit that e.g. most browsers render the title attribute as a tooltip.
Basic Rules
See also my Design Guidelines for Links.
- Contrast link text color and regular text color
- Underline link text
- Ensure link text is descriptive of its destination
- Make visited links change color
- Limit link text to a maximum of four words
- Place important words at the front of link text
- Minimize amount of links to seven (excluding the menu) unless they are presented in a clear structure
- Use meaningful pathnames when creating directory structure
Best Practices
Level 1
No Level 1 requirements.
Level 2
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Links | Clearly identify the target of each link | 13.1 | n/a | <A href="my-doc.html">My document is available in HTML</A>,<A href="my-doc.pdf" title="My document in PDF">PDF</A>,
<A href="my-doc.txt" title="My document in text">plain text</A> |
Level 3
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Links | Create a logical tab order | 9.4 | n/a | <A tabindex="2" href="link2.txt"">Link 2</A><A tabindex="1" href="link1.txt">Link 1</A>
<A tabindex="3" href="link3.txt">Link 3</A> |
| Links | Provide keyboard shortcuts to important links | 9.5 | n/a | <A accesskey="2" href="link2.txt"">Link 2</A><A accesskey="1" href="link1.txt">Link 1</A>
<A accesskey="3" href="link3.txt">Link 3</A> |
| Links | Include non-link, printable characters (surrounded by spaces) between adjacent links | 10.5 | n/a | [<A href="a.htm">Link A</A>] [<A href="b.html">Link B</A>] or<A href="a.htm">Link A</A> | <A href="b.html">Link B</A> |
Templates
Find out more about <a title="Michael Gaigg IT Solutions Webpage" href="http://www.mgitsolutions.com/">IT Solutions</a>
References
- Webcredible. Writing effective link text. http://www.webcredible.co.uk/user-friendly-resources/web-usability/effective-link-text.shtml
Best Practices for accessible Content
Posted by Michael Gaigg
People rarely read Web pages, they scan the page! As a result, Web pages have to follow Design Guidelines for Content that enable them to quickly identify headings, titles, links and other important elements to orient themselves. What else has to be done to be Section 508 compliant?
Basic Rules
- Don’t rely on color alone
- Identify the language used throughout the document and identify changes
- Use correct markup to emphasize important content
- Be clear and precise in the choice of wording and language
Best Practices
Level 1
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Color | 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). |
| Language | Clearly identify changes in the natural language of a document's text and any text equivalents | 4.1 | n/a | And with a certain <SPAN lang="fr">je ne sais quoi</SPAN>, she entered both the room, and his life, forever. <Q>My name is Natasha,</Q> she said. <Q lang="it">Piacere,</Q> he replied in impeccable Italian, locking the door. |
| Language | Use the clearest and simplest language appropriate for a site's content | 14.1 | n/a | n/a |
Level 2
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Blinking | Avoid causing content to blink | 7.2 | n/a | n/a |
| Movement | Avoid movement in pages | 7.3 | n/a | i.e., hide/show content or change presentation (movement and colors). |
Level 3
| Checkpoint | Description | W3C | 508 | Example |
|---|---|---|---|---|
| Text | 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" at lighthouse.org (http://www.lighthouse.org/accessibility/effective-color-contrast/). |
| Abbreviations | Specify the expansion of each abbreviation in a document where it first occurs | 4.2 | n/a | <ABBR title="social security number">SS#</ABBR> or ASCII art:<ABBR title="smiley in ASCII art">:-)</ABBR> |
| Acronyms | Specify the expansion of each acronym in a document where it first occurs | 4.2 | n/a | Welcome to the <ACRONYM title="World Wide Web">WWW</ACRONYM> |
| Language | Identify the primary natural language of a document | 4.3 | n/a | <HTML lang="en"> |
Templates
<HTML xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<ABBR title="social security number">SS#</ABBR>
<ACRONYM title="Geographical Information System">GIS</ACRONYM>
References
- ISO 639.2 Registration Authority (2004, 10). Codes for the Representation of Names of Languages. http://www.loc.gov/standards/iso639-2/englangn.html
- Aries Arditi, PhD. Effective Color Contrast. http://www.lighthouse.org/accessibility/effective-color-contrast/
Recent Posts
- 500+ Free Stunning PC Icons August 31, 2010
- Highlights of Week 32/2010 August 16, 2010
- How to use the Google Font API August 10, 2010
- Secret of Pixar’s Success [Link] August 6, 2010
- Esri listens to their Users and changes Pronunciation of its Name August 3, 2010
- Highlights of Week 30/2010 August 2, 2010
Categories
Accessibility (13)
- Code Samples & Tips (4)
- Design Guidelines (11)
- Go figure (7)
- Good News (11)
- Here and there (11)
- This Week’s Highlights (23)
- Usability & UCD (14)
- Web Design (13)
Popular Posts
- Make it easy for your customers to throw money at you!
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Section 508: WCAG 1.0 or WCAG 2.0?
- Go figure: 10 Comic Strips that have Something in Common
- Powerpoint Wireframe Stencils as Free Download
People that inspire me
- Björn Seibert
- Boxes and Arrows
- Bruce Temkin
- Christian Heilmann
- David Leggett
- Gez Lemon
- Hannes Schmiderer
- Harry Brignull
- Henny Swan
- Jared Smith
- Jared Spool
- John Rhodes
- Joshua Porter
- Kel Smith
- Scott Berkun
- The Access Pond
Tags
What I'm Doing...
- Top 20 Wireframe Tools http://t.co/zRBd0W0 via @garmahis 1 week ago
- RT @wpzoom 500 Free Icons: WPZOOM Social Networking Icon Set http://bit.ly/aEGdUJ 2 weeks ago
- RT @esriuc GIS: Designing Our Future. The concept of GeoDesign is really taking off, keep an eye out. http://bit.ly/9TioWQ 3 weeks ago
- 1400 super cool web icons by FatCow: http://bit.ly/ctskcU 3 weeks ago
- [JOB OPENING] User Interface Engineer, http://bit.ly/ui-engineer-position 2010-07-30
- More updates...
Posting tweet...