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.
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:
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:
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:
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.
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:
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 |
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:
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:
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.
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:
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:
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.
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:
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:
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:
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.
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.
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:
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.
