Accessible Website Design: 10 Fixes You Can Ship This Week

Website accessibility can sound like a project that needs a new budget, a specialist team, and several months of meetings. Sometimes a larger review is exactly what’s needed. But you don’t have to wait for a full redesign to make your site easier for more people to use.

Here are 10 practical fixes a nonprofit or public-sector team can start this week. Choose a few high-traffic pages first (such as a donation page, service directory, event registration, or contact form) and work through them one at a time.

These steps are useful improvements, not a guarantee of conformance or legal compliance. Requirements can vary by organization and context. For a shared reference point, consult the W3C’s WCAG 2.2 quick reference.

1. Write useful alt text for important images

Alt text gives people using screen readers a text alternative to an image. Describe the information or purpose the image adds, not every visible detail.

For example, “Volunteers sorting donated winter coats” is more useful than “people in a room.” If an image is decorative and adds no information, it can usually be marked with empty alt text so assistive technology can skip it.

Start with the images on your most important pages. For a complex chart, add the key takeaway or data in nearby page text rather than trying to pack everything into a short image description. The W3C’s image tutorial explains how to handle informative, decorative, and functional images.

2. Make link text explain where it goes

Links are easier to use when people can understand their purpose without guessing. Replace repeated “Read more,” “Learn more,” and “Click here” links with specific descriptions, such as “Read the eligibility rules for rental assistance.”

This matters especially when someone navigates by a list of links using a screen reader. Check cards and resource lists, where several identical links can make destinations hard to distinguish.

3. Check text and interface contrast

Text that looks clear on your office monitor may be difficult to read on a phone, in bright light, or for someone with low vision. WCAG 2.2’s minimum contrast guidance is 4.5:1 for normal text and 3:1 for large text.

Use a contrast checker on your body text, buttons, links, form hints, and text placed over images. Don’t stop at the brand’s primary colors: error messages and hover states need attention too. If changing a color is awkward, try a darker shade or a lighter background instead of relying on thinner, smaller text.

4. Use headings to show the page’s structure

Headings are more than larger or bolder text. They give people a way to scan and navigate the page, including by jumping between headings with assistive technology.

Use a clear page title, then organize sections with heading levels in order: an H1 for the page title, H2s for main sections, and H3s for subsections within those sections. Don’t pick a heading level just because its default font size looks right; adjust the visual styling separately.

In your content editor, check that text styled as a heading is actually marked up as one. Also make sure the heading describes what follows. “Application requirements” is more helpful than “Important information.”

5. Give every form field a persistent label

A placeholder such as “Enter your email” can be useful as an example, but it shouldn’t be the only label for a field. It may disappear once someone starts typing, and it may not be announced clearly by assistive technology.

Give each input a visible, programmatically associated label, such as “Email address.” Add instructions where they help someone complete the form correctly: explain required fields, date formats, file types, or character limits. For related radio buttons or checkboxes, group them under a shared question.

Review the forms that support essential tasks first: signing up for services, registering for an event, making a donation, or contacting your organization.

6. Explain form errors in words, and help people recover

A red border alone doesn’t tell everyone what went wrong. When a form submission fails, identify the field and explain what needs to change, for example, “Enter a valid email address.”

Where practical, put a short error summary near the top of a longer form and link each message to the field that needs attention. Preserve what the visitor has already entered. Then test the form by submitting it with a missing required field and with an invalid entry. The goal is not just to point out a problem, but to make the next step clear.

7. Make keyboard focus visible

Some visitors navigate without a mouse. They use the Tab key to move through links and controls, so they need to see where they are on the page.

Press Tab and Shift+Tab to move around your site. If the focus indicator is missing or too faint, update the styling so the active link or control has a clear outline or other visible treatment. Avoid removing the browser’s default outline unless you replace it with an equally visible indicator.

Also look for fixed headers, cookie banners, or other elements that cover the focused control. WCAG 2.2 includes guidance on keeping focused content from being obscured.

8. Test the main tasks with a keyboard

Keyboard testing is a simple way to find problems that a visual review can miss. Put your mouse aside and try a few real tasks: open the menu, find a service, complete a form, or make a donation.

Use Tab and Shift+Tab to move through the page. Activate links and buttons with the keyboard, and check that menus or dialogs can be opened and closed. Make sure focus follows a sensible order and doesn’t get trapped in one part of the page.

If a key interaction can’t be completed without a mouse, make a note of the page and the exact step where you got stuck. That gives your developer a useful place to begin.

9. Add a “Skip to main content” link

Most pages repeat the same header and navigation. A skip link lets keyboard users bypass those repeated items and move straight to the main content.

The link is often visually hidden until someone tabs to it, then appears near the top of the page. When activated, it should move focus to the main content, not just scroll the screen and leave keyboard focus behind. Test it on several page types, especially if your site uses different templates.

10. Check mobile controls and text resizing

Small controls and layouts that break when zoomed can make important tasks difficult on a phone or for someone enlarging text. Check menu buttons, form controls, and other frequent touch targets. WCAG 2.2 sets a minimum target-size criterion with exceptions; when space allows, larger controls are often easier for people to tap.

Also zoom in and widen and narrow your browser window. Check that text remains readable, forms still work, and content isn’t cut off or hidden behind sticky navigation. It’s a quick way to catch layout issues before someone else has to report them.

A manageable first week

You don’t need to fix every page at once. Pick a few pages tied to important visitor tasks, make a short issue list, and work through the changes. Automated accessibility tools can help identify some problems, but they won’t tell you whether a form makes sense with a keyboard or whether an error message is helpful. Combine tool checks with hands-on testing.

For a broader view of how we think about accessibility in web projects, see Snowberry Media’s approach to website accessibility. If your team is planning a larger set of changes, our website development services include accessibility as part of building a practical, usable site.