Accessibility: Missing aria-label on some hero CTA links #193

New Issue

Closed

opened 2026-05-29 16:45:55 -05:00 by null · 1 comment

null commented

2026-05-29 16:45:55 -05:00

Owner

Severity: Minor

Description: Some hero section CTA links lack explicit aria-label attributes. Screen readers will only announce button text without destination context.

Files: src/pages/Home.jsx, src/pages/Services.jsx

Fix direction: Add aria-label consistently to all hero CTA links.

**Severity:** Minor **Description:** Some hero section CTA links lack explicit `aria-label` attributes. Screen readers will only announce button text without destination context. **Files:** `src/pages/Home.jsx`, `src/pages/Services.jsx` **Fix direction:** Add `aria-label` consistently to all hero CTA links.

null added the

bug

accessibility

labels 2026-05-29 16:45:55 -05:00

null added this to the Batch 10 — Accessibility WCAG 2.1 AA milestone 2026-08-18 01:24:53 -05:00

null referenced this issue from a commit

2026-08-18 02:31:20 -05:00

fix(a11y): visible focus indicator, aria-expanded, and six Label-in-Name failures

null commented

2026-08-18 02:31:47 -05:00

Author

Owner

Fixed in 9fdc6b6, but by doing the OPPOSITE of what this issue asked. Recording that in full, because the fix direction here would have made the site less accessible.

This issue asked to 'add aria-label consistently to all hero CTA links'. The aria-labels already present were themselves WCAG 2.5.3 Label in Name failures — Level A, which is a higher bar than the AA items in this batch.

2.5.3 requires the accessible name to CONTAIN the visible label text. It did not:

Home.jsx:128 aria-label 'Schedule a consultation' visible 'Schedule Consultation'
Home.jsx:132 aria-label 'View our services' visible 'View Services'
Home.jsx:244 aria-label 'Request a consultation' visible 'Request Consultation'
Home.jsx:375 aria-label 'Request a consultation' visible 'Request Consultation'
Footer.jsx:67 aria-label 'Request a free consultation' visible 'Get a Free Quote'
Header.jsx:145 aria-label 'Request a consultation' visible 'Request Consultation'

A speech-input user saying 'click Schedule Consultation' — the words on screen — does not activate that link, because the accessible name is 'Schedule a consultation'. Adding more labels in that style would have propagated the failure.

Removed those six. Kept the eight that are correct and genuinely add context, each of which does contain its visible text: the two 'Queue North Technologies Home' logo links, 'Read the Queue North Technologies Privacy Policy', the three 'Follow Queue North on X' social links, 'Get a free quote', and the icon-only header logo link whose visible text is empty and which therefore REQUIRES its label.

Verified: a script re-checking every / carrying aria-label across Home, Services, Footer and Header now reports 0 failures and 8 correctly kept. dist/index.html no longer contains any of the six removed labels, and the visible CTA text still renders (Schedule Consultation x1, View Services x1, Request Consultation x3).

Fixed in 9fdc6b6, but by doing the OPPOSITE of what this issue asked. Recording that in full, because the fix direction here would have made the site less accessible. This issue asked to 'add aria-label consistently to all hero CTA links'. The aria-labels already present were themselves WCAG 2.5.3 Label in Name failures — Level A, which is a higher bar than the AA items in this batch. 2.5.3 requires the accessible name to CONTAIN the visible label text. It did not: Home.jsx:128 aria-label 'Schedule a consultation' visible 'Schedule Consultation' Home.jsx:132 aria-label 'View our services' visible 'View Services' Home.jsx:244 aria-label 'Request a consultation' visible 'Request Consultation' Home.jsx:375 aria-label 'Request a consultation' visible 'Request Consultation' Footer.jsx:67 aria-label 'Request a free consultation' visible 'Get a Free Quote' Header.jsx:145 aria-label 'Request a consultation' visible 'Request Consultation' A speech-input user saying 'click Schedule Consultation' — the words on screen — does not activate that link, because the accessible name is 'Schedule a consultation'. Adding more labels in that style would have propagated the failure. Removed those six. Kept the eight that are correct and genuinely add context, each of which does contain its visible text: the two 'Queue North Technologies Home' logo links, 'Read the Queue North Technologies Privacy Policy', the three 'Follow Queue North on X' social links, 'Get a free quote', and the icon-only header logo link whose visible text is empty and which therefore REQUIRES its label. Verified: a script re-checking every <Link>/<a> carrying aria-label across Home, Services, Footer and Header now reports 0 failures and 8 correctly kept. dist/index.html no longer contains any of the six removed labels, and the visible CTA text still renders (Schedule Consultation x1, View Services x1, Request Consultation x3).

null closed this issue

2026-08-18 02:31:47 -05:00