Simply because you possibly can does not imply it is best to: the component
I got here throughout Sara Pleasure’s (very cool) demo of CSS theming without classes at the moment, and looking out by the code noticed a few components I hadn’t come throughout earlier than: <progress> and <meter>. Granted, I’ve most likely seen the <progress> component loads of occasions, however I struggled to see what the <meter> was for.
Whereas <progress> is pretty self-explanatory – it reveals how far alongside one thing is, equivalent to your progress by a kind – the <meter> component was much less apparent to me, so I had a take a look at the MDN web page to see what they instructed.
It is a prime instance of following the letter, not the spirit, of semantic HTML. Sure, technically the cooking temperature is someplace between the bottom and highest temperature you possibly can set the oven to, however is that this really serving to folks perceive the recipe? Fairly the other, it is making the recipe much less accessible for anybody not utilizing a display reader.
Now, chances are high the one that wrote this text merely could not consider a greater instance, and is not essentially proposing that everybody begins utilizing meters as an alternative of numbers of their recipes, however a lot of builders depend on MDN to inform them what is nice apply, so I do not assume that is significantly helpful. (I’ll attempt to contribute a greater instance.)
Impressed by this, and with a burning need to construct one thing actually horrible, I’ve created this recipe web page utilizing the <meter> component for each numerical worth.
See the Pen
CodePen Home
A recipe, but all the numbers are
on CodePen.
The spec has a couple of extra smart examples, although I am not completely persuaded {that a} meter is an effective illustration of newsgroup exercise.
A extra tangible use case for the <meter> component could be to point one thing like obtainable space for storing, or share of remaining funds on a service the place your plan solely permits you a sure variety of occasions or entities: an instance of this could be Sentry, the place your plan has a restrict to the variety of occasions/errors it will settle for, relying on how a lot cash you throw at them.
The important thing UX factor right here, although, is that if it is essential info it ought to be accompanied by a numerical worth. A meter is nice for an at-a-glance sense of how a lot of one thing has been used, however it is advisable current it alongside the precise worth for it to be in any respect helpful.
I checked each Dropbox and Google Drive, and each of them have a meter accompanied by a numerical description of how a lot area I’ve used; in each instances these meters are, after all, <div>s. Often I would complain about utilizing a <div> when there is a semantic component obtainable, however… it is not instantly clear to me what the benefit of utilizing a <meter> could be from an accessibility viewpoint, in case you’ve received the written description proper there.
Once you’re selecting the best component for the job, it is completely potential to go too far the opposite means, and overuse semantic components when really they hinder greater than they assist.
As my good pal and accessibility specialist Helen put it:
It’s a very good instance of excited about what you’re attempting to speak and to who and whether or not your “semantic” decisions really allow that.