Growmodo Background Elements

10 Ways to Find and Fix Common Website Accessibility Issues

Growmodo Background Elements
Growmodo Blog - 10 Ways to Find and Fix Common Website Accessibility Issues
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on whatsapp
Share on email

An accessible website can be one of your most valuable marketing tools. When designing a site, you need to take every demographic of user into account. From those with visual, audio, or other disabilities, to people who struggle with slow internet connections.

Optimizing your site to be as accessible as possible not only boosts your brand’s reputation, it improves your SEO rankings and market reach too. To ensure your website is as accessible as possible, we’ve explained how to check a website for accessibility, outlined the most common accessibility issues, and explained how to fix them.

How To Check A Website For Accessibility

There are many ways of assessing your website’s accessibility, including a variety of online accessibility checkers and evaluation tools. It’s possible to enter the URL of your website into one of these applications and allow it to “read” through your site, checking each element as it goes.

Manually, it’s helpful to get feedback about website accessibility by asking various user groups to navigate the site and report back on its performance. This is not the most scientific method to check a website for accessibility, but it’s helpful to see how the design and structure appear to different individuals with different needs.

WEBSITE CONVERSION QUIZ

Do You Know Your Website’s Hidden Growth Potential?

Take our conversion-driven web design test and see how much of your website is designed for growth and which parts make people leave your site forever.
Website Conversion Quiz

Finding and Fixing Issues:

1. Color Contrast

Color contrast refers to the choice of colors used on a website to balance the contrast ratio. If you’re putting white text on a light gray background, it’s obvious that deciphering it will be a challenge, even for those with perfect vision.

But getting the correct color contrast isn’t as simple as using brightly clashing hues. For example, using purple writing on an orange background will allow a reader to distinguish letters from the background, but can be disastrous for those with dyslexia or color blindness.

Color Contrast

Considering that studies show that approximately one in 12 men, and one in 200 women suffer from color blindness, your website’s color scheme is critical to accessibility. Ignoring this could exclude a large demographic of users if you don’t factor their needs into your design.

There are varying degrees of color blindness, but the most common involves the inability to distinguish red and green. These two colors are often used in graphs, headers, or maps, so if you feature images with data, this is an important consideration.

To make your website as accessible as possible, not just to those who are color blind, do the following:

  • Use dots, stripes or checks on top of colors in graphs and charts. This helps the different areas to stand out, even if the colors do not.
  • Avoid color combinations where colors are too close together on the spectrum, e.g.: green and blue, blue and purple and gray and black. If a person is visually impaired, they won’t differentiate between the two.
  • If you have an ecommerce site, add text labels next to products that specify the color. This ensures that users can select the product they want, without relying solely on an image.

You can follow The Web Content Accessibility Guidelines (WCAG) as they stipulate specific contrast ratios for different parts of text. There are Contrast Checkers online to help with this.

2. Alt Text On Images

Alt text, also referred to as alt tags or alt descriptions, is crucial to making your website accessible as they describe an image for people who can’t view them—those using screen readers, for example. The description should be brief and clear, with the most important elements stated first.

Alt text must be plain text and should avoid repeating information stated in the following paragraphs.

It’s important that you create brief descriptions that properly explain the image.

For example, poorly written alt text would be “man pointing at screen”

The description should add value: “Male teacher pointing at graph on a student’s computer screen” is a far better option as it paints a mental picture.

Alt Text On Images

Other pointers to remember are to not start alt text with “an image of…” or “a picture of…”. Rather, dive straight into the description. It’s also advisable to keep the text short—around 125 characters is the ideal length.

When you check your website for accessibility, hover over all images to ensure the alt text formats correctly.

Hyperlinks to connect text to another location are useful in building a more three-dimensional page. Users can navigate “into” the text and not just up and down.

To make these hyperlinks user-friendly you need to look at how accessible they are for those using screen readers, color blind users, and people with minimal IT skills. It’s advised to embed links within the text.

To do this, you’ll highlight the words you wish to link and insert the link, allowing the user to click on text rather than an actual URL. The selected words should be clear and descriptive, and well-matched to the page to which they’re linked.

Ambiguous Links

Links with “Click Here” and “Read More” are also inaccurate descriptors, and are best avoided. A user relying on a screen reader will only hear those words, and not know what value the link adds, or why they need to click on it. In contrast, if the link has a small descriptor such as “enroll in the program” it immediately communicates the what and why of the link, rather than just being a vague call to action.

When creating content and links, consider the experience of users with differing abilities and devices and tailor your linking strategy to be broad and inclusive.

Leading on from creating proper and accessible hyperlinks, website accessibility relies on following link text protocols.

Web Content Accessibility Guidelines require that there is context for each link. But it’s also important to ensure that people using screen readers can navigate between hyperlinks without needing to go through all the connecting paragraphs. Some guidelines are:

  • Do not use “link” as part of a link text
  • Don’t capitalize links. Screen reading software can read upper case text one letter at a time
  • Don’t use URLs as link text
  • Don’t put in too many links
Missing Link Text

Regularly check your site to ensure there are no missing or broken links, especially if you have linked to external sources. It’s a good idea to include link checks in your monthly website maintenance program.

5. Heading Structure

Headings feature on both web pages and physical documents for the same reason. To organize a text and communicate that structure to the user. To make headings accessible to everyone, including blind people and those using only a keyboard, they must be marked up (HTML).

Heading Structure

To check your website for accessibility, each page should have at least one heading, and using a proper heading hierarchy is important. Making use of H1, H2 and H3 tags clearly defines all heading’s structural importance.

Headings are usually larger than other text. When marked up properly, they allow screen-reader users to listen to a summary of headings, rather than going through each paragraph trying to find something of relevance.

6. Readability

Readability refers not only to a text being easily understood by a reader, but to the accessibility of web pages and the text contained within. People relying on screen readers cannot just glance at a page and pick out important points. They need to be able to find their way around using headings, descriptive hyperlinks, simple formatting, and alt text for images.

Readability

There are numerous ways to check your website for accessibility and increase the readability of your content. The Flesch Kincaid reading ease and Flesch Kincaid grade level test, Coleman Liau index, SMOG index, and Gunning Fog score are all helpful tools. You’ll find free tests for each of these online, and they’re designed to make your content easier to understand by a broader demographic.

Other elements that make a site more readable include:

  • Avoiding large walls of text
  • Creating short paragraphs broken up by images
  • Using bullet points
  • Avoiding complex words and complicated jargon
  • Keeping sentences short and to the point

Make each of these elements clear and you’ll increase the readability of your site dramatically.

7. Keyboard Navigation

There are people who need to access websites who cannot use a mouse, so navigating with a keyboard alone must be possible and practical.

Keyboard Navigation

Allowing navigation between links and headings using the Tab key is one measure, while ensuring that it’s visually obvious which element is selected. Wherever possible, avoid using widgets, plugins and apps that trap the keyboard. A user must be able to navigate in and out of any element with ease.

Check that all interactive features of your website comply with the W3C’s WAI-ARIA 1.0 Authoring Practices. This will ensure that keyboard accessibility is at its maximum. Follow the same guidelines on smartphones and tablets, as many impaired users rely on an external keyboard for these devices too.

8. Form Structure

This issue follows on from adequate keyboard navigation requirements and screen readers. Forms should have clear instructions, visually apparent labels regarding required versus optional input, date format directives, and regular links to help.

Form Structure

Each field must clearly stipulate the information that needs filling in, and the desired format. For example, when entering a date of birth, if the format is month/day/year, immediately make this clear.

To reduce cognitive load, you can break longer forms into bite-sized chunks. The practice of “chunking” groups related pieces of content or information together and makes for a more user-friendly experience.

When assessing a form, consider how it would look if you used a printer to make a copy. The fields should be easy to read, and fill in. If the form is poorly laid out, it’s easy to spot in a printed copy The fields won’t align and confusion over what information needs to be filled in, and where will prevail.

9. Media Control

Video content is one of the most popular marketing strategies, and mobile video consumption is rising by as much as 100% annually. It’s estimated that viewers retain 95% of a message in a video, compared to the 10% they retain from text. But this doesn’t mean that your video content is automatically accessible, in fact, it may be the opposite.

Media Control

WCAG guidelines state any autoplay function on media must have a corresponding option of stopping the media, playing back or muting it. Without this, users may suffer exposure to traumatizing content without warning, blinking lights that may trigger seizures, or deal with distractions that make browsing a page impossible.

It’s important to avoid endless autoplays, as well as combining video and audio that creates overwhelming distraction. Including media control gives the user autonomy over what they view, and how they view it.

WEBSITE CONVERSION QUIZ

Do You Know Your Website’s Hidden Growth Potential?

Take our conversion-driven web design test and see how much of your website is designed for growth and which parts make people leave your site forever.
Website Conversion Quiz

10. Video Captions

Using captions and subtitles for video clips has become more common over the past decade. Content creators now realize that omitting them leaves large numbers of users out in the cold.

Deaf people obviously require some form of captioning to access video content, as well as those who struggle to understand content presented through audio. Using voice recognition software can aid in setting up captions and subtitles and make content more accessible.

Video Captions

In addition to providing captions or subtitles, consider the fact that many users may not understand the content of the video. To mitigate this, provide audio descriptions of any videos you publish. Include what information is being presented, why, and who or what the video is of, as well as a way to get in touch. This immediately tells the user why the video is important, and how they can reach out if they want more information. This adds value to their experience and keeps them engaged and interested.

Checking Your Website For Accessibility Made Easy

You can use this guide to check a website for accessibility, ticking off each element as you go. When you’re done, you’ll have a well-designed site that’s accessible to a far larger number of people than ever before.

Alisa Taylor

Written by Alisa Taylor

Content slinger and editor at large, Alisa Taylor covers topics around business, design, and education – always always looking to broaden her expertise. She loves taking her dogs on a hike or reading a great book on her front porch.

Are you frustrated about your website results? 

The Ultimate List of Website Conversion Tips

Download our Google sheet with almost 100 ideas to optimize your website for conversions and join the 5-Day Growth Challenge to grow your website’s impact without spending more on advertising.