HTMHell: Reading the meter
I have a new post at HTMHell for the 2022 Advent Calendar…
On first glance the
<meter>element might seem straightforward for accessibility given that it’s a semantic element, but testing has shown the support is not uniform.
This post turned out to be a bit of whopper. When I first thought about proposing a contribution I decided to pick an element I didn’t know about, research it and write about it. Manuel Matuzovic, creator of HTMHell, takes this approach frequently and I’ve always enjoyed reading those types of posts.
To find a subject I scrolled through the MDN element list in search of something to learn about. When I saw the <meter> element I thought “Oh cool, it’s semantic and I don’t know anything about it, should be fun!”. Ha, little did I know.
About a month and a half later, what I thought would be a straightforward little explainer turned out to be a deep dive, complete with a lot of screen reader testing and CodePen examples. The post also includes potential color contrast issues, how the attributes work, examples of styling and use cases.
A big thanks goes to Eric Bailey for his supportive and thoughtful review. With his feedback I was able to tighten up the post as well as dig a little deeper to come up with a recommendation that would likely result in improved accessibility.
And of course a big thanks goes to Manuel Matuzovic, it’s not easy to pull off a big editorial effort like the HTMHell Advent Calendar. Additionally his dedication to creating helpful front-end content is greatly appreciated!
