Apr 18, 2022 4:46:18 PM
When designing a website, there are many things to consider. One of those is web accessibility. Ensuring website accessibility from the start saves you from fixing mistakes later when you learn that your website isn’t accessible.
We specifically discuss the Web Content Disability Guidelines (WCAG) when we talk about creating accessible websites. WCAG is one of the main guidelines that dictate what makes websites user-friendly for people with disabilities and what must be done to make websites more user-friendly.
If you've learned that your website does not follow WCAG guidelines, it's vital to fix those mistakes quickly and mindfully.
Why Is Accessibility Important?
Accessibility means everyone — including those with a disability — can access the information or services on a website without barriers. It's a catch-all term for ensuring people can use every part of your website, with or without assistive technology.
Accessibility means everyone has equal access to your goods and services. It means screen readers can read and navigate all your web pages. It means keyboard-only navigation works without anyone getting stuck. It can mean all audio and video come with captions and transcripts so the deaf, hard of hearing, and people with the sound off know what’s happening. It means using plain language with icons to help people navigate the website regardless of their abilities and disabilities.
Not only do you help people navigate your website better and provide a better user experience but also you expand your reach and credibility. Furthermore, accessibility and search engine optimization (SEO) often go hand in hand.
Is it Hard to Make a Website Accessible?
Many of the techniques for web accessibility aren't hard. A lot of the things you're already doing as a web designer to make your website SEO-friendly and user-friendly are things that enhance accessibility. The items you might be missing are easy to correct and even easier to integrate into your processes when creating content and websites.
Here are some simple, effective ways to avoid making website accessibility mistakes.
1. Use relevant alternative text to describe pictures
Pictures are common on webpages for a good reason. They provide more context and information to visitors. When using pictures on web pages, it's essential to make sure everyone can understand their meaning.
Alternative text, also known as alt text, is used to describe the picture. It helps both accessibility and SEO. In SEO, the alt text can help the page improve its rank for search engine results. In terms of accessibility, screen readers can read alternative text to give people who are blind or visually impaired to understand the context and gain the information about the image.
When using alt text in your image, ensure it’s descriptive yet concise and that it describes the image based on the topic of the content on the page. Do not start with "picture of …" or “an image of” because the screen reader already identifies it as an image. And for any image that doesn’t relate to the content, mark it as decorative.
Make sure to include alt text for all the pictures on your webpage. Using alt text on just some of the images leads to an incomplete view of the page for screen readers.
2. Make web pages easy to navigate with landmark roles
For people without disabilities, quickly scanning a web page for the information they need is fast and simple. They can tab or scroll to where they need to go.
People using assistive technologies such as screen readers can navigate a page using landmarks which represent certain types of content such as navigation or the main content. Keyboard users may also have the ability to do this but requires a browser plug-in.
Using landmarks roles, you can make your webpage easy for assistive technologies to navigate. Fortunately, it's easy to add it to the HTML of the website, making it a simple mistake to avoid.
3. Provide sufficient color contrast
To read your text, you must use a font color for the text that has a strong contrast color for the background. It is hard to read if the font color doesn’t have enough contrast to stand out from the background. This is called low contrast.
If the text color and background color have a low contrast, it can be hard for people with low vision or color blindness to read the text. Think of trying to read a dark gray word on a black background. On the other hand, high contrast between font and background greatly improves readability. An example of this is a white word on a black background.
WCAG's requirement for contrast ratio is a ratio of 4.5 to 1 for standard-sized text. However, large text (14 points or larger) can have a ratio of 3 to 1.
There is one exception to this rule, which is the logo. But if you want everyone to know what your brand represents, create a logo that has a strong color contrast.
Low color contrast is an easy mistake to avoid. While using colored text is very popular, make sure to test the contrast to confirm it's strong enough per WCAG guidelines.
4. Allow for complete keyboard access
Keyboard navigation is a fast way to navigate websites. For people with disabilities like those with mobile or visual disabilities, keyboard-only navigation and shortcuts are their primary ways to navigate.
A website needs to support keyboard-only navigation, as not everyone wants or can use a mouse or other pointing device. When a website disables keyboard functionality for design aesthetics, it requires conscious design to disable. This is an easy mistake to avoid.
To check to see if your website is keyboard accessible, simply press the Tab key while on your website. If a visible outline like a blue box appears around the content, this visual indicator shows the keyboard access is supported. Then press Enter or Spacebar to verify you can activate the control.
Also make sure to check the focus order, ensuring that the tab moves to the next spot in a logical way on the page to make it easy to know where the tab will appear next.
5. Make links meaningful
When people with disabilities use screen readers, they will frequently use them to pull up a list of the links on the page. This feature gives them a snapshot of what is on the page.
When adding links to your webpage that direct the user to another page, make sure the linked text used for the link is clear and tells you exactly what to expect if you follow the link.
Using words that are not directly related to the page linked to or that only make sense within the larger context of a paragraph will confuse users using screen readers to bring up a list of on-page links. For example, if you link “click here,” where will it take you? It’s hard to know, right? A better way is to link words such as “product design services.” You know it will take you to a page about exactly that.
Avoid Common Accessibility Mistakes
By avoiding these common accessibility mistakes that waste your time and money, you can create a more accessible website that brings more traffic. These mistakes are easy to avoid once you know what they are and how to fix them. In the end, you’ll have a more usable website that more people can use because it’s accessible.
If your company needs help building accessible websites and products, Diamond can create digital experiences that are visible, usable, and accessible to everyone. Contact us to learn more about digital accessibility or read the FOX / FLAG case study to learn how the company achieved its goal by partnering with us.