WAI-ARIA: Role=Img
A container for a collection of elements that form an image.
Description
A container for a collection of elements that form an image.
An img can contain captions and descriptive text, as well as multiple image files that when viewed together give the impression of a single image. An img represents a single graphic within a document, whether or not it is formed by a collection of drawing objects. In order for elements with a role of img be perceivable, authors MUST provide alternative text or a label determined by the accessible name calculation.
Role=Img Example
HTML5 Example
<p>A repeating SVG gradient is defined using the
<code>spreadMethod</code> attribute.
A value of <code>repeat</code> causes the color stops
to repeat in the same order, from beginning to end:</p>
<svg class="inline-example" role="img">
<title>A repeating linear gradient</title>
<desc>The gradient starts dark, slowly shifting to light,
then quickly dark again. This pattern repeats four
times left to right, each time brightening across a large
region and then getting dark within a short space.
</desc>
<linearGradient id="repeat" x2="25%" spreadMethod="repeat">
<stop offset="0" stop-color="black" />
<stop offset="0.8" stop-color="white" />
<stop offset="1" stop-color="black" />
</linearGradient>
<rect width="100%" height="100%" fill="url(#repeat)" />
</svg>HTML Example
<figure role="img">
<img alt="A cute cat." src="/albert.jpg">
<figcaption>This is my cat, Albert.</figcaption>
<figure>Characteristics
Superclass Role
- section
Related Concepts
- HTML img
Inherited States and Properties
- aria-atomic
- aria-busy (state)
- aria-controls
- aria-current (state)
- aria-describedby
- aria-details
- aria-disabled (state)
- aria-dropeffect
- aria-errormessage
- aria-expanded (state)
- aria-flowto
- aria-grabbed (state)
- aria-haspopup
- aria-hidden (state)
- aria-invalid (state)
- aria-keyshortcuts
- aria-label
- aria-labelledby
- aria-live
- aria-owns
- aria-relevant
- aria-roledescription
Name From
- author
Accessible Name Required
- True
Children Presentational
- True
Semantic HTML
Use the HTML <img> tag for non-interactive Images.
<img src=”/smiley.gif” alt=”Smiley face” height=”42″ width=”42″>
Reference
- W3C (opens new window)
