Top 10 Accessibility Issues in Portugal

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.

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.

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.

Certain ARIA parent roles require specific child roles to function correctly. When a parent element has an ARIA role like list, menu, tree, or tablist, it must contain children with the corresponding expected roles (e.g., listitem, menuitem, treeitem, tab). Missing these required children breaks the semantic relationship that assistive technologies depend on to communicate structure and context to users.

ARIA attributes must only be used on elements whose roles support them. When an attribute like aria-checked appears on a role that doesn't allow it, such as textbox, assistive technologies may announce contradictory or nonsensical information — or silently break accessibility for the entire component. To fix this, identify each element's role (explicit or implicit), verify which ARIA attributes that role permits, and remove or relocate any unsupported attributes.

Every form element — such as text inputs, checkboxes, radio buttons, and select menus — must have a programmatically associated label so that assistive technologies can identify and announce the purpose of each field. Without these labels, screen reader users cannot determine what information is expected, and users with motor impairments lose the benefit of a larger clickable target area that a properly associated <label> provides. Fix this by using <label> elements with matching for/id attributes, wrapping inputs in <label> elements, or using aria-label or aria-labelledby attributes.

ARIA attributes that begin with aria- must contain valid values that conform to the WAI-ARIA specification. When an ARIA attribute has a misspelled, incorrect, or nonsensical value, assistive technologies cannot interpret it properly, making the element inaccessible. To fix this, verify that every aria- attribute on your page uses a value that matches one of the allowed values defined for that specific attribute.

Every <select> element must have an accessible name so that screen reader users can understand what choice the dropdown is asking them to make. Without a programmatic label, assistive technologies cannot convey the purpose of the select field, leaving users to guess what they should choose. Fix this by associating a <label> element with the <select>, or by using aria-label or aria-labelledby to provide an accessible name.

Every non-empty <td> element in a larger data table (3 or more columns and 3 or more rows) must be programmatically associated with one or more table headers. Without these associations, screen reader users cannot understand the relationships between data cells and their corresponding row or column headers. To fix this, use <th> elements with scope attributes for simple tables, or the id and headers attributes for complex tables.

Image buttons created with <input type="image"> must have alternative text so screen reader users can understand the button's purpose. Without an accessible name, these buttons are announced without any context, leaving users unable to determine what action the button performs. Add alternative text using the alt, aria-label, or aria-labelledby attribute.