Top 10 Accessibility Issues

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.

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

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.

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.

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

Pages must not use <meta http-equiv="refresh"> with a delay of less than 20 hours, as this automatically refreshes or redirects the page without giving users control over the timing. To fix this, either remove the meta refresh entirely, increase the delay to 20 hours or more, or replace it with a server-side redirect or a JavaScript-based solution that lets users control the refresh behavior.