Accessible Figures
The <figure> tag is used to describe illustrations, diagrams, photos, code listings, etc. Usually this description is visible. Figures are very common in the non-digital world in text books. They are great to give a TL;DR summary of a more complex piece of content.
HTML5 Example
This is the best solution to use, especially when building from scratch.
Here is the correct way to use the <figure> tag. Note that this traditional styling in this example (i.e. with the more complex content visually above the description) is only one way of styling figures, and is not the only way to do so.
function warning()
{alert('Warning!')}
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.
ARIA Example
If you already are using a component similar to this in existing work that is not accessible, go to the developer walkthrough of this section to see we made our implementation accessible.
If you have existing markup that has the meaning as the example of above, you can mark it up using ARIA.
function warning()
{alert('Warning!')}
Figure 1. JavaScript alert code example
Code Walkthrough of the Above Example
Below is the HTML of the above example. Use the dropdown to highlight each of the individual steps that makes the example accessible.