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.
No comments:
Post a Comment