Website accessibility: How to get the basics right when building a site

Kyle Ahlstrom and Jeph Kryzak

Website accessibility: How to get the basics right when building a site

It’s a business imperative to make sure as many people as possible have access to your products or services. In ecommerce, that means ensuring that everyone can use your website with ease. As 1 in 5 Americans has a disability—a segment of the population that accounts for $200 billion in discretionary spending, according to the Wall Street Journal—that makes web accessibility a business imperative.

Despite this, and the legal obligation organizations have to make sure websites can be accessed and used by everyone, it’s an often overlooked area of planning and developing a new or redesigned site. (More than 4,600 web-accessibility lawsuits were filed in 2023.)

While it may seem daunting, creating an accessible website doesn’t have to be complicated, especially if you build accessibility into your everyday workflow. The most efficient way to do this is to familiarize yourself with the basics and hold yourself to those standards during the planning and development phases.

The following lessons are a result of web accessibility best practices that we’ve implemented for numerous clients over the years.

Accessibility elements

Many types of assistive technologies are available to help people with disabilities access and use websites. Of these technologies, screen readers (a type of software blind or visually impaired people use to read the content of a webpage) are the most common. For webpages to be understood by screen readers and other types of assistive technologies, developers need to consider and implement a few best practices when creating and maintaining webpages:

Headings

One of the most crucial aspects of web accessibility is the use of headings. Headings are not merely about font size—they show the structure of a document. They organize the content on the page and help users navigate through it. By using appropriate heading tags, we can make the content more accessible for screen readers and other assistive technologies.

A general rule of thumb for headings is to nest them by their level of importance. H1 is the most important heading while h6 is the least important. When moving down in the hierarchy, do not skip a heading level. For example, after an h2 element the next level down is h3, not h4. However, it is acceptable to skip when moving back up in hierarchy (e.g., going from h4 back to h2) because it is like closing out a section. Think of it like an outline: As you dive deeper into a section, you wouldn’t skip an indentation going further in. But as you come out of a section, you can skip to a higher level.

Headings also need to be thought through in the design process. There are often set styles for h1, h2, h3, etc. Because of this, headings can sometimes get misused or skipped to capture a certain look for a section on the page. This can make it harder for screen readers to contextualize the content on the page. It’s always important to work closely with your design team to ensure the Web Content Accessibility Guidelines (WCAG) 2.1 are followed.

Landmarks

Landmarks are sections of a web page that provide context and structure to the content. They enable users to navigate through a website quickly and efficiently, without having to listen to every detail of the page. Examples of landmarks include headers, footers, navigation menus, and main content areas.

Landmarks serve as guideposts for readers—or for someone listening to a screen reader—almost like a generic table of contents. If a site is using landmark elements, a user can easily jump to, say, the main content of the page and completely bypass having to hear the screen reader list through all the links in the header. This saves the user a lot of time and hassle.

Alt text accessibility: images and media

Images play a valuable role in the web viewing experience. We want all users to be able to understand how certain images play into the web viewing experience even if they’re not able to view the images fully. That’s where alt text comes in. By adding the attribute “alt” to images and other media types, screen readers are able to tell the user what that image is displaying, as long as you provide a meaningful alt text value.

According to Harvard University, good alt text is short and descriptive and doesn’t include the phrases “image of” or “photo of.” Alt text should only be included on non-decorative images. Otherwise, it should be left blank. Alt text should also be relevant to the topic of the content. For example, if the image below is on a page about an impending snowstorm, the alt text could read “Passengers get off of bus delayed by winter weather.” If it was in an article about staying warm while commuting it could read “Passengers bundle up in layers as they embark for a walk in the snow.”

Labels

Labeling elements is one of the most crucial aspects of web accessibility. When users need to fill out a form, there are always labels or visual cues accompanied with each input to tell the user what the input is for. For each input or button on the page, there should be another element or data attribute to tell screen readers that as well.

Each input on any given page should have an accompanying label element, an aria-label data attribute, or aria-labelled by data attribute. Title attribute is sometimes used in place of a proper label; however, for accessibility purposes, this should be avoided. Some screen readers do not interpret the title attributes because it is often used for non-essential information.

Details and summary

Details and summary elements are interactive HTML elements that create a “disclosure” widget, which is similar to an accordion component.

We recommend using the detail and summary elements for these types of components because they’re incredibly friendly to screen readers. The next time you build a disclosure/accordion widget, consider using these elements not only to save you time, but also because it’s completely screen reader friendly out of the box.

Accessibility checklist for development

Integrating accessibility into your workflow can seem daunting, but if it’s something you relentlessly build into your workflow and planning processes it will become second nature in no time. Here are some tips to get you started:

Start by familiarizing yourself with WCAG 2.1.
Use automated testing and accessibility checkers to ensure your website is accessible.
Test your website with assistive technologies such as screen readers, using keyboard-only navigation, and speech recognition tools.
Provide the required alternative text or aria labels to images, videos, and audio on your website.
Use appropriate heading tags to structure the content on your website.
Use landmarks to provide context and structure to your content.
Use the label element appropriately to establish a relationship between items.
Consider using elements like details and summary to improve web accessibility.
Web accessibility is just one step in the process. What if you have a client stakeholder with accessibility needs? You need to make sure your in-process designs are also accessible so all stakeholders can clearly and easily consume and understand them.

The bottom line

By familiarizing yourself with WCAG 2.1 and consistently integrating accessibility into your workflow, this practice and approach will become second nature and ensure your websites are inclusive and user-friendly for all users, regardless of their abilities. Remember, web accessibility isn’t an option; it’s a necessity.

At Credera, we’ve worked with leaders across industries to develop accessible websites. Schedule a call with our specialists to learn more about the benefits of accessibility.