Client portal

Sign in to manage tickets, messages, and your account.

Sign in to portal
NexusByte banner
Web Accessibility: Practical Guide for Success
A person using a screen reader and keyboard to navigate an accessible website on a laptop
Natalie Wagner
Nov 1, 2020

Web Accessibility: Practical Guide for Success

Roughly one in five people lives with some form of disability, and every one of them is a potential customer, client, patient, or student trying to use your website. When a site is inaccessible, it quietly turns those people away: the screen reader user who cannot find the checkout button, the person with low vision who cannot read pale grey text, the customer with a hand tremor who cannot hit a tiny menu link. None of them complain. They simply leave and buy from someone whose site works.

Web accessibility is the practice of building websites that everyone can use, regardless of how they see, hear, move, or think. It is not a niche concern for a handful of users, and it is not a charitable add-on. It overlaps almost completely with good engineering, strong SEO, and clean design, and in Australia it also sits against a clear legal backdrop in the Disability Discrimination Act. Getting it right widens your audience, protects your business, and usually produces a better site for everyone.

This guide is a practical walk through what accessibility actually involves, from the underlying principles to the specific things a developer should do with navigation, colour, forms, media, and testing. It is written for business owners who want to understand what they are paying for, and for teams who want a clear checklist rather than vague good intentions.

What web accessibility really means

Accessibility is often misunderstood as a single feature, like adding a plugin that changes font sizes. In reality it is a quality of the whole site: how it is structured, coded, styled, and written so that people using a wide range of tools and abilities can perceive the content, operate the interface, and understand what is going on. The people it serves are more varied than most teams assume.

  • Vision: people who are blind and use screen readers, people with low vision who zoom or use high contrast, and people who are colour blind.
  • Hearing: people who are deaf or hard of hearing and need captions or transcripts for audio and video.
  • Motor: people who cannot use a mouse and navigate entirely by keyboard, switch device, or voice control.
  • Cognitive: people with dyslexia, ADHD, memory difficulties, or anxiety who benefit from clear language, predictable layouts, and forgiving forms.

Crucially, accessibility also helps people who would not describe themselves as disabled at all: someone on a train with the sound off, a user in bright sunlight, a person with a broken arm, or anyone on a slow connection or an ageing phone. Designing for the edges almost always improves the experience in the middle. This is why we treat accessibility as a core part of every project in our web development services, not an optional extra.

The four principles: POUR

The Web Content Accessibility Guidelines (WCAG), maintained by the W3C, are the internationally recognised standard for accessibility. They are organised around four principles, easily remembered as POUR. Understanding these gives you a mental model for every decision, rather than a list of rules to memorise.

Perceivable

Users must be able to perceive the information on the page through at least one of their senses. That means text alternatives for images, captions for video, content that does not rely on colour alone to convey meaning, and text that has enough contrast to be read comfortably.

Operable

Users must be able to operate the interface. Everything you can do with a mouse must also be possible with a keyboard, nothing should trap the user, time limits should be avoidable, and flashing content that could trigger seizures must be avoided.

Understandable

Content and operation must be understandable. Language should be clear, navigation should be consistent and predictable, and forms should help users avoid and recover from mistakes rather than punishing them.

Robust

Content must be robust enough to work with current and future tools, including assistive technologies. In practice this means writing valid, standards-based code so that screen readers and browsers can interpret the page reliably.

These four principles underpin everything that follows. When you are unsure whether something is accessible, ask which of POUR it might break, and the answer usually becomes obvious.

Understanding WCAG conformance levels

WCAG defines three levels of conformance: A, AA, and AAA. Level A covers the most basic requirements, without which some people cannot use the site at all. Level AA is the widely accepted target for the vast majority of websites and is the level referenced by most legislation and procurement standards around the world, including Australian government requirements. Level AAA is the strictest and is rarely required across an entire site, though individual AAA criteria are worth adopting where practical.

For almost every business, WCAG 2.1 Level AA is the sensible goal. It is demanding enough to deliver a genuinely inclusive experience, but achievable within a normal build budget when planned from the start. Aiming for AA gives you a clear, defensible benchmark to design and test against, rather than a vague ambition to be accessible. When we scope a project through our business website work, WCAG 2.1 AA is the baseline we build toward by default.

Start with semantic HTML

The single most important accessibility decision is also the least glamorous: use the right HTML elements for the right purpose. Semantic HTML gives assistive technologies a map of the page. A screen reader can jump between headings, list off links, identify form fields, and announce landmarks like the main content, navigation, and footer, but only if those things are marked up as what they actually are.

When developers reach for generic div and span elements and style them to look like buttons or headings, that map disappears. A div dressed up as a button is invisible to keyboard users and announces nothing meaningful to a screen reader. A real button element is focusable, clickable with the keyboard, and announced correctly, all for free.

  • Use headings (h1 to h6) in a logical order to describe the structure of the page, never chosen purely for how big the text looks.
  • Use button for actions and anchor elements for links to other pages, not the other way around.
  • Use list elements for lists, table elements for tabular data, and landmark elements such as header, nav, main, and footer to define regions.
  • Reserve ARIA attributes for genuine gaps that native HTML cannot fill, rather than using them to paper over the wrong element.

The guiding rule from the accessibility community is worth memorising: the first rule of ARIA is not to use ARIA if a native HTML element already does the job. Clean semantic markup solves most accessibility problems before any special effort is required, and it is a hallmark of the maintainable code we deliver in our custom web solutions.

Make everything work with a keyboard

A large group of users never touch a mouse. People with motor disabilities, screen reader users, and many power users navigate entirely with the keyboard, using Tab to move between interactive elements, Enter and Space to activate them, and arrow keys within components like menus. If any part of your site can only be reached or operated with a mouse, those people are locked out.

Keyboard accessibility comes down to a few concrete requirements. Every interactive element must be reachable by tabbing, in an order that matches the visual layout and makes logical sense. The currently focused element must be clearly visible, which means never removing the focus outline without providing an equally clear replacement. Users must never get trapped in a component with no keyboard way out, a common problem with poorly built modals and embedded widgets.

A simple but revealing test is to put your mouse aside and try to complete a key task, such as buying a product or submitting an enquiry, using only the keyboard. If you cannot do it, or you lose track of where you are, neither can a significant portion of your users. Adding a visible skip link that lets keyboard users jump straight to the main content, past a long navigation menu, is a small touch that makes a real difference.

Colour, contrast, and visual design

Visual design choices have an outsized impact on accessibility, and colour is where many otherwise good sites fall down. Fashionable low-contrast palettes, light grey text on white backgrounds, or thin type over busy images can be almost unreadable for people with low vision, and difficult even for users with typical sight in poor lighting.

Meeting contrast requirements

WCAG sets specific contrast ratios: normal body text needs a contrast ratio of at least 4.5 to 1 against its background, and large text needs at least 3 to 1. These are measurable, not matters of taste, and free tools make them easy to check during design. Meeting them rarely forces an ugly design; it simply rules out the washed-out combinations that were hurting readability anyway.

Never rely on colour alone

Colour must never be the only way you communicate something. If form errors are shown only in red, a colour blind user may not notice them; pairing the colour with an icon and a text message solves the problem. The same applies to links inside body text, required-field indicators, and status labels. Roughly one in twelve men has some form of colour vision deficiency, so this is far from an edge case.

Beyond colour, respect the user's control over their own experience. Let text reflow and remain readable when zoomed to 200 percent, honour system settings for reduced motion so animations do not cause discomfort, and avoid content that flashes more than three times a second, which can trigger seizures. Good visual accessibility and good visual design are far more aligned than most people expect.

Build accessible forms

Forms are where accessibility problems cost the most, because forms are where conversions happen. A checkout, a contact form, a booking request, or a sign-up is the moment your business is trying to capture value, and an inaccessible form throws that value away at the last step.

The foundations of an accessible form are unglamorous but essential. Every field needs a genuine, programmatically associated label, so a screen reader announces what the field is for. Placeholder text is not a substitute for a label, because it disappears as soon as the user starts typing and often fails contrast requirements. Related fields, such as a set of radio buttons, should be grouped so their shared purpose is clear.

  • Associate every input with a visible label, and group related controls with fieldset and legend where appropriate.
  • Describe errors in clear text, tie each message to the field it refers to, and move focus to the first problem so users can find it.
  • Do not rely on colour alone to flag errors; combine colour with text and an icon.
  • Avoid strict, unexplained input formats, and never wipe a form on error, forcing the user to start again.
  • Use appropriate input types and autocomplete hints so the browser can assist, which helps everyone move faster.

Accessible forms are simply well-designed forms. The clarity that helps a screen reader user also reduces abandonment for everyone, which is why form accessibility is a recurring theme in our e-commerce website and custom web application projects.

Images, video, and other media

Media carries meaning, and that meaning has to be available to people who cannot see or hear it. The most common requirement is alternative text for images: a short, meaningful description that a screen reader can read aloud. Alt text should describe the purpose of the image in context, not simply repeat a filename or stuff in keywords. Purely decorative images, on the other hand, should have an empty alt attribute so screen readers skip them rather than announcing clutter.

Video and audio raise the bar further. Video with speech needs accurate captions so deaf and hard-of-hearing users can follow along, and captions also help the large number of people who watch with the sound off. A transcript makes audio and video content searchable and usable for people who prefer or need to read. Where visual information in a video is essential and not described in the audio, audio description fills that gap.

None of this needs to be expensive if it is planned rather than retrofitted. Writing alt text as content is added, and captioning video at production time, costs a fraction of what it takes to go back and fix a library of media after launch.

Accessibility, SEO, and performance are the same effort

One of the most persuasive arguments for accessibility is that you are largely doing it already if you care about search rankings and speed. The overlap is enormous. Semantic headings that help a screen reader also help search engines understand your content. Descriptive link text that makes sense out of context is better for both assistive technology and SEO than a page full of vague read more links. Alt text improves image search visibility. Captions and transcripts give search engines text to index.

Performance overlaps too. A lean, well-structured site is easier for assistive technology to parse and faster for everyone, especially users on older devices or slower connections who are more likely to rely on accessibility features in the first place. Treating accessibility, SEO, and performance as one integrated concern, rather than three competing projects, is both cheaper and more effective. It is the same philosophy that underpins how we build every site, from a healthcare website to a complex platform.

The Australian legal context

In Australia, web accessibility is not only good practice, it is connected to legal obligation. The Disability Discrimination Act 1992 makes it unlawful to discriminate against people with disability in the provision of goods, services, and facilities, and this has long been interpreted to include websites and online services. The landmark Maguire v SOCOG case, in which the Sydney Olympics organising committee was found to have discriminated against a blind user through an inaccessible website, established early that these obligations apply online.

Australian government sites are required to meet WCAG 2.0 Level AA under long-standing policy, and WCAG 2.1 AA is the practical modern benchmark that private organisations are increasingly expected to meet, particularly in sectors like education, health, finance, and government-adjacent services. While many businesses are never taken to a tribunal, the risk is real, the reputational cost of an accessibility complaint is significant, and the reasonable-adjustments expectation applies broadly.

The pragmatic position is straightforward: aim for WCAG 2.1 AA, document your efforts, and treat accessibility as an ongoing responsibility rather than a one-time certificate. This protects your business while, more importantly, doing right by the people trying to use your services. Sectors with heightened obligations, such as law firms and educational institutions, should treat AA conformance as a firm requirement rather than an aspiration.

How to test for accessibility

Accessibility cannot be verified by looking at a page in one browser and assuming it is fine. It needs a deliberate testing approach that combines automated tools, manual checks, and, ideally, real users. Each method catches things the others miss.

Automated testing

Automated tools such as axe, WAVE, and Lighthouse can scan a page in seconds and catch a meaningful share of issues: missing alt text, insufficient contrast, missing form labels, and invalid ARIA. They are fast, cheap, and worth running continuously as part of development. The catch is that automated tools reliably catch only a portion of problems, often cited as around a third to a half, so they are a starting point, not a certificate.

Manual testing

The issues that matter most usually require human judgement. Navigate the entire site using only the keyboard and confirm you can reach and operate everything with a visible focus indicator. Turn on a screen reader, such as VoiceOver on Mac or NVDA on Windows, and listen to how the page is announced. Zoom the page to 200 percent and check nothing breaks or disappears. Read the content and ask whether it makes sense, whether link text is meaningful out of context, and whether errors are genuinely helpful.

Testing with real people

The gold standard is testing with people who actually use assistive technology day to day. They surface problems that neither tools nor well-meaning developers anticipate, and they reveal whether a site is not just technically conformant but genuinely usable. Where budget allows, it is the most valuable accessibility investment you can make.

Common accessibility mistakes to avoid

Most accessibility failures are not exotic; they are the same handful of mistakes repeated across countless sites. Knowing them helps you avoid the majority of problems.

  • Missing or meaningless alt text on images that carry information.
  • Low-contrast text that looks stylish in a design mockup but is hard to read in the real world.
  • Removing focus outlines for aesthetics, leaving keyboard users unable to see where they are.
  • Forms with placeholder text instead of real labels, and error messages that rely on colour alone.
  • Div and span elements used as buttons and links, invisible to keyboard and screen reader users.
  • Auto-playing media, carousels that move too fast to read, and animations with no way to pause or stop them.
  • Relying on an overlay widget that promises instant accessibility but often fails to deliver genuine conformance and can interfere with users' own assistive technology.

That last point is worth dwelling on. Automated accessibility overlays are marketed as a one-click fix, but they do not replace building the site properly, and the accessibility community has widely criticised them. Real accessibility comes from the underlying code and design, not a script bolted on top.

Making accessibility part of your process

The most sustainable way to stay accessible is to bake it into how you work rather than treating it as a final audit. That means considering accessibility during design, when colours and layouts are chosen; during development, through semantic markup and keyboard support; during content creation, through alt text and clear writing; and during testing, as a standard part of quality assurance. Handled this way, accessibility adds very little cost, because nothing has to be torn out and redone.

It also means keeping accessibility in mind after launch. Websites change constantly, and a new page, a redesigned form, or an added third-party widget can quietly reintroduce barriers. Periodic re-testing, especially after significant changes, keeps a site accessible over time rather than letting it drift. For organisations whose broader systems and data also need protecting, our networking and cybersecurity team helps ensure the infrastructure behind an accessible site is equally sound.

Bringing it all together

Web accessibility is not a specialist afterthought or a box to tick. It is the practice of building websites that genuinely work for everyone, and it aligns almost perfectly with good engineering, strong search performance, clean design, and, in Australia, your legal responsibilities. The core moves are clear: use semantic HTML, support the keyboard, ensure strong contrast and never rely on colour alone, build accessible forms and media, and test with tools, people, and real assistive technology.

Done from the start, none of this is expensive or difficult; done as a retrofit, it becomes both. The businesses that succeed treat accessibility as part of quality, not a compliance chore, and they reap the rewards in a wider audience, a better reputation, and a site that simply works. If you would like help building or auditing an accessible, WCAG-ready website, our Sydney team is ready to help through our web development services.