Top 10 Accessibility Issues in Spain

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.

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 <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.

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.

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.

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.

The <aside> element (or any element with role="complementary") must be placed at the top level of the document, not nested inside another landmark region. To fix this, move the <aside> or role="complementary" element outside of any containing landmarks such as <main>, <nav>, <header>, <footer>, or other sectioning elements with landmark roles.

Certain ARIA roles must be nested inside specific parent roles to function correctly. When a role like listitem appears outside its required parent (e.g., list), assistive technologies cannot interpret the relationship between elements, breaking the intended user experience. Fix this by ensuring every ARIA role that requires a parent is wrapped in an element with the correct parent role, either in the DOM or via aria-owns.