Since the passing of the 1990 ADA (Americans with Disabilities Act) established a legal requirement for businesses and public spaces to provide reasonable accommodations for those living with disabilities, the United States has become more accessible than ever before. As the Web continues to become a greater part of our daily lives, website accessibility ensures that all users (regardless of their needs) can maintain their digital independence and freedom.
Unfortunately, despite website accessibility being a concept known to many, developers and businesses frequently omit it from their designs. In this post, we will cover what accessibility means for you and your users, why it’s not more common, and what tools you can use to make realizing website accessibility easier.
What is A11Y?
A11y is a shorthand for "accessibility," with the "11" indicating the count of letters between the first and last letters, "a" and "y." This abbreviation is commonly used in web development, design, and on social media platforms such as Twitter, where conserving character space is important.
What is Website Accessibility?
At its simplest level, website accessibility means that a site is usable by people living with disabilities. Fundamentally, the internet was created to be universal; the more people that can use the internet on more platforms, the more powerful and useful it is. In particular, the W3 states that accessible websites should be usable by everyone (including those living with disabilities).
In more concrete terms, this means you should do two things in the development and maintenance of any website:
- Avoid design decisions that will hamper your site’s usability
- Actively leverage strategies to make your website more useful for assistive technologies
In 1999, the W3C’s Web Accessibility Initiative (WAI) introduced the first version of the Web Content Accessibility Guidelines (WCAG). Since then, WCAG has gone through some significant updates including clarifying accessibility best practices, expanding to include guidelines for more content types, and adding the foundations for tooling to aid developers in testing their websites. These guidelines offer specific directions for developers to ensure what we make is available for anyone to access.
WCAG has three levels of conformance:
- Level A: The minimum level of conformance.
- Level AA: The balance between accessibility and practicality, and the goal for most websites.
- Level AAA: The highest standard, often difficult to achieve universally.
The WAI didn’t stop with WCAG; the Accessible Rich Internet Applications (ARIA) specification defines default roles for the various parts that make up web pages. This means that any page written with semantic HTML is inherently accessible. Even more exciting, as the modern web continues to leverage more dynamic content, ARIA allows developers to specify the role of dynamic content. With some work, even the most dynamic of Single Page Applications can be accessible.
In short, making your website accessible will mean designing it such that anyone (regardless of disability) will be able to use it. And, just as it takes some effort to keep a website mobile-friendly, it will also take some effort to keep a website accessible. Thankfully, due to WCAG and WAI-ARIA, this is easier than ever!
Addressing Web Accessibility Challenges
Creating accessible web experiences involves addressing various challenges to ensure that all users, including those with disabilities, can effectively navigate and interact with digital content.
Visual Challenges
Users with visual impairments benefit greatly from ARIA landmarks that define the roles of different parts of a web page, making navigation more intuitive. Clear and descriptive headings provide structure and context, helping screen readers to convey the page layout effectively. Descriptive link names are crucial to avoid confusion, as they tell users where the link will take them. Alt text for images ensures that visually impaired users can understand the content and context of visual elements. Additionally, zoom features allow users to enlarge text and images for better readability, while high-contrast designs improve visibility and reduce eye strain.
Auditory Challenges
For users who are deaf or hard of hearing, providing captions and transcripts for all audio-visual content is essential. Captions convert spoken words into text, enabling users to read along with videos. Transcripts provide a text version of audio content, making it accessible for those who cannot hear the audio.
Dexterity Challenges
Users with dexterity issues may struggle with precise mouse movements. Implementing keyboard navigation allows users to navigate through web pages using keyboard shortcuts, making the web more accessible. Visual cues for active elements, such as focus indicators, help users understand where they are on the page. Organizing headers and menus in a logical and consistent manner ensures that navigation is straightforward and intuitive.
Cognitive Challenges
Users with cognitive disabilities benefit from clear and simple language that is easy to understand. Consistent links and navigation reduce confusion and help users know what to expect as they move through the site. Offering content in multiple formats, such as text, audio, and video, caters to different learning styles and cognitive abilities, ensuring a more inclusive experience.
How Do You Make an Accessible Website?
The first step is the easiest! As you build (or update) your website, use semantic HTML. When you introduce a new paragraph of text, use a <p> tag; your website’s footer should be in a <footer> tag; links should be <a> tags, etc. In short, the HTML backing your web page should reflect the webpage’s meaningful structure.
Unfortunately, many web app developers fall into the trap of misusing <div>s. <div> is a generic content container, which makes it a frequent go-to for whenever you need to divide content into subsections. But, because it carries no semantic information (because it can be used for any purpose), accessibility technologies know very little about them.
Often, those with disabilities interact with the web using an assistive tool. These can be anything from screen readers, hands-free mouse tracking, voice controls, and many others. Just by using semantic HTML, assistive technologies have a much richer understanding of how your webpage is structured, and they can offer a much more useful experience. And, as with most best practices, once you get in the habit of using semantic HTML, it will become second nature.
This is, by a wide margin, the biggest and easiest accessibility win. If every page leveraged semantic HTML in its construction, the entire internet would be a much more accessible environment; but, don’t stop here! When your page leverages a lot of dynamic content, make sure your content declares appropriate roles (so that, regardless of what HTML you need to use, each piece of your webpage tells browsers and accessibility tools how it should be treated).
When you’re ready to dig in further and embody accessibility everywhere on your web page, you can ensure that your development process accounts for as many principles of web accessibility as possible.
Measuring Accessibility: The POUR Principles
When assessing your website for accessibility, you can look to the POUR Principles, to determine if your site is perceivable, operable, understandable, and robust.
Perceivable: Users must perceive the content through at least one sense.
Operable: Users must interact with interface elements, regardless of how they interact.
Understandable: Users must comprehend the content and know how to use it.
Robust: Content must be usable on various devices with assistive technologies.
Examples: A Site That Nailed It, And A Site That Missed the Mark
Missed the Mark
If a website is created without an outright intention to promote accessibility, it can be easy to miss the mark. One example is PIWNICH, a media site which is no longer active, but serves as a good example of how personal style preference can sometimes hinder accessibility. The PIWNICH website does not meet the minimum color contrast standards (WCAG 1.4.3), making it difficult for individuals with color vision deficiencies. Additionally, the website was created in a way that is not compatible with assistive technologies like screen readers. These issues hinder accessibility for users who rely on such technologies to navigate web content.
(Source: WhoisAccessible)
Nailed It!
The Ultima e-commerce site shows how just a few design tweaks can make a website more user-friendly for those with disabilities. The colors contrast in a way that is easy to navigate, and the text large enough to read easily and bold against background hues.
(Source: accessiBe)
If This is So Important, Why Isn’t it Already Universal?
Humans are only able to maintain so many stable social relationships. Among other things, this also limits the realm of people we consider when we design a tool or piece of software. Put another way: developers will tend to design software with a “normal” user in mind, and because developers are human, their social group will tend to define what they consider to be “normal.”
So, in essence, designing for accessibility is an exercise in empathy. As developers, we want to maximize utility and functionality for the users of our tools. To that end, we need to imagine all the different ways our users might interact with what we create.
In my experience, the easiest way to put yourself into the shoes of someone using an accessibility tool is to use one. There are tons of screen readers (several of which are free); take a day every few weeks and use it to interact with the web for your daily browsing. Go over your site too and see if you still find the site usable (if not, you’ve found an excellent opportunity to improve your UX). Do a “left-handed oil test!”
Accessibility is easier than ever to achieve for web pages, but it’s certainly not universal yet. Every developer who works to make their creations better takes us one step closer!
Tools Can Help!
There’s no substitute for using what you make, so occasionally using your site with a screen reader will be very helpful and revealing. But it’s not the only tool available to you. One of the tools I tend to use most frequently is WebAIM’s WAVE. WAVE allows you to get a quick overview of any significant issues on your webpage (and some warnings for things that need some further evaluation). They’ve also recently released addons that developers can install directly in their browser (so that evaluating a page is a single click away).
Using WAVE alone is a huge step forward, but if continuous testing has taught us anything, it’s that automating a test suite makes it dramatically more useful (because the break-fix cycle can be significantly shortened). To that end, WAVE now has an API offering. This would let you test pages in bulk, or even deploy the API standalone and integrate it into your CI/CD pipeline!
The most exciting part on the automated testing front is about to get better too! WCAG 3.0 is now open for public comment. Among many excellent improvements over WCAG 2.x, 3.0 will offer testable criteria for each guideline (so that automated testing tools can offer much more rigorous and specific suggestions and analyses). This means tools like WAVE will be able to give you deeper insights into your site’s accessibility automatically!
What’s Next for A11y?
As with all UX improvements, there’s always more you can do. You can hire consultants to do periodic accessibility audits. You can ensure your site’s visual style promotes accessibility everywhere. You can use multiple accessibility testing tools (in addition to WAVE, you may want to consider TAW and Firefox’s Accessibility Inspector).
If you’ve gotten this far, you’ve probably already made the biggest leap by caring to learn. Now, all that’s left is to work to apply that knowledge!
At Emergent Software, we specialize in helping organizations achieve full compliance with the latest WCAG standards. Whether you need an audit, ongoing support, or developer training, we provide customized solutions to ensure your website is accessible to everyone. Partner with us to create a more inclusive digital presence and unlock new opportunities for growth.
Website Accessibility FAQ
Below, we set out to answer the most common questions asked about accessibility.
What does A11Y mean?
A11Y is an abbreviation for "accessibility." The term is often used in web development and design to indicate accessibility considerations.
What is the translation of A11Y?
A11Y translates to "accessibility." The "11" in the middle represents the number of letters between the first and last letters, "a" and "y."
What are the benefits of A11Y?
Accessibility (A11Y) ensures that websites are usable by everyone, including people with disabilities. Benefits include legal compliance, improved user experience, a broader audience reach, and enhanced SEO.
What is visually hidden in A11Y guidelines?
"Visually hidden" refers to content that is hidden from sighted users but still accessible to screen readers. This technique is used to provide additional context or instructions for assistive technologies.
What is Pa11y?
Pa11y is an automated accessibility testing tool. It helps developers identify and fix accessibility issues on their websites to ensure compliance with accessibility standards.
What is the difference between buttons and links in A11Y?
In accessibility terms, buttons are used to trigger actions (like submitting a form), while links are used to navigate to different pages or sections. Screen readers and other assistive technologies interpret and announce these elements differently.
Why is accessibility the right thing to do?
Accessibility is essential because it ensures that all users, including those with disabilities, can access and use web content. It promotes inclusivity, equal opportunity, and a better overall user experience.
What are the 4 guidelines of accessibility?
The four main principles of accessibility are:
- Perceivable: Users must be able to perceive the content.
- Operable: Users must be able to interact with the interface.
- Understandable: Users must be able to understand the content and how to use the interface.
- Robust: Content must be accessible across different devices and assistive technologies.
Do screen readers pick up display none?
No, screen readers do not pick up content styled with "display: none." This CSS rule hides content from both visual and assistive technology users. To hide content visually but keep it accessible, use techniques like "visually hidden."
When to use visually hidden?
Use "visually hidden" to hide content from sighted users while keeping it accessible to screen readers. This is useful for providing additional context or instructions that only screen reader users need.
