Difference between revisions of "ARIA img role"
Jump to navigation
Jump to search
| (13 intermediate revisions by 2 users not shown) | |||
| Line 8: | Line 8: | ||
height:1em; | height:1em; | ||
display:block; | display:block; | ||
| + | margin:.1em; | ||
} | } | ||
</style> | </style> | ||
<body> | <body> | ||
| + | <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> | ||
| − | <span class="box" role="img" aria- | + | <h3>Span with role='img' and aria-label</h3> |
| + | <span class="box" role="img" aria-labelledby="a1"> | ||
| + | x | ||
</span> | </span> | ||
| + | |||
| + | <h3>Div with role='img' and aria-labelledby</h3> | ||
| + | <div class="box" role="img" aria-labelledby="a1"> | ||
| + | x | ||
| + | </div> | ||
| + | |||
| + | <h3>Span with role='img' and aria-labelledby</h3> | ||
| + | <span class="box" role="img" aria-labelledby="a2"> | ||
| + | x | ||
| + | </span> | ||
| + | |||
| + | <span id="a1">This is a 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]] | ||
Latest revision as of 14:41, 3 October 2019
Div with role='img' and aria-label
x
Span with role='img' and aria-label
x
Div with role='img' and aria-labelledby
x
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
x
Text with role img
One
Two
Text with role img with aria label
One
Two
