Is your business website accessible to everyone? Even to those with disabilities? Learn how to make your website a better experience for all of your visitors.
What is web accessibility?
Web accessibility is the practice of making websites usable for all visitors, including those with disabilities, impairments, and limitations. Making your website accessible involves following certain design principles which ensure that people with disabilities or limitations have a similar browsing experience to those who do not. Besides becoming a growing legal requirement, website accessibility should be an important goal for your business, as it gives all visitors equal access to your content.
Be inclusive to all visitors
As a business owner, you need to be aware of website accessibility. Why? Because around 20% of the visitors to your website may suffer from some type of disability. This could be a physical disability, cognitive disability, or sensory disability, to name just a few examples.
While this number may not seem like a lot, it can add up to a very large number of visitors over the course of a year. How many visitors could your website be losing out on because it’s not accessible?
Accessibility is a choice
Choosing to make your website accessible to all means that you’re making the choice to be inclusive to your website visitors. You’re taking a stance to let every visitor know that they’re welcome and that your business is supportive to their needs.
Website accessibility is a growing legal requirement around the world. Governments and lawmakers are paying attention to the problems disabled users have with websites. Over time, more laws will come into place to help provide a better browsing experience for everyone.
The importance of accessibility
Website accessibility is an important topic for every business owner to be aware of. When you think about accessibility, you likely think about users who are disabled. This could be a physical disability, cognitive disability, or sensory disability as an example. However, it’s important to remember that there are many other users who can be affected. For example users can suffer a temporary disability after being involved in an accident.
The number of users requiring some level of accessibility can amount to 20% of your website visitors. Does that seem like a lot? You might think it’s not, but let’s put that into perspective. If you receive 10,000 visitors to your website per month, you could be missing out on 24,000 potential new customers every year.
Making your website accessible means that you’re choosing to be inclusive to your visitors. You’re letting them know that your business is welcoming and open to them.
Growing legal requirements
Accessibility can be a legal requirement, depending on where your business is based. This is something that you should check with an appropriate legal professional in your location.
Over the last few years, there have been a growing number of legal cases that refer to inaccessible websites. In the United States, for example, these cases will usually come under the Americans with Disabilities Act (ADA). Lawsuits can be a very costly experience for a business, so obviously it’s in your best interest to ensure that you’re able to provide a good experience for your users.
Even if there isn’t a specific law in place where your business is located, that doesn’t mean it’ll stay that way forever. The world continues to become more inclusive every day and every internet user should have the right to access websites in a way that is most appropriate for their needs.
Just a starting point
In this brief guide we’re going to cover some key areas of website accessibility that you should be aware of with your business. We’ll talk about some common issues that your visitors face with your website and what you can do to improve their experience.
It should be noted that this is not an exhaustive guide on accessibility — it’s a starting point that will give you some immediate steps you can take. These are accessibility guidelines that your business can follow to help your website to be more accessible to your visitors.
From time to time we’ll refer to the Web Content Accessibility Guidelines (WCAG). They’re intended to be an international standard that meets the needs of individuals, organizations, and governments internationally.
Tip: To provide the best experience from an accessibility perspective, most businesses should aim to be conformant with the WCAG 2.1 AA standard.
Website accessibility for everyone
Six steps you can take to improve the accessibility of your website.
01. Navigating with assistive technology
People with disabilities use various types of technology to navigate websites. For example, a blind person will use a screen reader, braille display, or speech recognition software. Whereas a user who suffers from hand tremors that stop them from being able to grip a mouse, will use a keyboard to navigate.
It’s important to make sure that visitors to your website can navigate and find the information they want using assistive technology. Let’s run through some examples and how you can test your own website to see what you need to fix:
Visual focus
Visual focus (also known as keyboard focus) is something that is critical for users that rely on keyboards or switch devices to navigate your website. It’s distinguished by a visible indicator that shows which interactive element, such as a button or link, is currently in focus. The indicator is usually an outline or a border that surrounds the element.
Tip: To test this on your website use the TAB key on your keyboard. Keep pressing it and watch how the focus element changes through your site. Are the interactive elements showing with an outline or border?
Skip links
Skip links are used by people that navigate using keyboards, screen readers, and other assistive technologies.A skip link allows a user to reach the main content section, or another important area, faster. It’s usually the first interactive element on a web page. The skip link won’t be visible when the page loads. Instead, it’s visible only when it is focused.
Tip: Your website should have a skip link to take your reader to your main content area. Test this by pressing the TAB key on your homepage. The first press should show a skip link. Press enter to follow the link.
Screen readers
A screen reader is a tool that reads aloud what is on a user’s screen. They’re used on desktop and mobile devices by blind or partially-sighted people. A screen reader is also helpful for users who have reading disorders.
A big accessibility myth is that you only need to make your website accessible to users of screen readers. While that’s not true, supporting screen reader users is still important. You can use your built-in software on your smartphone to test how your website works with a screen reader. For iPhone users you’ll use “VoiceOver.” Android users will use “TalkBack.”
Tip: Load your website and test it on your smartphone with screen reader software turned on. Is everything clear to a user? Make a note of anything that isn’t clearly explained, as this will be something you’ll want to fix.
Text size
Some users may need to increase the text size on your website in order to clearly read the words. A user can set their text size in their operating system or their web browser. There are many ways of doing this, so it’ll be a user preference setting.
Your website needs to allow a user to increase the text size of your content, without affecting the legibility of your page as a whole. Important information shouldn’t be lost because the increased text size causes an issue with your website’s layout.
Tip: Increase the text size on your computer through your operating system or web browser. Look at your website and check that your content is legible and easy to understand with the larger text size.
Page zoom
Page zoom is similar to increasing text size, however it’s a zoom for all of the content on a user’s screen. This is used by someone that needs to increase the size of the content on their screen in order to clearly perceive it.
All content should be clearly readable, with all expected functionality working. The user should not be forced to scroll horizontally. Page zoom will usually trigger the mobile version of a website, so it’s very important that your website is properly responsive.
Tip: Load your website in your browser and set your browser to show a 200% zoom. In Google Chrome this is View > Zoom In, then adjust to 200%. Test your website. Does it adapt to the zoomed size? Is everything easy to read? Does everything function as expected? (e.g. do buttons and forms still work?)
02. Accessible images
Images are an easy point of failure when it comes to accessibility. Wherever possible, you should ensure that you do not use an image to entirely convey a message to your reader. It can be very difficult for a screen reader to pass on an accurate message to a blind or visually impaired user.
Likewise, you should be careful if you’re adding text directly into an image. The screen reader will not read the text that is in the image. You can mitigate this through the “alternative text” that you set, but it’s better to avoid adding lots of text into your images in the first place.
Alternative text
“Alt text” (short for alternative text) is a short description of an image on your website. It’s not only used by screen readers, but also if an image fails to load. A user browsing your website with a screen reader will have the alt text read to them. Any alt text that you use for an image should be clear and concise, while accurately depicting the image. Try not to burden the user with unnecessary information.
For example, if you have credit card logos for Visa, Amex, and Mastercard on your website, you may be tempted to use the alt text “credit card logos.” This isn’t helpful for a user with a screen reader as they have no idea which cards you accept. Instead, you could use the alt text “Visa, Amex, and Mastercard credit cards accepted.” This clearly defines the purpose of the image and it helps your website visitor to understand.
There are three types of images you may have on your website:
Decorative
If an image could be easily removed without impacting the functionality or content on a page, then it’s considered decorative. An example of this could be a background image or an icon that displays above a heading. These images can have an empty alt text attribute applied, which will encourage a screen reader to skip the image.
Simple
Most images on your website will fall into this category. This is an image that adds meaning or context to the content and functionality of your page. Each of these images should have clear and concise alt text added to them.
Complex
A complex image could be a graph, chart, diagram, or infographic. This is typically an image that displays a lot of data or information. It’s not feasible to try and display all of this information using alternative text. Your best option with these images is to make sure you provide a complete caption for the image on your page.
Sometimes you’ll find that you have an image of text on your page. Although this is less common in modern design, there are still websites that display text as images rather than text-based content.
If you have any images that display text content, convert these over to text. Not only will they load faster — as text loads faster than images — you’ll be providing a better experience for all of your users.
Tip: Go through each page on your website and review your images. Decide which of the three categories (Decorative, Simple, or Complex) your images fall into. Review any existing alt text and ensure that all of your images have appropriate descriptions or captions.
03. Accessible fonts
Making a website accessible focuses more on users with disabilities, but having accessible and legible fonts is important to everyone. An accessible font is one that is easy to read, easy to see, and easy to understand for all users.
There are many different font choices that you could consider for your website. It’s best to avoid anything that is too intricate or decorative, as these can be harder for people to understand. Likewise, you should try not to use too many different fonts on your website. Most websites operate very well with just one or two font choices in use.
A good example of a font that is accessible is when the number “1,” lower case letter “l,” and uppercase letter “I,” all appear distinctive and different. When using text on your website, you should consider a font size of 16px as a starting point. It’s best not to go under 12px for any font sizes, as that enters the realm of being a lot harder to read.
WCAG recommends making sure that users can zoom in to make text 200% larger on websites. A well chosen font should easily accommodate this and be legible at the increased size, as well as the normal size you use on your website.
Tip: Review the fonts that you’re using on your website. Are you using fonts that are clear and easy to understand? Look at the different sizes of text on your website. Are they easily legible? Would they work better if they were larger?
04. Accessible colors
Text and graphical elements on your website need good contrast. This is so they can be easily perceived by your visitors. Some users may have visual impairment issues while others could be viewing your website in bright sunlight.
If there is not enough contrast between the foreground and background colors, a user may have difficulty in understanding or perceiving your content.
WCAG 2.1 defines specific color contrast ratios that must be met for compliance:
- For Level AA, the color contrast needs to be 4.5:1 for text at a normal size.
- For large text (above 18pt or bold text at 14pt) the contrast ratio needs to be 3:1.
In addition, color should not be the only visual indicator for an element or meaning on your website. Also, not everyone perceives color in the same way. For example, color-blind users will see colors on your website differently.
The most common type of color blindness is red-green. So if you feature any success (good) or warning (bad) messages, you’ll want to consider showing more than just green or red colors for these. Adding an icon and additional context would help a user to perceive the message easily.
Finally, it’s worth considering that some users will view content in grayscale mode. An example of a user viewing in grayscale could be one that suffers with addiction to their smartphone. They may choose to set their phone to grayscale, to avoid the bright colors that feature in social media or mobile games.
Tip: Test the color contrast of the colors you’re using on your website. Pay particular attention to hero sections, buttons and forms, as well as your main headlines and body text. You can use an online tool such as the Color Contrast Checker by Coolers:
05. Video captions and transcripts
Like images, videos benefit from additional information that makes them easier to comprehend by visitors with disabilities.
Captions
Video is a popular content medium on the internet. YouTube is one of the most visited websites in the world, with around 5 billion videos viewed every day.
If you’re using videos on your website, you need to take action to provide an accessible way for your visitors to enjoy your content. Every video that you feature on your website that has audio content, should have captions.
Note: In some parts of the world, captions may be referred to as subtitles. However it’s important to distinguish the difference between subtitles referring to captions and subtitles referring to the audio content being provided in a different language.
Captions provide content for deaf or hard-of-hearing users. They help the user to understand the content of a video, through a text version of the speech and also non-speech information.
When using captions, you should easily identify speakers if there are multiple speakers in the video. You should also take care not to obscure on-screen elements by moving captions to an alternate screen position when required. Finally, make sure to include non-speech elements such as sound effects.
For pre-recorded videos, captions are required to meet WCAG 2.1 Level A requirements. For live videos, captions are required to meet WCAG 2.1 Level AA requirements.
It’s worth noting that captions are not just useful for hearing impaired users. Sometimes website visitors are in a busy environment or not in a position where they’re able to listen to audio, but they still wish to enjoy your content.
Tip: If you’re using video on your website, make sure you’ve provided captions for each video. Check that your captions clearly identify each speaker and that they don’t obscure any important elements in the video.
Transcripts
Transcripts are a helpful way of displaying audio or visual content in a text format. They’re used by both deaf and blind users, although there’s a clear distinction, which we’ll come onto in a moment.
You’ll also find that some of your website visitors prefer reading text content rather than listening to audio or watching a video. So when you provide transcripts, you’re providing a better experience for all of your website visitors.
There are two types of transcript that you may feature on your website:
Basic transcript: This is a way of showing speech and non-speech audio information, to help a user understand the content. Basic transcripts help deaf, hard-of-hearing, and users who have difficulty processing auditory information.
Descriptive transcript: This shows the speech and non-speech audio information, as well as a description of the visual information in the video. Descriptive transcripts provide video content to users who are both deaf and blind. They’re also used by users who process text better than audio or visual information.
If you need to use transcripts on your website in order to meet your desired WCAG 2.1 conformance level, it’s better to use a descriptive transcript. This ensures you don’t need to create a separate basic transcript.
An example of where you’ll use a transcript on your website is if you have a podcast. For each individual episode page, you should provide a transcript of the episode. As this is pre-recorded audio, providing a transcript will ensure that you meet WCAG 2.1 Level A requirements.
Tip: Check any audio or videos on your website. Make sure that you provide a transcript to help your website visitors to understand your content. Remember that transcripts provide an alternate method for all users to enjoy your content.
06. Accessibility overlays
As a business owner, you may become aware of certain technologies that promise a “one-click” solution to help your business website magically appear to be accessible.
These sound ideal, as you’re informed that by installing a piece of code on your website, it will now be accessible and provide a great experience to all users. Unfortunately, there’s no such thing as a one-click solution to accessibility.
Every single website is different. They contain different code, content, colors, and images, to name just a few. The fixes and improvements that will help your website, will not necessarily be the same for someone else’s website.
One-click solutions
The one-click solutions are often referred to as “overlays.” This is a general term for technology that claims to improve the accessibility of a website. They use third-party code (usually JavaScript) to manipulate the appearance (front-end) of a website.
An overlay presents a list of tools or options on the front-end that a user can access. These options will modify the layout or content of the website page. For example, they could increase the size of text on a page or adjust the color contrast.
While this seems like a great option, it’s worth noting that disabled users already have many of these functions available through the assistive technology that they use. They can access many features through their operating system or web browser. Additional functionality is provided by specialist software, which they use on their computer as a whole — not just for browsing the web.
In 2021, WebAIM conducted a survey of web accessibility practitioners. One of the questions they asked was: “How would you rate the effectiveness of web accessibility overlays, plugins, or widgets that automate accessibility changes in web pages?”
To quote from their survey results, the response to the question was:
“A strong majority (67%) of respondents rate these tools as not at all or not very effective. Respondents with disabilities were even less favorable with 72% rating them not at all or not very effective, and only 2.4% rating them as very effective.”
So what does this mean for your business when it comes to overlays? The best advice, as with any business decision, would be to carry out your own research.
Overlay fact sheet
There are many accessibility experts such as Karl Groves, who worked to create the Overlay Fact Sheet. Here you’ll find an overview of what an overlay is, how it works and information that shows how an overlay may not achieve what it claims to do. The page includes comments from disabled users about their experiences with overlays.
You’ll also find an additional reading section at the bottom. Here there are various articles from other professionals, including discussions on court cases where overlay providers have been cited.
Tip: If you’re considering using an overlay in your business, make sure you’re aware of the potential limitations and impacts of these tools. There is no one-click solution for accessibility. Nothing can automatically make your website conform to the WCAG 2.1 success criteria.
Moving towards accessibility
The internet is far behind when it comes to accessibility. We have all sorts of functions and features that look great and deliver an exciting experience, however disabled users can’t always enjoy these.
As a business owner, providing an accessible website is your responsibility. In some locations this responsibility is backed up by law, so it’s something you should take seriously. Even if accessibility isn’t enshrined in law where you’re located now, this could change in the future.
Remember that taking actions to make your website more accessible will give your visitors a better experience. You’re choosing to be inclusive to all visitors, no matter how they consume the content that you share.
Additional steps
In this guide, we’ve talked about some important steps that you can take to start making your website accessible. These are a good starting point and they will help to fix some of the issues that visitors may have on your website at present.
There are of course many additional steps that you can take if you want to conform to WCAG 2.1 Level AA standards. Unfortunately there is no one-click solution for accessibility. There are helpful tools that can provide guidance, but you still need to make the changes on your website.
Accessibility audits
To make your website fully accessible, the best option for this is to perform a manual accessibility audit. With this, an accessibility expert will review your website and arrange for it to be tested using assistive tools. From the completed audit, you’ll have a list of items that need to be fixed or changed on your website in order to make it accessible and pass the required WCAG 2.1 success criteria.
Related
Sources
Tools
- Coolors Color Contrast Checker
- Overlay Fact Sheet
- WAVE Web Accessibility Evaluation Tool
- WebAIM Contrast Checker
- WebAIM Link Contrast Checker
Revised: October 10, 2024 at 12:23:15 PM PDT
