Top 10 Accessibility Issues in Spain

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.

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.

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.

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.

Styled <p> elements that visually resemble headings — through bold text, larger font sizes, or italics — must be replaced with proper heading elements (<h1> through <h6>). Screen readers and other assistive technologies rely on semantic HTML to convey document structure, and a styled paragraph provides no structural information regardless of how it looks visually. To fix this, replace any <p> element being used as a visual heading with the appropriate heading element that matches its level in the page hierarchy.

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.

ARIA attributes must be compatible with the role assigned to an element. When an element uses an ARIA attribute that is prohibited for its role, assistive technologies may ignore the attribute entirely or behave unpredictably, causing important information to be lost. To fix this, remove the prohibited attribute and find an alternative way to convey the information, such as changing the element’s role, adding visible text, or moving the attribute to a supported element.

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.

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.