Top 9 Accessibility Issues

Every element that can receive keyboard focus must have a role that clearly communicates its purpose to assistive technologies. When a focusable element lacks a role or has an inappropriate one (such as a generic <div> or <span> with tabindex="0" but no semantic meaning), screen reader users will not understand what the element is or how to interact with it. Fix this by using native HTML interactive elements whenever possible, or by assigning a valid ARIA role attribute to custom widgets.

When an image’s alt text duplicates the visible text right next to it — such as inside the same link or button — screen readers announce the identical content twice, creating a confusing and redundant experience for blind and deafblind users. To fix this, set the image’s alt attribute to an empty string (alt="") when adjacent text already conveys the same information, or ensure the alt text provides genuinely different, useful information.

Not every WAI-ARIA role can be applied to every HTML element. When an element is given a role that isn’t allowed for that element type, assistive technologies may report confusing or nonsensical information, breaking the user experience. To fix this, ensure that any role you assign to an HTML element is permitted for that element according to the ARIA in HTML specification.

Empty heading elements confuse screen reader users by announcing a heading with no content, disrupting their ability to understand the page’s structure. To fix this, ensure every <h1> through <h6> element contains meaningful, accessible text — and remove heading markup from any element that isn’t actually a heading.

The <meta name="viewport"> element can prevent users from zooming a page when it includes user-scalable="no" or a restrictive maximum-scale value. To ensure people with low vision can magnify content to a comfortable level, remove user-scalable="no" and set maximum-scale to at least 5 (500%).

Table header elements (<th>, or elements with role="rowheader" or role="columnheader") must contain visible text that describes the purpose of their row or column. Empty table headers fail to communicate meaning to both sighted users and screen reader users. If a cell isn’t actually a header, use a <td> element instead.

When an element is given role="none" or role="presentation", it should be removed from the accessibility tree so assistive technologies ignore it. However, adding global ARIA attributes or making the element focusable creates a conflict that prevents this removal, leaving the element unexpectedly exposed to screen readers. To fix this, remove any global ARIA attributes and ensure the element is not focusable.

When a data table’s summary attribute and <caption> element contain identical text, screen reader users hear the same information repeated without gaining any additional understanding of the table’s structure or purpose. To fix this, ensure the <caption> provides a visible title for the table while the summary attribute offers a distinct description of how the table is organized.