First try at ARIA role and state markup -- looking for advice

Mon Jun 11 21:57:38 UTC 2007

Hi Joseph,

At my first look ...

1. The grid does not have to have a readonly attribute on or off. You will
want to set that on the individual girdcells as these are what will receive
focus and these are for which the AT will want to speak "readonly."
2.  Activedescendent is not supported yet in IE. but you could use tabindex
to manage your focus on the cells.
3. You don't need to put a namespace on role for FF.  ... could have
role="wairole:gridcell"
4. This solution works for xhtml. If you want an html solution go to
http://www.w3.org/WAI/PF/adaptable/HTML4/embedding-20060318.html

If you want to see a working grid that works in FF:
http://www.mozilla.org/access/dhtml/spreadsheet

Cheers,

Rich

Rich Schwerdtfeger
Distinguished Engineer, SWG Accessibility Architect/Strategist
Chair, IBM Accessibility Architecture Review  Board
blog: http://www.ibm.com/developerworks/blogs/page/schwer

             Joseph                                                        
             Scheuhammer                                                   
             <clown at utoronto.c                                          To 
             a>                        Richard                             
                                       Schwerdtfeger/Austin/IBM at IBMUS      
             06/08/2007 03:22                                           cc 
             PM                        fluid-work at fluidproject.org         
                                                                   Subject 
                                       First try at ARIA role and state    
             Please respond to         markup -- looking for advice        
             fluid-work at fluidp                                             
                roject.org                                                 

Hi Rich,

We have made our first attempt at adding ARIA markup to the lightbox
component.  We are looking for advice as to whether this is accurate,
and/or needs more attributes.

The header:
--- ------
<!--
    Notes on the following name spaces.
    1.  For ARIA roles:
xmlns:xhtml10="http://www.w3.org/1999/xhtml"
         xmlns:wairole="
http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"

         See
section "2.4.1 Applying roles in XHTML", specifically
         the paragraph
about XHTML1.0.  The DOCTYPE above declares
         this document as "XHTML
1.0 Transitional"):
http://www.w3.org/TR/2007/WD-aria-role-20070601/#applying_roles

    2.
For ARIA states:
            xmlns:aaa="http://www.w3.org/2005/07/aaa"
See section "3.1 Document Conformance", specifically the section
2.2:
            http://www.w3.org/TR/2007/WD-aria-state-20070601/#docconf
-->

<html    xmlns:xhtml10="http://www.w3.org/1999/xhtml"
        xmlns:wairole="http://www.w3.org/2005/01/wai-rdf/GUIRoleTaxonomy#"
        xmlns:aaa="http://www.w3.org/2005/07/aaa">
  <head>
...

Application role:
----------- ----

    <!-- The application role is a div that surrounds the thumbnail grid
-->
    <div xhtml10:role="wairole:application" id="lightbox-parent">

The Thumbnails:
--- ----------

    <!--
        Declare the thumbnails as an ARIA grid, that is
single-selectable, writeable, and, when
        first loaded, has the first
thumbnail focussed.
    -->
    <div tabIndex="2" id="gallery:::gallery-thumbs:::"
        xhtml10:role="wairole:grid"
        aaa:multiselectable="false"
        aaa:readonly="false"
        aaa:activedescendent="fluid.thumbFirst"
        aaa:disabled="false">

An Example Thumbnail:
-- ------- ---------

        <div class="float image-container-default" id="fluid.thumbFirst"
            xhtml10:role="wairole:gridcell"
            aaa:selected="true"
            aaa:readonly="false"
            aaa:disabled="false"
            aaa:grab="supported">
                <div class="image-inner-container">
                    <a href="images/Dragonfruit.jpg">
                        <img src="images/Dragonfruit.jpg" border="0"
alt="Dragonfruit"/>
                    </a>
                </div>
                <div class="caption image-title">
                    <a href="images/Dragonfruit.jpg"">Dragonfruit</a>
                </div>
        </div>

--
;;;;joseph

'Was it a car or a cat I saw?'
  - "Bob", W. A. Yankovic -

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070611/968d2093/attachment.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: graycol.gif
Type: image/gif
Size: 105 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070611/968d2093/attachment.gif>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: pic26539.gif
Type: image/gif
Size: 1255 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070611/968d2093/attachment-0001.gif>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: ecblank.gif
Type: image/gif
Size: 45 bytes
Desc: not available
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070611/968d2093/attachment-0002.gif>