W3C logo Web  Accessibility Initiative (WAI) logo

Notes on making classes accessible

This is a straw proposal for using classes to convey information.


Classes are already used to convey meaning via presentation. For example, here are some of the classes in WCAG.  Some of these classes , like "noprint", and maybe tocline2 or tocline3, are used internally, and there's no point in  giving the end user access to the class names.

However, it would be useful to make some (though not all) of these accessible.  For example, in WCAG document items of class "guideline" are visually distinctive... in yellow boxes, so a sighted individual can quickly scan through the document finding the guidelines.  The blind user does not have an equally convenient way to do this (guidelines happen to be H3's, but not all H3's are guidelines).

There may be some standard sections that it's useful to jump to, like a table of contents, copyright notice, navigation bar.  Sometimes there are ad-hoc ways of doing this, like putting a link to the contents on the top of the page.  But it would be convenient to have this built in.


  1. Style sheets shall be given an additional property called "title", for example
    .guideline {background green: title: "guideline heading"}

    .toc {background: yellow; title: "table of contents"}

  2. User agents shall present to the user on demand a list of all titles
  3. Users shall be able to choose any class and then step through all elements of a particular title..

This provides the functionality described in the section on Motivation..

Note that this proposal does not require us to standardize on any meanings for any classes.  Instead, it gives the author freedom to decide what classes are "important" and give the user convenient access to them.

Philosophical Questions

As discussed e.g. in the thread on "Stylish Semantics", the usual philosophy of style is that all meaning should be in the content, which means that semantics should be carried by the tag names H1 H2 strong etc.  In this view, the style sheet should only carry presentation, and no meaning.

However, existing tags in HTML do not carry all the semantics that would be useful (e.g. there's no "guideline" tag).  Furthermore, the HTML 4.01 discussion of class states:

The class attribute has several roles in HTML:

So we should not limit the use of "class" because of its use of style sheets.  It seems consistent with HTML 4.01 that at a minimum,  the user agent behavior described here should be available if we use the class name instead of the title.

However, title is useful because

The question remains: how to associate title with class.

It could be done via RDF.  For example, to associate the title "priority 1 checkpoint" with p1

    xmlns:s="http://www.w3.organizations/class titles/">
    <rdf:Description about="http://www.w3.organizations/wai-classes/p1">
      <s:title>Priority 1 checkpoint </s:title>

However, from a practical point of view, it's simpler to say

    .p1 {title: "priority 1 checkpoint" }

Furthermore, from a philosophical point of view, one could argue that title is actually presentation:   a particular textual expression of the underlying abstract class.  Different users may have different needs and preferences.  For example, an experienced screenreader user may prefer

     .p1 {title: "P one" }

since it produces less speech clutter.

Relation to XML

One could always systematically, indeed automatically convert this use of class to XML, e.g. by wrapping any element of a class in an XML tag of the same name.  

However, we're still left with the same question of how to assign a title to the XML classes... although there's another alternative, to use XSL to assign the titles.

An Alternative: use CSS content Property

Instead of defining a new CSS attribute, we could consider re-using the  existing CSS  "content" attribute, for example

    .p1:before { content: "priority 1 checkpoint" visibility: hidden}

(The :before pseudo-element serves no purpose except to satisfy the CSS specification) This would require no changes in CSS; just a change in user agent behavior. The user agent would treat content as described above for title.

To further distinguish this use of content from its normal use, there could be an additional property, e.g. an unusual color

  .p1:before { content: "priority 1 checkpoint"; visibility: hidden; color: #52CA8F}

These alternatives are of course ugly.

$Date: 2000/11/08 08:17:25 $ Leonard R. Kasday

Copyright 2000 W3C (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements