How Do Blind Users Construct a "Glance" on a Web Page, and Why Is It Important?

If you are a sighted person or someone without significant vision challenges, you likely understand the concept of "glancing" at a web page. It's that quick look that gives you a basic idea of what's in front of you. You may not have all the details, but you can probably recognize color schemes and the organization of elements on the page.

However, for blind individuals like me, this ability is not readily available. Since we rely on assistive technology that reads content linearly based on the accessibility tree, we cannot go from the general to the specific, let alone from less important to more important. We must mentally perform this task with the help of screen readers. What happens if a page is not correctly structured? We might struggle to understand it, miss crucial pieces of information, and spend a considerable amount of time navigating through content that may not interest us but is necessary to determine its relevance.

Headings to the Rescue!

While landmarks or regions can help recognize the structure of a page, they are not as valuable concerning the nature of its content. Blind individuals are interested in understanding how to access the main content of a page. This is where an element familiar to developers comes into play: headings.

As a blind individual, I face situations where improper heading usage forces me into a laborious process of creating a mental model without assistance, or worse, with misinformation from poorly designed content. Blind users often spend a significant amount of time navigating this mental process.

Bridging the Gap between Designers and Developers

While developers generally understand that using headings is the appropriate way to structure content, challenges arise when working on specific pieces of larger code. Some developers may work on isolated code fragments, potentially leading to incorrect nesting of heading levels or, worse, the absence of certain headings. Design teams usually have a holistic view, but when applications reuse smaller components, ensuring the consistency of the entire heading hierarchy becomes crucial.

And what about ARIA?

Every web developer is familiar with the <h1> tag and its siblings. Still, few are aware that ARIA (Accessible Rich Internet Applications) allows semantically defining a text element. In essence, the following two elements are interpreted the same by most modern screen readers:

<h1>Title of Page</h1>        

and

<div role="heading" aria-level="1">Title of Page</div>        

Alright, we have it! Well, hold your horses!

The first rule when using ARIA is: "Do not change native semantics unnecessarily." Always prefer using existing semantic HTML elements over ARIA to change semantics. Modifying the semantic meaning of static elements using ARIA is an error and a potential problem.

• It adds cognitive load to understand code nature.
• Leads to more complex and specific CSS.
• Sacrifices the SEO benefits that natively semantic headings provide.

In the context of JavaScript-based web applications, it's safer and more straightforward to use semantic elements for headings. Consistent styling and careful consideration of component reuse are essential.

Styles for headings should ideally be defined in the global stylesheet to maintain uniformity across the entire application.

Notes about Usability

As a screen reader user, my habit is to press the "1" key to jump directly to the main heading and navigate from there.

If essential content precedes the <h1>, it might be missed. It's crucial to ensure that the first element inside <main> is indeed an <h1>. The order and structure of content are vital for blind users, who lack the ability to glance quickly for an overall context.

Conclusion

Headings provide a logical structure to content. Avoid using them to add keywords or present bold text; this can make a page's structure incomprehensible.

The WCAG doesn't penalize the omission of titles but their misuse. A web page without any headings may be valid but is likely inaccessible if its comprehension requires reading from start to finish. When navigating only through headings, we should understand the entire content of the page. Titles should be accurate, informative, and brief. A well-structured layout is essential for easy comprehension and content predictability.

Remember, headings allow blind users to mentally construct something akin to a quick glance. Let's ensure our designs and implementations consider the needs of users who don't have the luxury of a visual glance