Top 10 Accessibility Issues in Portugal

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.

The recommended practice is to keep all content, excluding skip links, in designated areas such the header, nav, main, and footer.

When used as links, link text and alternative text for images must be recognizable by screen readers, have no duplicate labels, and be focusable.

Touch targets must have a minimum dimension of 24 by 24 CSS pixels. The greatest unobscured area of the touch target is used to calculate size. The target must be at least 24 CSS pixels distant from any other touch target if its size is insufficient.

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.

The visible label of interactive items labeled through their content must be included in their accessible name.

The h1 through h6 element tags must be in a sequential order for headings to be in a correct logical order.

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.

All list items (li) must have ul or ol parent elements.

Landmarks must have an unique role or role/label/title (i.e. accessible name) combination.