search

sarapis / orservices

ORServices is an open source, smartphone-friendly directory application that enables you to collect, verify, organize and share information about social services in your community with your stakeholders, beneficiaries, partner organizations and more.
https://sarapis.org/human-services/orservices/
22 stars 16 forks source link

Improve use of headings for accessibility #70

Open HaSistrunk opened 3 years ago

HaSistrunk commented 3 years ago

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:

I'm seeing some skipped heading levels (with no h1), use of h3 and h4 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:

  1. Don't skip heading levels.
  2. Instead of making the "Browse by Category" categories h3s (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.
  3. For the cards containing the information about services and organizations, do not use 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>.
  4. You could make "Community Resource Exchange" in the header your 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 your h1s.
  5. Remove all headings with no content. If you need to remove content programmatically for whatever reason, you should hide the element from screen readers using 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.

HaSistrunk commented 1 year 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.