Website Accessibility South Africa: WCAG Basics

By Next Level Web Solutions · · 7 min read · Compliance and trust

Website accessibility in South Africa means building your site so that people with visual, hearing, motor or cognitive disabilities can use it, and the practical benchmark is the Web Content Accessibility Guidelines (WCAG). You can get most of the way with a handful of fixes: readable colour contrast, text alternatives for images, a site that works with a keyboard, clear headings and properly labelled forms.

This article explains the basics for small business owners and gives you a testing routine that costs nothing. It is general information, not legal advice.

Website accessibility in South Africa: why accessibility matters

Many South Africans live with some form of disability, and many more have temporary or situational limits: a cracked phone screen in bright sun, a broken arm, poor eyesight that comes with age, or a noisy room where audio is useless. An accessible site is one more people can use, which means more enquiries.

There is also a legal and reputational side. South Africa's Constitution protects equality and dignity, and anti-discrimination law applies to access to goods and services. We are not aware of a single dedicated web accessibility statute that mandates a specific WCAG level for every private business, and the position can change, so check current law and any rules that apply to your sector, especially if you serve the public sector or regulated industries. In the meantime, WCAG is the standard that procurement teams and accessibility specialists point to.

Accessibility work also overlaps with things you already care about. Clear headings, descriptive link text and fast pages help search engines and help everyone, and our guide to website speed and Core Web Vitals covers the performance side.

WCAG in plain language

WCAG is organised around four principles, often shortened to POUR:

  • Perceivable: people must be able to perceive the content. Images need text alternatives, video needs captions, and text must be readable.
  • Operable: people must be able to operate the interface. Everything should work from a keyboard, and nothing should require precise mouse movement or time-pressured actions.
  • Understandable: content and controls must be predictable. Plain language, consistent navigation and helpful error messages all count.
  • Robust: the site must work with a range of browsers and assistive technology, which comes largely from using proper HTML.

WCAG has conformance levels A, AA and AAA. The current version is WCAG 2.2 (a W3C Recommendation since 2023), and level AA is the usual target for business websites. WCAG 2.2 added AA criteria such as 2.5.8 Target Size (Minimum) and 2.4.11 Focus Not Obscured (Minimum). Treat the lists below as your working checklist.

Colour contrast and readable text

Low contrast is the most common failure on business sites, often because of grey text on a white background or white text over a photo. WCAG AA (criteria 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast) asks for a contrast ratio of at least 4.5 to 1 for normal text, and 3 to 1 for large text and interface elements such as button borders.

Practical rules:

  1. Check your brand colours in a free contrast checker before you commit to them.
  2. Never rely on colour alone to convey meaning. An error shown only in red is invisible to someone who cannot distinguish red, so add text or an icon.
  3. Use a body font size of at least 16 pixels, with generous line spacing and short line lengths.
  4. Avoid text placed directly on busy images unless there is a solid overlay behind it.
  5. Make sure text can be resized to 200 percent without content breaking (criterion 1.4.4 Resize Text).

Keyboard and screen reader basics

Many people never touch a mouse. Test your site yourself: put the mouse aside and press Tab to move through the page. You should see a clear visible focus outline on each link, button and field, in a logical order, and you should be able to open menus, submit forms and close pop-ups using only the keyboard.

Common problems are menus that only open on hover, custom buttons built from non-interactive elements, and modal windows that trap focus or cannot be closed with the Escape key. Also provide a "skip to main content" link so keyboard users do not have to tab through the whole navigation on every page.

Screen readers read the page structure aloud, so structure matters. Use real buttons and links, landmarks such as header, nav, main and footer, and avoid auto-playing audio. Windows and Android include built-in screen readers you can try for a few minutes.

Alt text, headings and forms

Alt text. Every meaningful image needs a short description of what it conveys, not just what it shows. "Plumber replacing a geyser thermostat" is useful. "image1.jpg" is not. Decorative images should have an empty alt attribute so screen readers skip them. If text is baked into an image, repeat the text in the alt description or, better, use real text.

Headings. Use one main heading per page and nest subheadings in order. Do not choose a heading level because of how big it looks. Screen reader users often navigate by jumping between headings, so they act as a table of contents.

Links. Link text should make sense out of context. "Read our pricing guide" beats "click here" every time.

Forms. Each field needs a visible label connected to it in the code, not just placeholder text that disappears when typing. Mark required fields in text, explain errors next to the field in plain words, and make sure error messages are announced. Keep forms short, since every extra field is a barrier. If you collect personal information in these forms, tie them to your privacy notice as described in our POPIA website compliance checklist.

Testing with free tools

You can learn a lot without paying for anything:

  • Browser developer tools include an accessibility panel and contrast checks.
  • Lighthouse, built into Chrome, gives an accessibility score and lists failures. Remember automated tools catch only a portion of issues, so a perfect score does not equal an accessible site.
  • Free extensions such as WAVE and axe highlight missing alt text, empty links and heading problems on the page you are viewing.
  • Manual checks: keyboard-only navigation, zooming to 200 percent, and a few minutes with a screen reader.
  • Real feedback: if you can, ask someone who uses assistive technology to try your main journey, such as finding your phone number and sending an enquiry.

Test on mobile as well, since touch targets that are too small are a common issue.

Publishing an accessibility statement

An accessibility statement is a short page that says what you aim for, what you have done, any known gaps, and how to ask for help. Keep it honest. Do not claim full conformance unless you have properly audited the site. A simple structure works well:

  1. Your commitment, for example aiming for WCAG 2.2 level AA.
  2. What you have tested and how.
  3. Known limitations and what you plan to do about them.
  4. A contact method, such as an email address and phone number, with a promise to respond within a stated time.
  5. The date the statement was last reviewed.

Link it from the footer. When we build sites we include accessible markup and can prepare the statement as part of our web design and development work, and you can contact us if you want an existing site reviewed. This article is general information, not legal advice. For sector-specific obligations, speak to an attorney.

Frequently asked questions

Is website accessibility a legal requirement in South Africa?

There is no single, clear web accessibility law for every private business that we can point to, but equality and anti-discrimination principles apply and WCAG is the benchmark most often cited. Rules can differ by sector and change over time, so check current law and any obligations from your clients or regulators.

What is the easiest first fix?

Start with colour contrast, alt text on meaningful images and labelled form fields. Those three changes remove many of the most common barriers and can usually be done quickly. Then test keyboard navigation and fix any menus or pop-ups that do not work without a mouse.

Want this done for your business?

Book a free call →