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 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
- 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 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
- Blind people using screen readers
- People navigating with only a keyboard
- Users 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 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
- People with low vision
- Keyboard-only users
- Users 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. 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.