Quick Wins for Web Accessibility

Web accessibility is about making sure everyone can comfortably use your site, regardless of how they navigate or what their abilities might be. And good news: you don't have to redesign everything from scratch. Below are three simple tweaks that you can make right now to help a lot of users: keyboard-friendly navigation, proper color contrast, and adjustable font sizes. We'll also talk briefly about ARIA attributes for those times when basic HTML needs a little extra help.

1. Make Keyboard Navigation a Breeze

Some people rely on a keyboard (or similar assistive devices) to get around your site. If your buttons and links aren't focusable via Tab or clickable with Enter or Space, they can't interact with your content at all. In most browsers, pressing Enter or Space triggers the same action as a mouse click on a focused element.

Try It Out

Press Tab to jump between the elements below. Notice how the one that's actually a <div> doesn't highlight or focus by default—so it's basically invisible to keyboard users.

Inaccessible Div

1// Non-accessible <div> used like a button:
2<div onClick={() => alert("Clicked!")}>
3  Inaccessible Div
4</div>
5
6// Proper accessible button:
7<button onClick={() => alert("Clicked!")}>
8  Accessible Button
9</button>

If You Really Must...

If you absolutely have to use a non-button element like a <div>, add a role="button" and a tabIndex="0" to make it keyboard-accessible. However, using a real <button> is still better because you automatically get proper keyboard focus, built-in behavior, and broader assistive technology support.

1<div 
2  onClick={() => alert("Clicked!")}
3  role="button"
4  tabIndex={0}
5>
6  Pseudo-Button
7</div>

2. Boost Your Color Contrast

If your text's color is too close to its background, people with low vision or color blindness might find it impossible to read. Fortunately, fixing this can be as simple as picking colors that provide stronger contrast.

Low contrast text that's hard to read

High contrast text that's easy to read

Check Your Ratios

Aim for at least a 4.5:1 contrast ratio for normal text. Tools like WAVE and Lighthouse will flag any areas where your contrast is too low.

3. Resize Fonts

Everyone's eyes are different, and not everyone is viewing your site on a giant screen. Allowing users to increase or decrease text size can greatly improve readability.

It works on my machine.

1const [fontSize, setFontSize] = useState(16);
2const increaseSize = () => setFontSize(prev => Math.min(50, prev + 2));
3const decreaseSize = () => setFontSize(prev => Math.max(10, prev - 2));
4
5return (
6  <div>
7    <button onClick={increaseSize}><ArrowUpIcon /></button>
8    <div style={{ fontSize: `${fontSize}px` }}>
9      It works on my machine.
10    </div>
11    <button onClick={decreaseSize}><ArrowDownIcon /></button>
12  </div>
13);

Use Flexible Units

If possible, use em or rem units so your text scales more gracefully. That way, if someone zooms the whole page, everything stays nicely proportioned.

Extra Tips Worth Trying

Add Alt Text to Images: Use an alt attribute to describe images. If an image is purely decorative, consider leaving alt="" empty so screen readers skip it.
Label Your Forms: Each input should have a matching <label>. Also consider aria-invalid or aria-describedby to help screen readers announce errors.
Announce Live Updates: If content updates on its own (like chat messages or notifications), use aria-live so screen readers know to read out changes.