Tackling the Most Common Web Accessibility Issues of 2024

Missing alternative text for images

Missing alternative text (alt text) for images was found on 54.5% of home pages. Missing alt text for images is a common accessibility issue that affects users who rely on assistive technologies (such as screen readers). Alt text provides a textual description of images and other non-textual content, allowing screen readers and other assistive technologies to convey what the image depicts to users who cannot see it. Missing alternative text for images impacts visually impaired users, those with cognitive disabilities, users in low-bandwidth situations and website SEO. (See WCAG 2.2 AA success criteria 1.1.1 Non-Text Content.)

To address missing alternative text, you can follow these remediation steps:

• Add alt text: Provide concise, descriptive alt text that conveys the same function or purpose as the image. Tools like Alt Text Decision Tree can help determine the type of image to provide proper alt text.
• Avoid redundancy: Ensure that the alt text doesn’t repeat text that is already present as text near the image. The alt text should complement the content, not duplicate it.
• Use long descriptions for complex images: For images that convey complex information, like charts or graphs, provide a longer description nearby or link to a separate page that explains the content in detail.
• Educate content creators: Provide guidelines and training for content creators on how to create effective alt text and why it is important. This is not just for your web content, but also your social media content! Check out another one of our blog posts, “How to Utilize Alt Text On Social Media.”

Missing form input labels

Missing form input labels were found on 48.6% of home pages, an increase from 45.9% in 2023. Labels are essential for understanding the purpose of form input fields, making them crucial for providing an accessible user experience. Without form labels, screen reader users may not receive the necessary context to understand what information is required in form fields, leading to input errors and increased difficulty in form completion. (See WCAG 2.2 AA success criterion 1.3.1 Info and Relationships, 2.4.6 Headings and Labels and 3.3.2 Labels or Instructions.)

To remediate an empty form input label, here are a few strategies to ensure this is fixed correctly:

• HTML attributes: Properly utilize <label></label> tags, and associate with respective form fields. Or, utilize an aria-label attribute for accessible naming.
• Visible labels: Make sure to maintain visible labels, and avoid using placeholders as substitutes for actual labels.

Empty links

Empty links were found on 44.6% of pages. Empty links are defined as hyperlinks without text or discernible content. They present a significant accessibility barrier and typically appear in web content as <a href="URL"> without accompanying text or alternative descriptions. This can cause confusion and navigation difficulties for users relying on assistive technologies, as screen readers will announce these links but cannot provide information about their functionality/purpose. (See WCAG 2.2 AA success criterion 2.2.4 Link Purpose (In Context) and 4.1.2 Name, Role, Value.)

To fix empty links, there are a few strategies you can use, including:

• Add descriptive text: Ensure all links contain descriptive text that clearly conveys the functionality/purpose of the link. If the link is not meant to be visible (e.g., for stylistic purposes), consider alternative methods, such as using buttons or other interactive elements, that are better suited to handle these actions.
• Use ARIA labels: If text labels cannot be used due to design constraints, use aria-label or aria-labelledby attributes to provide an accessible name that describes the link’s purpose.
• Remove redundant links: If a link is not functional or does not lead anywhere, remove it from the HTML code to reduce navigation confusion and clutter, particularly for screen reader users.

Empty buttons

Empty buttons were found on 28.2% of home pages, an increase from 27.5% in 2023. Empty buttons, similar to empty links, are user interface components that lack discernible text or labels, making it difficult for users, especially those relying on assistive technologies, to understand their purpose. These buttons might appear in HTML as <button></button> without appropriate labeling.

The presence of empty buttons impacts screen reader users, as screen readers will announce these buttons, but users won’t understand their function. This leads to potential confusion and an inability to interact effectively with the website or application. (See WCAG 2.2 AA success criterion 2.4.6 Headings and Labels and 4.1.2. Name, Role, Value.)

To effectively address and remediate empty buttons, consider these strategies:

• Provide visible labels: Every button should have visible text that clearly describes its function. If the design requires an icon-only button (such as a play or pause button), supplement it with appropriate text using aria-label attributes or visually-hidden text that can be read by screen readers.
• Avoid redundancy: Ensure that button labels are not redundant with nearby text or icons that already describe them. If redundancy is unavoidable, make sure additional contextual information is provided to differentiate the button's specific action.

Missing document language

From the study, 17.1% of home pages were missing a document language. Missing document language is where the language of an HTML document is not specified using the lang attribute. This is crucial for screen readers and other assistive technologies to correctly interpret and pronounce content based on linguistic rules. Screen readers rely on the lang attribute to switch language profiles for accurate pronunciation. Without it, content may be read in the default language of the screen reader, leading to mispronunciation and confusion. (See WCAG 2.2 AA success criterion 3.1.1 Language of Page and 3.1.2 Language of Parts 3.1.2.)

To address the issue of missing document language, consider the following approaches:

• Specify language in HTML: Use the lang attribute in the HTML opening tag to declare the primary language of the page. For example, <html lang="en"> indicates English. Ensure that the language codes used in the lang attribute are valid according to the IETF BCP 47 standard. 
• Identify changes in language: For content that includes multiple languages, use the lang attribute on specific elements (like paragraphs or spans) to indicate any change in language. This helps assistive technologies adjust their processing accordingly.

Let’s Work Together

Want to have a better understanding of potential accessibility issues on your organization’s website? Please reach out to our team to discuss the steps to take to ensure your website is more accessible.