Web Accessibility: Essential Guidelines for Accessible Web Design

The internet is a powerful tool for connecting people. Following web accessibility principles means no one is excluded. This guide will walk you through the principles of accessible web design and show you practical ways to make your website work better for all users. We’ll cover what makes a website accessible, why it matters, and how to check if your website meets accessibility standards.

Why Making Your Website Accessible Matters

Your website needs to be accessible for many reasons, and not just because it’s good practice. According to the Australian Bureau of Statistics, over one-fifth of the Australian population (21%) has a disability and may find accessing certain web content challenging.

This number increases even further when you include temporary impairments like broken arms or situational limitations like bright sunlight on screens. If your website isn’t accessible, you’re potentially excluding millions of users from accessing your content or services.

Complying with Laws and Regulations

In Australia, the Disability Discrimination Act 1992 (DDA) requires equal access to information and services. This includes digital content, including any public-facing websites or web applications. By making your website accessible now, you’re protecting your business from potential legal issues.

Coles learnt this lesson the hard way in 2014. A visually impaired woman who uses a screen reader filed a complaint under the DDA because its eCommerce platform was not consistently accessible to her. After a lot of bad press, the case was settled only after Coles agreed to make improvements to its website.

Having an SEO-Friendly Website

Beyond legal compliance, accessible websites often rank better in search engines. Search engines favour websites that follow accessibility guidelines because many of these guidelines – like clear headings and alt text – align with SEO best practices. When you make sure your website is accessible, you’re also making it more discoverable online.

An Accessible Website Benefits Everyone

Making your website accessible to people with disabilities benefits all users, and you. For example:

• Clear navigation helps everyone find what they need faster. 
• Good colour contrast also helps people with low vision, making text easier to read in all situations, like using mobile devices outdoors.
• Captions don’t just help people who can’t hear – they’re useful for anyone watching videos in noisy places or quiet environments.
• Simple, logical layouts ensure your website is easy to use for everyone, whether they’re viewing it on a phone, tablet or desktop.

When you build accessibility into your website, you’re creating a better experience for every visitor. This leads to more engagement, longer visits, and higher conversion rates.

This improved user experience can translate into business success: According to The State of Web Accessibility in 2024, a research paper from Accessibility Checker, websites with an accessibility score of 75/100 or higher are shown to have higher levels of revenue.

Accessible Web Design Principles

Before we get into how (and how not) to meet web accessibility standards, you need to be familiar with cornerstones. These cornerstones were written by the World Wide Web Consortium (W3C) as part of their Web Content Accessibility Guidelines (WCAG). 

WCAG is the international authority on web and digital accessibility. The WCAG principles are the clearest explanation of what an accessible website needs to be. Accessible web design principles are defined in the acronym P.O.R.E, which stands for:

• Perceivable
• Operable
• Understandable
• Robust

Perceivable

All the information on your website needs to be presented in ways that users can recognise with at least one of their senses. Content should be accessible whether someone can see, hear, or neither. Making content perceivable is vital because if users can’t detect your content through any of their senses, it’s completely inaccessible. 

Operable

All users need to be able to navigate and use your website regardless of how they interact with their devices. Your site should work with a mouse, keyboard, touch, or voice commands. If users can’t operate your website, they’ll get frustrated and leave without completing their goals.

Understandable

Your content and navigation need to be clear and straightforward. Users should be able to easily understand the information and how to use the website without any friction.  If users can’t understand your website, it doesn’t matter how accessible your features are – they won’t be able to use them.

Robust

Your content must be robust enough to work reliably across different web browsers, devices and assistive technologies. The website should remain accessible as technologies advance. If your code isn’t robust, your site might work for some users today but break for others tomorrow.

Tips to Improve Web Accessibility

• Write in plain English
• Use high-contrast colours
• Design, simple, navigable pages
• Use PDFs carefully 
• Add meaningful link text
• Make forms easy and clear
• Make everything keyboard-friendly
• Write helpful alt-text
• Don’t forget to make multi-media accessible

Write in Plain English

Your content should be easy to read and understand. Avoid complex language, technical jargon and long sentences. Break up text into short paragraphs and use headings to create clear sections. This helps users with cognitive disabilities, but it also makes your content more engaging for everyone. We wrote about this more extensively in our article ‘Writing for the Web – Content Guidelines for Better Engagement‘.

Use High Contrast Colours

Make your text stand out from its background. Good contrast helps users with visual impairments read your content, but it also helps all users read your website in bright sunlight or on dim screens. Aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.

Design Simple, Navigable Pages

Keep your page layouts consistent and logical. Place important information where users expect to find it, use clear headings to structure content, and make sure your navigation menu appears in the same place on every page. A well-organised website design helps everyone find what they need quickly.

Use PDFs Carefully

While PDFs are common, they’re often less accessible than web pages. If you must use PDFs, make sure they’re properly tagged for screen readers and include alt text for images. Better yet, consider putting the information directly on your website where possible.

Add Meaningful Link Text

Make your links descriptive. Avoid vague phrases like “click here” or “read more” – instead, use text that clearly explains where the link will take users. For example, “Download our 2024 price guide” works better than “Click here to download.” This helps screen reader users understand the content and where links lead before clicking them.

Make Forms Easy and Clear 

Create forms that everyone can use easily. Label all form fields clearly, mark required fields, and provide error messages that explain exactly what went wrong and how to fix it. Give users enough time to complete forms, and make sure people can navigate through fields using just their keyboard.

Make Everything Keyboard-Friendly

Not everyone can use a mouse. Make sure users can access all features using just a keyboard. This includes being able to navigate through menus, click buttons, fill in forms, and use interactive elements by pressing Tab, Enter and arrow keys. Test your website yourself by trying to use it without a mouse.

Write Helpful Alt Text

Every image on your website needs alt text that clearly describes what the image shows. Keep descriptions brief but informative – imagine explaining the image to someone over the phone. For decorative images that don’t add meaning, use empty alt text (alt=””) so screen readers skip them.

Make Multimedia Accessible

Add captions to videos and provide transcripts for audio content. Video players should work with keyboard controls, and important visual information should be described in audio. This helps users who can’t see or hear the content and also helps others who might be in noisy environments or using devices without sound.

Things to Avoid For an Accessible Website

• Forgetting to make your website accessible on mobile
• Going overboard with alt text 
• Solely relying on visual or audio elements
• Adding too many distractions for the user

Forgetting to Make Your Website Accessible on Mobile

Don’t assume everyone browses on a desktop computer. Your website should adapt smoothly to different screen sizes, with readable text, tappable buttons, and all features working well on touchscreens. Test your website thoroughly on mobile devices – if users need to zoom or scroll horizontally, your mobile design needs work.

Going Overboard with Alt Text

Don’t write unnecessarily detailed alt text for images. Keep descriptions relevant and concise. For example, if you have a photo of your team, you don’t need to describe what everyone is wearing. Just focus on what’s important. ‘The Futuretheory team at our 2024 Christmas party’ is better than a lengthy description of everyone’s appearance.

Solely Relying on Visual or Audio Elements

Don’t make any content available through only one of the senses. If you have important information in an image, include it as text content too. If you have audio content, provide a transcript. Always keep in mind that not everyone can see your visuals or hear your audio content, so always provide alternatives to non-text content to make sure that your website is inclusive and accessible.

Adding Too Many Distractions for the User

Don’t overwhelm users with animated content, pop-ups, or audio and video content that starts automatically. These can make it hard for people to focus on your content, especially users with cognitive disabilities. They can also trigger motion sickness or seizures in some users. Keep your design clean and let web users control any moving elements. You don’t want your website to feel like Times Square.

How To Check if Your Website is Accessible

Fortunately, there are plenty of ways to check if your website is accessible. We recommend running accessibility tests every time you make big changes to your website. You can check if your website is accessible or not by:

• Using automated online testing
• Trying it yourself manually
• Conducting user testing

Use Automated Online Testing

Start with an online accessibility checker. They’re a quick way to spot basic issues yourself. Free tools like WAVE or Google Lighthouse scan your website and highlight problems like missing alt text, poor colour contrast, or incorrect heading structures. While these tools are helpful, they can’t catch every accessibility issue, so don’t rely on them alone.

Try It Yourself

We recommend you also take the time to test your website manually. Try navigating using only your keyboard – can you access every feature, and how easy is it? You should also turn on your device’s screen reader and listen to how your content sounds. View your site on different devices and browsers to check if everything works as it should. Disable images to see if your content makes sense without them.

Do User Testing

The best way to check your website’s accessibility is to have real users test it. Work with people who have different disabilities and use various assistive technologies. Watch how they interact with your website and listen to their feedback. Their experiences will highlight any accessibility barriers that automated tools might miss and give you valuable insights into how to improve your site’s accessibility.

Less is More When it Comes to Accessible Design

Making your website accessible doesn’t mean adding complex features, installing a bunch of accessibility plugins or complicated code. If anything, the opposite is true – the simpler and clearer your website is, the more accessible it becomes. Focus on clean design, clear navigation, and straightforward content. Remove unnecessary elements that might confuse or distract users. When you strip away the complexity and focus on what truly matters, you create a better website for everyone.