• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Logo for DigitalA11Y

Digital A11Y

Your Accessibility Partner

  • About
    • Bio
      • Conference Speaking
      • Videos
      • mentions
  • Articles
  • Resources
    • WAI-ARIA
    • WCAG
    • Cheat Sheets
    • A11Y Blogs
    • A11Y Toolkit
  • Contact
You are here: Home / WAI-ARIA: Role=Img

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.

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)

Share A11Y Love

  • Twitter
  • LinkedIn
  • Facebook
  • Reddit

Primary Sidebar

Get Digital A11Y in Your Inbox

Recent A11Y Articles

  • WCAG 2.1 Checklist
  • A Sneak peek into WCAG 3.0 First Public Draft
  • Understanding SC 4.1.3 Status messages
  • Understanding SC 2.5.4 Motion Actuation
  • Understanding SC 2.5.3 Label in Name

Recent Comments

  • Donal Rice on Digital Accessibility Companies Roundup
  • Rajath on A Sneak peek into WCAG 3.0 First Public Draft
  • Raghavendra Satish Peri on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility
  • Raghavendra Satish Peri on Digital Accessibility Companies Roundup
  • Andrew Somers on Foresee Your Colors: Tools to Evaluate your design for Color contrast Accessibility

A11Y Categories

  • Design
  • Events
  • HTML
  • IOS
  • Mobile Accessibility
  • News
  • Tools
  • WAI-ARIA
  • WCAG
  • Web Accessibility

  • Privacy Policy
  • Sitemap
© 2021 Digital A11Y