Roles

WAI-ARIA: Role=Img

Authored By :Raghavendra Satish Peri Last Updated :April 24, 2024 Roles

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

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

WAI-ARIA 1.2 Specification
Refer to the notes from the WAI-ARIA 1.2 specification for more information on role=img.

Raghavendra Satish Peri

Raghavendra Satish Peri empowers enterprises with his expertise in digital accessibility and marketing. Through his impactful work, he collaborates with both small businesses and large enterprises, spearheading digital transformation initiatives. Raghavendra is the author behind the influential Accessibility Blog hosted at DigitalA11Y.com, where he delves into the intricate realm of digital accessibility and its significance.
Passionate about fostering change within the tech landscape, Raghavendra actively inspires local tech communities through engaging meetups and mentorship. He is the driving force behind HelloA11Y.com, a vibrant platform that unites accessibility professionals, developers, and enthusiasts, propelling the adoption of accessible practices.
Beyond the digital realm, Raghavendra seeks diverse experiences. You might find him exploring various cuisines at local cafes and restaurants or immersing himself in thought-provoking audio books. His insights and musings also find a home on his Personal Blog at raghava.in, where he shares his thoughts and experiences with a wider audience.