Web accessibility refers to the practice of providing digital content in a way that can be used by everyone, including people with disabilities. Digital accessibility is important in today’s world since it makes the world a better place, ensuring that no one is excluded from accessing essential information and services. When we design with inclusion in mind, everyone benefits. Furthermore, as we increase the accessibility of our website, we also increase our website’s general usability.
When providing accessible design, assume that there is no standard user and that there is not just one standard device used to view digital content. The techniques used to create an accessible website create a better user experience for everyone, including but not limited to:
- Disabled people
- Business owners
We want to mostly focus on how web accessibility benefits disabled people and so we will cover that first.
Importance of web accessibility for disabled people
Websites can be made accessible and therefore should be made accessible. Whether a person is a visual or blind user, mouse-only or keyboard-only user, or hearing or deaf user should not matter when it comes to navigating our website. Website accessibility encompasses all abilities.
Web accessibility for blind users
When I explain to people how Be Accessible helps businesses ensure that websites are accessible, I will often use examples of how blind people use the internet. Most people are surprised since they did not even realize that a blind person could use the internet at all. It’s usually the first time that they have heard of a screen reader, which reads the contents of a website, or a screen magnifier, which will increase the size of the text on the screen.
In order for assistive technology such as screen readers to access a website and present the content, the underlying code must be written accessibly. Providing accessible code allows a blind person who uses a screen reader to do things such as:
- Read the entire contents of a web page
- Navigate web pages by headings to find just what they are looking for
- Understand the contents of data tables
- Receive an accurate description of images and video content
- Interact with and understand features such as submenus, links, surveys, and contact forms
Accessible web content is a necessity because it allows blind users to have independence that they may not have experienced previously. If a paper copy of a bill was the only way to know an account balance or the amount of a withdrawal, then relying on someone else to read the statement would be the only way for them to know the accuracy of the statement. Fortunately, a website built with accessible code allows a screen reader to present balances and transaction amounts.
Pro tip: Text links must provide an accurate description of the purpose of the link. Avoid non-descriptive linked text such as “read more” or “here.”
Web accessibility for keyboard-only users
Some people cannot use a mouse due to cognitive or physical disability, such as:
- Parkinson’s disease
- Multiple sclerosis
- Missing or broken limb
In order to keep in mind the importance of keyboard accessibility and support keyboard users, focus on providing a website designed for keyboard navigation accessibility. Testing for keyboard functionality is one of the easiest web accessibility testing procedures to perform. Simply put the mouse aside and/or disable the keypad. Navigate to each component of a web page using only a keyboard. Basically, if you can get to it with a mouse, you should be able to get to it with a keyboard.
A few keyboard accessibility techniques include allowing someone to:
- Use the tab key to navigate through links and other active elements such as forms
- Use the spacebar, arrow keys, or page up/down to scroll up and down
- Use shortcuts such as Ctrl+C to copy content and Ctrl+V to paste content
- Use function keys such as F3 to search the text of the current page
In addition to allowing users to access all of the content using only a keyboard, include a visual indicator showing the location of the current focus. Two of the most common ways to visually show keyboard focus are underline and outline.
Pro tip: The type of visual keyboard focus provided must also provide sufficient color contrast against the background.
Web accessibility for deaf or hard of hearing users
How to provide accessible content for deaf or hard of hearing users may be the most obvious. Many websites today include video content to help engage users. Video content must include alternative formats such as captions and audio descriptions that present the same information.
Sound on a website also includes audio-only content such as podcasts. Podcasts are a good example of audio-only content that requires transcripts. Provide easy access to transcripts near the audio content either directly in the HTML (preferred) or as a link. Include important information such as speaker identification.
Sign language is another technique used to provide audio content. We do not see sign language provided as often as we do captions and transcripts. This is partially due to compliance regulations not requiring it for WCAG AA conformance and partially due to the time, effort, and resources available to provide it. Regardless of regulations, if you are able to provide sign language for audio and video content, we recommend doing so.
These examples of providing accessible web experiences only partially cover the importance of website accessibility for disabled users. We need to consider a wide variety of disabilities in order to provide the best overall website experience.
We’ve posted free resources to help you learn and apply web accessibility into your workflow.
How web accessibility benefits business owners
If you are a business owner, you may be familiar with the term bounce rate. The bounce rate of a website is the rate of how long users stay on a website. Unlike conversion rates that we want to be high, our goal is to have a lower bounce rate. The lower the bounce rate, the longer people are staying on the website.
On the contrary, a higher bounce rate indicates a poorly constructed site. A website that ignores the importance of accessibility and lacks necessary elements would be considered a poorly constructed site. A poorly constructed website includes things like non-responsive design, lack of color contrast, and missing form labels.
Our goal is to keep people on our website longer so that they discover more reasons why they should choose us over our competitors. A study found that 71% of disabled web users will leave a website when it is not accessible. This is a large enough percentage to have a significant impact against the overall bounce rate. Business owners must prioritize web accessibility to avoid potential loss of customers.
How web accessibility benefits developers and Google
If your web developer argues that web accessibility does not benefit them, then it may be time to find a new developer as it is just undeniable how vital web accessibility for developers is, especially nowadays. Developers aim to create high quality websites and know that the cleaner the code is, the faster their websites will run. If a website’s load time is slow or a website fails to rank high in search results, the development team is responsible. Cleaner code means faster, high quality code. Semantically correct code is cleaner code. Accessible code is semantically correct. This means that code is written according to specifications. HTML elements (code) have semantic meaning. Developers optimize a website’s accessibility and performance by using code as it is intended.
Aside from having fewer bugs and making a website load faster, semantic code also helps search engines such as Google and Bing to index the content and achieve higher search rankings. For example, let’s say that a web page is about comparing web development platforms such as WordPress and Shopify. The page visually uses headings to organize its content. The code of the page uses paragraph tags with classes (used for targeting styles) to create the visual appearance of headings like this:
<p class="heading-1">WordPress vs. Shopify</p> <p class="heading-2">Which website platform is better for e-commerce?</p> <p class="heading-3">Where to find a WordPress developer</p> <p class="heading-2">Where to find a Shopify developer</p> <p class="heading-3">Which website platform is faster?</p> <p class="heading-3">Is Shopify easier to use than WordPress?</p>
While visually, the headings look great, the HTML markup does not provide a semantic meaning for the content. Instead, the HTML markup should look like this:
<h1>WordPress vs. Shopify</h1> <h2>Which website platform is better for e-commerce?</h2> <h3>Where to find a WordPress developer</h3> <h2>Where to find a Shopify developer</h2> <h3>Which website platform is faster?</h3> <h3>Is Shopify easier to use than WordPress?</h3>
When developers use the correct HTML heading markup, search engines understand the purpose of the content and as a result increase search rankings. Expert developers prioritize accessible semantic code and, as a result, create websites that are easily scanned to increase search rankings, which then results in satisfied business owners.
By designing and developing a website for all users/devices, we create the best inclusive experience possible. We give all users the opportunity to receive and interact with the content of a website. At the same time, we employ expert developers, increase SEO, increase customer retention, and increase revenues.
Please complete all fields.
The importance of color contrast in digital accessibility
In order for a website to be ADA compliant, text, user interface (UI) elements, and graphics that convey information must provide sufficient contrast ratios.
Get ready to accelerate your digital accessibility with our automated accessibility testing tool
Ensure WCAG 2.1 AA compliance with our easy to use automated accessibility testing tool that evaluates your code and content helping you achieve an accessible website.
Web Accessibility & WCAG Compliance Checks
There are some simple checks and fixes that you can do now to increase your website’s accessibility.