Difference between revisions of "Figure and Figcaption Elements"

From Level Access Web Labs
Jump to navigation Jump to search
 
(13 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;">
 
<figure>
 
<figure>
   <img src="test.jpg" width="30%" alt="Brick 3 level office building with the SSB logo and the address 1493 Chain Bridge Rd. Ste. 100 displayed">
+
   <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 McLean, VA Office Building</figcaption>
+
   <figcaption>The SSB Vienna, VA Office Building</figcaption>
 +
</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>
 +
</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>
 
</figure>
 
</html>
 
</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

Image with alt in figure with figcaption

7 level class A office building and the address 1593 Spring Hill Rd. Ste. 720 displayed
The SSB Vienna, VA Office Building
a power scooter with basket
Power Scooter. © MyScooterShop

Non-image figure and caption

window.alert('Email address is invalid');
JavaScript Alert dialog code

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.