WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: definition list or data table

for

From: John Foliot
Date: Dec 14, 2012 3:55PM


Catherine Roy wrote:
>
> A friend of mine wants to describe an image that explains the anatomy
> of
> a tweet (similar to this one) :
>
> <http://i.i.com.com/cnwk.1d/i/tim//2010/04/20/30146338-map-of-a-
> tweet.png>
>
> He will be using a separate page for the description though I am not
> sure yet whether he will be using longdesc or just adding a visible
> link
> on the main page but regardless, the question is how to best
> structurally represent this compex image, especially for screen reader
> users, wherein we have code examples and explanations tied to the code
> examples.
>
> My first instinct would be to use a data table but thinking further on
> it, I am not sure. Perhaps a definition list ? Or something else
> altogether ?

That's all huh?

Given the complexity of this, I think a page that employs multiple
strategies would be your best bet. I would likely approach it along the
following lines:

<h1>Map of a Twitter Status Object</h1>

<p>Prose description of how the image is being presented. Indicate that the
image uses colours for sectioning the various components, that it is a code
example, and that each section has explanatory text associated to it for
instructional purposes.</p>

<h2> Actual Code example</h2>

<!-- here, actually recreating the code, line by line, would be extremely
useful for further study -->
<pre>
{"id"=>12296272736,
"text"=>
"An early...
<!-- you get the idea -->
</pre>

<h2>Analysis of the code</h2>
<dl>
<dt>{"id"=>12296272736, (first block of information)</dt>
<dd>The tweet's unique ID. These IDs are roughly sorted &amp; developers
should treat them as opaque (<a href=" http://bit.ly/dCkppc
">http://bit.ly/dCkppc<;/a>).</dd>

<dt>"text"=> (second block of information)</dt>
<dd>(Note, this block spans 3 lines of code, and ends with: "...65453".)
Text of the tweet. Consecutive blah blah blah...</dd>

<!-- ...and so on -->


You will note that I do not propose to include the entire code block in the
<dt>, but rather enough for the non-sighted user to understand the start and
finish of each block - remember that you have already presented the entire
code block as <pre> text that they can use for reference.

If you wanted to go the extra mile, you could also use named anchors for
in-page navigation, along the lines of this:

<h2> Actual Code example</h2>
<pre>
<span id="1">{"id"=>12296272736,</span>
<span id="2">"text"=></span>

...

<h2>Analysis of the code</h2>
<dl>
<dt><a href="#1">{"id"=>12296272736, (first block of information)</a></dt>
<dd>(Note, this block spans 3 lines of code, and ends with: "...65453".)
Text of the tweet. Consecutive...</dd>

This would facilitate going back and reviewing the actual code example.
Bonus points if you go both ways:

<h2> Actual Code example</h2>
<pre>
<a href="#x1" id="1">{"id"=>12296272736,</a>
<a href="#x2" id="2">"text"=></a>

...

<h2>Analysis of the code</h2>
<dl>
<dt><a href="#1" id="x1">{"id"=>12296272736, (first block of
information)</a></dt>
<dd>(Note, this block spans 3 lines of code, and ends with: "...65453".)
Text of the tweet. Consecutive...</dd>

Yep, a lot of coding here, but that's how I would probably do it. (You asked
<grin>)

Cheers!

JF
(notice how I said nothing about @longdesc?...)