3 ways to improve your website accessibility

Why website accessibility matters

Ensuring everyone has access to your website is your responsibility. Most of us rely on online services for convenience. People with disabilities rely on these services out of necessity. Making sure these resources are optimised for all users is the equivalent of installing an access ramp at the entrance to a store.

The path to website accessibility

The WCAG 2.1 AA standards are a global approach to website accessibility. Ensuring websites are perceivable, usable, understandable and robust. 

Each element works hand in hand to allow access to the internet for people with temporary or permanent disabilities. They improve access for people with situational disabilities such as injuries and individuals using a slower internet connection or older devices. If the information made it to your website, chances are it’s important and needs to get to your audience. 

Website accessibility has many moving parts but is well within reach of all businesses. Breaking it down into smaller chunks makes the process easier to grasp. We focus on three ways to improve your website accessibility:

  • Colour contrast
  • Keyboard accessibility
  • Alt text  

form follows function...

Colour contrast

When choosing the colour palette for your website, aim for a minimum contrast level between text and background. This allows users with visual impairments to read the content. The WCAG 2.1 AA provides a benchmark contrast ratio that can determine if your contrast ratio is considered a pass or fail. Your designer should have your back on this one by using a best practice approach from the start.  

colour sample chart shows contrast between different shades of different colours

The image shows the use of coloured text over a coloured background and the effects of insufficient contrast. 

Contrast do's

  • Choose text colour that contrasts against backgrounds and photos. Users with visual impairments will miss essential information if the contrast is too low
  • Allow all interactive elements such as buttons, menus and links to be visible when hovering with a mouse. This improves the ease of navigation for all users
  • Use gradients and colour fill over images to improve the visibility of interactive elements like buttons and forms 

Contrast don'ts

  • Resist using fluoro colours as a quick fix. These can be just as challenging to read as insufficient contrast, with some users needing to reduce contrast to improve readability 
  • Avoid placing key elements over photos. The varied colours of photos will make it harder to achieve the required contrast and can be hard to read for some individuals. This is particularly important if your primary goal is to generate enquiries
screen shot of contact us form over photo of cityscape and sunset or dawn

The image shows the use of an enquiry form over a background and the role contrast plays in readability. 

Keyboard accessibility

Keyboard accessibility allows access to all the resources on a website with a keyboard (assistive and conventional). Many individuals rely on devices other than a mouse to navigate a website. With keyboard navigation, you’re providing users with access to all the important information on your website. 

The path your visitors take determines their experience and your results. If the primary goal is for visitors to your site to book appointments, your calendar should be prioritised over a lower level goal such as a link to a blog article. 

Keyboard do's

  • Test your website, making sure all links, buttons and menus can be accessed using your TAB key
  • Give your keyboard navigation an obvious highlight to allow the user to keep track of where they are up to (be sure to apply contrast principles here too)
  • Take note of the website flow. Does it follow a logical left to right, top to bottom flow? 

Keyboard don'ts

  • Don’t hide your ”goal” at the end of the web page flow. Get your visitors there as efficiently as possible.
  • Don’t forget about providing users with a way out of menus. If they can access an element with the TAB key, they need to be able to get out. The most common is the escape key. Run the test yourself and see if any navigation traps exist. 

Alt text

Alt text, text alternatives, and alt descriptions are the written descriptions of an image on your website. They are found in the ‘back-end’ of your website and are helpful for anyone who may not be able to see the images on your website. Visual impairments may prevent the image from being perceived, while a slow internet connection can inhibit the image from loading. In both instances, the individual will be able to use the ‘alt text’ to read the image’s contents (vision-impaired users may use a screen reader to read out loud the alt text content).

screenshot of WordPress backend with image and alt text fields

Above is an example of alt text from our website “Business card design for API commercial on green background”.

Alt text do's

  • Use specific descriptions. Providing a balance of detail and context is recommended. Considering how the image relates to the page and website
  • Aim for quality over quantity when it comes to descriptions. Providing clear and direct descriptions creates a better experience for all users.
  • Test your first few descriptions with your team, making sure you’re clear and precise

Alt text don'ts

  • Avoid phrases such as ‘this is a picture of’ or ‘pictured here is” as this wastes valuable space.
  • Don’t pack descriptions with keywords, as you’ll negatively impact the user’s experience and compromise the search result benefits

Websites that work well also look good

Have you noticed when something works well, it typically looks good too? The same applies to your website. Nailing the function for all users will require minor tweaks to achieve your design goals.

It’s important to remember that accessibility is a global approach to making the web accessible for everyone, able and disabled alike.

If the information and content are important enough to make it on your website, there’s probably someone who could benefit from accessing it.

While some elements may seem complex initially, using a step-by-step approach makes it simple and understandable. Poor design practices affect all users, not just individuals with disabilities.

Accessibility and visually pleasing designs aren’t at opposing ends of the spectrum, they go hand in hand. Addressing both makes good business sense.

How do we tackle website accessibility?

Best-practice design principles

During the design process, we ensure that all your assets are tested against the accessibility guidelines set out by the WCAG. If any elements don’t meet the guidelines, we’ll work with you to ensure we respect your branding while delivering an accessible website.  

Website Accessibility Overlay

Our accessibility interface allows every visitor to adjust your website’s look and feel based on their individual needs. Your website design and structure remain unchanged (provided a best practice approach was used to begin with).

Consider the interface like a pair of glasses; the object (your website) being looked at remains the same while the glasses (accessibility interface) make the necessary changes based on the user’s needs.

The interface maintains compliance with the WCAG 2.1 AA standard with the help of automated scanning. Scans are completed every 24 hours, and they make sure all changes and updates are compliant. 

Written by Chris Paradowski

Chris has a diverse background in business management. Having worked in highly competitive and process oriented industries, his ability to model, prototype and hypothesise is uncanny.

Want to know when new articles are published?

Drop your details in below... Don't worry, we are not into spam!

  • This field is for validation purposes and should be left unchanged.

Recent articles

by Heath Maguire

Why Your Business Needs Specialised WordPress Hosting

Your website serves as the front door to your business. It’s where first impressions are formed and often where customer decisions are made. For businesses using WordPress, choosing the right hosting solution is not just a technical decision; it’s a business one. Unfortunately, many small to medium-sized businesses, in an attempt to cut costs or simplify processes, opt to host their websites on shared hosting provided by their IT companies.

by Andrea Sevilla

Our top 10 tips for a killer landing page

In today's fast-paced online world, capturing and retaining your audience's attention is crucial. That's where a killer landing page comes in. In this article, we've compiled our top 10 tips to help you create a landing page that converts visitors into customers. By implementing these tips, you'll be well on your way to crafting a landing page that captivates your audience and drives them to take action. Get ready to unleash the power of your landing page and watch your conversions soar!

Want to know when new articles are published?

Drop your details in below... Don't worry, we are not into spam!

  • This field is for validation purposes and should be left unchanged.

Let's do this!

Please enter your details below and we will send our Branding Cheat Sheet to you!