Author: Kyle Ahlstrom and Jeph Kryzak | Credera
Author: Kyle Ahlstrom and Jeph Kryzak | Credera
By this point in human history, there really are no good reasons why businesses, website creators, and developers can’t achieve greater accessibility—in fact, organizations have a moral and legal obligation to make sure websites can be accessed and used by everyone. In 2022, for instance, there were 21% more lawsuits over website accessibility than in 2021, according to research from the law firm Seyfarth Shaw.
We’d go so far as to say that, from both a business and brand perspective, it’s foolish to disregard website accessibility. According to the Wall Street Journal, for instance, one in five Americans has a disability—and this part of the population accounts for $200 billion in discretionary spending.
It’s a wise business move to allow as many users as possible to use your website with ease. Unfortunately, web accessibility is often overlooked during the planning and development phases of a website redesign or a new site build.
It may seem daunting, but creating an accessible website doesn’t have to be complicated, especially if you build it into your everyday workflow. The most efficient way to work accessibility into your workflow is to familiarize yourself with the basics and hold yourself to those standards during the planning and development phases. These lessons are a result of web accessibility best practices that we’ve implemented for numerous clients over the years.
So we figured, in the interest of making the web more equitable, why not explore the basic elements you need—and how to use them properly—to ensure a website is accessible?
First, let’s define web accessibility and how it’s utilized. Web accessibility refers to the practice of designing and developing websites that are inclusive and usable by individuals with disabilities. This means that all users, regardless of their abilities, should be able to navigate and use a website without any barriers or obstacles.
There are many different types of assistive technologies, including screen readers, which are the most widely used. Screen readers are a type of software used by blind or visually impaired people that reads the content on the webpage. In order for webpages to be understood by screen readers and other types of assistive technologies, there are a multitude of things developers need to consider and implement when creating and maintaining webpages.
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.
Another important element of accessibility is 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 of the links in the header. This saves the user a lot of time and hassle.
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.
What does meaningful alt text entail? 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.”
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.
In addition to the label element, there is also one lesser-known group of elements that can improve web accessibility worth mentioning: details and summary. The 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.
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 alternative text for all 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.
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, at this point in the history of the world, web accessibility isn’t an option; it’s a necessity.
At Credera, we’ve worked with leaders across industries to develop accessible websites. If your organization is interested in diving deep into website accessibility, then reach out to us at [email protected].
