E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 5 (In chronological order)

From: Catherine Roy
Date: Fri, Dec 14 2012 2:53PM
Subject: definition list or data table
No previous message | Next message →

Hi,

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 ?

Thanks,


Catherine


--
Catherine Roy
http://www.catherine-roy.net

From: Ryan E. Benson
Date: Fri, Dec 14 2012 3:54PM
Subject: Re: definition list or data table
← Previous message | Next message →

I would roughly write a narrative with the code following. Depending on the
audience, I would maybe think about combining the blocks when appropriate.
Ex:

The basics of a tweet are the unique ID that it gets, text of the tweet,
which are tied to variables id, text, and created_at, respectfully.
{Code here}

If the tweet is a reply to another, variables {here} are assigned values,
otherwise their value is nil.

etc

--
Ryan E. Benson



On Fri, Dec 14, 2012 at 4:53 PM, Catherine Roy < = EMAIL ADDRESS REMOVED = >wrote:

> Hi,
>
> 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 ?
>
> Thanks,
>
>
> Catherine
>
>
> --
> Catherine Roy
> http://www.catherine-roy.net
>
> > > >

From: John Foliot
Date: Fri, Dec 14 2012 3:55PM
Subject: Re: definition list or data table
← Previous message | Next message →

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?...)

From: Catherine Roy
Date: Sat, Dec 15 2012 9:10AM
Subject: Re: definition list or data table
← Previous message | Next message →

Thank you Ryan and John for your responses. Last question regarding this
matter. The work my friend is doing about which I am inquiring will
eventually be a book, in which there will be several complex images,
that he wishes to make available in various formats (HTML, PDF, EPUB).
He has asked how he can apply long descriptions to these other formats
(PDF and EPUB).

Although I have had good training on PDF accessibility, I would hardly
call myself an expert and I have not done it in a while but if I recall
correctly, PDF does not support long descriptions per se (although I did
find this request : http://pdf.editme.com/pdfua-32000-longdesc but have
no idea how old this is since there is no date - grrr).

As for EPUB, I am only marginally familiar with this format but my
research indicates that while there is no support at the moment for out
of band descriptions, the aria-describedby attribute can be used to link
an image to a description in the same file. Is this correct ?

My friend will not go for having a long description on the same "page"
so there is not point in suggesting that. The only thing I can think of
is having an annexe at the end of the document where he could include
all complex image descriptions and use whatever mecanism each format
offers to link each image to its long description.

But perhaps there are other solutions I am not aware of for these 2
formats ? Guidance on this issue would be much appreciated.

Thanks,


Catherine

--
Catherine Roy
http://www.catherine-roy.net

From: Ryan E. Benson
Date: Sat, Dec 15 2012 1:31PM
Subject: Re: definition list or data table
← Previous message | No next message

> But perhaps there are other solutions I am not aware of for these 2
> formats ? Guidance on this issue would be much appreciated.
That is correct, PDFs don't have a long description capability. For this I
would put an one-liner, to see a full description go to {www link/PDF
page}. Then since you can manipulate the reading order very easily, just go
through it lineally by the way of text then code. The two things I would
do differently is the vertical text and the text blurbs that are short, and
mark them up as figures. The reason for vertical text is probably
self-explanatory. The text may not be, I would tag some as figures is to
supply more context. For example "geo"=>nil depreciated. If that variable
is depreciated, why is it in a model? By tagging either the text as a
figure you can add alt text to say the variable is depreciated because
____. PDF tags in general can have alt text, but think it has various
results.

--
Ryan E. Benson



On Sat, Dec 15, 2012 at 11:10 AM, Catherine Roy < = EMAIL ADDRESS REMOVED = >wrote:

> Thank you Ryan and John for your responses. Last question regarding this
> matter. The work my friend is doing about which I am inquiring will
> eventually be a book, in which there will be several complex images,
> that he wishes to make available in various formats (HTML, PDF, EPUB).
> He has asked how he can apply long descriptions to these other formats
> (PDF and EPUB).
>
> Although I have had good training on PDF accessibility, I would hardly
> call myself an expert and I have not done it in a while but if I recall
> correctly, PDF does not support long descriptions per se (although I did
> find this request : http://pdf.editme.com/pdfua-32000-longdesc but have
> no idea how old this is since there is no date - grrr).
>
> As for EPUB, I am only marginally familiar with this format but my
> research indicates that while there is no support at the moment for out
> of band descriptions, the aria-describedby attribute can be used to link
> an image to a description in the same file. Is this correct ?
>
> My friend will not go for having a long description on the same "page"
> so there is not point in suggesting that. The only thing I can think of
> is having an annexe at the end of the document where he could include
> all complex image descriptions and use whatever mecanism each format
> offers to link each image to its long description.
>
> But perhaps there are other solutions I am not aware of for these 2
> formats ? Guidance on this issue would be much appreciated.
>
> Thanks,
>
>
> Catherine
>
> --
> Catherine Roy
> http://www.catherine-roy.net
>
> > > >