Difference between revisions of "ARIA img role"

From Level Access Web Labs
Jump to navigation Jump to search
 
(2 intermediate revisions by the same user not shown)
Line 46: Line 46:
 
<div class="box" role="img">
 
<div class="box" role="img">
 
x
 
x
 +
</div>
 +
 +
<h3>Text with role img</h3>
 +
<div role="img">
 +
  <span> One </span>
 +
  <span> Two </span>
 +
</div>
 +
 +
<h3>Text with role img with aria label</h3>
 +
<div role="img" aria-label="three">
 +
  <span> One </span>
 +
  <span> Two </span>
 
</div>
 
</div>
  

Latest revision as of 14:41, 3 October 2019

Div with role='img' and aria-label

Span with role='img' and aria-label

x

Div with role='img' and aria-labelledby

Span with role='img' and aria-labelledby

x This is a label This is another label

SVG with parent wrapping div with role="img" and aria-label

This lacks support in Firefox 62 but works in IE 11 and Chrome 68.

Div with role='img' and no accessible name

Text with role img

One Two

Text with role img with aria label

One Two