Content is the backbone of your website. You’ve crafted a brilliant website or churned out stellar content, but have you ever paused to consider if everyone can access and experience it? If your website’s content is not easy to find, navigate, and consume, you risk losing visitors and potential earnings.
The importance of having web accessible content and structure can’t be stressed enough. If you’re new to this concept, fret not! This article shares the basics of building user-friendly web page content, from accessible headings to typography.
Semantic HTML
Have you ever wondered how screen readers help visually impaired users navigate websites? It all boils down to the magic of Semantic HTML.
HTML, or HyperText Markup Language, is the foundation of your website. It’s the code behind the scenes that structures your website’s content. Using semantic HTML elements correctly is like setting a well-organized table for dinner: everything is in its right place, and the guests know where to find what they need.
What is Semantic HTML?
Semantic HTML enhances the accessibility and user-friendliness of web content. It gives context and meaning to web page content using tags that align with human language and logic instead of non-semantic tags, which are meant solely for computer interpretation and don’t hold inherent human meaning.
Take the tag <p> for instance. This semantic tag denotes that a specific text block is a standalone paragraph, providing users with clarity about the text’s structure and informing the browser on how to present it. On the other hand, non-semantic tags like <b>, which merely instructs that the text be bold, dictate only visual presentation without conveying additional contextual significance.
Why Semantic HTML Matters
Well-structured and semantically sound HTML aids search engines and assistive tools like screen readers in deciphering the nature and context of the content you’re sharing. Such HTML constructs make it simpler for browsers and accessibility technologies to grasp the meaning and interrelations within your website content.
To illustrate, through semantic HTML, screen readers can identify the hierarchy of headers on a page (from <h1> to <h6>), determine where the webpage or section footer (<footer>) is, or discern added navigation aids (<nav>) in data tables.
With such semantic guidance in HTML, people using assistive technologies will be able to comprehend the layout and intent of your web content. In fact, heading navigation is very common. The 2021 Screen Reader User Survey by WebAIM, shows that 67.7% of users use headings to find information.
Page Formatting
A well-structured webpage isn’t just visually appealing; it’s easier to understand and navigate. Think of your website as a book. It becomes easier to follow with a proper table of contents and clear headings.
What are Headings?
One of the fundamental elements in creating web accessible content is the proper use of headings. Headings aren’t just big, bold text. They’re the signposts that guide readers through your content. Think of headings as the chapter titles in a book. You wouldn’t flip open a book and find chapters named randomly. Similarly, your web content should be clearly labeled in your HTML markup.
A clear, well-structured heading system aids those using assistive technology and benefits your average reader by allowing them to skim and understand the flow of your content quickly.
What Does “Hierarchical” Mean?
At its core, a hierarchical structure means organizing content in a specific order or rank. In the context of a webpage, this refers to the arrangement of headings from most to least important. For instance, just like a tree has a trunk, main branches, and then smaller branches, your content should have a main heading, subheadings, and further divisions if necessary.
The h1 is the most important heading level, while the h6 is the least. For example, you will use h1 for the page title, whereas h2 would be a subheading and so forth if needed. The hierarchical structure allows both readers and screen readers to navigate through content easily.
One h1 per Page
The cardinal rule of web accessibility is that there should be only one main heading (h1) per page. Like a book’s title, this serves as the page’s main topic or purpose. Subtopics or related points should be categorized under subheadings like h2, h3, etc.
Having multiple h1s on a web page is bad practice for accessibility and SEO. It creates a flat and meaningless structure. However, it’s not a WCAG 2 AA violation.
WCAG on Headings
The Web Content Accessibility Guidelines (WCAG) is the go-to standard for web accessibility. However, WCAG is not very specific on its requirements for headings.
However, a few WCAG 2 AA criteria do specifically address headings and structures. For instance:
- Success Criterion 2.4.6 Headings and labels: Ensure headings and labels aid users in navigating content and understanding their current location by clearly describing the topic or objective
- Success Criterion 3.2.3 Consistent Navigation Level: When navigation elements are repeated across different pages within a site, they should maintain a consistent order unless the user decides to alter it.
- Success Criterion 1.3.1 Info and Relationships: The information and its structural relations provided visually should also be discernible through its code. This implies the necessity of using the correct HTML tags, like h1 through h6, to represent heading levels.
In essence, headings should be used to define content clearly and should be applied in a consistent and meaningful manner. Doing so aids all users, especially those using screen readers, in navigating and comprehending a website more effectively.
What Makes Good Heading Text?
A screen reader user can access a list of headings and skim through them to decide where to start reading on a webpage. While there is no accessibility requirement for the length of a heading text, usability is a factor to consider.
Making complete paragraphs into headings results in a horrible screen reader experience. Write concise, meaningful headings that provide insight into the content.
When you are generating your headings, ask yourself the following:
- Does the header describe the content being discussed?
- Are you able to skim the content using only headings?
- Does every page have a clear and unique heading above the content?
Headings in Design
Here are some factors to consider when incorporating headings into your website’s design.
Using Heading Labels for Styling
When used appropriately, headings guide the reader through the content, highlighting the main topics and their relative importance. However, choosing heading levels based on their visual appearance or sizing rather than their semantic meaning is a common mistake.
For example, using an h2 tag simply because it looks “right” visually rather than because it denotes the second level of importance or hierarchy is misguided. This can confuse both users and assistive technologies, making content less accessible.
All Caps
Using all capital letters makes the text more challenging to read. When every word is in uppercase, it loses its unique shape and starts to look like a rectangle. Research has shown that text in all caps is particularly hard for those with dyslexia. Make life easy for your readers; avoid using all capital letters.
Crafting Web Accessible Content with 216digital
Navigating the intricacies of web accessibility can be challenging, but the rewards are immense. An accessible website is not just a legal obligation but an opportunity for your voice to be heard. Your content is valuable, and it should be accessible to everyone. If you’re still unsure where to start or how to enhance your website’s accessibility, the experts at 216digital are here to help.
If you’d like to talk further about your web accessibility initiative, Schedule a Complimentary ADA Strategy Briefing with the experts at 216digital. We will help you take the steps towards making your content web accessible on your terms by developing a strategy to integrate WCAG 2.1 compliance into your development roadmap.