Details/Summary elements and Lighthouse

By
Una O Connor

Jumping like a jackrabbit on crystal meth

...was how an element was described as behaving upon being clicked.

This complaint was concerning an accordion element facilitated by Bootstrap4, so I decided to see what could be improved. I'm a holy terror for removing fancy geegaws with native elements as often as possible, evidenced by my deep and abiding respect for Description List (dl) (I know I'm not alone in that either, eh Wakkos?).

After checking to see just how well supported the details/summary paired elements were, I decided to give them a go (they're supported everywhere except IE11 - but we don't care).

That's an interesting point, though, isn't it? Just as Description Lists require matched pairs of Description Term (dt) and Description Details (dd) elements, the details must be provided with a summary element, which acts like a label. One wonders what would happen if we had one without the other...

A colleague raised concerns regarding accessibility and the likely impact on Cumulative Layout Shift (CLS). With a few minor changes to the markup (and a tiny bit of JS to update those changes), I reasoned that it would be more than satisfactory regarding accessibility. I also figured that CLS would not be an issue as clicking on the summary element within the details element would be a deliberate choice and thus not subject to the dictates of CLS. I set to work on a couple of glitches and then ran them through Lighthouse.

The Bootstrap4 accordion version did well with a performance score of 96, accessibility at 96, best practice at 93 and SEO at 91. The summary/details version scored with a performance score of 99, accessibility at 97, best practice at 93 and SEO at 91. No changes for best practice or SEO scores but a 3 point increase in performance and 1 point increase for accessibility. Nothing major to write home about, but better than a kick in the teeth.

Those figures are pretty decent indicators that the summary/details pair may well be the way to go. Quite apart from the Lighthouse figures, the HTML is slightly smaller using the summary/details pairs, measuring in at 4.8 kB - the Bootstrap 4 version measures in at 7.3 kB, but that doesn't include the Bootstrap Bundle and jQuery (Bootstrap 5 doesn't require jQuery).

I wonder what the impact would be using Bootstrap5, especially as it no longer requires jQuery?

I also got to thinking about inlining the JS and came up with this (using Bootstrap5 and no external JS):

<details class="card">
  <summary class="card-header"
           aria-expanded="false"
           tabindex="0"
           role="button"
           onclick="((e) => {
             const summary = e.target.closest('summary')
             const details = e.target.closest('details')
             summary.setAttribute('aria-expanded', !details.hasAttribute('open'))
           })(arguments[0])">
    <h2 class="h5 mb-0">
      Will Royal Mail need a signature?
    </h2>
  </summary>
  <div class="card-body">
    Our courier is no longer asking recipients to sign for items delivered on or after Saturday 14 March 2020. Please click here to find out more.
  </div>
</details>

Which can be shrunk further to:

<details class="card">
  <summary class="card-header"
           aria-expanded="false"
           tabindex="0"
           role="button"
           onclick="(e=>e.target.closest('summary').setAttribute('aria-expanded', !e.target.closest('details').hasAttribute('open')))(arguments[0])">
    <h2 class="h5 mb-0">
      Will Royal Mail need a signature?
    </h2>
  </summary>
  <div class="card-body">
    Our courier is no longer asking recipients to sign for items delivered on or after Saturday 14 March 2020. Please click here to find out more.
  </div>
</details>

Not pretty, but it works a treat. It also has exactly the same Lighthouse scores as the other, but is slightly larger in terms of the HTML, weighing in at at 6.6 kB.

If you're interested these are the glitches:

bootstrap4-accordian

summary/details