Difference between revisions of "ARIA img role"

From Level Access Web Labs
Jump to navigation Jump to search
 
(5 intermediate revisions by 2 users not shown)
Line 35: Line 35:
 
<span id="a2">This is another label</span>
 
<span id="a2">This is another label</span>
  
<h3>SVG with parent wrapping <div> with role="img" and aria-label</h3>
+
<h3>SVG with parent wrapping div with role="img" and aria-label</h3>
 +
<p>This lacks support in Firefox 62 but works in IE 11 and Chrome 68.</p>
 
<div role="img" aria-label="blue square">
 
<div role="img" aria-label="blue square">
 
<svg tabindex="-1" width="300" height="110">
 
<svg tabindex="-1" width="300" height="110">
Line 45: 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