Website accessibility basics you can check without a specialist

Fibvo editorial · 8 April 2026 · 5 min read

An architecture practice approves its new website in a meeting on a large monitor: pale grey text on white, a slim menu that opens on hover, icons with no labels. A few weeks later, a long-standing client says she cannot read the project pages, and a visitor who uses a screen reader cannot get past the menu. The design looked finished. It was not usable.

Why accessibility is a business matter

Accessibility covers far more than people who are blind. It includes people with low vision or colour blindness, older buyers who enlarge text, people with tremors who struggle with small targets, anyone using a phone in bright sunlight and people reading in a second language. Fixing the basics makes a site easier for all of them.

Accessibility problems rarely appear for the people who approve a design; they appear for the customers who try to use it.

The reference standard is the Web Content Accessibility Guidelines, WCAG, and version 2.2 at level AA is a sensible target for a business site. In India, government websites follow the GIGW guidelines, and the Rights of Persons with Disabilities Act 2016 sets wider duties. If you sell online to consumers in the European Union, check whether the European Accessibility Act, which has applied since June 2025, covers you; microenterprises providing services are exempt.

Contrast and readable text

Low contrast is one of the most common problems and one of the easiest to fix. WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and 3:1 for the visible boundaries of buttons, form fields and meaningful icons.

• Test brand colours in a free contrast checker before they go into the design, not after launch.
• Put a solid or darkened panel behind text laid over photographs.
• Do not use colour alone to carry meaning, such as red for out of stock. Add a word or a labelled icon.
• Zoom the browser to double size and check that no text is cut off or overlapping.

If your brand colour passes for large text but not for small text, keep it for large headings and decorative graphics, and use a darker shade for links and body text.

Headings and alt text give a page its structure

Screen reader users often move through a page by jumping from heading to heading, much as a sighted visitor scans the bold titles. That only works when headings are real heading elements in a logical order.

• Use one H1 per page that says what the page is about.
• Nest sections as H2 and sub-sections as H3 without skipping levels to get a particular font size. Change the size in the styling instead.
• Mark up headings as headings, not as paragraphs made bold and large.
• Write link text that makes sense on its own. 'Download the 2026 price list' is clear; 'click here' repeated down the page is not.

Alt text is read aloud in place of an image, and what it should say depends on the job the image is doing.

• An informative image, such as a photo of a completed project, needs a short description of what matters: 'Open-plan office with timber ceiling panels and planted partitions'.
• A decorative image, such as a background texture, needs an empty alt attribute so screen readers skip it.
• A linked image, such as the logo, should describe where it goes, for example your company name followed by 'home'.
• An image containing text, such as an offer banner, needs those words in its alt text, although real text is better still.

Everything should work from the keyboard

Many people navigate without a mouse, using the Tab key, switch devices or voice control that depends on the same underlying structure. Test it yourself: click the browser's address bar, then press Tab repeatedly through your homepage.

• You should always see where you are. Never remove the visible focus outline without a clear replacement.
• Focus should move in the order the page reads, and should not slip behind a sticky header or cookie banner.
• Build controls from real buttons and links. A styled box with a click script attached often cannot be reached by keyboard at all.
• Menus, accordions and pop-ups should open with Enter or Space, and pop-ups should close with Escape and return focus to where the visitor was.
• Add a 'Skip to main content' link as the first item, and make tap targets at least 24 by 24 CSS pixels or give smaller ones enough space around them.

Forms people can complete without seeing them

Most form accessibility fixes live in the markup rather than the visual design, which makes them cheap to put right.

• Give every field a visible label that is connected to it in the code. Placeholder text is not a label, because it disappears as soon as someone starts typing.
• Group related choices, such as a set of radio buttons, with a fieldset and legend, so the question is read out with each option.
• When a submission has errors, move focus to an error summary or the first problem field, and make sure the message is announced to screen readers.
• Test with a screen reader you already own: VoiceOver on iPhone and Mac, TalkBack on Android, or the free NVDA on Windows.

Be wary of overlay widgets that promise to make a site accessible with one line of script. They do not repair the underlying code, and some interfere with the assistive technology people already use. Fix the site itself, starting with the pages that bring in enquiries.

---

Written by Fibvo — Bengaluru and Erode, India — working with clients in other time zones. Questions, or think we have it wrong? Tell us.