Context: A list of linked cards, each with heading, image, and teaser text.
Bad code Bad code
<figure class="card" data-url="image1.html" style="background: url(image1.jpg)">
<figure class="card" data-url="image2.html" style="background: url(image2.jpg)"> … </figure>
Issues and how to fix them Issues and how to fix them
- You might not need (so many)
<section>s. Read Why You Should Choose HTML5 <article> Over <section> by Bruce Lawson for more details.
- Heading levels shouldn’t be skipped. Screen reader users rely on a sound document outline and hierarchy. It helps with navigation and understanding how the page is structured.
- The figure element represents content, optionally with a caption, that is self-contained, but in this example there’s no content, only a caption.
- The image in a card usually isn’t decorative, it conveys information. It should be part of the HTML document and not added via CSS. Background images are not accessible to everyone.
<a href="path/to/page">), the “link” is inaccessible to screen reader and keyboard users.
<h6>elements represent introductory headings for their sections. The
<h4>is flow content and thus technically allowed as a descendent of
figcaption, but it’s better to use it to introduce the card as a whole.
articleelement represents a self-contained composition in a page or site. This could be a newspaper article, an essay or report, a blog or other social media post. For a simple paragraph use
- Making accessible cards where the whole card is clickable isn’t easy. Read the articles in the resources section for more information.
Good code Good code
<a href="image1.html"> My heading </a>
<img src="image1.jpg" alt="Description of image1" />
<article class="card"> … </article>