Re: ARIA in CSS (Was: [user-context] What are the use cases for exposing screen reader or magnifier version info?)

On Tue, Feb 5, 2013 at 1:14 AM, James Craig <jcraig@apple.com> wrote:
> (Since this thread has moved off of the IndieUI topic, I've moved it to the ARIA (wai-xtech) list, and put IndieUI in the BCC for this message.)
>
> FWIW, am not opposed to doing some of ARIA 2 in a more CSS-like way

The problem this is supposed to solve is the verbosity facing web
authors who want to provide the same accessibility for heavily custom
widgets as their HTML-native equivalents, right?

Wouldn't the implementation of Web Components, especially decorators,
address this problem very directly?

https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html

Here's the fruit selection example recast using Web Components. Note
this is optimised for reuse of the customisation. If you only wanted
to apply this customisation to the fruit selection listbox and no
other listboxes, you could inline the decorators rather than
referencing an external file.

components.html:

<!doctype html>
  <meta charset=utf-8>
  <title>Components</title>
  <decorator id=select-decorator>
     <ul><content></content></ul>
   </decorator>
   <decorator id=option-decorator>
      <li><content></content>
   </decorator>

library.css:

select {
    decorate: url(components.html#select-decorator)
}
option {
    decorate: url(components.html#option-decorator)
}

select-a-fruit.html:

<!doctype html>
  <meta charset=utf-8>
  <title>Select a fruit</title>
  <link rel=sheetsheet href=library.css>
  <link rel=components href=components.html>
  <form action=fruit method=POST>
    <label for=fruitbox>Fruit:</label>
    <select id=fruitbox>
      <option>apples
      <option>bananas
      <option>cantaloupes
      <option>dates
    </select>
   </form>

--
Benjamin Hawkes-Lewis

Received on Saturday, 2 March 2013 07:56:17 UTC