'

[CEUD-ICT] Displaying images and captions accessibly on webpages with HTML5 and WAI-ARIA

Alan M. Dalton AMDalton at nda.ie
Tue May 21 18:51:59 IST 2013


Hi,

We recently had a query about how to display captions for a series of
images in a webpage. This can be tricky: we have to use meaningful HTML
elements to keep our content accessible, but we also have to make sure that
each caption will be near the appropriate image. We've seen some solutions
that use a table with a row of captions and a row of images; that's not
good, because a screen reader would read out all of the images first, and
then read out all of the captions. That wouldn't make sense to the user.
I've attached a webpage that shows some better options, in order of
accessibility. (See attached file: Displaying images and captions.htm)

The first, and best, option uses an unordered list to structure the images
and captions. It uses a figure element for each img element and a
figcaption element for each caption. It uses the aria-describedby attribute
to associate each caption with its image. This option uses a display
property of "inline-block" for layout. You could also use flexible boxes
for layout.

The second, and second-best option, is the same as the first but doesn’t
use figure and figcaption elements; it just uses img elements and span
elements. It also uses the aria-describedby attribute to associate each
caption with its image. This option also uses a display property of
"inline-block" for layout, and again, you could also use flexible boxes for
layout.

The third, and worst, option uses img elements and span elements, and uses
a table for layout. This is not ideal, but is sometimes unavoidable, so we
have shown how to make a table-layout as accessible as possible: we gave
the table a role attribute with a value of "presentation", to let assistive
technology know that it is not a data table, and we again used the
aria-describedby attribute to associate each caption with its image. This
solution is not flexible, but the other two are.

Regards,
Alan.

Alan Dalton
Access Officer and Accessibility Development Advisor
http://accessibility.ie
National Disability Authority http://www.nda.ie
25 Clyde Road, Dublin 4, Ireland http://goo.gl/maps/gOjcj
**********************************************************************************
Is le haghaidh an duine nó an eintitis ar a bhfuil sí dírithe, agus le haghaidh an duine nó an eintitis sin amháin, a bheartaítear an fhaisnéis a tarchuireadh agus féadfaidh sé go bhfuil ábhar faoi rún agus/nó faoi phribhléid inti. Toirmisctear aon athbhreithniú, atarchur nó leathadh a dhéanamh ar an bhfaisnéis seo, aon úsáid eile a bhaint aisti nó aon ghníomh a dhéanamh ar a hiontaoibh, ag daoine nó ag eintitis seachas an faighteoir beartaithe. Má fuair tú é seo trí dhearmad, téigh i dteagmháil leis an seoltóir, le do thoil, agus scrios an t-ábhar as aon ríomhaire. Is é beartas na Roinne Dlí agus Cirt agus Comhionannais, na nOifígí agus na nGníomhaireachtaí a úsáideann seirbhísí TF na Roinne seoladh ábhair cholúil a dhícheadú.
Más rud é go measann tú gur ábhar colúil atá san ábhar atá sa teachtaireacht seo is ceart duit dul i dteagmháil leis an seoltóir láithreach agus le mailminder[ag]justice.ie chomh maith. 

The information transmitted is intended only for the person or entity to which it is addressed and may contain confidential and/or privileged material. Any review, retransmission, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited. If you received this in error, please contact the sender and delete the material from any computer.  It is the policy of the Department of Justice and Equality and the Agencies and Offices using its IT services to disallow the sending of offensive material.
Should you consider that the material contained in this message is offensive you should contact the sender immediately and also mailminder[at]justice.ie.
**********************************************************************************

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://list.universaldesign.ie/pipermail/ceud-ict/attachments/20130521/896b2652/attachment.htm 


More information about the CEUD-ICT mailing list