Open HaSistrunk opened 3 years ago
Flagging this issue on use of headings as still outstanding. Ordered headings are key to helping folks who use screen readers navigate sites.
I don't see any headings with no content anymore, though, so it looks like that was addressed? I recommend this browser extension as a good way to quickly see where your headings are in the UI and what level they are... h1-h6.
Is your feature request related to a problem? Please describe.
Folks using screen readers rely on headings to navigate the page. Instead of traversing all of the text in order, they can skip to headings. Because of this, it's important to:
h1
and only use oneh1
per pageI'm seeing some skipped heading levels (with no
h1
), use ofh3
andh4
for elements that probably don't need to be headings, and some empty headings that exist on the page but do not contain content.Describe the solution you'd like
There are different strategies that would work depending on how you want to structure the pages. Some suggestions:
h3
s (since they aren't headings for sections of content), wrap them all in a<ul>
and make them<li>
s. This will also introduce some nice functionality for screen readers to let the user know how many items there are in the list as they move through them. It would take some CSS finessing, though.h4
elements for all the content in the cards. Instead, make the card title a heading (whichever heading makes sense in order on the page - don't skip heading levels) and everything else in the card a<p>
.h1
and go down in order from there. Alternatively, every page could have a heading like the/contacts
,/facilities
,/suggest/create
, and/about
pages do, and those could be yourh1
s.display:none;
. Otherwise they are going to encounter the empty heading, and that will add confusion for users trying to navigate the page.Additional context
Here's a nice summary of the headings-related WCAG criteria from The A11y Project.
Accessibility Insights for Web Chrome browser extension has a feature that outlines and labels all your page headings to quickly give you an idea of the page layout. Viewing the page without CSS can also be a good way to quickly review your headings.