Re: providing a long description using the summary and details elements.

Hi Steve,

> an idea:
>
> using the summary /details elements to provide a long description

Wow Steve. This is cool. Thanks for thinking outside of the box.

Could it work cleanly without JavaScript and no disclosure triangle?
HTML4's longdesc is such a simple solution to the problem. This seems
complicated to me.

Sidebar: Something to keep in mind for the examples is that charts and
graphs are not usually interchangeable with data tables so they don't
usually make good long descriptions.

Designers create data visualizations for the sighted because it makes
the data easier to understand than raw numbers in a table. Ideally, a
chart should convey ideas about the data that would not be readily
apparent if available only in a table (but the table could be included
too). A longdesc for a data chart should try to communicate the
relationships, treads, etc that the image is intended to convey. Some
analysis is typically required to describe the data. It's tempting to
use a table as the sole content for a longdesc but that usually isn't
enough.

Joe Clark talked about this a few years ago in a WCAG comment. [1]
WCAG revised their example after his comment to:

"A bar chart compares how many widgets were sold in June, July, and
August. The short label says, "Figure one - Sales in June, July and
August." The longer description identifies the type of chart, provides
a high-level summary of the data, trends and implications comparable
to those available from the chart. Where possible and practical, the
actual data is provided in a table."

Best Regards,
Laura

[1] http://www.w3.org/WAI/GL/WCAG20/issue-tracking/viewdata_individual.php?id=789

On 8/24/10, Steven Faulkner <faulkner.steve@gmail.com> wrote:
> Hi all,
> an idea:
>
> using the summary /details elements to provide a long description for an
> image:
>
>
>    - image goes in the <summary>
>    - long description in <details>
>    - use of longdesc attribute on image provides indication to browser/AT
>    that details/summary is being used for the specific purpose of providing
> a
>    long description.
>    - longdesc attribute with URL value (longdesc="URL") provided for
>    backwards compatibility (suggest deprecated in HTML5)
>    - longdesc attribute without an URL "longdesc" be specced as an indicator
>    that a long description is present when image is sole content of the
> summary
>    element.
>
>  example code:
>
> <details>
>   <summary role="button"><img src="images/table.gif" alt="Average rainfall
> in millimetres by country and season." width="407" height="341"
> longdesc="details.html#table"></summary>
>
> <table border="1" id="table" tabindex="0"><caption>Rainfall in millimetres
> by Country and Season.</caption><tr> <td></td><th scope="col">UK</th><th
> scope="col">Japan</th><th scope="col">Australia</th></tr><tr> <th
> scope="row">Spring</th><td>5.5</td><td>2.4</td><td>2</td></tr><tr> <th
> scope="row">Summer</th><td>4.5</td><td>3.4</td><td>2</td></tr><tr> <th
> scope="row">Autumn</th><td>3.5</td><td>1.8</td><td>1.5</td></tr><tr> <th
> scope="row">Winter</th><td>1.5</td><td>1.2</td><td>1</td></tr></table>
>
> </details>
>
> sort of working example
> http://www.paciellogroup.com/blog/misc/details.html (haven't
> had time to work out glitches, but gives an idea of how it could work,
> doesn't work in IE yet. note: scripting would not be required once
> details/summary implemented by browsers).
> resolves issues of:
>
>    - providing *standardized* method for a programnmatically associated long
>    description
>    - provides it inline next to the image
>    - only displayed on user request
>    - does not clutter design (note example does not a disclosure triangle as
>    is suggested for details/summary in spec, but this would not clutter
> desigh
>    , i don't think)
>    - deprecates current longdesc use, but provides for backwards compat and
>    continued use of longdesc attribute
>    - details could conatin a.n <iframe> to display long descriptions
>    external to the page.
>    - long desc available to anybody who wants it.
>
>
>
> --
> with regards
>
> Steve Faulkner
> Technical Director - TPG Europe
> Director - Web Accessibility Tools Consortium
>
> www.paciellogroup.com | www.wat-c.org
> Web Accessibility Toolbar -
> http://www.paciellogroup.com/resources/wat-ie-about.html

-- 
Laura L. Carlson

Received on Tuesday, 24 August 2010 17:02:21 UTC