Most people take the internet for granted. I mean, it's available to almost everyone, almost anywhere and at almost any time. But is it accessible to everyone? What about blind people? What about people with limited hearing? Or people with limited movement or cognitive abilities? Is the web really available anywhere and at any time for this demographic?
I think we can all agree that the web is essentially a basic human right. So, it is pertinent that the web and websites be accessible to all people, no matter what their abilities are. To put it simply, if someone has limited abilities for viewing the web, whether that is due to hearing or vision loss, limited mobility, or cognitive abilities, that person should be able to access what they need. The web should be available on a level playing field for all who use it.
Ask yourself: would someone with any of these challenges be able to navigate through my website without a problem? Would they be able to gather all the information they needed with equal accessibility and opportunity, the same as someone with no limitations? If the answer is no, well, your website needs some work.
Here are 5 common web accessibility issues that you may need to fix on your website:
1. No Heading Structure
Think of using headings on a webpage as a way to outline your content. To do this properly, you need to organize your content in a hierarchical manner. Doing so will ensure that your content is divvied up into meaningful sections and organized by level of importance.
Some best practices to keep in mind while structuring your content are:
- Every page should have an h1 heading.
- Do not skip heading levels while descending. For example, do not go from h1 heading to h3 heading. It is acceptable to follow an h3 with an h2 heading or an h4 with an h2, however.
2. Missing Alternative Text for Images
If you have a photo or illustration on your webpage, it should have alternative text included. "Alt text" basically describes the image being used. This helps people using a screen reader. The only exception here is if the image being used serves no specific purpose or importance to the rest of the information, then an empty alt tag (alt="") should be used.
3. Non-Descriptive Text for Hyperlinks
Have you ever seen links on webpages that simply read "click here" or "read more"? This isn't good Search Engine Optimization (SEO) practice. Use what's called "rich anchor text" to accurately describe where the link goes such as "Download our price list." Descriptive anchor text helps users with screen readers or people with disabilities easily understand where the link is sending them.
4. Improper Labeling of Forms and Search Options
If you include some type of form or search option on your site, then you are using input fields. Input fields require labels to be associated with them. It doesn't suffice enough to only add paragraph text above or placeholder text inside an input field as a screen reader can't definitively tell the user that they are filling out the correct field.
5. Poor Color Contrast
Although we like our websites to be visually appealing, we need to keep color contrast in mind. That means making sure backgrounds and colored text do not blend together too much. Everything needs to be legible.
As a guide to color contrast, W3C mentions:
A contrast ratio of 3:1 is the minimum level recommended by [ISO-9241-3] and [ANSI-HFES-100-1988] for standard text and vision. The 4.5:1 ratio is used in this provision to account for the loss in contrast that results from moderately low visual acuity, congenital or acquired color deficiencies, or the loss of contrast sensitivity that typically accompanies aging.
This is not an exhaustive list of things to check for when attempting to become ADA/WCAG 2.1 compliant, but it should get you to the starting line.
Below is a short list of some highly recommended free web accessibility tools we've used to evaluate and remedy our clients' sites.
If you need help with any of these issues, consider signing up for LRS Web Solutions accessibility package.
Contact LRS Web Solutions for more information.
Back to all posts