Note
Design 11: The following list summarises work to date:
- Image,
- Figure and figcaption,
- Toggle button,
- ARIA to separate visual and non-visual experiences,
- Fluid-responsive image style,
- Landscape and portrait responsivness,
What remains is as follows:
- Remove and replace the
<br>spacing 'shims' with CSS (for layout). - Style the caption.
- Call ARIA from the JavaScript unless required active in the native DOM.
Video
Skip video to and
HTML
<figure>
<picture>
<source media="(min-width: 760px)" srcset="../img/dieux-by-pat-godfrey-user-testing.png">
<source media="(min-width: 100px)" srcset="../img/dieux-by-pat-godfrey-user-testing-v.png">
<img aria-labelledby="heading" class="dieux__img" src="../img/dieux-by-pat-godfrey-user-testing.png" alt="dieUX cartoon strip, User Testing created 26th January, 2019 by Pat Godfrey">
</picture>
<button id="button" aria-controls="caption" aria-pressed="false" aria-expanded="false" aria-hidden="true">Toggle Caption</button>
<figcaption id="caption" aria-labelledby="heading" class="hidden" role="region">
<h2 id="heading">Planning</h2>
<p>[Assistant] The Director wants your plan for the information architecture. <br>
[Our Designer] Says nothing. <br>
[Assistant] I'll tell him you are at lunch.</p>
</figcaption>
</figure>