[A11Y] [Medium] Decorative icon missing aria-hidden attribute #38

New issue

Open

opened 2026-02-19 20:08:16 +00:00 by continue[bot] · 0 comments

continue[bot] commented

2026-02-19 20:08:16 +00:00

(Migrated from github.com)

Accessibility Issue: Decorative Icon Missing aria-hidden Attribute

WCAG Level: A
Severity: Medium
Category: ARIA Usage

Issue Description

A decorative icon (Font Awesome arrow icon) in the homepage is not properly hidden from assistive technologies. Decorative icons that do not convey meaningful information should have aria-hidden="true" to prevent screen readers from announcing them.

User Impact

Affected Users: Blind users, screen reader users
Severity: Screen readers may announce "arrow alt circle right" which adds noise and confusion without providing meaningful content

Violations Found

File: `content/en/_index.md`

Lines: 7

<!-- Current Code -->
<a class="btn btn-lg btn-primary me-3 mb-4" href="https://www.shafiq.in/blog/gnusl3s-linux-os/">
  Learn More <i class="fas fa-arrow-alt-circle-right ms-2"></i>
</a>

Issue: The  element containing the decorative Font Awesome icon lacks aria-hidden="true", causing screen readers to potentially announce the icon name.

Recommended Fix

<!-- Fixed Code -->
<a class="btn btn-lg btn-primary me-3 mb-4" href="https://www.shafiq.in/blog/gnusl3s-linux-os/">
  Learn More <i class="fas fa-arrow-alt-circle-right ms-2" aria-hidden="true"></i>
</a>

Changes Made:

Added aria-hidden="true" to the decorative icon element

Testing Instructions

Navigate to homepage using a screen reader (NVDA, JAWS, or VoiceOver)
Tab to the "Learn More" button
Verify the screen reader announces "Learn More link" without announcing icon details
Use axe DevTools or WAVE to verify no ARIA violations

Resources

Acceptance Criteria

Icon has aria-hidden="true" attribute added
Tested with screen reader (NVDA/JAWS/VoiceOver)
Automated tests pass (Lighthouse/axe)

## Accessibility Issue: Decorative Icon Missing aria-hidden Attribute **WCAG Level:** A **Severity:** Medium **Category:** ARIA Usage ### Issue Description A decorative icon (Font Awesome arrow icon) in the homepage is not properly hidden from assistive technologies. Decorative icons that do not convey meaningful information should have `aria-hidden="true"` to prevent screen readers from announcing them. ### User Impact - **Affected Users:** Blind users, screen reader users - **Severity:** Screen readers may announce "arrow alt circle right" which adds noise and confusion without providing meaningful content ### Violations Found #### File: `content/en/_index.md` **Lines:** 7 ```html  <a class="btn btn-lg btn-primary me-3 mb-4" href="https://www.shafiq.in/blog/gnusl3s-linux-os/"> Learn More </a> ``` **Issue:** The `` element containing the decorative Font Awesome icon lacks `aria-hidden="true"`, causing screen readers to potentially announce the icon name. --- ### Recommended Fix ```html  <a class="btn btn-lg btn-primary me-3 mb-4" href="https://www.shafiq.in/blog/gnusl3s-linux-os/"> Learn More </a> ``` **Changes Made:** 1. Added `aria-hidden="true"` to the decorative icon element --- ### Testing Instructions 1. Navigate to homepage using a screen reader (NVDA, JAWS, or VoiceOver) 2. Tab to the "Learn More" button 3. Verify the screen reader announces "Learn More link" without announcing icon details 4. Use axe DevTools or WAVE to verify no ARIA violations ### Resources - [WCAG Success Criterion 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) - [Font Awesome Accessibility](https://fontawesome.com/docs/web/dig-deeper/accessibility) - [WebAIM: Invisible Content](https://webaim.org/techniques/css/invisiblecontent/) ### Acceptance Criteria - [ ] Icon has `aria-hidden="true"` attribute added - [ ] Tested with screen reader (NVDA/JAWS/VoiceOver) - [ ] Automated tests pass (Lighthouse/axe) ---