As technology continues to shape our lives and influence our interactions and communication, it is vital that the online world remains inclusive and accessible to everyone.
Let's explore what website accessibility is, why it's important, why your business should invest in it and ways you can make your website accessible on your own.
key:
what is website accessibility?
Website accessibility refers to the practice of designing and developing websites in a way that allows people with disabilities to perceive, navigate, and interact with the content effectively.
Disabilities can encompass a broad range, including visual, auditory, physical, cognitive, and neurological impairments. Website accessibility aims to eliminate barriers and provide equal access and opportunities to all users, regardless of their abilities.
why is website accessibility important?
Inclusivity and equal opportunities:
Ensuring website accessibility is a fundamental step towards inclusivity and providing equal opportunities for all users. By removing barriers, individuals with disabilities can fully participate in the digital realm, access information, engage with services, and connect with others.
Legal and regulatory compliance:
The ADA (American with Disabilities Act) law prohibits discrimination against individuals with disabilities in all areas of public life and private places that are open to the public. Since 2018, the ADA also includes websites, as they’re considered public places of accommodation.
Many other countries have also enacted accessibility laws and regulations to protect the rights of individuals with disabilities. Non-compliance with these laws can lead to legal consequences, including lawsuits, fines, and reputational damage.
Expanded user base:
Investing in website accessibility opens doors to a larger audience. It not only benefits individuals with disabilities but also includes older adults, people with temporary impairments, and those facing situational limitations (e.g., noisy environments).
By catering to diverse needs, businesses can tap into new markets, reach a broader customer base, and increase their potential for growth.
Enhanced user experience (UX):
Website accessibility principles often overlap with good design practices. By prioritizing accessibility, businesses can improve the overall user experience for all users. Features like clear navigation, concise content, and intuitive interfaces benefit everyone, leading to higher user satisfaction and engagement.
SEO and search rankings:
Website accessibility can positively impact search engine optimization (SEO) efforts. This is because search engines favor websites that provide an accessible and user-friendly experience.
why should all businesses invest in website accessibility?
Ethical responsibility:
As members of a global society, businesses have an ethical responsibility to ensure equal access to their online resources to everyone. Investing in website accessibility is a concrete step towards upholding social responsibility, fostering inclusivity, and making a positive impact on people's lives.
Competitive advantage:
In an increasingly digital marketplace, businesses must differentiate themselves from competitors. By prioritizing accessibility, you stand out as a company that values diversity, equity, inclusivity (DEI), and customer satisfaction. This can create a significant competitive advantage and build a strong brand reputation.
Mitigating legal risks:
Proactively investing in website accessibility can help businesses mitigate legal risks associated with non-compliance. By adhering to accessibility guidelines, you minimize the chances of facing legal challenges and protect your business reputation.
Future-proofing your business:
As technology evolves, accessibility will continue to be a critical consideration. By investing in website accessibility today, you future-proof your business and stay ahead of changing legal requirements and customer expectations.
Learn more about how to make your website accessible and find out how we can help.
Now that we’ve discussed why website accessibility is so important and why your business should invest; let’s now discuss ways that you can make your website more accessible on your own.
ways to make your website more accessible on your own:
Avoid color-specific instructions:
Color blindness doesn’t necessarily mean that you can’t see any color at all, or that people see things on a grey scale. It’s a decreased ability to see color or to tell colors apart from one another.
“Per NIH, color insensitivity impacts approximately 0.5% of adult women and 8% of adult men.” (US Standards Website)
Red-green color blindness is the most common form, and some rare conditions prevent all perception of hues; therefore, it’s important to think about how we can keep our websites more accessible and inclusive to all people.
When designing forms, avoid labelling *required* fields only with colors; typically, we see these labeled in red.
It’s safer to use a symbol cue like the asterisk (*).
Another example, when creating website forms; avoid green for “message successfully submitted,” and red as an “error” indicator.
Don’t rely on color coding:
When designing specific pages, or when including maps and infographics, don’t simply rely on color coding alone for keys — try to use a combination of color and texture or pattern, along with precise labels, and reflect this in the key or legend.
For example, patterns might include dots, dash marks, or lines.
Pay attention to contrast:
Light colored fonts on a white or light background are difficult to distinguish as it is; but for a person who suffers from color blindness, they may not be able to tell the difference at all. Therefore, pay close attention to color contrast throughout your branding and website.
This color contrast check tool gives you the option to enter a color code (hex code) for a background, and a color code for text or font, and it tells you if the color contrast ratio meets the Web Content Accessibility Guidelines 2.0 (you can use the built-in sliders to adjust your colors until they meet the compliant contrast ratios).
Use descriptive and meaningful headings and sub-headings:
Headings help organize content and make it easier to navigate. Using descriptive headings can help people with disabilities understand the structure of the page and quickly find the information they need.
Provide closed captions for videos:
Captions are essential for people with hearing impairments, as they provide a written transcript of the audio in a video. Including closed captions ensures that everyone can understand the content of the video.
Use a clear and readable font:
Using a clear and readable font is essential for people with visual impairments, as it can make the content more accessible.
Avoid using fancy or cursive fonts and instead use simple, easy-to-read fonts, for example: Arial, Verdana, or Helvetica.
Use descriptive text for links:
Text that is linked to another website, page or social media platform should be descriptive and provide information about where the link will take the user. This can help people with disabilities understand the context of the link and decide whether to click on it or not.
For example, avoid using phrases such as "click here."
Avoid using automatic media or navigation:
Automatic media or navigation can be confusing and overwhelming for people with disabilities. Avoid using automatic media, such as videos that play automatically, and instead provide controls for people to decide how and when to interact with the media.
Avoid unlabeled color swatches:
If you’re using colors to filter products, be sure to include the name of the color/product.
For example, H&M does a great job by including the name of the color along with color swatch next to it.
Avoid only having the color name display on hover:
Take a look at the example from Urban Outfitters. In this image, the name of the color only appears once the user hovers over the color swatch.
This isn’t ideal because although it’ll appear when someone hovers on a desktop, it won’t appear on a mobile device.
Be sure to include the name of the color and not only when using the hover effect.
Avoid fancy names:
For example, a name like “grape” to describe a color won’t be useful to a person, as “grape” ca be a green grape or red/purple grape.
Use names that accurately describe the image and color of the product.
Provide Alternative Text for images:
Alternative text is a feature that allows you the space to describe what your image is about for the visually impaired or for instances when an image fails to load. When an image fails to load, written copy will then appear in its place.
This space is also used to tell Google what your image is about, which given particular keywords, has the chance to increase click-through-rate (CTR) and overall traffic to your website by being found in image search results.
Image opacity and contrast:
Text placed on busy images can also make it extremely difficult to read. Therefore, if you reduce the opacity of the image, this increases contrast and makes the text much easier to read and comprehend.
Also consider having a solid background instead of a busy image or adding a drop shadow effect on the text.
In the images provided below, you will notice that the first image has text placed on a busy background and is difficult to see the word "Example." Whereas, on the second image, the opacity is reduced, making the text much more visible and easier to read.
Text alignment:
Align text to the left for each line to make the text easier to read.
Left-aligned text promotes readability and comprehension for users with dyslexia or visual impairments. The consistent left margin helps maintain a predictable reading flow, reducing cognitive effort and improving overall accessibility. Additionally, left-aligned text allows for better localization and translation, as many languages are read from left to right.
Additional best practices:
try not to use:
Flashing graphics or animations (i.e., something that flashes more than three times in any one second period).
Parallax (scroll jacking): this is when a background image moves at a different speed than the rest of the content on the page.
to reduce the risk of seizures:
Keep motion animations to a minimum.
Reduce contrast for any flashing content.
Avoid fully saturated reds for any flashing content.
If you do have rapid flashes on your site – provide a tool or an option to stop it.
For more information on Website Accessibility Best Practices and additional resources, be sure to check out the US Standards Website.
Learn more about why to make your website accessible and find out how we can help!
written by:
Adriana Leos
Chief Creative Officer
vznayres