Accessibility issues with the image & text block
I have identified a couple of accessibility issues with the image & text block.
Issue #1: The first issue is the heading that is included in this block. Whilst there is visually a heading in this block (large + bolder text), the text is not defined as a heading level element and is therefore not programmatically a heading. This means that assistive technology will interpret the heading as a paragraph.
Issue #2: This issue is related to the accompanying image, and if you choose to add a caption to the image. If you add a caption to the image, the caption is also added as an ALT text value to the image. The caption is using the correct semantic HTML <figcaption>, but an ID has been added to <figcaption>, and then an aria-labelledby attribute has been added to the <figure> element, referencing the ID on <figcaption>. For example (code simplified to illustrate issue):
<figure aria-labelledby="labelA" class="block-image__figure" role="figure">
<img alt="Volkswagen camper van parked up by the beach" role="img" src="vw.jpg">
<figcaption id="labelA">
<p>Volkswagen camper van parked up by the beach</p>
</figcaption>
</figure>
This results in, 1) The figure reads "Volkswagen camper van parked up by the beach" due to the aria-labelledby attribute, 2) The ALT text value "Volkswagen camper van parked up by the beach" is then read, 3) The caption is then read.
Hello Sam and Chloe, 🎉
I'm happy to let you know we released a new update for Rise 360. This update adds the following feature:
- Improve screen-reader navigation and readability for all learners with adjustable heading levels
Please find the release notes here. There's nothing to install for web apps. New features and fixes are immediately available, though you might need to export your Rise 360 course again.
Let me know if you have any questions about this update or the new feature!