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?

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. Click through to learn more about our solution to website accessibility.

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!

Recent articles

by Heath Maguire

Let’s grow your empire!

The team at Wolf IQ exist to help businesses thrive. We are passionate about getting to know our clients and their businesses and working with them to grow. Wolf IQ is a full-service digital agency. We don’t believe in a one-size-fits-all approach. We will always provide unique solutions for your business needs.

by Andrea Sevilla

Know enough about Google Ads to be dangerous

Google Ads allows you to advertise and promote your products and services when users search relevant keywords. When done right, they have the potential to turbocharge leads and sales. We take a look at what Google Ads are, how they work, and how to measure their effectiveness.

Want to know when new articles are published?

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

Let's do this!

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