On October 8th, DEV Community member Eliot Sanford joined Christina and I on the pairing stream to work on an accessibilty issue.
We had a lot of fun and got a proof of concept running on the frontend to lint markdown. Here's the full stream.
Eliot is still working on the issue, so feel free to follow its progress.
Highlight or Prevent Heading Level Errors in Markdown
#4807
Is your feature request related to a problem? Please describe.
This issue is coming out of a discussion on post https://dev.to/s_aitchison/getting-heading-levels-right-including-here-on-dev-439
A substantial proportion of posts on DEV break WCAG guidance on heading levels. The post title automatically becomes the h1 of the page; from that point on heading levels should only increase by 1.
What you actually see in reality is a lot of additional h1 elements, and then quite often non-sequential heading levels beyond that.
It would be a boost for accessibility if we could help limit or prevent this in some way. As a bit of context, the latest WebAIM screen reader user survey indicated that close to 70% of users prefer to navigate by heading level, and the ability to scan content this way is compromised by non-WCAG compliant heading usage.
Describe the solution you'd like
When viewing a post in 'preview' mode, it would be good to see heading level issues flagged in the "Heads up" warning that appears at the top of the page. At a minimum, flagging duplicate h1s, but ideally linting for other issues in the heading levels (e.g. an h3 being present but no h2)
You can also find the three of us all over the web here:
Eliot:
Nick:
Christina:
Looking forward to seeing you on future streams! Follow DEV on Twitch to be notified when future streams begin. Happy Hacktoberfest!
Top comments (2)
Great job Eliot!!!
Loved the stream! Glad I was able to catch some of it live when it happened!