Web Accessibility
Accessible websites require a well formed internal structure of (X)HTML source code and attached CSS stylesheets. Additionally specific precautions have to be taken, e.g. visually impaired people's access to your internet pages. Below you can see a collection of important rules due to accessible web design, detailed guidelines are collected at W3C-WAI, evaluation tools can be obtained here.
General Rules
- content must be structured clearly, marked up by title <hX> tags, paragraphs by <p> tags
- never highlight by colors or <span> tags, but by attributes (bold, caps, icon, additional statement, etc.)
Links/Navigation
- use meaningful link descriptions
- navigation by TAB key must be possible, i.e. use tabindex-tag
- when linking text to detail pages never use "read more ..." but e.g. ".. read more about article X on topic Y", alternatively explain this link in greater detail by title-attribute
- announce whether link opens in new window within title tag
- use keyboard shortcuts by accesskey-attributes, shortcuts should document browser (in)compatibilities
- JavaScript menus are problematic (foldout menus)
- use textual instead of graphical menu buttons (scalability!)
- grouping of navigation elements, structuring with <ul> / <li> elements
- no colors for highlighting, but icons, text formatting, borders
- invisible anchors are problematic, display:none is not enough, use <dfn> element to explain current position within pages
Graphical elements
- use alternative text (alt-tags) with a short description, detailed description of longer text (longdesc-attribute), "design-only images" marked up by alt=""
- no transparent graphics (used for layout purposes)
- don´t use imagemaps
Tables
- using table layouts is a bad idea, use <div> tags instead
- provide meaningful table captions and correct descriptions of data tables (<th abbr = "text" ...)
- abstracts are required (<table summary = "Here you can find ...)
Frames
- only use frames if absolutely necessary, in this case provide meaningful names ( "navigation menu", etc.); use noframes tag
Text
- animated text must be supplied with alternative text
- clearly distinguish between text and background colors
- use relative units for font size
Forms
- operation by keyboard only must be possible
- labeling of fields (label) nearby input field
Language
- simple short sentences, clear terms preferred, be concise
- mark words in other languages by <span lang = "en" xml: lang = "de" ...>
Acronyms/Abbreviations
- describe first occurrence in detail <abbr title="..detail description...."> FQDN ...
- emphasize by CSS e.g. abbr[title] {border: none; color: ...}
- create glossary and link to it
31.07.2009 15:28
