| Home | Site TOC | Site Search | Technology |

CSS Accessibility

Why use CSS?

• Separate Structure (HTML elements), Content (text, images, other media), and Presentation (color, layout, etc.).

  Important to note that while CSS allows good document structure, it does not enforce good structure. -- DiveIntoMark

• Easier to maintain and update a site
• Can offer user a choice of style sheets to use (Mozilla, Opera. Not IE)
• User can override author styles to better meet their needs

Things to Avoid

• Using HTML structural mark up (h1, blockquote, etc.) for visual effects.
  for example using textarea instead of iframe - screen reader user thinks they are in a form.
• Using HTML Presentational markup (font, center, etc.) to simulate structural mark-up (i.e. lists, headings)
• Using CSS styling to simulate proper structural mark-up

Good CSS practices that benefit accessibility

1. Current assistive technology ignores CSS positioning. Assistive technology reads in source code order. The following is from: How to Design An Accessible Web Site Presentation OrderThe "ideal" Web page would present text in a logical order to every browser (or "user agent" as the W3.org standards describe it):
   1. The title of the page.
   2. For long pages, a summary or abstract of what is on the page. 
   3. The main content of the page. 
   4. Secondary content of the page (the kinds of things that might be displayed in a right column or inset box). 
   5. Site navigation and other information not intrinsic to the main content.
      
   Instead, most pages on the Web now display in this order, with no page summary:
   1. Site navigation, often a very long list of links. 
   2. The title of the page. 
   3. Secondary information displayed in a floating or inset box within the main page content.
   4. The main content of the page. 
   5. Additional secondary content of the page to be displayed in a separate right column on the page. 
   6. Other information not intrinsic to the main content.
   Solution: write your code to reflect the first list. Use CSS to display information in the preferred visual layout.
2. Use relative (scalable) units (em, %, keyword) rather than fixed units (px, in, cm).
   • Accessible web text - sizing up the issues.
   • Understanding web typography - an introduction
   • Difference between em units and % in block level elements
   • see ESPN.com as example of mixing relative and fixed units. In IE turn on "ignore font sizess" then scale the font sizes notice text overlapping, etc. (This is a bug in IE. "Ignoring font sizes" does only that, if line-height is fixed then the page breaks when scaling fonts.)
3. Always specify a fallback generic font.
4. Reveal acronyms and abbreviations to users (title will appear on screen as a tool tip; screen reader can read title)
• acronym { border-bottom: #333 1px dotted; cursor: help;}
• abbr { border: #333 1px solid }(note: IE does not support abbr, but screen readers repair and users will get the title information)
• Examples on this page.
5. Change bullet appearance, but keep markup as a list
• ul.bullet {
list-style-image: url(bullet.gif); }
• #custom-gen li:before {
content: "\00BB \0020"; }

#custom-gen ul {
list-style: none;
margin-left: 0;
padding-left: 1em;
text-indent: -1em; }

6. Display important/useful hrefs only when printing (source: http://www.admin.ox.ac.uk/)
   • @media print
a:after {
content : " [" attr(href) "] " ; }
     (works in Mozilla/Gecko browsers and Opera; thanks to Aardvark. This style sheet element requires no modifications or additions to the HTML code)
   • @media screen {
.printonly {
display: none }
}

@media print {
.printonly {
display: inline; }
}
This works in all 5.x+ browsers. These style sheet elements require additional code for all anchors (i.e. <span class="printonly">(http://www.admin.ox.ac.uk/)</span> University of Oxford Central Administration (http://www.admin.ox.ac.uk/) (Use print-preview feature of browser. Url of link should appear immediately after the link.)
7. Remove unnecessary stuff when printing. (Use print-preview feature of browser. Notice that navigation bars, breadcrums, footers, etc. have been removed from the print rendering of the page.)
8. Increase size of input form controls
   • Text input
     input {
font-size: 1em; }
   • Radio buttons and checkboxes
     input {
height: 1em;
width: 1em;}
   • Enhance Form Accessiblity with CSS
9. Change background-color of input form controls that have the focus.
   • input:focus {
background:#FFFF80;
color:black;}
   • Accessify (click on or tab to an input field, notice color change of form control) Note: this works in IE because of javascript.
   • Stylish Buttons (Using CSS to change the appearance of form buttons.)
10. Apply a "skin" to a list of links that makes them appear as a block of images with JavaScript roll overs. Provide "rollover effect" from the keyboard. Rollovers can be created for mouse users by using the :hover pseudo tag without the need for scripting. The same styling that creates the rollover for the mouse can be applied to create a keyboard "tab-over" by using the :focus (for Gecko browsers) and :active (for IE) pseudo tags.
• CSS Workshop: Horizontal Menus
• Listamatic: one list, many options

If (When?) implemented by browsers....

1. Dynamically outline elements with focus or hover. Outline declaration draws outline (similar to border) around an element but does not take up space (reflow the screen). The outline will overlap surrounding element if necessary.

CSS Cautions

1. Generated content - Current assistive technology relies on what the user's browser supports, that is what can the browser display on the screen). If the browser does not support a CSS rule, the user/AT will not "see" it.
   • pseudo-tags :before and :after when used in conjunction with content.
   • code.example:before {
content:"<inserted content: text>"
}

code.example:after {
content: "<inserted content: graphic>" url(bullet.gif) url(bullet.gif)
}
   • the code in the previous list item should match the text below if the browser supports the pseudo-tags with content
     < inserted content: text>code.example:before {
     content: <begin-code-example> }
     code.example:after {
     content: <end-code-example>
     }<inserted content: graphic>
   • Note: IE 6 or before does not support these pseudo tags. if you use the "show stylesheet" tool, listed below, on this page , you will see code.example:unknown instead of code.example:before.

Resources

Books

• Eric Meyer on CSS: Mastering the Language of Web Design
  by Eric A. Meyer
  Publisher: New Riders Publishing; 1st edition (June 28, 2002)
  ISBN: 073571245X
• Sams Teach Yourself CSS in 24 Hours
  by Kynn Bartlett
  Publisher: Sams; 1st edition (July 10, 2002)
  ISBN: 0672324091
• Cascading Style Sheets 2.0 Programmer's Reference
  by Eric A. Meyer
  Publisher: McGraw-Hill Osborne Media; (March 20, 2001)
  ISBN: 0072131780
• Cascading Style Sheets: Designing for the Web (2nd Edition)
  by Hakön Wium Lie, Bert Bos, Robert Cailliau
  Publisher: Addison-Wesley Pub Co; 2nd edition (July 13, 1999)
  ISBN: 0201596253

Accessible CSS techniques

• Reveal Hidden Navigation on focus
• An Accessible Method of Hiding HTML Content
• Build User-Controlled Style Sheets for Greater Accessibility
• Unobtrusive and Slightly Accessible CSS Tool Tips on Semi Transparent CSS Menus
• Accessible Table/Bar Chart with CSS
• Expandable/Colapsable Content (CSS+JS)
• Accessible, stylish form layout
• Accessify.com - Better Accessible Forms
• Applying CSS to forms
• Forms with Style
• CSS and round corners: Making accessible menu tabs
• CSS and Round Corners: Build Accessible Menu Tabs

Websites

• Accessibility improvements in CSS2.0
• Accessibility Features of CSS
• Consistent List Indentation
• AListApart - lots of articles and "how-to's"
  • Alternative Style: Working With Alternate Style Sheets
  • AListApart: CSS Beyond the Browser: Going to Print
  • AListApart: Mo’ Betta Rollovers
  • CSS Design: Taming Lists
• Create Keyboard-friendly Link Effects
• CSS Resources
• Fix Your Site With the Right DOCTYPE!
• Using the DOCTYPE Tag (quirks mode)
• RichInStyle.com good CSS reference, training, etc.
• Eric Meyer
• Web Design Group Cascading Style Sheets
• CSS Pointers Group
• Article: CSS accessibility problems: is markup dead?
• Jarmin: CSS layout
• Glish: CSS layout
• Saila.com
• NetMechanic CSS articles
• css-discuss list
• Hide CSS from older browsers
• Hide CSS from Netscape 4.x
• CSS Hub: IE 5.5 box-model hack
• CSS design ideas
• CSS compliance tests & chart
• CSS Implementation by Browser
• CSS Panic Guide
• Accessify.com - All accessibility links
• BlueRobot.com - reservoir for layouts
• Relative Sizing and Images
• Using Background-Image to Replace Text
• css Zen Garden — Resource Guide

Tools

• Ian's Favlets (show and label 'div' with id and class, disable css, show style sheets)
• Tantec Favelets
• PNH Developer Toolbar v0.51 (for Mozilla/Netscape. remove images, kill style sheets, etc.)

Agency Contact Information | Texas State Homepage | Texas State Wide Search

Please complete the comment form or send comments and suggestions to: Jim Allan (Webmaster-Jim Allan)

Last Revision: July 11, 2007