Main content

Alert message

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.

  • 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 Order: The "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).
  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; }
  • Item 1 (note: this example of a custom generated bullet only works in Opera 6+ and Mozilla/Gecko based browsers, the bullet should look like » 'a double right angle')
  1. 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.  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. (http://www.admin.ox.ac.uk/) University of Oxford Central Administration  (Use print-preview feature of browser. Url of link should appear immediately after the link.)
  2. Remove unnecessary stuff when printing. (Use print-preview feature of browser. Notice that navigation bars, breadcrumbs, footers, etc. have been removed from the print rendering of the page.)
  3. Increase size of input form controls
  4. Change background-color of input form controls that have the focus.
    • input:focus {
      background:#FFFF80;
      color:black;}
    • Stylish Buttons (Using CSS to change the appearance of form buttons.)
  5. 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.

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:""
      }

      code.example:after {
      content: "" 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
      code.example:before {
      content: }
      code.example:after {
      content:
      }inserted bulletinserted bullet
    • 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

Websites

Tools