#17 inaccessible cards

submitted on by Šime

Context: A list of linked cards, each with heading, image, and teaser text.

Bad code

<section>
  <section>
    <h2>Overview</h2>
    <figure class="card" data-url="image1.html" style="background: url(image1.jpg)">
      <figcaption>
        <h4>My heading</h4>
        <article>Teasertext...</article>
      </figcaption>
    </figure>
    <figure class="card" data-url="image2.html" style="background: url(image2.jpg)"> … </figure>
  </section>
</section>

Issues and how to fix them

  1. You might not need (so many) <section>s. Read Why You Should Choose HTML5 <article> Over <section> by Bruce Lawson for more details.
  2. 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.
  3. The figure element represents content, optionally with a caption, that is self-contained, but in this example there’s no content, only a caption.
  4. 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.
  5. The card is only linked via JavaScript. If there’s no proper HTML anchor (<a href="path/to/page">), the “link” is inaccessible to screen reader and keyboard users.
  6. The <h1> - <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.
  7. The article element 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 <p>.
  8. Making accessible cards where the whole card is clickable isn’t easy. Read the articles in the resources section for more information.

Good code

<div>
  <section>
    <h2>Overview</h2>
    <article class="card">
      <h3>
        <a href="image1.html"> My heading </a>
      </h3>
      <img src="image1.jpg" alt="Description of image1" />
      <p>Teasertext...</p>
    </article>
    <article class="card"> … </article>
  </section>
</div>

Resources