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

pat mc carthy ipatmk at gmail.com
Tue May 21 20:10:23 IST 2013

As a blind iPhone user you are three options using the three different methods came up with the same text output firstly a description of the ball Then the description of which type of ball .

 I do not understand why you need to describe the ball and then give the type of ball



Sent from my iPhone

On 21 May 2013, at 06:51 p.m., "Alan M. Dalton" <AMDalton at nda.ie> wrote:

> 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.
> **********************************************************************************
> <Displaying images and captions.htm>
> _______________________________________________
> CEUD-ICT mailing list
> CEUD-ICT at list.universaldesign.ie
> http://list.universaldesign.ie/mailman/listinfo/ceud-ict

More information about the CEUD-ICT mailing list