Headings are much more than a big bold title. They provide structure and identify topics and subsections of your page. Headings help users skim over content to find what they are looking for.
When reading a newspaper catchy titles and vibrant images capture our attention, but how do we explain this to a person with limited vision? Print tactics don’t suit all users, and this is where the web, technology and accessibility help define an inclusive environment.
Web accessibility standards outline ways to provide the best possible experience to web users. This is not just for people with disabilities, but about creating a user-friendly experience that benefits everyone.
Why are headings so important for accessibility?
Without styling, content would be just words on a page. This makes it hard to find what we are looking for.
Headings create a visually appealing user experience and journey. They provide organisation and deliver a tiered structure to your content. The use of headings is especially helpful for users using screen readers or with low vision.
Predefined styling helps us distinguish headings from body text. Hidden HTML mark-up applied to this text helping screen readers define sections of text. The use of mark-up also helps search engines detect topics on your website.
How to apply styling
- select the text you would like to apply styling to
- click the heading tool on your WYSIWYG bar
- select which level of heading is required
So how does a screen reader work?
Screen readers don’t work like your eyes. They can’t comprehend layout or style. But they don’t just read the text on your page. Screen readers understand the code of your page. But don’t worry about code, this is all done for you.
When your page is set up correctly, a screen reader can help users navigate your page. Otherwise, it will read your page from top to bottom. A screen reader will use mark-up such as heading, navigation menus and sidebars to help the user journey through your website.
A user can use their mouse pointer or keyboard shortcut to help them jump through your page. The keyboard shortcuts (H) will jump to each heading on your page.
Have questions about your web editing?
Remember, we’re always here to help! To reach out, please:
