Website Accessibility Basics for Small Sites

An accessible website is one that people can use whether they see, hear, move or process information differently. That includes blind people using screen readers, people who navigate with a keyboard instead of a mouse, people with low vision or color blindness, and anyone reading on a cracked phone in bright sunlight. For a small site, most of the work is a short list of habits you can apply while you build.

The standard to aim for

The Web Content Accessibility Guidelines (WCAG), published by the W3C, are the reference most laws and policies point to. The current version is WCAG 2.2, which became a W3C Recommendation in October 2023. In 2025 it was also approved as the international standard ISO/IEC 40500. Its success criteria come in three levels, A, AA and AAA, and level AA is the usual target.

WCAG 3 is in development, but it's still a draft. For now, build to 2.2 AA.

Legal requirements vary by country and by type of organization. In the United States, the Americans with Disabilities Act has been applied to websites in many lawsuits. In the European Union, the European Accessibility Act has applied to a range of consumer services, including many online shops, since June 2025, with exemptions for the smallest service businesses. If you're unsure what applies to you, ask a lawyer where you operate. The practical advice below is the same either way.

Write useful alt text for images

Every meaningful image needs a short text alternative, called alt text, that screen readers read aloud. Most builders show an "alt text" or "description" field when you click an image.

Describe what the image shows that matters on this page. "Owner Maria icing a three-tier wedding cake" is useful on a bakery's about page. "Image" or "cake.jpg" isn't. Keep it to a sentence.

If an image is purely decorative, like a background pattern, it should have empty alt text so screen readers skip it. Many tools have a "decorative" checkbox for this.

Never put important text only inside an image, such as opening hours on a flyer graphic. Put it in the page as real text as well.

Use real headings, in order

Screen reader users often jump between headings to find what they need, the same way sighted people skim. Use your tool's heading styles (Heading 1, Heading 2 and so on) rather than making normal text big and bold.

Give each page one main heading, then use the next levels in order. Don't skip from Heading 2 to Heading 4 because you like the size better. Change the style in your theme settings instead.

Check color contrast

Light gray text on a white background is the most common accessibility failure on small sites. WCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Free contrast checkers will tell you the ratio when you enter two colors.

Don't rely on color alone to carry meaning. "Required fields are in red" fails people who can't see red. Add a word or symbol too.

Make links and buttons make sense

Screen reader users can pull up a list of every link on a page. A list of "click here, click here, read more" tells them nothing. Write link text that describes where it goes: "see our price list" or "download the 2026 race entry form (PDF)."

Make buttons and links big enough to tap. WCAG 2.2 added a minimum target size at level AA, roughly 24 by 24 CSS pixels for most controls, with some exceptions. Bigger is easier for everyone.

Test with a keyboard

Put your mouse aside and press Tab to move through your site. You should be able to reach every link, button and form field, in a sensible order, and you should always see where you are. That visible outline is called the focus indicator. Some templates hide it, which makes the site unusable for keyboard users.

Press Enter or Space to activate things. If a menu or pop-up can't be opened or closed with the keyboard, choose a different template or remove it.

Label your forms

Every form field needs a visible label that says what to enter, attached to the field so screen readers announce it. Placeholder text inside the box isn't enough, because it disappears as soon as you start typing.

Error messages should say what went wrong and how to fix it: "Enter a phone number with area code," not just a red outline.

If you use a CAPTCHA, pick one that doesn't depend on solving visual puzzles alone.

Add captions and transcripts

Videos need captions for people who are deaf or hard of hearing, and for everyone watching with the sound off. Many video platforms generate automatic captions, but they make mistakes with names and jargon, so check and correct them. Podcasts and audio clips should have a transcript.

Avoid autoplaying audio. If something moves, flashes or scrolls automatically for more than a few seconds, give people a way to pause it.

Write plainly

Short sentences, common words and clear structure help people with cognitive disabilities, people reading in a second language, and people in a hurry. Explain abbreviations the first time you use them. Put the most important information first.

A quick checklist

• Every meaningful image has alt text; decorative images are marked as decorative.
• Each page has one main heading and sections in order.
• Text passes a contrast check.
• Link text makes sense on its own.
• You can use the whole site with only a keyboard, and focus is always visible.
• Form fields have visible labels and helpful error messages.
• Videos have accurate captions.
• The page language is set correctly in your tool's settings.

Automated checkers built into browsers or available as free extensions will catch some of these issues. They can't catch everything, so pair them with the keyboard test and a read-through.

Questions