Making Accessibility Visible Part 2: Heading Helpfulness
This is part 2 of our Making Accessibility Visible series. Read Part 1: Missing Button Labels here, Part 3: Image Alt Text here, Part 4: Missing Descriptions here, and Part 5: Keyboard Focus and Dialog Behavior here.
In our second installment of the Making Accessibility Visible video series, AudioEye testers Sarah and Chris use screen readers to test page headings while shopping online. In this video, they test both accessible and inaccessible versions of the same page.
Watch the video to learn why proper heading use is so important in making your site accessible to people who navigate the internet with screen readers.
Code/technical notes from the video
Task prompt
Navigate the content by reading through the page headings.
Results description
When headings are descriptive of the content that follows and ranked in the correct hierarchy, screen reader users can navigate the page and understand the content. When the headings are missing, out of order or not descriptive, it’s harder to get a general idea of the page’s content.
Testers featured
Chris, Sarah
Broken element
Heading structure is missing levels, which can be confusing and not as helpful for navigation. Heading level one, which usually identifies the main idea or name of the page, is missing.
<h2> sapphires </h2>
<h5> The Summer Collection is Here </h5>
<h4> Makes your space your own </h3>
<h2> We’ve got you covered </h2>
<h4> Style it how you like it </h4>
<h6> Performance velvet </h6>
<h6> Quality Stitching </h6>
<h6> Hidden Storage </h6>
<h2> Get inspired... </h2>
<h4> FAQ’s </h4>
<h2> Join </h2>
Working element
Heading structure is in hierarchical order, does not skip levels, and makes sense contextually.
<h1> sapphires </h1>
<h2> The Summer Collection is Here </h2>
<h3> Makes your space your own </h3>
<h3> We’ve got you covered </h3>
<h3> Style it how you like it </h3>
<h4> Performance velvet </h4>
<h4> Quality Stitching </h4>
<h4> Hidden Storage </h4>
<h3> Get inspired… </h3>
<h4> FAQ’s </h4>
What are Website Headings?
We use headings to organize content on a web page, following a logical structure. Search engines and people who use screen readers rely on headings to understand the page structure and navigate its content.
Headings are ranked from one to six, or <h1> through <h6>, based on importance. The first heading, <h1>, usually serves as a page title or describes the most important takeaway. We use <h2> level headings for subsections and <h3> to divide those sections, and so on.
Studies have shown that the majority of screen reader users begin web navigation by reading headings, so it’s important to use headings correctly to provide an accessible user experience.
With that in mind, here are a few heading best practices to help you build an accessible and functional website:
- Plan the heading structure before the webpage is built, to ensure correct formatting.
- Use heading rankings to organize the information on the page and group like content.
- Be descriptive with headings, so it is easy to understand the content that follows.
- Tag headings with code on the backend of the website to make the heading structure available to users with screen readers.
- Be consistent with the heading hierarchy to create an easy navigation experience. Make sure headings are properly nested in order of importance.
- Don’t skip headings or create empty ones. Screen readers will still read these headings aloud, causing confusion.
- Don’t use bolded text in the place of a heading, since screen readers will not read this as a heading.
Correct heading use helps all users, regardless of ability, to navigate content with ease and clarity. Additionally, since search engines use headings to read and understand website content, proper heading use can boost SEO ranking.
Ask a tester:
What do you want to share with people who are website owners or authors?
“Please develop [websites] with accessibility from the start. A little goes a long way, but if you think it’s too much, it probably isn’t.”
- Sarah, a professional accessibility tester who is blind and uses NVDA and voiceover on iPhone
Read the other four installments in the series:
Ready to test your website for accessibility?
Share post
Topics:
Keep Reading
Empowering Accessibility: How Bender Consulting Transformed My Path
Discover how Digital Accessibility Consultatnt, Angelina Anglecyk, got involved with digital accessibility after working with Bender Consulting.
community
April 01, 2024
The Deaf Adventurer Behind Codfish Adventure Gear
Learn how Jen Long, a deaf woman, overcame startup challenges and started a small business selling custom outdoor gear for pets.
community
March 15, 2024
How Might AI Impact the Future of Work for People With Disabilities?
Learn how the right application of AI can support people with disabilities.
community
March 07, 2024