A business website should help people find information, understand what a company offers and take the next step without unnecessary difficulty. Yet many websites unintentionally make these tasks harder through low-contrast text, confusing navigation, poorly labelled forms or controls that cannot be operated with a keyboard.
These problems are not merely visual details. They can prevent potential customers from finding contact information, requesting a quotation or completing a purchase.
Website accessibility means designing and developing digital experiences that people with different abilities can perceive, understand, navigate and use. It includes people who use screen readers, people with limited vision or mobility, people with hearing impairments, and people who benefit from simpler layouts and clearer instructions.
For South African small businesses, accessibility is also a practical usability consideration. A clear page structure, readable content, useful labels and predictable navigation can help a broad range of visitors, including those browsing on mobile devices or using less familiar technology.
This guide explains the improvements business owners can prioritise without needing to become accessibility specialists.
What is website accessibility?
Website accessibility is the practice of removing barriers that make websites difficult or impossible for some people to use.
The World Wide Web Consortium's Web Content Accessibility Guidelines, commonly called WCAG, provide an internationally recognised framework for assessing accessibility. WCAG 2.2 organises its requirements around four principles: content should be perceivable, operable, understandable and robust.
The principles cover more than visual design. They address the way people access information, operate controls, understand instructions and use assistive technologies.
See the W3C overview of WCAG for the standard and supporting resources.
Accessibility is not a single plugin, colour scheme or automated test. It is a collection of design, content and development decisions that work together.
1. Use clear headings and a logical page structure
Headings help visitors understand how a page is organised. They also help people using assistive technology navigate directly to relevant sections.
A page should have a meaningful hierarchy rather than headings selected solely because they look attractive.
For example, a service page might use:
- One clear main heading describing the service.
- Second-level headings for benefits, process, pricing information and frequently asked questions.
- Third-level headings for details within those sections.
Use semantic heading elements in the correct order. Do not use a heading element simply to make a sentence appear larger or bolder.
Paragraphs should be reasonably short, and lists should be used when they make information easier to scan.
Descriptive headings also help visitors decide whether a page contains the information they need. A heading such as "How the process works" communicates more than a vague heading such as "More information".
Write for clarity
Avoid unnecessary technical language, unexplained abbreviations and sentences that try to communicate too many ideas at once.
If a business provides a specialist service, explain important terms in plain language. Customers should not need to understand the company's internal terminology before they can make an informed decision.
This approach is useful whether the business serves customers in Maboloka, Soshanguve, Centurion or elsewhere. Accessibility should improve the experience for the real audience rather than being treated as a separate technical exercise.
2. Make text easy to read
Text should be readable at ordinary viewing distances and remain usable when visitors enlarge it.
Review the following:
- Use a readable font size and appropriate line spacing.
- Maintain sufficient contrast between text and its background.
- Avoid placing essential text over busy photographs.
- Do not communicate important information through colour alone.
- Allow users to enlarge text without losing content or functionality.
- Use meaningful link text rather than relying on "click here" throughout the page.
Colour contrast deserves particular attention. Light grey text on a white background may look subtle in a design mock-up but become difficult to read on a phone or in bright daylight.
WCAG defines measurable contrast requirements for different categories of text and interface elements. The applicable requirement depends on the content and conformance level being assessed.
Use a contrast checker during design and review. Do not assume that two colours are accessible simply because they look different to the designer.
3. Make navigation work without a mouse
Some visitors navigate websites using a keyboard, switch device or other assistive input rather than a mouse.
Important website controls should therefore be reachable and usable through keyboard navigation where applicable.
Test whether a visitor can:
- Move through links and form controls using the keyboard.
- See which element currently has focus.
- Open and operate menus.
- Complete and submit forms.
- Close dialogs or other overlays.
- Reach the main content without moving through every repeated navigation link.
A visible focus indicator is especially important. If the current control cannot be identified, keyboard navigation becomes frustrating and error-prone.
Check sticky headers, floating banners and pop-ups as well. They should not completely hide the element receiving keyboard focus.
WCAG 2.2 includes additional criteria concerning focus visibility and the size of pointer targets, among other changes. The W3C summary of WCAG 2.2 explains the newer criteria.
Do not rely exclusively on automated tools for these checks. Navigate the actual website using the keyboard and confirm that the full journey works.
4. Build accessible contact and enquiry forms
Forms are often among the most commercially important parts of a small business website. If visitors cannot understand the fields or correct their mistakes, they may abandon the enquiry.
Start with the information the business genuinely needs.
A basic quotation request might need a name, a reply method and a short description of the requirement. Requiring unnecessary information adds effort and may discourage people from submitting the form.
Every input should have a clear, programmatically associated label. Placeholder text alone is not an adequate replacement for a persistent label.
Explain required fields clearly. If a visitor makes an error, identify the field and describe how to correct it in understandable language.
For example, "Enter a valid email address" is more helpful than a generic message stating that the form could not be submitted.
Consider these additional improvements:
- Group related questions logically.
- Keep instructions close to the relevant field.
- Make error messages visible and understandable.
- Preserve valid information when a submission fails.
- Confirm successful submission clearly.
- Ensure that the submit button can be operated using a keyboard.
- Avoid relying on colour alone to indicate an error.
Test the form from beginning to end. A visually attractive form is not useful if a screen reader cannot identify its fields or if the confirmation message is inaccessible.
5. Provide meaningful alternative text for images
Images can communicate information that is difficult to convey through text alone. People who cannot see an image need an appropriate alternative when that image conveys meaningful content.
Alternative text, commonly called alt text, should describe the image's relevant purpose in context.
For example, if a photograph shows a technician installing a solar panel, an appropriate description might be "Technician installing a solar panel on a residential roof".
The correct description depends on what the image contributes to the page. A photograph used only as decoration may require an empty alternative-text value so assistive technology can ignore it.
Avoid writing long, repetitive descriptions that do not help visitors understand the content. Do not stuff alternative text with keywords or repeat nearby text without a reason.
For charts, diagrams and other complex images, provide a text explanation of the important information rather than relying on a short image description alone.
Images containing essential text should be avoided where practical. If a graphic must communicate information, make sure that information is also available in accessible text.
6. Make video and audio content accessible
A business website may include product demonstrations, training videos, interviews or promotional content.
Visitors who cannot hear audio may need captions. Visitors who cannot see important visual information may need an audio description or an equivalent text explanation, depending on the content.
At a minimum, review whether:
- Videos with speech have accurate captions.
- Important audio information is available in text.
- Instructions shown visually are explained when necessary.
- Audio does not start unexpectedly and interfere with navigation.
- Media controls can be operated accessibly.
Automatic captions can be a useful starting point, but they should be reviewed for errors, especially when the content includes names, technical terms or South African place names.
Do not assume that embedding a video from a popular platform automatically makes every aspect of the media experience accessible.
7. Design for mobile and zoom
A website should remain usable across different screen sizes and viewing conditions.
Visitors may browse on small phones, enlarge text or use a device in landscape orientation. The layout should not force them to perform unnecessary horizontal scrolling to read ordinary paragraphs or complete forms.
Check that:
- Navigation remains understandable on narrow screens.
- Text does not overlap images or controls.
- Buttons and links have adequate target sizes.
- Forms remain usable when the screen is enlarged.
- Important content does not disappear on mobile.
- Dialogs and cookie notices do not block essential controls.
A responsive layout is not automatically accessible. It must also preserve understandable structure, readable text and usable interactions.
8. Do not rely on automated accessibility scores alone
Accessibility checkers can detect many common problems, including missing alternative text, certain contrast failures and some incorrectly labelled controls.
However, they cannot reliably determine whether every image description is meaningful, whether a form's instructions make sense or whether a website is understandable to its intended audience.
Use a combination of methods:
- Run an automated accessibility checker.
- Navigate the site with a keyboard.
- Zoom the page and inspect its layout.
- Test important forms and interactive components.
- Review the content and image descriptions manually.
- Where possible, obtain feedback from people who use assistive technology.
WCAG conformance is determined against its applicable success criteria, not by a single automated score. A high score from one tool should not be presented as proof that an entire website conforms to a particular WCAG level.
Need to identify accessibility improvements on your website?
Website assessment: Use Mogen's website assessment to discuss your website and identify areas that may need attention.
9. Prioritise improvements according to customer impact
Small businesses do not always have the resources to address every issue simultaneously. A prioritised improvement plan can help them make progress without treating accessibility as an all-or-nothing project.
Start with barriers that prevent people from completing important tasks.
| Priority | Examples |
|---|---|
| High | Enquiry forms that cannot be completed, inaccessible menus, missing labels on essential controls |
| Medium | Poor heading structure, unclear links, difficult-to-read text and weak focus visibility |
| Ongoing | Reviewing new content, testing redesigned components and maintaining accessible media |
This is a practical prioritisation framework, not a formal WCAG severity classification. The actual impact depends on the website and the people using it.
Include accessibility checks in the design and development process for new pages. Correcting issues before a website launches is generally more straightforward than revisiting every page after the design has been replicated across the site.
Web development options:
Visit our web development service page to explore web development options and discuss the requirements of your business website.
Frequently asked questions
Does a small business website need to follow WCAG?
WCAG is an international accessibility standard and a useful technical reference. Whether a particular legal or contractual requirement applies depends on the organisation, its context and the applicable rules. Obtain appropriate advice where formal compliance obligations are involved.
Does website accessibility help SEO?
Some accessibility practices also help search engines understand content, such as meaningful headings, descriptive text and useful image alternatives. However, accessibility and SEO have different objectives, and accessibility improvements do not guarantee better rankings.
Can a plugin make my website fully accessible?
A plugin may provide useful functionality, but it cannot automatically correct every structural, content and interaction problem. Accessibility requires testing the actual website and fixing underlying issues.
What should I check first?
Start with the tasks customers most need to complete: reading service information, navigating the site, finding contact details and submitting an enquiry. Then broaden the review to other pages and components.
Conclusion
Website accessibility is a practical part of building a website that works for more people. Clear structure, readable text, keyboard support, useful image descriptions and understandable forms can reduce barriers while improving the overall user experience.
Start with the most important customer journeys, test them properly and include accessibility in future content and development work. A website should be designed for the people who need to use it, not just for how it looks in a design preview.