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. Every ARIA role — whether explicitly set via the role attribute or implicitly derived from the HTML element — defines a specific set of required, supported, and inherited attributes. Any ARIA attribute outside those categories should be removed, relocated to an appropriate element, or the element’s role should be changed to one that supports the intended 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 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.

The <meta name="viewport"> element must not include user-scalable="no", and the maximum-scale parameter must not be set to a value less than 2. These settings prevent or limit zooming, which is essential for users with low vision who rely on pinch-to-zoom or screen magnification to read content. Remove user-scalable="no" and ensure maximum-scale is at least 2 (or omit it entirely) to allow users to resize content up to at least 200%.