Jonathan Lahijani Posted November 2, 2020 Share Posted November 2, 2020 I was listening to Full Stack Radio recently (hosted by Adam Wathan, the creator of Tailwind CSS) and his guest for this particular episode discussed proper usage of HTML elements. It's worth a listen, especially when touching upon accessibility (overall it's a great podcast for developers):https://fullstackradio.com/118 They got into the topic of heading outline hierarchy within pages and this is something I had to do a deep dive into a few months ago for a site I made, since the client had a 3rd party SEO company do some reports which highlighted the heading structure on various pages. While optimizing the site, I got headingsMap, a very helpful Chrome extension which outputs the heading hierarchy of a page:https://chrome.google.com/webstore/detail/headingsmap/flbjommegcjonpdmenkdiocclhjacmbi?hl=en I then went on a spree with this extension and tested various popular website home pages and based on at least 100 different sites, there's only one site that really does a pristine job with heading hierarchies, and that's apple.com. I'm kind of baffled that only Apple actually took the effort do it correctly. So I'm asking you all here: which sites have you found that do it correctly and don't sweep this under the proverbial rug? The headingsMap Chrome extension has made me think twice when marking up some headings on a site that I'm developing and the use of "screen reader only" / visually hidden classes (which hides the text without using display:none, as display:none removes it from the hierarchy). Since many of us here use UIkit, I asked them to create a native visually hidden type class: https://github.com/uikit/uikit/issues/3967#issuecomment-648920911 Right now, I use CSS Tricks' suggestion located in this article:https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ Bootstrap already has the sr-only class which is the same. This has other implications as well, like when customizing a page builder with something like repeater matrix. While it affords clients/non technical people the ability to build a page, it's worth taking the headings generated by the matrix-type templates into consideration. 9 Link to comment Share on other sites More sharing options...
Jonathan Lahijani Posted November 2, 2020 Author Share Posted November 2, 2020 I did another test on Apple's website just now and it's actually not "perfect" either (maybe it was a few months ago). See screenshot. 1 Link to comment Share on other sites More sharing options...
Recommended Posts