Skip to main

Website accessibility fixes you can make this week

Written by Tina 31. july Reading time 4 min

1. Use relative units instead of pixels

Use relative units such as rem or em instead of setting text sizes with fixed pixel values like 16px.

Font size set in pixels on the left keep the text small even when user increases their font size. On the right you can see how the website makes the text bigger.

Code example:

/* Use*/
  font-size: 1rem;

How it helps

Relative units allow text and other elements to scale properly when users zoom in, increase browser text size, or use accessibility settings on their device. This makes websites easier to read without breaking the layout.

Who this helps

Roughly 20–30% of people benefit from larger, scalable text.

2. Add “Skip to main content” link

A “Skip to main content” link is a hidden link at the top of the page that becomes visible when someone uses the keyboard. It allows users to jump past navigation menus directly to the main content.

Skip navigation link with received focus.

Code example:

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

How it helps

Without this link, keyboard and screen reader users may need to tab through dozens of navigation items on every page before reaching the actual content.

A skip link saves their time and makes navigation much less frustrating.

Who this helps

20–30% of users benefit from improved keyboard navigation.

3. Make keyboard focus visible

Keyboard focus is the visual highlight shown when someone tabs through buttons, links, or form fields using a keyboard. Many websites accidentally remove this outline with CSS.

Unvisible keyboard focus on the left and visible on the right screenshot.

How it helps

Visible focus indicators help users understand where they currently are on the page while navigating without a mouse. Without it, keyboard users can easily get lost.

Add a clear focus style in your CSS:

  :focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
  }

This takes only a few lines of CSS and immediately improves usability.

Who this helps

4. Rewrite PDFs into HTML pages

Instead of uploading important information as downloadable PDF files, publish it directly as a normal web page whenever possible.

For example:

Pdf document on the left versus Html content on the right.

Why this matters

PDFs are often difficult to use on mobile devices because they do not automatically adapt to smaller screens. Users may need to:

HTML pages are responsive, meaning the content automatically adjusts to fit phones, tablets, laptops, and larger screens. And as a bonus, HTML content is also better for SEO because it helps search engines understand and rank pages more accurately. Use PDFs mainly when you want to give people a printable document.

Who this helps

Conclusion

Small accessibility improvements can make a huge difference for real people. And most of them won’t take more than an hour to implement.

You don’t need a complete redesign or a huge budget. Simple fixes like visible keyboard focus, scalable text, or skip links can immediately make your website easier to use for many, many people — depending on the size of your audience.