Difference between revisions of "Figure and Figcaption Elements"
Jump to navigation
Jump to search
The SSB Vienna, VA Office Building
Power Scooter.
© MyScooterShop
JavaScript Alert dialog code
Rnickelson (talk | contribs) |
|||
| (12 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
| + | ==Image with alt in figure with figcaption== | ||
<html> | <html> | ||
<div style="text-align:center;"> | <div style="text-align:center;"> | ||
<figure> | <figure> | ||
| − | <img src=" | + | <img src="https://mraccess77.github.io/images/help.png" width="30%" alt="7 level class A office building and the address 1593 Spring Hill Rd. Ste. 720 displayed"> |
| − | <figcaption>The SSB | + | <figcaption>The SSB Vienna, VA Office Building</figcaption> |
</figure> | </figure> | ||
| + | |||
| + | <figure role="group" aria-label="Figure 1"> <img src="https://mraccess77.github.io/images/help.png" alt="a power scooter with basket"> <figcaption>Power Scooter. | ||
| + | © MyScooterShop</figcaption> | ||
| + | </figure> | ||
| + | |||
</div> | </div> | ||
</html> | </html> | ||
| + | |||
| + | ==Non-image figure and caption== | ||
| + | <html> | ||
| + | <figure> | ||
| + | <code> | ||
| + | window.alert('Email address is invalid'); | ||
| + | </code> | ||
| + | <figcaption>JavaScript Alert dialog code</figcaption> | ||
| + | </figure> | ||
| + | </html> | ||
| + | |||
| + | ==Figure with background image== | ||
| + | <html> | ||
| + | <figure> | ||
| + | <div style="background-image:url('test.jpg');"> | ||
| + | </div> | ||
| + | </figure> | ||
| + | </html> | ||
| + | |||
| + | ==Figure with no figcaption== | ||
| + | <html> | ||
| + | <figure> | ||
| + | <div>test</div> | ||
| + | </figure> | ||
| + | </html> | ||
| + | ==results== | ||
| + | Tested with JAWS, Voiceover on iOS and NvDA. JAWS is the only Screen reader that announced the Figure roll. | ||
[[Category:Elements]] | [[Category:Elements]] | ||
| + | [[Category:HTML5]] | ||
Latest revision as of 17:14, 12 February 2019
Contents
Image with alt in figure with figcaption
Non-image figure and caption
window.alert('Email address is invalid');
Figure with background image
Figure with no figcaption
test
results
Tested with JAWS, Voiceover on iOS and NvDA. JAWS is the only Screen reader that announced the Figure roll.
