X

Website Accessibility

5 Ways to Find and Fix Common Website Accessibility Issues

Web Development

16 Apr, 2021

The internet is amazing.

With just a few clicks, you can find a stream to watch the big game, buy the brand of shoes you saw on TV, or fact-check your friend’s ridiculous story at a party. But, what if you can’t access a website because it doesn’t cater to your disability?

In 2000, a guy in Australia was awarded $20,000 in damages. Why? Because he couldn’t read the medal scoreboard on the Summer Olympics website. Landmark cases like this are one of the crucial reasons why we’re talking about website accessibility. From the perspective of revenue, brand reputation, and morality, your company must have an accessible website.

We’ll be showing you what website accessibility means, and the most significant ways to ensure that your online presence can be enjoyed by everyone.

Let’s get started.

What Is Website Accessibility?

The internet is designed to remove the barriers to information and communication that exist in the real world. As well as creating a more liberated and advanced society, internet access dramatically changes the impact of disabilities.

People of all abilities can access the web to do research, purchase goods and services, communicate with their loved ones, and create content. However, when websites and apps are poorly designed, certain groups are isolated from accessing, understanding, and interacting with those sites as freely as other people.

This sucks for the people who lose access. They feel excluded and end up missing out on opportunities that other users have.

And it also sucks for businesses. By failing to invest in accessible web design, they exclude 15% of the world’s population from their online store or platform.

This means that:

  1. The company ignores a huge segment of potential customers and revenue
  2. The company gives the impression that they don’t consider all people

This is why Web Content Accessibility Guidelines (WCAG) exist. These guidelines, alongside other legal bodies such as ADA compliance, help organizations ensure that their website is accessible to everyone.

Failure to meet these guidelines can result in:

  • Damage to business reputation
  • Expensive web design overhauls
  • Lawsuits (yikes)

Although these are extreme cases, lawsuits relating to website accessibility increased by 181% from 2017 to 2018.

Website accessibility doesn’t just affect people with disabilities. Consider folks who:

  • Are elderly
  • Live in remote or rural areas
  • Have short-term or long term injuries and illnesses
  • Live in developing countries

So, now you know what website accessibility means and why it’s important – for your business, and for being a decent person.

But, how do you go about making sure your website is available to everyone?

The answer is simple – call in the experts. An experienced web design agency will be able to audit your website and assess whether certain changes or improvements need to be made to make it more accessible. They’ll look at big picture issues, such as your color scheme and your content readability, down to the backend details such as your CMS and your navigation.

To help you gain more insight into website accessibility, we’ll break down some of the most important things you can do to find and fix website accessibility issues.

1. Use Color Mindfully

To ensure that your website is visually accessible, you should consider this: Around 1 in 12 men and 1 in 200 women experience color blindness.

Although there are varying types and degrees of color blindness, they all involve the inability to distinguish certain shades of color. The most common type of blindness affects red and green shades, where people struggle to tell the difference between the two colors.

So, how does this affect your website?

Well, we’re not saying that you should avoid color or images altogether – that wouldn’t help anyone. Except, maybe, Lego Batman…

In fact, for some businesses, you might not need to change anything at all.

But, if you’re using colors to present important information, such as:

  • Segments on a pie chart, bar graph, etc.
  • Pass/fail, good/bad, win/lose, available/sold-out messages
  • Routes on a map

You should consider presenting this information in a different way, using more distinguishable colors and patterns.

To show you an example, let’s take a look at one of the most notorious causes of confusion for the colorblind – subway maps.

By using red and green together in an image, animation, or map, people with color blindness will struggle to understand it. If you’re presenting important data or messages – such as a map or the results of a test – this can be infuriating!

There are many creative ways to display information in a way that’s both accessible and engaging for all users (including those with color blindness).

How To Design Your Website for Color-Blind Access Example
Patterns and textures Use dots, stripes or other symbols on top of colors to help users differentiate between them–particularly in graphs and charts.
Text labels If you’re selling different colored products, make sure the color options have text labels so people can select the t-shirt or pen in their favorite color.
Avoid certain color combinations Green-red, green-blue, green-brown, green-black, green-gray, green-gray, light green-yellow, blue-purple

2. Make Sure Everyone Can Read & Understand Your Content

One of the essential ways to make your website accessible is also a fundamental part of a well-designed website – the words.

Website content is made up of the headers, taglines, text, buttons, and blogs that visitors will read to understand more about your business and your products – and they should choose you above your competitors! It takes skill to bridge the gap between industry expertise and marketing tactics, hence why copywriting is a key part of the web development process.

To maximize the accessibility of your website, its content should be written in a way that is:

  • Readable
  • Understandable

You might think ‘well, duh’, but these strategies might surprise you. At the very least, they should make you think twice before cutting corners and writing the website content yourself.

First, let’s talk about readability.

People with visual impairments will use tools such as screen readers to surf the web. If your website isn’t properly optimized for screen readers, it’s totally useless to anyone with sight problems. Imagine if you were so excited to order a product online, only to find that you couldn’t read the website.

Here are some ways that your web designer can ensure that your website’s content is readable for everyone:

 

Readability method What is it? Why is it important?
Use ARIA (Accessible Rich Internet Applications) landmarks They supplement the website code and bridge the gap between your website’s design and the assistive technologies that help people read it. If your website contains dynamic content–words that change or move on the screen– ARIA landmarks tell screen readers exactly what’s on the page
Responsive design for resizing text It means that your website’s design can adapt to different screen sizes and resolutions Without responsive design, users lose essential design elements when they zoom in to enlarge text

Implementing these web development strategies will make your website so much more accessible to blind or visually impaired customers.

It’s also a good practice to implement for SEO purposes. Google’s bots will crawl through your website to assess its accessibility before making it visible on the search results pages. If your site passes the accessibility test, it’s guaranteed to be more visible.

Now, let’s talk about understanding website content.

We’ve all clicked onto a website, only to find a wall of long-winded, jargon-heavy, emotionless text. The kind that makes you break out the dictionary and the magnifying glass to make sense of the clues, Sherlock Holmes-style.

Even for the academics, or for us self-confessed nerds, reading verbose and complex website content is a nightmare. In fact, 38% of us will click away.

Now, imagine if you:

  • Have a learning disability, or
  • English is your second language

By cutting corners on copywriting, you’re preventing a ton of people from navigating, understanding, and engaging with your website.

So, how do you minimize this problem? Here are a few valuable tips from the copywriters we keep in the basement:

 

Readability Problem How To Fix It Why It’s Important
A wall of text with no breaks, images or animations Maximum 3 lines per paragraph. Use images, animations and icons to explain and engage where possible. Use bullet points, lists and tables to present information. Better formatting makes your content more engaging, easy to understand and easy to remember for all audiences.
Jargon-heavy language Call in the copywriters to explain your industry, services, products and point of difference in a way your audience can understand. Business owners are often too “in” their industry to be able to explain it to customers. Technical concepts and jargon must be explained in everyday language so that all customers can understand and appreciate the value of what you do.
Long, verbose sentences Create content based on real-life sales conversations in your business. Use Hemingway or Grammarly to fix tone and long sentences. Long sentences with big words are difficult to understand for non-native English speakers and folks with learning disabilities.

Bonus Tip: The rapid growth of voice search means that Google prioritizes content that is written conversationally. So, by prioritizing accessibility with your content, you’re also leveraging SEO.

It takes the combined power of web development and copywriting to make your website’s content accessible for everyone. When looking for a web design agency, ask them about their copywriting services.

3. Use Video & Multimedia Effectively

The data behind the success of video marketing is unquestionable. If you’re not using videos or multimedia content to connect with your audience, take a look at these stats:

  • Mobile video consumption rises by 100% each year
  • 68% of marketers say video has a better ROI than Google Ads
  • Viewers retain 95% of a message via video, compared to 10% when they read it in text

If you just turned to your marketing guy like…

Then fair enough. But, before you unleash your inner vlogger onto your audience, let’s talk about how video relates to accessibility.

Video and animations can be a powerful way to make your website more accessible for the following reasons:

  • They’re most accessible for people with certain disabilities that affect their ability to read and comprehend long walls of text
  • They help businesses in technical or new industries explain how their product or service works – and why it’s valuable

But, your marketing videos and animations can still exclude certain audiences. We’ve put together some helpful things to remember when planning, filming, and uploading videos onto your website, blog, or other social platforms.

 

Components of Video Accesibility Why?
Include accessibility in the initial storyboarding phase By prioritizing accessibility right from the start, you avoid the costly and time-consuming process or re-filming or re-designing content
Provide audio descriptions of visual information People with hearing difficulties need text that describes exactly what is going on in the video. What information is being presented? Where are the characters? How can the audience get in touch?
Provide captions or subtitles This is fairly obvious, people who are deaf (or are eating crunchy snacks while watching) need to see captions and subtitles to know what is going on
Include sign language This provides accessibility to deaf people whose native language is sign language

By incorporating these strategies into your video marketing plan, you’ll create a goldmine of accessible content that enriches the experience of your entire audience.

4. Include User-Friendly Forms

When interacting with websites, we’re required to fill out forms all the time. In some cases, like when you’re addicted to Buzzfeed quizzes, these forms are totally optional. But, in other cases, forms are utterly essential for day-to-day business online. Here are some examples of the forms we use every day:

  1. Usernames and passwords to access important accounts
  2. Filling out a contact form requesting a representative gets in touch
  3. Creating an account with a new business or platform
  4. Verifying identity with government agencies and other important accounts

If you can read, navigate, and interact with web pages easily, then you won’t have stopped to consider what happens for people with disabilities who are unable to access or use forms.

Take a look at this:

In options one, two, and three, the form is not adequately designed for accessibility. This is because:

  • The red highlighted box could easily be missed by a color-blind person
  • Although the (!) symbol alerts the color-blind, screen readers won’t pick up on the alert for users with vision impairments

If your business prefers not to publish its contact details online and instead provides a contact form, you should ensure that your contact forms are completely accessible for all audiences. Contact forms on your Contact Us page and your landing pages are essential tools for lead generation.

Imagine if you poured a ton of investment into your success, only to fall at the final hurdle:

That’s what happens when your contact forms aren’t accessible. It’s like you’re telling customers to go away. To ensure that your contact forms are completely accessible to all audiences, consider option four in the above image.

In option four, the design elements all work together to ensure that users from all audiences can understand:

  • What info is required in which box
  • Which boxes have incorrect information
  • What needs to be included or changed for the username or password to be acceptable

With design elements that guide all users to interact with your site effortlessly, you can be sure that the door is wide open for ALL new customers.

5. Choose A CMS That Prioritizes Accessibility

When you’re building a website for your business that is accessible for everyone, using an accessibility-driven content management system (CMS) is going to make the project so much easier. So, how do you know which CMS is best? Well, let’s start by highlighting open-source software.

When choosing between open-source and proprietary software, like WordPress vs. Squarespace, open-source software is far more likely to prioritize accessibility. This is because it is constantly being developed and updated by leading web developers, using the most advanced web design standards of the time. On the other hand, with proprietary software like Wix and Squarespace, it can take longer and be trickier to implement best practices for online accessibility.

Remember, designing a website with proprietary software is a lot like building a flat-pack table from IKEA. You’ll still end up with a decent website, but it won’t be nearly as personalized or adaptable as a tailor-made site from WordPress or Drupal.

As WordPress puts it…

With that argument out of the way, let’s take a look at how our two favorite web design platforms prioritize website accessibility.

 

WordPress Drupal
A huge number of themes and plugins available that support accessible web design and website content Leading versions of ARIA ad HTML5 markups
A dedicated “Accessibility Team” to ensure that core updates align with accessibility guidelines The app is fully compliant with WCAG 2.0 guidelines
World’s leading website design platform, so leading website accessibility best practices are tried and tested here Provides resources to help web designers build accessible websites

When choosing a web design agency, we suggest you find a team that’s fluent in both of these leading platforms for website accessibility.

Not to toot our own horn or anything, but the State Creative team knows WordPress and Drupal inside and out.

Conclusion: Accessible Websites Are Better For Everyone – Including Your Business

So there you have it, we’ve broken down the most crucial elements of website accessibility – why they’re important, and how you can implement them into your own website.

At the end of the day, the importance of website accessibility comes down to three things:

  1. Caring about brand reputation
  2. Maximizing potential revenue for your business
  3. (Most importantly) being a good human being

It pays to be kind and consider others. When designing the website that’ll take your business further, choose the web design agency that makes accessibility for all audiences a priority.

For businesses that are driven by both results and values, we’re your team.

Share This