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