In today's digital age, websites play an essential role in disseminating information and providing services to people worldwide. And because of that, it's necessary to ensure that websites are accessible to everyone, including people with disabilities.
Website accessibility involves designing and developing websites that can be accessed and used by people with a wide range of disabilities, including visual, auditory, and cognitive impairments. It is the practice of ensuring that there are no barriers to prevent interaction with a website by people with disabilities.
In this blog post, we'll discuss some essential tips for website accessibility and best practices to ensure that your website is accessible to all.
For more information about what you need to properly build a website, download our free guide, Top 20 Website Must-Haves here.
Ways to make your website more accessible:
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 colored text; typically, we see it labeled in red. It’s safer to use a symbol cue like the asterisk (*).
Another example, when designing your 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 — try to use a combination of color and texture or pattern, along with precise labels, and reflect this in a 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 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. Use the built-in sliders to adjust your colors until they meet the compliant contrast ratios.
Use Descriptive and Meaningful Headings:
Headings help organize content and make it easier to navigate. Using descriptive and meaningful headings can help people with disabilities understand the structure of the page and quickly find the information they need.
Provide Closed Captions for Videos:
Closed 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 Legible Font:
Using a clear and legible 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 Link Text:
Link text (clickable text that is linked to another website/source) 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; rather than general or 'broad' words that don't provide any context.
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 (see image below).
Avoid only having the color name display on hover:
This isn’t ideal because although it’ll appear when someone hovers on a desktop, it won’t always appear on a mobile device (see image below).
Avoid fancy names:
For example, a name like “grape” to describe a color won’t be useful to a person, as “grape” could 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; 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 search results.
Image opacity:
Text placed on busy images can also make it difficult to read. Therefore, if you reduce the opacity of the image, this increases contrast and makes it much easier to read and comprehend.
You can also consider having a solid background or a drop shadow effect on the text.
Alignment:
Align text to the left for each line to make the text easier to read.
Test Your Website for Accessibility:
Testing your website for accessibility is essential to ensure that it meets the needs of people with disabilities. Use accessibility tools like screen readers, color contrast analyzers, and keyboard navigators to test your website and identify any accessibility issues.
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 here.
written by:
Adriana Leos
Chief Creative Officer
vznayres