Accessible web design: how to build inclusive sites

An accessible website is one anyone can use: someone who can't see the screen well, someone who browses with the keyboard only, someone who uses a screen reader, or someone with an injured hand using their phone with the other. In Costa Rica, about 676,000 adults, 17.2%, live with some disability, according to INEC's 2023 National Disability Survey (Observador.cr). The share is much higher among older adults, who are also customers with buying power.

The good news: most accessibility improvements are simple, don't change the design and make the site easier for everyone. This guide explains what the standards ask for, how to check your site in half an hour and what to fix first.

Why accessibility is good for your business

• More customers. If someone can't complete your form or your cart, they buy elsewhere.
• A better experience for everyone. Good contrast, big buttons and clear text also help people reading in the sun, in a hurry or on a small phone.
• Better SEO. Google reads your site much like a screen reader does: it benefits from ordered headings, alt text on images and descriptive links. We explain it in the SEO guide.
• Less legal risk. Costa Rica's Law 7600 on Equal Opportunities for People with Disabilities establishes the right of access to information and communication. There's no mandatory technical standard for private sites yet, but the international reference is WCAG. If you also sell to the United States or the European Union, the ADA and the European Accessibility Act set stricter expectations.

What the WCAG guidelines are

The Web Content Accessibility Guidelines (WCAG) are the W3C's international standard. The current version is 2.2, published in 2023 (official overview). They're organized in three levels:

• A: the bare minimum (for example, that everything can be used with a keyboard).
• AA: the recommended level for commercial and public sites, and the one most laws around the world require.
• AAA: the most demanding level, for specialized sections.

And they rest on four principles: content must be perceivable (it can be seen, heard or read), operable (it can be used with different methods), understandable (it makes sense and behaves predictably) and robust (it works with different technologies, including screen readers).

Check your site in 30 minutes

You don't need to be a developer to find the most common problems:

1. Browse with the keyboard only. Use Tab to move and Enter to activate. Can you reach the menu, the form and the buy button? Can you always see where the focus is? If you get stuck or the focus disappears, there's a problem.
2. Zoom to 200%. All text should stay readable and uncut, and no horizontal scroll bar should appear.
3. Check the contrast. Light gray text on white is the most frequent mistake. WCAG AA asks for a ratio of 4.5:1 for normal text and 3:1 for large text.
4. Look at the images. Those that communicate something (a product, a chart) need alt text; decorative ones don't.
5. Submit a form with errors. Does it tell you which field is wrong and why, in words, and not just with a red color?
6. Run an automated tool. WAVE or Lighthouse's accessibility audit (in Chrome) flag many problems in seconds. Tools only catch part of it; the manual tests above complete the picture.
7. Listen to your page. Turn on VoiceOver (iPhone and Mac) or TalkBack (Android) and go through your home page. It's the fastest way to understand how a blind person experiences it.

What to fix first

Structure and text

• A single H1 per page and subheadings in order (H2, then H3), used for their meaning and not for font size.
• Links that say where they go. "See online store prices" instead of "click here".
• Plain language, short sentences and the page's language declared (English, or Costa Rican Spanish on the Spanish pages), so the screen reader pronounces it correctly.

Images and media

• Useful alt text: describe what matters about the image in its context ("Red cotton T-shirt, front view"), without starting with "image of".
• Decorative images with empty alt text (alt="") so the reader skips them.
• Captions on videos and transcripts for audio.
• Nothing that flashes more than three times per second.

Color and reading

• Enough contrast in text, buttons and form fields.
• Don't communicate with color alone: an error in red also needs a message and an icon.
• Body text of at least 16 px that can be enlarged.

Keyboard and focus

• Everything you can do with a mouse must be possible with a keyboard: menus, carousels, pop-ups and date pickers.
• Visible focus on every element (the outline that shows where you are). Never remove it in the design.
• A "Skip to content" link at the top of the page helps keyboard and screen reader users.

Forms

• Every field with its visible label (placeholder text inside the field doesn't count as a label).
• Error messages next to the field, explaining how to fix it.
• Show which fields are required and use the right field type (email, phone), so phones show the right keyboard.
• Enough time to complete processes such as payment, or the option to extend it.

A technical detail

Use meaningful HTML: buttons as buttons (<button>), lists as lists and forms with <label>. ARIA attributes (like aria-label or aria-expanded) are for custom components, but they don't replace correct HTML: misused ARIA makes accessibility worse.

Accessibility on phones

In Costa Rica most visits come from a phone, so mobile accessibility matters as much as desktop: buttons of at least 44 × 44 pixels, spaced apart, text that enlarges without breaking the layout and short forms. We go further in the responsive web design guide.

How we do it at WEB.CR

On the sites we build, including this one, every form has visible labels, text error messages, visible focus and full keyboard navigation, and we check the palette's contrast before approving the design. It costs very little to do from the start and a lot more to fix afterwards; that's why accessibility is part of visual design, not an extra (see how visual design transforms a website). We also offer accessibility audits for existing sites.

Resources

• WCAG 2.2 overview (W3C)
• WAVE, WebAIM's free evaluator
• Costa Rica's Law 7600 (in Spanish)
• The National Council for People with Disabilities (CONAPDIS), Costa Rica's national reference on inclusion.

Want to know how accessible your site is today? Book a call and we'll review it together.