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

Fri Jun 8 20:22:11 UTC 2007

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 -