Título semántico en listas HTML

Al tratar de otorgarle más semántica nuestro marcado HTML nos hemos encontrado que no exista dentro de nuestra lista (UL) una etiqueta para informar el título de la lista (algo que describa los elementos de la misma). En cambio etiquetas como "fieldset" tienen a "legend" para titularlas

Ejemplo:

Mi leyenda

Mi contenido dentro del fieldset

También tenemos a "thead" y "th" para generar encabezados semánticos a nuestras tablas.

Como en las listas no existe nada de esto, pensé en utilizar el atributo title de todo elemento y combinarlo un poco con los pseudo-elementos "before" y "after" para poder obtener mi título semántico.

El código es el siguiente:

<ul title="Navegadores que soportan título semático en UL OL DL">
    <li>IE 8+</li>
    <li>FF 3+</li>
    <li>Chrome</li>
    <li>Opera 6+</li>
    <li>Safari 4+</li>
</ul>

Y el CSS aplicado:

ul{
    list-style-type:square;
    padding-left:20px;
}
ul:before{
    content:attr(title);
    position:relative;
    left:-20px;
    color:blue;
    font-weight:bold;
}

Para obtener este resultado



Como verán los navegadores soportados son:

• IE 8+
• FF 3+
• Chrome
• Opera 6+
• Safari 4+

Pronto prometo incorporar algún fallback para que funcione en aquellos navegadores que no lo soportan.