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.

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.

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.

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.

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.

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.

Every <li> element must be nested inside a <ul> (unordered list) or <ol> (ordered list) parent element. Without a proper list container, screen readers cannot identify the content as a list or announce how many items it contains. To fix this, wrap all <li> elements in the appropriate <ul> or <ol> tag.

Scrollable regions that contain overflowing content must be reachable and navigable using only the keyboard. When a scrollable area lacks keyboard access, users who cannot use a mouse are unable to scroll through its content. To fix this, ensure the scrollable region itself is focusable (e.g., by adding tabindex="0") or that it contains at least one focusable element.

Interactive controls such as <button>, <a>, and elements with interactive ARIA roles must not contain other focusable or interactive elements. When interactive controls are nested, screen readers fail to announce the inner elements, creating silent tab stops that leave users unable to understand or operate the controls. To fix this, flatten your markup so that each interactive element stands on its own without nesting one inside another.

Ordered (<ol>) and unordered (<ul>) lists must only contain <li> elements as direct children (along with non-content elements like <script> or <template>). When other content elements such as <div>, <p>, or <span> are placed directly inside a list, screen readers cannot properly convey the list structure to users, making the content harder to understand. To fix this, ensure every content element inside a <ul> or <ol> is wrapped in an <li> element.