Web Accessibility Basics: How to Make Your Website Usable for Everyone
A practical guide to making your site work for people with visual, motor, or cognitive differences — and why good accessibility helps every visitor, not just a few.
Who accessibility is really for
Accessibility means building a website that works for people regardless of how they see, hear, move, or process information. Roughly one in eight people in Hong Kong has a disability of some kind — and that number leaves out the far larger group that benefits from accessible design in ordinary situations: a user squinting at their phone in bright sunlight, someone browsing one-handed while gripping an MTR rail, or an older customer who finds small text hard to read.
The case for accessibility is not only ethical. Structural improvements — clear headings, legible text, logical navigation — reduce friction for every visitor and often cut bounce rates. It is not a specialist concern bolted on at the end; it is good web craft.
The simplest fixes with the biggest payoff
Four changes address most common failures. First, add descriptive alt text to every meaningful image — one sentence describing what the image shows, not its file name. Second, use descriptive link text: "Download the price list" beats "click here" every time. Third, keep heading tags in logical order — H1 for the page title, H2 for section headers, H3 for sub-points — without skipping levels. Fourth, ensure every form field has a visible label attached to it, not just placeholder text that vanishes the moment someone starts typing.
Captions on videos deserve special mention. In Hong Kong, many people watch content on mute — on public transport or in shared spaces. A subtitle file helps hearing-impaired viewers and everyone else who has their phone on silent.
Colour, contrast, and text size
About 8% of men have some form of colour vision deficiency. If your call-to-action button is only distinguishable by colour — a red button on a grey background, say — a portion of your visitors may not notice it. The fix is straightforward: differentiate interactive elements by shape, position, or a text label in addition to colour, not instead of it.
The WCAG 2.1 AA standard requires a minimum contrast ratio of 4.5:1 between text and background. The free WebAIM Contrast Checker lets you test any colour pair in seconds. Body text smaller than 16px on a textured or photographic background is the most common offender on small-business sites.
Keyboard navigation and focus indicators
Every link, button, and form field on your page should be reachable using only the Tab key. Many users with motor impairments rely on keyboard or switch access rather than a mouse. Test your own site: press Tab repeatedly and watch where focus goes. If it jumps to invisible places or gets stuck, keyboard users hit a dead end.
Do not remove the browser's default focus ring without replacing it. That dotted or highlighted outline around a focused element tells keyboard users exactly where they are on the page. Many developers suppress it for visual tidiness, but the result is a page that sighted keyboard users cannot navigate at all.
Testing your site without spending money
Three free tools catch most structural problems. Google Lighthouse is built into Chrome's developer tools — press F12, open the Lighthouse tab, and run an accessibility audit. WAVE and axe DevTools are browser extensions that flag issues on the live page as you browse. Between them, you can surface the majority of contrast and structural failures in under ten minutes.
Manual testing adds what automated tools miss. Enable VoiceOver on a Mac (Command + F5) or iPhone, or TalkBack on Android, then try to complete a common task on your own site using only the screen reader. You will quickly learn whether your alt text, headings, and labels actually communicate what you think they do.
Common questions
Does making my site accessible improve my Google ranking?
Not directly — Google does not use accessibility as a ranking signal. But many accessibility improvements overlap with SEO best practices: descriptive alt text aids image search, logical heading structure helps crawlers understand content hierarchy, and clean markup benefits Core Web Vitals scores. The two disciplines share a lot of common ground without being the same thing.
Is web accessibility required by law in Hong Kong?
No legislation in Hong Kong requires private-sector websites to meet a specific accessibility standard. Government websites are expected to follow WCAG 2.0 AA under the Digital Government Blueprint. If you serve customers in the EU (European Accessibility Act) or the US (ADA and Section 508), those jurisdictions carry stronger obligations worth checking.
How do I find out if my site already has accessibility problems?
Start with Google Lighthouse: open Chrome, press F12, go to the Lighthouse tab, and audit your homepage. It scores the page out of 100 and lists specific issues with plain-English explanations. Install the WAVE browser extension for a second pass — it catches issues Lighthouse can miss, particularly around form labels and reading order.
How long does it take to fix the most common accessibility issues?
For a straightforward small-business site — a homepage, a few service pages, a contact form — fixing the most common problems typically takes a few hours if you have access to the CMS or code. The quick wins are adding alt text, fixing low-contrast text, labelling form fields, and correcting heading order. A full audit of a large or complex site takes longer, but you do not need perfection to make a real difference to real users.
Have a project in mind?
Tell us what you need — software, production, or both. We reply within one business day.
Start an enquiry