Website accessibility basics are a short list of checks: text with enough contrast, every control reachable by keyboard, alt text on meaningful images, a visible label on every form field, headings in order, clear link text, and motion that stops when a visitor asks for less. Most can be tested in minutes without special tools.
Accessibility is often described as a specialist subject. Most of it is ordinary care: can people read the text, use the form, and get around without a mouse. The visitors who benefit include people with disabilities and also anyone on a phone in bright sun, anyone with a broken trackpad, and anyone in a hurry.
We think about this on every build. On CoverageCobra, an attorney files a report from the courthouse steps. That is a phone, outdoors, in a hurry. Designing for those conditions and designing for accessibility turn out to be mostly the same work.
What is website accessibility?
Website accessibility is the practice of building a site so that people can use it regardless of how they see, hear, move, or process information. That includes visitors using screen readers, keyboards instead of a mouse, enlarged text, or system settings that reduce animation.
The common reference is the Web Content Accessibility Guidelines, or WCAG, published by the W3C. It is long, but its ideas are simple: content must be perceivable, operable, understandable, and built so that assistive software can read it.
Laws on website accessibility differ by country, state, and type of business. This post is practical guidance, not legal advice, so ask an attorney what applies to you.
What accessibility checks should every website pass?
Every website should pass seven basic checks: readable contrast, full keyboard access, alt text on images, labeled form fields, headings in a logical order, links that make sense out of context, and respect for the visitor's reduced motion setting. Together they catch the problems that block the most people.
- Contrast. Body text should stand out clearly from its background. WCAG asks for a contrast ratio of at least 4.5 to 1 for normal text. Pale gray on white fails.
- Keyboard. Put the mouse aside and press Tab. You should reach every link, button, and field, in a sensible order, and always see where you are.
- Alt text. Every image that carries meaning needs a short description. Decorative images get an empty one so screen readers skip them.
- Form labels. Each field needs a visible label that stays visible. Placeholder text that vanishes when you type is not a label.
- Headings. One main heading per page, then sections in order. Screen reader users jump between headings the way sighted users skim.
- Link text. A link should say where it goes. "Read our pricing" works. A bare "here" does not.
- Reduced motion. If a visitor has asked their device for less animation, the site should honor it.
How do you check color contrast and text size?
Check color contrast with the tools already in your browser. In the developer tools, selecting a piece of text shows its contrast ratio and whether it passes. For text size, zoom the page to 200 percent and confirm nothing overlaps or disappears.
The places contrast most often fails are predictable:
- Light gray body text chosen because it looked refined
- White text over a photograph
- Placeholder text inside form fields
- Buttons in a brand color that is too pale for white lettering
Never rely on color alone to carry meaning. An error message that only turns a field red is invisible to many people. Add words or an icon.
How do you make forms and buttons accessible?
Make forms accessible by giving every field a real label, making buttons large enough to tap, describing errors in words next to the field they refer to, and making sure the whole form can be completed and submitted with the keyboard alone.
Forms are where accessibility and revenue meet. The Vortech site has a quote form that reaches the owner directly. If a visitor cannot tell what a field wants, the business never hears from them.
In HTML, a label is tied to its field like this:
<label for="phone">Phone number</label>
<input id="phone" name="phone" type="tel" autocomplete="tel">The for and id match, so tapping the label focuses the field and a screen reader announces "Phone number" when the visitor arrives. The type and autocomplete values let a phone show the number pad and offer to fill the field in.
What is alt text and when do images need it?
Alt text is a short written description attached to an image. Screen readers speak it aloud, and browsers show it when an image fails to load. An image needs alt text when it conveys information. Purely decorative images should have an empty alt attribute.
Write what the image shows, not what you want to rank for. "Technician replacing a rooftop AC unit" is useful. A string of keywords is not. Real job photos are easy to describe well because they show something specific. If an image is a link, the alt text should say where the link goes.
What does reduced motion mean on a website?
Reduced motion is a device setting that tells websites the visitor wants less animation. Some people get dizzy or nauseated from parallax, zooming, and sliding effects. A site honors the setting by turning those effects off or replacing them with a simple fade.
This site has a fair amount of animation, and it honors the setting. We write animations inside a media query that applies only when the visitor has expressed no preference, so the still version is the default and motion is the addition:
@media (prefers-reduced-motion: no-preference) {
.hero-foot > * { animation: rise 0.9s 0.5s cubic-bezier(0.16, 0.8, 0.2, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
html { scroll-behavior: auto; }
}MDN documents the feature under prefers-reduced-motion. You can test it by turning on "Reduce motion" in your phone's accessibility settings and reloading your site.
Frequently asked questions
Does accessibility help with SEO?
The two overlap. Clear headings, descriptive link text, and alt text help search engines understand a page for the same reason they help a screen reader. Accessibility work is not a ranking trick, but it rarely hurts and often tidies up what search engines read.
How do I test my site with a screen reader?
Use the one already on your device. VoiceOver is built into iPhones and Macs, and TalkBack into Android phones. Turn it on, open your home page, and try to reach your contact form by listening alone. Ten minutes will show you the main problems.
What is WCAG AA?
WCAG has three conformance levels: A, AA, and AAA. Level AA is the one most organizations aim for and most policies refer to. It includes the 4.5 to 1 contrast requirement for normal text and full keyboard access.
Can an automated checker find every accessibility problem?
No. Automated tools catch missing alt attributes, low contrast, and unlabeled fields. They cannot tell whether alt text is accurate or whether the tab order makes sense. Use a checker first, then test by hand with a keyboard.
Do I need to rebuild my site to make it accessible?
Usually not. Contrast, labels, alt text, and link wording can be fixed in place, one page at a time, starting with the pages people use most.
If you would like a second pair of eyes on your site, send us the address. We will run these checks and tell you what we find. For related reading, see what pages a small business website needs and what makes a website fast.