Difference between revisions of "ARIA img role"

From Level Access Web Labs
Jump to navigation Jump to search
 
(9 intermediate revisions by 2 users not shown)
Line 14: Line 14:
 
<h3>Div with role='img' and aria-label</h3>
 
<h3>Div with role='img' and aria-label</h3>
 
<div class="box" role="img" aria-label="this is an ARIA label on a div">
 
<div class="box" role="img" aria-label="this is an ARIA label on a div">
 +
x
 
</div>
 
</div>
  
 
<h3>Span with role='img' and aria-label</h3>
 
<h3>Span with role='img' and aria-label</h3>
 
<span class="box" role="img" aria-labelledby="a1">
 
<span class="box" role="img" aria-labelledby="a1">
 +
x
 
</span>
 
</span>
  
 
<h3>Div with role='img' and aria-labelledby</h3>
 
<h3>Div with role='img' and aria-labelledby</h3>
<div class="box" role="img" aria-label="this is an ARIA label on a div">
+
<div class="box" role="img" aria-labelledby="a1">
 +
x
 
</div>
 
</div>
  
 
<h3>Span with role='img' and aria-labelledby</h3>
 
<h3>Span with role='img' and aria-labelledby</h3>
 
<span class="box" role="img" aria-labelledby="a2">
 
<span class="box" role="img" aria-labelledby="a2">
 +
x
 
</span>
 
</span>
  
 
<span id="a1">This is a label</span>
 
<span id="a1">This is a label</span>
 
<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>
 +
<p>This lacks support in Firefox 62 but works in IE 11 and Chrome 68.</p>
 +
<div role="img" aria-label="blue square">
 +
<svg tabindex="-1" width="300" height="110">
 +
  <rect width="200" height="100" style="fill:rgb(0,0,250);stroke-width:2;stroke:rgb(0,0,0)">
 +
</svg>
 +
</div>
 +
 +
<h3>Div with role='img' and no accessible name</h3>
 +
<div class="box" role="img">
 +
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>
 +
 
</body
 
</body
 
</html>
 
</html>
  
 
[[Category:ARIA]]
 
[[Category:ARIA]]

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