Buttons must have discernible text

Critical4.1.2AXE · button-nameDocs

Pages 1on W3C BAD Demo

Elements 1

Open 32d 14hsince 7/14/2026

First seen 7/14/2026

Last seen 7/14/2026

Every button must have text content or an accessible name that describes its purpose.

Scanner evidence

Engine: axeRule: button-nameWCAG: 4.1.2

Ensure buttons have discernible text

How to fix

Fix any of the following: Element does not have inner text that is visible to screen readers aria-label attribute does not exist or is empty aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty Element has no title attribute Element does not have an implicit (wrapped) <label> Element does not have an explicit <label> Element's default semantics were not overridden with role="none" or role="presentation"

Affected pages (1)

https://www.w3.org/WAI

Affected elements (1)

https://www.w3.org/WAI1

<button class="ytmVideoInfoLink ytmVideoInfoChannelAvatar">
  <img
    class="ytCoreImageHost ytmVideoInfoChannelLogo ytCoreImageFillParentHeight ytCoreImageFillParentWidth ytCoreImageContentModeScaleAspectFill"
    alt="thumbnail-image"
    style="background-color: transparent;">
</button>

iframe > .ytmVideoInfoChannelAvatar

on https://www.w3.org/WAI

Why this matters

Buttons need visible text, aria-label, or aria-labelledby.

WCAG Technique ARIA14

AI guidance

Remediation suggestions generated by AI. Review before applying.

**Why this matters:** Screen reader users cannot identify the button's purpose, making it impossible to understand what action it performs or navigate the interface effectively.

**Before:**
```html
<button class="ytmVideoInfoLink ytmVideoInfoChannelAvatar">
  <img class="ytCoreImageHost ytmVideoInfoChannelLogo ytCoreImageFillParentHeight ytCoreImageFillParentWidth ytCoreImageContentModeScaleAspectFill" alt="thumbnail-image" style="background-color: transparent;">
</button>
```

**After:**
```html
<button class="ytmVideoInfoLink ytmVideoInfoChannelAvatar" aria-label="View channel">
  <img class="ytCoreImageHost ytmVideoInfoChannelLogo ytCoreImageFillParentHeight ytCoreImageFillParentWidth ytCoreImageContentModeScaleAspectFill" alt="thumbnail-image" style="background-color: transparent;">
</button>
```

**Notes:** Since this is an icon-only button (image without visible text), `aria-label` provides the accessible name. If the button's purpose varies contextually, use a more specific label like "View [Channel Name] channel" or consider adding visible text alongside the icon for all users. WCAG 4.1.2 requires all interactive elements to have a programmatically determined name.

Activity (0)

No activity yet.