Top 10 Accessibility Issues in Spain

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.

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.

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.

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.

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

Every element with a role attribute must use a valid ARIA role value. Invalid roles — caused by typos, made-up values, or the use of abstract roles — prevent assistive technologies from understanding an element's purpose. To fix this, ensure every role value exactly matches a defined, non-abstract role from the WAI-ARIA specification.

Elements with ARIA roles must include all required ARIA attributes for those roles. When a required attribute is missing, assistive technologies cannot communicate the widget's state to users, making the element effectively unusable. To fix this, identify the ARIA role on the element and add any required state or property attributes as defined in the WAI-ARIA specification.