[OBSOLETE] Accessibility Tips
This post is now obsolete but left for reference.
The tips and this post have been updated here: [UPDATED] Accessibility Tips
CSE HTML Validator Std/Pro v10 generates a random accessibility tip message (unless disabled) to help developers create more accessible websites. I thought it would be helpful to display these accessibility tips here for everyone to see and for possible discussion and improvement.
What is Accessibility?
When a web site is accessible, it means that anyone, regardless of ability, can enjoy and use the web site effectively. As an added bonus, it also makes the web site more machine readable, and that often has search engine benefits.
As an example, image a web site with many images on it (using the "img" element). A blind visitor may be using a screen reader or talking browser to "view" this page. One of the most significant (and very easy to do) actions a web developer can do to increase accessibility and make a web page accessible is to supply appropriate "alt" text for each image. This "alt" text is what the user's screen reader or talking browser will read to the blind user because he/she cannot see the images. If this "alt" text is not there, then the web page often becomes inaccessible to blind users.
As an example, consider an image on a product page that says "Order Now" but there is no "alt" text for this image. Because there is no "alt" text, a blind user could easily get lost if they are trying to order the product. Instead, the image should have an "alt" attribute that is simply alt="Order Now". This will let a screen reader or talking browser tell the blind user that the image is the order button, and the user will then know what to do to continue ordering the product. Without this simple addition, a blind user would not be able to use the web page as effectively as a user who is not disabled.
Accessibility Tips in v10 (not in any order)
* Use the "tabindex" attribute to provide a logical tab order, BUT ONLY WHEN the default tab order is insufficient. AND BE CAREFUL! It is easy to introduce usability bugs when setting the order explicitly. "Tabindex" values can be from 0 to 32767 and do not have to be sequential or unique. When the same value is used more than once, the order is determined by which appears first in the character stream. Visit http://www.w3.org/TR/WCAG20-TECHS/H4 for more information.
* Provide expansion or definition for abbreviations using the "abbr" or "acronym" element ("abbr" is recommended for better future compatibility). Example: <abbr title="World Wide Web">WWW</abbr>.
* Use the "title" attribute with "a" elements to further describe or clarify the purpose of the link and/or to provide mouse-over tooltips. Tooltips build user trust by telling visitors where links will take them. However, important information that the user should know before selecting the link, like warnings, should be described in the link text, and if a link will open in a new window or tab, a visual indicator of this should be provided.
* Although still allowed (not prohibited) by WCAG 2.0, layout tables should be avoided whenever possible in favor of CSS layouts in order to maintain the semantic meaning of table elements and the separation of presentation from content.
* Use the "caption" element with data (non-layout) tables to identify the table. Use the "summary" attribute for the "table" element to provide an overview of the purpose of the table or to explain how to navigate the table. The caption and summary text should not duplicate each other.
* Use the heading elements ("h1" to "h6") to identify headings. Do not use headings to simply change the appearance of text. Proper use of heading elements allows assistive technology and user agents to properly recognize heading text.
* Use the "ol" element for ordered lists, the "ul" element for unordered lists, and the "dl" element for definition lists. This makes it easier for assistive technology to navigate from list to list or from item to item.
* Use semantic markup elements like "em", "strong", "cite", "blockquote", "q", "quote", "sub", and "sup" when appropriate. Use "em" and "strong" to indicate structural emphasis, use "blockquote" for long quotations which may require paragraph breaks, use "q" for short inline quotations, and use "sub" and "sup" for subscripts and superscripts.
* Use the "table" element and other table elements ("tr", "th", "td", etc.) to present tabular information. This preserves data relationships even when users cannot see the table or the presentation format is changed. Do not use tabs or spacing to create visual presentations of columns.
* Use "dfn" to mark the use of a word or phrase where it is defined (the term, not the definition).
* Consider using the "link" element with the "rel" attribute to provide metadata about the position of web pages that are part of collection. For example, specify the URLs to the next, previous, and content pages. Consider also linking to a glossary page if appropriate.
* Use the heading elements ("h1" to "h6") to begin each section of content. This assists user agents and assistive technology in letting users navigate based on headings. Avoid skipping heading levels. Use CSS to change heading appearance.
* Provide a semantic grouping for related form controls using the "fieldset" and "legend" elements. This is most important for related radio buttons and checkboxes. If desired, CSS can be used to change the visual effect of using the elements.
* Use this technique to identify the purpose of a link using link text combined with its enclosing list item: http://www.w3.org/TR/WCAG20-TECHS/H77, or combined with its enclosing paragraph: http://www.w3.org/TR/WCAG20-TECHS/H78, or combined with its enclosing table cell and associated table headings: http://www.w3.org/TR/WCAG20-TECHS/H79, or combined with the preceding heading element: http://www.w3.org/TR/WCAG20-TECHS/H80, or combined with the parent list item: http://www.w3.org/TR/WCAG20-TECHS/H81. Note: Whenever possible, provide link text that does not need additional context.
* In "select" elements, use "optgroup" to group related "option" elements. Label the option groups with the "label" attribute. Avoid using dummy list entries to delimit groups.
* Provide text alternatives for ASCII art, emoticons and leetspeak.
* Avoid situations where horizontal scrolling may occur. This can cause trouble, especially for people with cognitive disabilities and low vision. To test, open pages containing text in a browser and resize the browser to 1/4 of the screen width to check for horizontal scrolling.
* Use the latest mature HTML and XHTML specifications (currently HTML 4.01 and XHTML 1.0). Avoid proprietary elements and attributes and avoid using features in a manner that is not supported by the specification.
* For required form controls, indicate the required status in the control's "label" or "legend". If not indicated by text (like "(required)"), then make sure the meaning of the indicator is explained before it is used. NOTE: Abbreviating "required" to "req." may be confusing.
* When style information is removed from a web document or styles are turned off, make sure that the meaning of content and structural relations are preserved.
* Use the CSS "letter-spacing" property to control the amount of whitespace between characters. Do not use blank characters (like space characters) that may change the meaning and pronunciation of words.
* Use CSS to include decorative images wherever possible. The CSS "background", "background-image", "content", and "list-style-image" properties can be used. This avoids additional markup in the content.
* When sizing fonts, use CSS and specify relative sizes using "em", percentages or named font sizes like "xx-small", "x-small", "small", "medium", "large", "x-large", "xx-large", "smaller", or "larger".
* Use CSS margin, padding, and positioning properties instead of spacer images.
* Limit line lengths to 80 characters or less. This makes reading easier, especially for those with certain disabilities. One way to do this is to use "div" elements with "max-width: 80em".
* Use CSS to control the visual representation of text. There are many CSS font, color, transform, and spacing properties to let you do this. Using CSS increases accessibility by separating structure from presentation. Also, avoid images of text.
* For better accessibility, consider using CSS to specify text and background colors of secondary content (such as banners, features and navigation) but avoid specifying text and background colors for the main content. This makes it easier for users to choose their own colors.
* Use percentages or "em" values in CSS for text container sizes. This helps eliminate horizontal scrolling (when using percentages) and text cropping (when using "em") when users increase the text size.
* For better accessibility, consider using CSS to specify borders and layout to delineate areas of a web page but avoid specifying text and text-background colors. This makes it easier for users to choose their own colors.
* For better accessibility, make sure that the order of content in the source code matches the visual presentation order. This makes it easier to access the content in the proper order.
* When using accesskeys with the "accesskey" attribute, use standard accesskeys if possible. An accesskeys standard is emerging from the UK government recommendation: 'S' - Skip navigation, '1' - Home page, '2' - What's new, '3' - Site map, '4' - Search, '5' - Frequently Asked Questions (FAQ), '6' - Help, '7' - Complaints procedure, '8' - Terms and conditions, '9' - Feedback form, '0' - Access key details. If using accesskeys, then consider using this standard (or another appropriate standard). Also, be aware that using accesskeys often reduces accessibility due to the problems it can create.
* When using "accesskeys", understand the benefits as well as the associated problems. For example, accesskeys can override pre-existing keyboard shortcuts in user agents or assistive technologies. Because of poor design and implementation, accesskeys can actually reduce accessibility in many cases.