HTMHell: Reading the meter

A list of tags for this post.

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.

Reading the meter

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!

A list of tags for this post.

Enjoying this site? Leave me a tip at Ko-fi!

Back to top