It’s no surprise that you want your website to be accessible; it’s the law, and it can boost your business by meeting the needs of customers with disabilities. But what are the best ways to make your website more accessible?
What is accessibility anyway? Accessibility refers to the design of products (in this case, websites) to be used by people with different ability levels. A significant priority in making products accessible is ensuring users can enjoy websites without requiring a specific device, such as a touch screen or voice recognition software.
First, one must understand the laws governing accessibility. In some areas, laws require businesses to make their sites accessible, while others have voluntary guidelines—so check on local laws before proceeding. It’s also helpful to know what some elements need extra consideration when designing a highly accessible site.
Recognize the benefits beyond compliance and legal requirements; creating sites that are friendly toward people with disabilities brings many rewards—you’ll attract more customers who may not have been able to use your website. Otherwise, you’ll improve access to information for all users, and you might even see higher conversion rates from interested customers.
If you’ve already got a website, and you’re not sure exactly how accessible it is, you can always run a website accessibility audit tool to assess how you’ve done so far and what you can do better. To help make your website accessible to everyone, we’ve put together a list of ways you can make your website accessible to absolutely everyone.
Use Contrasting Colors
The most important thing you can do when designing a website is to choose easily distinguishable colors. For example, say you’ve got two options for text: blue and white.
A common mistake people make is choosing the same color for both of these elements—in this case, blue. Although this may seem like an acceptable decision at first glance, some users will find it challenging to read because of the lack of contrast between these two colors.
Using the color wheel is an excellent way to create contrasting colors in your design. When using complementary colors on a website—such as red and green or blue and orange—make sure you have enough difference between them, so they pop against one another without causing any visual stress to your visitors.
One trick to remember is that complementary colors lie on opposite sides of the color wheel from each other. That means if you’re trying to use red and green together, both will be opposite each other if the wheel is divided into six equal parts.
If even using complementary colors doesn’t give adequate contrast between what you’re looking to emphasize versus what you want to deemphasize, many online tools can help you determine how different colors will work together (we recommend Adobe Kuler).
Another thing worth keeping in mind while creating websites with accessible color schemes is that certain people experience visual impairments. That includes people with dyslexia or low vision. They need specific types of contrast to see things clearly and easily when accessing your websites or reading something printed out on paper.
To make room for accessibility explicitly geared towards those with visual impairments, you could code toggle options to change the font to one suited to dyslexic readers or a high contrast mode for those with colorblindness.
Add Alt-Text and Descriptions to Images
Images are one of the most common ways users can interact with a website, but they can also pose some challenges. While usually only decorative, images can sometimes be more informative than words. Too many graphics on a page could slow it down, but if done right, images can enhance the user’s experience and make for an overall better design.
Have you ever seen a section labeled ‘add alt text’ in your web builder? Alt-text is just what it sounds like: alternative text. An image’s alt text is the visible text that will appear if you hover over or click on an image without loading the original file.
The alt text should be descriptive enough to help users navigate your site without getting distracted or lost in a sea of lengthy descriptions about how pretty the picture is. Keep it short and sweet. If there isn’t any helpful information inside the image (like a decorative frame), include alt text to display blank space until the image is loaded. It will also help keep your page load time fast, which search engines love.
If you add website images containing information (such as charts or graphs), they should have a description. Otherwise, search engines and screen readers won’t know what to do with them—and could potentially mark them as spammy or harmful content. The description should still follow all of Google’s guidelines for duplicate content so that there’s no confusion when Google crawls through looking at everything on your site.
Don’t Use Color Alone to Convey Important Information
On the web, the concept of “colorblindness” isn’t just a quirk in an algorithm; it’s not just something that happens to a small percentage of an audience. Half of male Caucasians and 5% of females are affected by red-green color blindness, meaning that more than 20% of your potential audience have trouble discerning information from your website.
Some designers try to get around this by using color alone to identify errors and differentiate links from regular text. But color has no semantic value—it’s all based on what the designer wants you to think it means.
A link on one part of a website can mean something completely different elsewhere because there is no standardization or regulation behind using colors online. It can lead to confusion at best or serious accessibility violations at worst.
So, how can we improve? The answer is simple: don’t rely on color alone to convey important information. When designing content, avoid using color entirely to communicate essential distinctions, such as errors and form fields.
Failing that, make sure that there are more than two possible uses for your colors so that those with only partial sight aren’t likely to be confused by particular combinations. Additionally, don’t rely on color alone to differentiate links from the regular text; instead, distinguish them through shapes (underlining) or other visual cues ( borders).
Make Sure Your Site Works with a Screen Reader
You may already know that your site needs to be accessible for people with visual impairments. The content should be available and readable through alternative means like screen readers. If it’s not, you could lose access to a significant amount of traffic and revenue from people who can’t use your site.
Here are the main things that you need to make sure are communicated:
- The main navigation links
- The content title/the headline above each section
- Your contact information
Add Captions and Transcripts to Your Videos and Audio Files
Accessibility is essential on the web, and with the changes being made to internet-connected devices, it’s only going to become more critical. That emphasizes the importance of making sure your website is accessible for people with disabilities and all types of users.
If you have video content or audio files that you want to share online, adding captions and transcripts allows your audience to understand what you’re saying regardless of their ability or language proficiency. These steps are easy enough that we’d argue it’s a disservice not to include them in your process:
#1: CAPTIONS (FOR VIDEO)
Captions are text transcriptions of people talking in a video. They can be found both as subtitles in a video file and separate files generated by certain types of editing software.
Captions are often overlooked when creating videos, but they’re one of the best ways that make content accessible—globally! It is especially true if you don’t speak English yourself and want non-English speakers to understand what you’re saying.
Captions can also be helpful if you live in a place with noisy neighbors (like New York City) or have music playing in the background while speaking. In addition to not worrying about keeping quiet during recording (or finding someone else who can keep quiet), captions allow viewers to watch videos at their own pace without missing out on anything important.
#2: TRANSCRIPTS (FOR AUDIO)
Transcripts are an equally helpful accessibility tool when used alongside audio files like podcasts or interviews. Transcripts appear as plaintext alongside audio files and can contain additional information about what was said beyond what the transcript represents as spoken words.
Make Sure Everyone Can Access the Information on Your Site
Accessibility guidelines are an essential step to ensuring your site is usable for everyone—not just those who haven’t had to think about how they experience the world. If you’re working on a website or app, accessibility is vital and can significantly improve usability. It’s a legal requirement in many countries that your website be accessible.
Here are five of the most basic ways to make this happen:
- Enable text-only browsing mode—This allows people with low vision to use your site without images interfering.
- Shorten anchor links—People who use screen readers have problems with long links because they need more time to read and understand them than other visitors do. Making them shorter makes it easier for everyone to navigate your site.
- Use clear, truthful language—Don’t try too hard to be hip or funny when conveying information like phone numbers or dates of events. You wouldn’t say “throwback Thursday” if you meant “Thursday.” Say what you mean instead of relying on slang that all audiences may not understand.
- Provide text alternatives for images. If you include photos in an article, make sure you provide a description so that someone using a screen reader can get context rather than just from the photo itself (especially if it’s something essential like a chart or graph).
Conclusion
We’ve provided a short guide to building accessible websites in this article. We hope that it will aid you in your business and web design needs in the future.
