WCAG 4.1.2 — Button Has No Accessible Name

Who Is Affected

Screen reader users, voice control software users, users with cognitive disabilities who rely on clear labeling, and keyboard navigation users who need to understand button functionality before activating controls.

What This Means

Every button on your website must have an accessible name that describes its function. This name is what screen readers announce when users encounter the button. Common failures include:

• Icon-only buttons with no text or aria-label
• Image buttons with missing or empty alt attributes
• Buttons containing only non-text content like symbols or emojis
• Custom buttons built with div or span elements that lack proper labeling

When buttons have no accessible name, assistive technology users encounter silent elements or hear meaningless descriptions like "button" with no context about what the button does.

Fix: CMS / Theme

This typically occurs when your theme includes icon buttons for social media, search, menu toggles, or other common functions without proper labeling.

For Joomla:

1. Go to Extensions → Templates → Your Template → Edit Files
2. Locate template files containing button elements (often in header.php, navigation, or module files)
3. Add descriptive text or aria-label attributes:

   <!-- Before -->
   <button class="search-toggle"><i class="icon-search"></i></button>
   
   <!-- After -->
   <button class="search-toggle" aria-label="Open search form"><i class="icon-search"></i></button>
   

4. Save changes and clear Joomla cache

For WordPress:

1. Go to Appearance → Theme Editor or access via FTP
2. Check header.php, navigation menus, and widget files for unlabeled buttons
3. Add appropriate labels using one of these methods:

   <!-- Method 1: aria-label -->
   <button aria-label="Open mobile menu"><span class="hamburger-icon"></span></button>
   
   <!-- Method 2: visually hidden text -->
   <button><span class="screen-reader-text">Close dialog</span><i class="close-icon"></i></button>
   

4. Update the theme and test with a screen reader or browser inspector

Fix: Content Editor

When individual page content contains unlabeled buttons:

1. Edit the page containing the problematic button
2. If using a visual page builder, look for button settings or advanced options
3. Add descriptive text in one of these ways:
   • Visible text: Change the button to include descriptive text alongside or instead of icons
   • Alt text field: If your CMS provides an alt text or accessibility field, use it
   • Custom HTML: Switch to HTML view and add aria-label="Description of action"

Example fixes:

• Change "→" to "Continue to payment"
• Change "🔍" to "Search products"
• Change "X" to "Close notification" or add aria-label="Close notification"

Standard Reference

WCAG 2.1 Success Criterion 4.1.2 — Name, Role, Value, Level A

For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.

• W3C Understanding SC 4.1.2
• WCAG Technique ARIA6 — Using aria-label for accessible name
• WCAG Technique ARIA16 — Using aria-labelledby
• WCAG Technique G91 — Providing link text that describes purpose
• WCAG Technique H91 — Using HTML form controls and links
• WCAG Failure F68 — Failure due to user interface control not having accessible name