ARIA Label Checker

An ARIA label (Accessible Rich Internet Applications label) is an attribute that provides an accessible name for HTML elements, especially interactive controls. It is critical for screen reader users who cannot visually perceive the purpose of a button, link, or form field. Without proper ARIA labels, users with disabilities may find it impossible to navigate or interact with your website, leading to poor user experience and potential WCAG non-compliance. The most common ARIA labeling attributes are aria-label, aria-labelledby, and the native <label> element for form controls.

Interactive elements that must have accessible names include: <button>, <a> (with href), <input>, <select>, <textarea>, and any element with interactive ARIA roles such as role="button", role="link", role="checkbox", role="radio", role="switch", role="tab", role="menuitem", and more. Additionally, <img> elements must have an alt attribute (even if empty for decorative images). Non-interactive elements like <div> or <span> typically do not need ARIA labels unless they have been given an interactive role.

aria-label provides a direct string value as the accessible name, e.g., aria-label="Close dialog". In contrast, aria-labelledby references the ID(s) of other elements whose text content should be used as the accessible name, e.g., aria-labelledby="heading-id". Use aria-labelledby when visible text already exists on the page that can serve as the label. Use aria-label when no visible label text is available. aria-labelledby takes precedence over aria-label when both are present.

• Icon buttons without labels: Buttons containing only icons (e.g., search, close, menu) without aria-label are invisible to screen readers.
• Missing alt on images: Every <img> must have an alt attribute. Use alt="" for purely decorative images.
• Empty aria-label: An aria-label="" is treated as having no label, effectively hiding the element from assistive technology.
• Broken aria-labelledby references: Referencing an ID that doesn't exist in the DOM.
• Form inputs without <label>: Relying solely on placeholder text is not sufficient for accessibility.
• Overusing ARIA: Native HTML elements already have implicit semantics; adding unnecessary ARIA can confuse assistive technology.

Yes, this tool checks against WCAG 2.1 Success Criterion 4.1.2 (Name, Role, Value) and SC 1.1.1 (Non-text Content), which require that all interactive elements have accessible names and all images have text alternatives. It also aligns with SC 3.3.2 (Labels or Instructions) for form inputs. While this automated checker catches many common issues, a complete WCAG audit should include manual testing with actual screen readers like NVDA, JAWS, or VoiceOver, as well as keyboard navigation testing.

For an icon-only button, add aria-label with a descriptive name. For example:
<button aria-label="Search"><i class="fa fa-search"></i></button>

Alternatively, if you have hidden text inside the button using a .sr-only or visually-hidden class, that text will serve as the accessible name. If a visible tooltip or adjacent text exists, you can use aria-labelledby to point to it. For buttons that toggle state (like a hamburger menu), include the state in the label: aria-label="Open menu" and update it to aria-label="Close menu" when toggled.

Yes! An alt="" (empty alt attribute) is perfectly valid and is the correct way to mark an image as decorative. Screen readers will skip images with empty alt text, which reduces noise for users. However, if the image conveys meaningful information or is part of a link/button, it must have a descriptive alt value. Our tool distinguishes between missing alt (an error) and empty alt (generally acceptable, shown as informational).

No. The placeholder attribute is not a substitute for a proper <label> element or aria-label. Placeholder text disappears once the user starts typing, has poor color contrast in many designs, and is not consistently announced by all screen readers. Always pair form inputs with a visible <label> using the for attribute, or wrap the input inside the label. If a visible label is not desired for design reasons, use aria-label or a visually-hidden label.