How to Fix Accessibility Issues on Your Website: A Practical Guide to the Top 10 Problems

WCAG criterion: 2.1.1 Keyboard (Level A)

How to Find It

Put your mouse aside and try to navigate your entire site using only the keyboard. Every interactive element should be reachable with Tab, and you should see a visible focus indicator at all times. If you get stuck inside a component and cannot Tab out, you have a keyboard trap (2.1.2).

How to Fix It

Use native elements first. A is keyboard-accessible and announces its role automatically. A

does none of that.

Submit

Submit

If you absolutely must use a non-interactive element, add tabindex="0", a role, and keyboard event handlers:

     tabindex="0"

     onclick="submitForm()"
     onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();submitForm();}">
  Submit

And never remove the focus outline globally:

/ Bad — hides focus for everyone /
*:focus {
  outline: none;
}

/ Good — custom focus style that is still visible /
*:focus-visible {
  outline: 3px solid #1a73e8;
  outline-offset: 2px;
}

5. Missing Page Title

What It Is

The

In a React app, update the title on navigation:

import { useEffect } from 'react';

function PricingPage() {
  useEffect(() => {
    document.title = 'Pricing Plans — AccessGuard';
  }, []);

  return 
...
;

}

For frameworks like Next.js or Astro, use the built-in or frontmatter title fields so this is handled automatically.

6. Missing Language Attribute

What It Is

The lang attribute on the element tells screen readers which language rules to use for pronunciation. Without it, a screen reader set to English might attempt to read French content with English phonetics, producing unintelligible audio.

WCAG criterion: 3.1.1 Language of Page (Level A)

How to Find It

View the page source and check the opening tag:

const lang = document.documentElement.getAttribute('lang');
if (!lang) console.warn('Missing lang attribute on ');

How to Fix It

Add the correct BCP 47 language tag:

If a section of the page is in a different language than the rest, use lang on that element:

The French word for hello is bonjour.

7. Empty Links and Buttons

What It Is

A link or button that contains no text and no accessible name is announced by a screen reader as simply "link" or "button," giving the user zero context. This is extremely common with icon-only buttons that rely solely on a visual icon.

WCAG criterion: 4.1.2 Name, Role, Value (Level A), 2.4.4 Link Purpose (Level A)

How to Find It

document.querySelectorAll('a, button').forEach(el => {
  const text = el.textContent.trim();
  const ariaLabel = el.getAttribute('aria-label');
  const ariaLabelledby = el.getAttribute('aria-labelledby');
  const title = el.getAttribute('title');
  const imgAlt = el.querySelector('img[alt]')?.alt;

  if (!text && !ariaLabel && !ariaLabelledby && !title && !imgAlt) {
    console.warn('Empty interactive element:', el);
  }
});

How to Fix It

For icon-only buttons, add aria-label:

For links that wrap only an image, ensure the image has alt text:

Notice that the SVG icon in the button example gets aria-hidden="true" to prevent the screen reader from trying to announce the SVG markup itself.

8. Missing Skip Navigation

What It Is

Keyboard users and screen reader users must Tab through every navigation link on every page load before reaching the main content. A skip navigation link lets them jump straight past the header.

WCAG criterion: 2.4.1 Bypass Blocks (Level A)

How to Find It

Load the page and press Tab once. If the first focusable element is not a "Skip to content" link, the mechanism is missing.

How to Fix It

Add a visually hidden link as the first element inside that becomes visible on focus:

  Skip to main content
  
...

  

    ...
  

.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 0.75rem 1.5rem;
  background: #1a1a1a;
  color: #ffffff;
  font-size: 1rem;
  z-index: 1000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

This link is invisible during normal browsing but slides into view the moment a keyboard user presses Tab, giving them a one-key shortcut to the main content.

9. Inaccessible Custom Components

What It Is

Custom dropdown menus, modals, tabs, and accordions built from generic

     aria-modal="true"

     aria-labelledby="modal-title"
     id="my-modal">
  
Confirm your subscription

  
You will be billed monthly. Cancel any time.

  Confirm
  Cancel

function openModal() {
  const modal = document.getElementById('my-modal');
  modal.removeAttribute('hidden');

  // Move focus into the modal
  modal.querySelector('#modal-confirm').focus();

  // Trap focus inside the modal
  modal.addEventListener('keydown', trapFocus);
}

function trapFocus(event) {
  const modal = document.getElementById('my-modal');
  const focusable = modal.querySelectorAll(
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
  );
  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  if (event.key === 'Escape') {
    closeModal();
    return;
  }

  if (event.key === 'Tab') {
    if (event.shiftKey && document.activeElement === first) {
      event.preventDefault();
      last.focus();
    } else if (!event.shiftKey && document.activeElement === last) {
      event.preventDefault();
      first.focus();
    }
  }
}

function closeModal() {
  const modal = document.getElementById('my-modal');
  modal.setAttribute('hidden', '');
  modal.removeEventListener('keydown', trapFocus);
  // Return focus to the element that opened the modal
  document.getElementById('open-modal-btn').focus();
}

  
Confirm your subscription

  
You will be billed monthly. Cancel any time.

  Confirm
  Cancel



  Subscribe

const landmarks = ['header', 'nav', 'main', 'footer', 'aside'];
landmarks.forEach(tag => {
  const count = document.querySelectorAll(tag).length;
  console.log(<${tag}>: ${count} found);
});

...

...

...

...

...



...

...