You Care. Now What?

Quick wins to start making the web better.

You made it! No pop quiz. No certificate. Just knowledge, a better understanding of people, and a little voice in your head that says: hey… we could fix that.

Accessibility can feel like a mountain – especially when you’re standing at the bottom of it. But the good news? You don’t have to climb it all at once.

So let’s start small.

Here are a few things you can do right now that will make a real difference for real people.

1. Underline your links.

Blue alone doesn’t cut it, especially for colorblind people. Underlining is the clearest, most universal way to show that something is a link.

Bonus points: Avoid vague phrases like “Click here” or “Read more.” Use meaningful link text instead, like: 

  • “Read the annual report”
  • “Contact support”

2. Make sure focus is visible.

If someone can’t use a mouse, they need to see where they are on the page.
Many browsers show a faint dotted outline by default, but that’s easy to miss, especially on modern designs.

You can (and should) customize your focus style for clarity.

Here’s a focus style by accessibility advocate Erik Kroes:

:focus-visible {

  outline: 3px solid #000;

  outline-offset: 2px;

}

This makes the focused element stand out clearly, essential for keyboard users and people with low vision.

3. Fix your alt text.

Alt text should tell people what they need to know, not just what something looks like.

That means:

  • Add it when it gives useful context
  • Leave it off when an image is purely decorative
  • Don’t just describe an icon – explain what it does

Example: “A magnifying glass” isn’t helpful.
“Search” is helpful.

And if you’re using just an icon without any visible text?
Please don’t. It’s confusing for screen readers, voice users, and most humans.

Alt text isn’t about perfection. It’s about clarity and purpose.

4. Add skip links.

Keyboard users shouldn’t have to tab through your whole nav every time. A skip link lets keyboard users jump straight to where they need to go – like the main content, a login form, or a shopping basket.

Here’s how to make a “Skip to main content” link:

Step 1: Add the link at the top of the page:

<a href="#main" class="skip-link">Skip to main content</a>

Step 2: Add a target on your content, typically right above the H1:

<main id="main">

Step 3: Visually hide the link until it’s needed:

.skip-link {

  position: absolute;

  left: -9999px;

}

.skip-link:focus {

  position: static;

  left: auto;

  background: #000;

  color: #fff;

  padding: 1rem;

}

Now when a user presses Tab, that skip link appears – right when they need it.  Remember, this is about the user experience.  So ask yourself what your website is for.  You can add skip to login, to basket, etc.

5. Use real buttons and labels.

Don’t fake it with <div>s and <span>s. Use real HTML elements for interactive controls – and make sure they have proper, visible labels.

Bad:

<span onclick="submitForm()">Submit</span>

Good:

<button type="submit">Submit</button>

Screen readers understand buttons. So does every browser.
This one change can avoid a bunch of accessibility issues – and make your code better too.

6. Try the Silktide Toolbar.

You don’t have to check accessibility by hand for every page.
The Silktide Toolbar is a free browser extension that helps you:

  • Test color contrast
  • Visualize your focus order
  • See alt text in context
  • Try out a screen reader simulator
  • And a lot more

You can grab it at silktide.com/toolbar.

It’s not the only testing you need to do, but it’s a powerful sidekick for finding and fixing the basics.

Not perfect? Still progress.

Don’t wait until you can do everything.
Start here.

One fix at a time. One page at a time.
That’s how you build a web that works for everyone.

Back to top