null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 27 Pull Requests Packages Projects Releases Wiki Activity

Accessibility: Missing aria-labels on interactive elements throughout site #101

New Issue
Closed
opened 2026-05-17 21:16:34 -05:00 by null · 0 comments
null commented 2026-05-17 21:16:34 -05:00
Owner
Copy Link

Problem

Zero aria-label attributes exist across Home, Contact, Support, and About pages. Screen readers and keyboard-only users have no context for:

  • Service cards (clickable divs with onClick navigate)
  • Industry cards (same)
  • CTA buttons (generic Request Consultation without page context)
  • External links (ZohoDesk, LinkedIn) without descriptive labels
  • Phone/email links that just show the number/address

Specific issues

  • Home.jsx: Service and industry cards use Button onClick=navigate - not semantic Link elements
  • Home.jsx: Hero section has no aria-label
  • Contact.jsx: Phone and email links lack descriptive aria-labels
  • Footer.jsx: Social/external links need aria-label

Fix

  • Replace Button onClick=navigate with Link components or add aria-label
  • Add aria-label to all a tags with external URLs
  • Add aria-label to icon-only buttons
  • Consider making service/industry cards use article with proper heading hierarchy

Files

  • All pages in src/pages/
  • src/components/layout/Header.jsx, Footer.jsx

Severity

Medium - WCAG 2.1 AA compliance issue

## Problem Zero aria-label attributes exist across Home, Contact, Support, and About pages. Screen readers and keyboard-only users have no context for: - Service cards (clickable divs with onClick navigate) - Industry cards (same) - CTA buttons (generic Request Consultation without page context) - External links (ZohoDesk, LinkedIn) without descriptive labels - Phone/email links that just show the number/address ## Specific issues - Home.jsx: Service and industry cards use Button onClick=navigate - not semantic Link elements - Home.jsx: Hero section has no aria-label - Contact.jsx: Phone and email links lack descriptive aria-labels - Footer.jsx: Social/external links need aria-label ## Fix - Replace Button onClick=navigate with Link components or add aria-label - Add aria-label to all a tags with external URLs - Add aria-label to icon-only buttons - Consider making service/industry cards use article with proper heading hierarchy ## Files - All pages in src/pages/ - src/components/layout/Header.jsx, Footer.jsx ## Severity Medium - WCAG 2.1 AA compliance issue
null closed this issue 2026-05-17 22:47:21 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
dev
main
v0.8.0
v0.2.0
v0.1.1
v0.1.0
Labels
Clear labels   
P0 Critical

Critical — must fix before production. Data loss, security, or outage risk.

  
P1 High

High — should fix soon. Functional bugs, security hardening, data integrity.

  
P2 Medium

Medium — fix in next cycle. Quality of life, robustness, minor security.

  
P3 Low

Low — nice to have. Polish, optimization, minor UX.

  
accessibility

Accessibility issues

  
backend

Server-side code, API, database.

  
bug

Something is broken or behaves incorrectly.

  
content

   
data-integrity

Data consistency, constraints, validation.

  
enhancement

Feature or improvement request

  
frontend

Client-side code, UI components.

  
infra

Docker, deployment, CI/CD, infrastructure.

  
integration

   
owner

Direct feedback from the site owner. Top priority.

  
owner-input

   
performance

Performance or optimization.

  
performance

   
phase-7

   
phase-8

Phase 8 — Deferred enhancements (testimonials, blog, SEO, performance)

  
security

Security vulnerability or hardening.

  
seo

   
ui

UI/visual issues

  
ux

User experience issue.

No Label
P0 Critical
P1 High
P2 Medium
P3 Low
accessibility
backend
bug
content
data-integrity
enhancement
frontend
infra
integration
owner
owner-input
performance
performance
phase-7
phase-8
security
seo
ui
ux
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
1 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: null/Queue-North-Website#101
No description provided.
Delete Branch "%!s(<nil>)"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?