Top 10 Accessibility Issues

Text elements must have sufficient color contrast between the foreground text and the background behind it. WCAG 2.1 (AA) requires a contrast ratio of at least 4.5:1 for normal-sized text and 3:1 for large text. To fix violations, adjust your text color, background color, or both until the required contrast ratio is met.

All page content should be wrapped inside landmark regions such as <header>, <nav>, <main>, and <footer>. When content sits outside these landmarks, screen reader users may struggle to find it or understand its purpose. To fix this, ensure every visible element on the page (except skip navigation links) is contained within an appropriate landmark element.

Every link on a page must have text that can be recognized by assistive technologies such as screen readers. Links without discernible text — whether due to missing inner text, empty alt attributes on image links, or hidden content — leave users unable to determine where the link goes or what it does. To fix this, ensure every link has visible text content, a meaningful aria-label, aria-labelledby attribute, or an image with descriptive alt text inside it.

Touch targets that are smaller than 24 by 24 CSS pixels and don’t have enough spacing from neighboring targets can be extremely difficult for many users to activate accurately. To fix this, ensure every interactive element is at least 24 by 24 CSS pixels in size, or if a target is smaller than that, provide enough surrounding space so that a 24-pixel-diameter circle centered on the target doesn’t overlap with any other target or its spacing circle.

Interactive elements that have a visible text label must include that same text within their accessible name. When an aria-label or aria-labelledby attribute overrides the default accessible name, it must still contain the visible label text so that speech input users can activate the control by saying what they see. To fix this, ensure the accessible name includes the full visible text, ideally starting with it.

Heading levels must increase sequentially — an h1 should be followed by an h2, not an h3 or h4. Skipping heading levels breaks the logical document outline that assistive technology users rely on to understand and navigate page content. To fix this, restructure your headings so they form a proper hierarchy without gaps.

Links within blocks of text must be visually distinguishable from surrounding text without relying solely on color. If a link lacks a non-color visual indicator like an underline, border, or distinct font style, it must have at least a 3:1 color contrast ratio against the surrounding text. When only contrast is used, manual testing is also needed to confirm the link receives a distinct visual style on focus and hover.

Every element that can receive keyboard focus must have a role that clearly communicates its purpose to assistive technologies. When a focusable element lacks a role or has an inappropriate one (such as a generic <div> or <span> with tabindex="0" but no semantic meaning), screen reader users will not understand what the element is or how to interact with it. Fix this by using native HTML interactive elements whenever possible, or by assigning a valid ARIA role attribute to custom widgets.

Every <img> element must have alternative text so that screen readers can convey the image’s meaning to users who cannot see it. You can provide alternative text using the alt attribute, aria-label, or aria-labelledby. Decorative images that convey no information should use an empty alt attribute (alt="") to tell assistive technology to skip them.

Setting a tabindex attribute to a value greater than zero creates an unpredictable tab order that can disorient users and make elements appear to be skipped entirely. To fix this, either change the value to tabindex="0" to place the element in the natural tab order, remove tabindex entirely and restructure the HTML so elements appear in the desired sequence, or use tabindex="-1" with JavaScript to programmatically manage focus.