Top 10 Accessibility Issues in Portugal

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.

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.

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.

Buttons without discernible text are invisible to screen reader users, making it impossible for them to understand what a button does or where it leads. Every <button> element and any element with role="button" must have an accessible name provided through visible text content, an aria-label attribute, an aria-labelledby reference, or a title attribute.

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.

When an image's alt text duplicates the visible text right next to it — such as inside the same link or button — screen readers announce the identical content twice, creating a confusing and redundant experience for blind and deafblind users. To fix this, set the image's alt attribute to an empty string (alt="") when adjacent text already conveys the same information, or ensure the alt text provides genuinely different, useful information.

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.