Website Accessibility Basics:Making Your Site Usable for Everyone

Website accessibility means making a site usable by everyone, including people who are blind or have low vision, are deaf or hard of hearing, have motor or cognitive disabilities, or are using a phone in bright sunlight with one hand. The international reference is the Web Content Accessibility Guidelines (WCAG), published by the W3C; level AA is the common target. Most of the basics are simple: clear structure, text alternatives, enough contrast, keyboard access and well-labelled forms.

Accessible sites also tend to be easier for everyone to use, and they align with good SEO practice.

The four principles

WCAG organises its guidelines under four principles. Content must be:

1. Perceivable: users can see or hear it (text alternatives, captions, contrast).
2. Operable: users can navigate and interact (keyboard access, enough time, no seizure risks).
3. Understandable: text and interfaces are clear and predictable.
4. Robust: content works with assistive technologies such as screen readers.

A practical checklist

Structure

• One <h1> per page and a logical heading order (h2, then h3), so screen-reader users can navigate by headings.
• Landmarks: header, navigation, main content and footer marked up with the proper HTML elements.
• Lists marked up as lists, tables used for tabular data with header cells.
• The page language set (lang attribute).

Images and media

• Meaningful images have alt text that conveys their purpose; decorative images have empty alt text.
• Charts and infographics have a text summary.
• Videos have captions; audio has transcripts.
• Nothing flashes more than three times per second.

Colour and text

• Normal text has a contrast ratio of at least 4.5:1 against its background (3:1 for large text), as WCAG AA requires.
• Information is not conveyed by colour alone (for example, form errors also use text or icons).
• Text can be enlarged to 200% without breaking the layout.

Keyboard and focus

• Every link, button, menu and form control can be reached and used with the keyboard alone.
• A visible focus indicator shows where you are.
• Focus order follows the visual order.
• Dialogs trap focus while open and return it when closed; Escape closes them.
• A "skip to content" link on pages with long navigation.

Forms

• Every field has a visible label connected to it.
• Required fields and formats are explained before submission.
• Error messages say what is wrong and how to fix it, next to the field.
• Correct input types (email, tel) help mobile keyboards and autofill.

Links and buttons

• Link text makes sense out of context ("Download the admission form", not "Click here").
• Buttons are real <button> elements, not clickable divs.
• Tap targets are large enough on touch screens.

Before and after: a contact form

Before: inputs with grey placeholder text ("Your name", "Email") instead of labels, which disappears when typing; a red border as the only sign of an error; a CAPTCHA image with no alternative; a "Send" button that is a styled div.

After:

• A visible label above every field, connected to it, so screen readers announce it and users still see it while typing.
• Required fields marked in text ("required"), not only with colour or an asterisk.
• Error messages in words next to the field ("Enter an email address like [email protected]"), announced to screen readers.
• Spam protection that does not rely on reading a distorted image.
• A real button element with clear text.
• Visible focus outlines when tabbing through the form.

The form is easier for everyone, including people on small phones and those in a hurry.

Writing good alt text: examples

Image	Weak alt text	Better alt text
Team photo on About page	"image"	"The five-person support team in the Dhaka office"
Product photo	"shoe"	"Black leather office shoe, side view"
Chart of monthly sales	"chart"	"Sales rose from 120 to 310 orders a month between January and June"
Decorative divider line	"line"	Empty alt text (decorative)
Logo linking to home page	"logo"	"Company name home page"

Good alt text describes what matters about the image in its context, briefly. See also WordPress image optimization and responsive web design principles.

How to test

1. Keyboard test: unplug the mouse and try to use the whole page with Tab, Shift+Tab, Enter, Space and Escape.
2. Automated checks: tools such as Lighthouse's accessibility audit or browser extensions find many issues (missing alt text, contrast, labels), but not all.
3. Screen reader test: try NVDA (Windows), VoiceOver (macOS and iOS) or TalkBack (Android) on key pages.
4. Zoom test: zoom to 200% and check nothing is cut off.

Automated tools typically catch only a portion of accessibility issues, so manual checks matter.

Common problems on small business sites

• Low-contrast grey text on white.
• Image sliders with no pause control and no alt text.
• Icons without accessible labels.
• Forms with placeholders instead of labels.
• PDFs that are scanned images rather than readable documents.

Frequently Asked Questions

Is accessibility a legal requirement?

In many countries, accessibility laws apply to some organisations and sectors, especially public bodies, education and large businesses. Requirements vary by jurisdiction, so check what applies to you.

Do accessibility overlays fix everything?

No. Widgets that claim to make a site accessible automatically cannot fix underlying problems in structure, labels or keyboard support.

Does accessibility help SEO?

Many practices overlap: clear headings, descriptive link text, alt text and good structure help both users and search engines.

Related reading

See responsive web design principles and plan with how to plan a website project. For an accessible site built for you, see ServerNeed business website development.

Sources

• W3C: WCAG 2 Overview
• W3C: Easy Checks – A First Review of Web Accessibility