PROPOSAL: Expressing WAI-ARIA in CSS

Hi,

I am interested in being able to specify WAI-ARIA markup in CSS. For
example, in HTML:

    h1, h2, h3, h4, h5, h6 { role: heading; }
    h1 { aria-level: 1; }
    ...
    h6 { aria-level: 6; }
    p { role: paragraph; }
    nav { role: navigation; }

for DocBook:

    title { role: heading; }
    section > title { aria-level: 1; }
    section > section > title { aria-level: 2; }
    ...
    para { role: paragraph; }

and NCX (ePub 2.0 table of content file):

    navLabel > text { role: heading; }
    navPoint > navLabel > text { aria-level: 1; }
    navPoint > navPoint > navLabel > text { aria-level: 2; }
    ...

The aria properties should cover semantics not currently specifiable in
CSS; that is, I don't expect an aria-hidden property (as it is covered by
the |display: none;| and |visibility: hidden;| CSS properties).

This also allows for WAI-ARIA attributes to be supported within this
framework as well:

    [role] { role: attr(role); }
    [aria-level] { aria-level: attr(aria-level); }

The motivation here is being able to specify the processing of xml files
using only CSS markup (specifically for a text-to-speech ebook reader)
within a unified XML processor. This makes it easier to support new file
formats and avoid repeating programming logic. That is, a table of contents
could be extracted by looking at |role: heading;| properties and using the
aria-level property as the table of content level.

NOTE: I have not currently assessed how all WAI-ARIA properties could be
expressed as CSS, just role and aria-level which are neeeded for my
application.

Thanks,
- Reece

Received on Saturday, 12 January 2013 19:42:10 UTC