21Oct0
Best Practices for accessible Content
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/
Similar Posts:
- Best Practices for accessible Links
- Best Practices for Accessible Stylesheets
- Best Practices for Accessible Frames
Enjoy this article?
About Michael Gaigg
Michael Gaigg is a User Interface Expert at ESRI. His expertise includes User-centered Design (UCD), Usability, Accessibility and Section 508, Web Development and Web Design.
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)
- Richtlinien für barrierefreie Webinhalte (WCAG) 2.0 (German)
- Best Practices for Accessible Stylesheets
- Question: How can Internet Mapping Applications be made accessible?
- Best Practices for Accessible Frames
- Section 508: WCAG 1.0 or WCAG 2.0?
- Best Practices for accessible Images
- Get started with Screen Readers
- Web Content Accessiblity Guidelines (WCAG) 2.0: Overview and Structure
- Best Practices for accessible Tables
- Understand Web Content Accessibility Guidelines & Section 508
- Best Practices for accessible Links
- Best Practices for accessible Content
- What is Accessibility?
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
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...
- 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...