[A11Y] [High] Icon buttons missing accessible names for screen readers #1560

Accessibility Issue: Icon Buttons Missing Accessible Names

WCAG Level: A
Severity: High
Category: Form Accessibility / ARIA Usage

Issue Description

Several mat-icon-button elements contain only icons without accessible names. Screen readers cannot convey the purpose of these buttons to users. While some buttons have matTooltip which provides visual hover text, tooltips are not always exposed to assistive technology.

User Impact

• Affected Users: Screen reader users, voice control users
• Severity: Users cannot understand the purpose of icon-only buttons, making the application unusable for critical navigation functions

Violations Found

File: src/app/shared/components/navigation/top-menu/top-menu.component.html

Line: 32

<button tabindex="7" mat-icon-button [matMenuTriggerFor]="topMenu">
  <img class="rtl-log-top" alt="RTL Logo" src="assets/images/RTL-Horse-BY.svg">
  <mat-icon class="rtl-logo-dropdown color-white">arrow_drop_down</mat-icon>
</button>

Issue: Menu trigger button lacks accessible name - the image has alt text but the button itself needs an aria-label

File: src/app/shared/components/horizontal-scroller/horizontal-scroller.component.html

Lines: 3-4, 10-11

<button mat-icon-button color="primary" type="button" tabindex="1" class="pr-4" (click)="onStepChange('FIRST')"><mat-icon>skip_previous</mat-icon></button>
<button mat-icon-button color="primary" type="button" tabindex="2" [disabled]="disablePrev" (click)="onStepChange('PREVIOUS')"><mat-icon>navigate_before</mat-icon></button>
...
<button mat-icon-button color="primary" type="button" tabindex="5" class="pr-4" [disabled]="disableNext" (click)="onStepChange('NEXT')"><mat-icon>navigate_next</mat-icon></button>
<button mat-icon-button color="primary" type="button" tabindex="6" (click)="onStepChange('LAST')"><mat-icon>skip_next</mat-icon></button>

Issue: Navigation buttons lack accessible names - screen readers will only announce "button"

Recommended Fix

<!-- Top menu button -->
<button mat-icon-button [matMenuTriggerFor]="topMenu" aria-label="Open main menu">
  <img class="rtl-log-top" alt="" src="assets/images/RTL-Horse-BY.svg" aria-hidden="true">
  <mat-icon class="rtl-logo-dropdown color-white" aria-hidden="true">arrow_drop_down</mat-icon>
</button>

<!-- Horizontal scroller buttons -->
<button mat-icon-button color="primary" type="button" aria-label="Go to first" (click)="onStepChange('FIRST')">
  <mat-icon aria-hidden="true">skip_previous</mat-icon>
</button>
<button mat-icon-button color="primary" type="button" aria-label="Go to previous" [disabled]="disablePrev" (click)="onStepChange('PREVIOUS')">
  <mat-icon aria-hidden="true">navigate_before</mat-icon>
</button>
<button mat-icon-button color="primary" type="button" aria-label="Go to next" [disabled]="disableNext" (click)="onStepChange('NEXT')">
  <mat-icon aria-hidden="true">navigate_next</mat-icon>
</button>
<button mat-icon-button color="primary" type="button" aria-label="Go to last" (click)="onStepChange('LAST')">
  <mat-icon aria-hidden="true">skip_next</mat-icon>
</button>

Changes Made:

1. Add aria-label to all icon-only buttons
2. Add aria-hidden="true" to decorative icons
3. Remove redundant alt text from decorative images
4. Remove positive tabindex values

Additional Instances

Files with icon buttons missing accessible names:

• src/app/app.component.html (lines 4, 7) - matTooltip present but aria-label preferred
• src/app/shared/components/node-config/page-settings/page-settings.component.html (line 56)
• Multiple dialog close buttons throughout the application

Testing Instructions

1. Use a screen reader (NVDA/VoiceOver) to navigate the application
2. Tab to icon buttons and verify meaningful names are announced
3. Verify "button" is not announced alone without context
4. Test with voice control software (Dragon, Voice Control)

Resources

• WCAG 4.1.2 Name, Role, Value
• MDN aria-label
• WebAIM Accessible Buttons

Acceptance Criteria

• All icon buttons have accessible names
• Decorative icons marked with aria-hidden="true"
• Tested with screen reader (NVDA/VoiceOver)
• Voice control can activate buttons by name
• Automated tests pass (Lighthouse/axe)