Though this is old, I'm updating it for others who might find this question when searching later.
@Matt Kelliher:
Using the css :before and a data-* attribute for the list is a great idea, but can be modified slightly to be more handicap accessible as well:
HTML:
- Dodge Shadow
- Ford Focus
- Chevy Lumina
CSS:
ul:before{
content:attr(aria-label);
font-size:120%;
font-weight:bold;
margin-left:-15px;
}
This will make a list with the "header" pseudo element above it with text set to the value in the aria-label attribute. You can then easily style it to your needs.
The benefit of this over using a data-* attribute is that aria-label will be read off by screen readers as a "label" for the list, which is semantically correct for your intended use of this data.
Note: IE8 supports :before attributes, but must use the single colon version (and must have a valid doctype defined). IE7 does not support :before, but Modernizer or Selectivizr should fix that issue for you. All modern browsers support the older :before syntax, but prefer that the ::before syntax be used. Generally the best way to handle this is to have an external stylesheet for IE7/8 that uses the old format and a general stylesheet using the new format, but in practice, most just use the old single colon format since it is still 100% cross browser, even if not technically valid for CSS3.
加载中...