Website Accessibility Fixes You Can Make This Week

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.

Code example:

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

How relative units help

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

• People with low vision
• Older adults with worsened eyesight

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.

Code example:

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

How “Skip to main content” link 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

• Blind people using screen readers
• People navigating with only a keyboard
• People with motor disabilities who cannot use a mouse

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.

How visible keyboard focus 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: 0.2rem solid blue !important;
  outline-offset: 0.15rem !important;
  box-shadow: 0 0 0 0.5rem yellow !important;
  text-decoration: none !important;
}

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

Who this helps

• People with low vision
• Keyboard-only users
• People with motor impairments
• Power users who prefer keyboard navigation

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:

• Menus, catalogs
• Pricing lists
• Reports
• Privacy Policies
• Guides

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:

• Zoom in
• Scroll horizontally
• Pinch and drag around the page to read the text

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

• Screen reader users
• People visiting your site on mobile
• Everyone who doesn’t want to struggle with zooming and scrolling

Conclusion

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

You don’t need a complete redesign or a huge budget. 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.