Website Accessibility Basics for Singapore Small Businesses

An accessible website is one that as many people as possible can use, including people with poor eyesight, limited mobility, hearing loss or a temporary injury, and anyone using a small screen in bright sunlight. For a small business the essentials are simple: readable colour contrast, descriptive alt text on images, a site that works from the keyboard, clearly labelled forms and a sensible heading structure. These are good practice that also make your site easier for every customer.

What accessibility means in practice

When people hear "accessibility" they often think of a small group of users. In reality, almost everyone benefits at some point. An older customer may need larger text. Someone with a broken wrist may navigate with a keyboard. A parent holding a baby is using one hand. A person squinting at a phone in bright Singapore sunshine is a contrast problem waiting to happen. Others rely on screen readers, which speak a page aloud, or on captions for video.

There is a widely used international standard, the Web Content Accessibility Guidelines (WCAG), published by the W3C. It is organised around four ideas: content should be perceivable, operable, understandable and robust. You do not need to read the whole standard to make good progress, but it is worth knowing it exists, and the W3C's own website explains it in plain terms.

A note on scope. This guide is a practical introduction written for small-business owners. It is not legal advice and does not describe any specific legal duty. If you operate in a sector with particular requirements, or you work with the public sector, ask a qualified adviser what applies to you.

Basic 1: Colour contrast

Contrast is the difference in brightness between text and its background. Low contrast is one of the most common problems on modern, minimalist websites: light grey text on white, pale text over a photograph, or coloured buttons with weak labels. It affects people with low vision and colour-vision differences, and it affects everyone outdoors on a phone.

How to check

• Use a free contrast checker, such as the one in your browser's developer tools or a web-based tool, to compare your text colour and background colour.
• WCAG sets minimum contrast ratios for normal and large text. The W3C's site lists the current figures, so check them there rather than relying on a number remembered from an article.
• Check buttons, links, form borders and text placed on photos. These are the places contrast usually fails.

Simple fixes

• Darken body text and avoid pale grey for anything people need to read.
• Place text over a solid or darkened area rather than straight on a busy photo.
• Do not use colour alone to carry meaning, such as red for errors with no text. Add a word or an icon.

Basic 2: Alt text for images

Alt text (alternative text) is a short written description attached to an image. Screen readers read it aloud for people who cannot see the picture. It is also shown if an image fails to load, and search engines use it to understand what an image shows.

How to write good alt text

• Describe what the image shows and why it matters. "Technician cleaning an aircon indoor unit in a Tampines flat" is useful. "IMG_4821" is not.
• Keep it short. One clear sentence is usually enough.
• Do not stuff keywords. Alt text written for search engines instead of people helps nobody. Our on-page SEO checklist explains how to cover image basics without overdoing it.
• Leave purely decorative images empty. A decorative flourish does not need a description, and an empty alt attribute tells screen readers to skip it.
• If an image contains text, repeat the text. A promotional banner with the offer written inside the picture is invisible to a screen reader unless the alt text says what it says.

Basic 3: Using the site with a keyboard

Many people cannot use a mouse or a touchscreen. They may use a keyboard, a switch device or voice control, all of which depend on the page being navigable in a logical order. You can test this yourself in a couple of minutes.

The most common faults are a missing or invisible focus outline (the web design equivalent of switching off the lights), menus that only open on hover, and pop-ups that cannot be closed from the keyboard. These are fixable by whoever built your site, and worth raising with them. If your site uses a lot of custom features, ask the developer how they handle keyboard use.

Basic 4: Clear labels on forms

A form is where a visitor turns into an enquiry, so it is the last place you want confusion. Accessible forms are also simply better forms.

• Every field needs a visible label. Placeholder text that disappears when you start typing is not a label, because people forget what they were meant to enter.
• Mark required fields clearly, and say so in words rather than only with a colour or an asterisk.
• Show clear error messages next to the field, in plain language: "Please enter a mobile number with 8 digits" is better than "Invalid input".
• Make sure labels are connected to their fields in the code, so a screen reader announces the right label when someone lands on a field. A competent developer will do this as a matter of course.
• Confirm success. A clear message after submitting tells everyone it worked.

For more on keeping forms short and effective, see our guide to turning website visitors into enquiries.

Basic 5: Headings that make sense

Headings are the outline of your page. Sighted visitors skim them for the section they want. Screen-reader users often jump from heading to heading to understand the structure, much like reading a contents page. Search engines also use headings to understand what each page covers.

• Use one main heading per page that says what the page is about.
• Use subheadings in order. A section title, then its sub-sections. Do not skip levels or pick a heading level just because it looks the right size.
• Write meaningful headings. "Our aircon servicing packages" tells you something. "Welcome" does not.
• Do not fake headings. Bold text styled to look like a heading is invisible to assistive tools. Use real heading elements for real headings.

A few more things worth doing

• Make link text meaningful. "Read our pricing page" beats "Click here", and screen readers often list links out of context.
• Add captions or transcripts to video and avoid auto-playing sound.
• Let people zoom. Never stop visitors from enlarging text or pinching to zoom on their phone.
• Set the page language. This helps screen readers pronounce your content correctly.
• Avoid auto-moving content. Sliders that advance by themselves are hard to read and hard to stop.

Many of these overlap with making your site good on a phone, which we cover in our mobile-friendly website checklist.

Making it part of normal work

Accessibility is easiest when it is built in, and painful when bolted on at the end. If you are planning a new website, ask your designer how they handle contrast, keyboard use, forms and headings, and include it in your brief; our website brief template is a good place to add a line for it. Once the site is live, it needs the same care as anything else, and new pages and images should follow the same rules. Ongoing care like this is part of looking after a site, which we describe on our website maintenance page.

Do not wait for perfection. A site that is a little more accessible today is better than one that is perfectly accessible in a plan you never finish.

What to do next

Pick the quickest check first: tab through your homepage with the keyboard. Then run a contrast check on your main text and buttons, and read your form labels out loud. Fix what you find, starting with whatever blocks someone from contacting you. If you would like a site designed with these things in mind from the start, our website design page explains our approach, and our guide to website design covers what a good business site needs overall.