Lessons in Accessibility

Recently, I read an article about creating a switch input component that only relies on HTMLand CSS. There were several takeaways from the article, but what caught my attention was the author's approach to accessibility. Specifically, we (developers) need to view all of our components from the perspective of both the sighted use (general UI) and that of a screen reader. This may sound obvious. In practice, we may forget to add components to assist screen readers and hide components that might confuse screen readers.

Getting Started

Before moving on to more "advanced" practices for supporting screen readers, let's review two of the most basic practices for aiding those who rely on screen readers to use websites and web apps.

Image Alt

If you have never done any accessibility work before, you will still know about the alt attribute on image elements. Images are inherently visual, so it is important to include a description of each image in the form of an alt attribute. Many IDEs (and linting rules) enforce the use of alt attributes by letting you know if you have forgotten an alt value. But we all know that there are good alt descriptions, and there are lazy alt descriptions. For years, I used alts like "Photo of the author," "a red flower," and "me at the beach." After updating a site's accessibility, I began giving more details that better described the photo's appearance. It wasn't until I started using a screen reader to test sites that I realized that appearance is insufficient. The best practice is also to include some context for the image that will help the user understand why you included it. Here are some resources for learning more about writing better alt text:

"Write helpful Alt Text to describe images" (Harvard University)
"Write helpful alt text" (Google Technical Writing Self Study)
"Alternative Text" (WebAIM)

Semantics

Browsers (for the most part) are very forgiving when it comes to HTML. You can put block elements inside of inline elements, h3 before h1, and even nest anchor elements (links). ("Really Bad Semantics" pen) But semantics HTML plays a big part in making your content accessible to not only screen readers but bots and scrapers—more on why we care about bots and scrapers later.

Semantics addresses the question, "What purpose or role does that HTML element have?" In my years of experience working with content creators, many (most) are focused on the message and the visual design—what we are saying and how it looks. Without good "semantic HTML," this message is garbled for those who can care less about the visual design.

Here are some good resources for learning more about semantic

"A Detailed Guide on HTML Semantics" (BrowserStack)
"Mastering Semantic HTML" (Marvelous Ayomide Adegbiji)

Deeper Dive

Many accessibility tutorials only focus on alt descriptions and semantics to aid screen readers. I would like to offer two additional topics to consider.

Visually Hidden

Add content to aid screen readers.

As mentioned at the start of this article, I stumbled upon this concept of "visually hidden" content while reading an article about constructing a switch input element using just HTMLand CSS. The author includes markup (elements) that are just for screen readers and are hidden from sighted users. I have used display: none; to hide content, but this is different. We want the content visible to screen readers as it provides more context to the element (i.e., the purpose of the element) and makes the input element "discoverable" (i.e., it can receive focus). Here is a link to a pen I created to demonstrate the switch element.

To visually hide content, we apply a class (.visually-hidden, or .sr-only) like this:

css

1/* "hide" element from visual view, but not from screen readers */
2.visually-hidden {
3  position: absolute;
4  margin: 0;
5  padding: 0;
6  width: 1px;
7  height: 1px;
8  border: none;
9  overflow: hidden;
10  white-space: nowrap; /* ensure spaces between words are preserved */ 
11  /* remove all trace */
12  clip: rect(0 0 0 0);  /* older browsers */
13  clip-path: inset(50%); /* newer browsers */

Much of a site's context is derived from its (visual) design. Using .visually-hidden to explain this context to screen readers (and others) will make your site much more accessible.

Hiding Content from Screen Readers

On the flip side, there are times when we want to hide content from a screen reader because the element only provides visual cues or benefits to sighted users. In these instances, we can use aria-hidden=true. Including this attribute will not affect the page's visual design and will be hidden from screen readers.

The "scroll down" icon found on many landing pages is a great candidate for aria-hidden=true as it serves no purpose for a screen reader.

Another Argument for Accessibility

While our primary focus has been on helping screen readers accurately interpret web content for visually impaired users, it's worth noting that accessible, semantically rich design offers broader benefits. For instance, search engine optimization (SEO) heavily relies on how well search engines can understand a site's structure and content. The more logically and clearly your HTML is organized, the easier it is for crawlers to assess and rank your site appropriately.

And yes, let’s talk about AI. I know it’s a buzzword—but it’s also revolutionizing how we interact with technology, including how businesses gather and process information. Large language models (LLMs) like GPT learn in part by analyzing publicly available web content. The more machine-readable your site is, the better these models can interpret and use your content in meaningful ways.

In a recent workshop, for example, we built an AI agent designed to assist a sales team by generating lead prospectuses. A key part of the workflow involved scraping a potential client’s website and submitting its content to an LLM to extract insights. When a site is not only visually well-designed but also semantically structured for machines, the output (and thus the prospectus) is far more accurate and valuable.

Summing It Up

There is lots to learn when it comes to web accessibility, and designing for screen readers is just one component. However, we have seen that using a semantically structure approach with additional content to better convey meaning not only results in a more accessible site, but aids other machines browsing your site.

Web accessibility is a broad field, and designing with screen readers in mind is just one important piece of the puzzle. As we've seen, using a semantic structure and enriching your content with additional (visually hidden) context doesn't just make your site more inclusive, it also improves how machines of all kinds, from search engines to AI systems, interpret and interact with your content. In the end, accessibility isn't just about compliance, it is about ensuring your message is being heard ... by everyone/thing.