Wheels

Accessibility on the web

  • 19 Sept 2025
  • ⌘
  • 3 min read

Intro

For sure you have confronted with difficult-to-navigate websites, overflowed text, badly categorized navigation bars, and pages not showing the most important information easily. Couldn’t find how to book a table for a restaurant, how much the tickets cost for a museum, or look for information in your local municipality can also be a nightmare (in most countries).

The public internet was available since the early 90s, and the dot-com bubble already exploded more than 20 years ago. Why accessibility patterns are not still applied on most websites is a mystery. In general, from the private sector to the public, there seems to not be as much interest in this topic as there is. Even though public institutions have their decorative accessibility logo on their footer, it isn’t really helping.

According to the Americans with Disabilities Act: “Inaccessible web content means that people with disabilities are denied equal access to information. An inaccessible website can exclude people just as much as steps at an entrance to a physical location.” The internet should close the gap for people with disabilities and not the other way around.

Types of dissabilities

Cognitive Accessibility

Visual Impairment

Hearing Disabilities

Main Points

  1. Color Contrast: If the contrast between the text and the background isn’t enough, some people may not be able to read it.
  2. alt text: Alternative text on images is crucial to let people with disabilities know what the image is showing. It is like when in a podcast, the host is explaining to you something visual.
  3. Caption on videos: This one is more popular. Even the traditional TV channels have it and it is more widely adopted.

Tools

Nowadays, we have tools to check the accessibility on the most used apps, from Microsoft Word, Chrome-based browsers, JS Frameworks, and also deployment services like Vercel have accessibility.

Less Known

Main Landmark

According to one of Deque University Guidelines “Document should have one main landmark”, you should ensure that there are navigation points.

It is best practice to use both HTML 5 and ARIA landmarks. For example, add an ARIA element role="banner" inside the <header> element of HTML 5:

<header role="banner">
   <p>Put company logo, etc. here.</p>
</header>
<nav role="navigation">
   <ul>
      <li>Put navigation here</li>
   </ul>
</nav>
<main role="main">
   <p>Put main content here.</p>
</main>
<footer role="contentinfo">
   <p>Put copyright, etc. here.</p>
</footer>

Applying ARIA landmarks ensures that screen reader users can navigate your page in a more easy way.