Making Your Website Accessible with Proper HTML Headings

Learn how to make your website more accessible by using HTML headings correctly. This video guides you through the importance of heading structure for screen reader users, demonstrates navigation with assistive technology, and highlights common mistakes to avoid.

What you will learn

Importance of HTML headings for screen reader users
Correct structuring of headings for web accessibility
Navigation and evaluation of headings using assistive technologies
Common mistakes with headings
Tools for checking heading structure

Contents

00:00:00 Introduction
00:00:04 The Challenge of Web Navigation Without Headings
00:00:12 The Role of Headings in Document Structure
00:00:19 Overview of HTML Heading Structure
00:00:44 Explanation of HTML Heading Levels
00:01:17 Using Headings in Wordpress
00:01:51 The Significance of Using Headings Properly
00:03:04 Navigation Using Screen Readers
00:03:17 Example: Finding Information on a Webpage
00:04:59 Using the Screen Reader to Navigate Headings
00:05:47 Navigating a Document Without Headings
00:07:13 The Difficulty of Navigating Without Headings
00:08:47 Common Mistakes with Headings
00:10:11 Tools to Check Heading Structure Correctly
00:11:20 Closing Remarks and Recommendations


Resources

This video uses material from the Wikipedia article Maine Coon available at https://en.wikipedia.org/wiki/Maine_Coon, which is released under the Creative Commons Attribution-ShareAlike 3.0 Unported License

HeadingsMap for Firefox - https://addons.mozilla.org/en-US/fire...

WAVE Accessibility Extension - https://addons.mozilla.org/en-US/fire...

NVDA Screen Reader - https://www.nvaccess.org/download/

#Accessibility #web accessibility #HTML headings