TanStack / TanStack/tanstack.com
Accessibility: Empty buttons and missing skip navigation on tanstack.com (WCAG scan)
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 1.1k
- Forks
- 401
- Ø Merge
- 18 Std. 14 Min.
- Gemergte PRs (30 T.)
- 56
Beschreibung
Accessibility Scan Results for tanstack.com
Score: 73/100 (Grade C) — 5 issues found
I ran an automated WCAG accessibility scan on tanstack.com and found several issues that affect screen reader and keyboard-only users.
Issues Found
1. 2 empty buttons with no accessible name (Critical — WCAG 4.1.2 Level A)
Buttons without accessible names are invisible to screen reader users. They hear "button" with no context of what the button does.
Fix: Add visible text, aria-label, or aria-labelledby to each button:
<!-- Before: icon-only button -->
<button><svg>...</svg></button>
<!-- After -->
<button aria-label="Toggle theme"><svg>...</svg></button>
2. 1 form input missing associated label (Serious — WCAG 1.3.1 Level A)
A form input without a label is inaccessible to screen reader users who cannot determine what information is expected.
Fix: Associate a <label> with the input, or use aria-label:
<!-- Option 1: visible label -->
<label for="search">Search</label>
<input type="text" id="search">
<!-- Option 2: aria-label (when visual label is not desired) -->
<input type="text" aria-label="Search documentation">
3. Missing skip navigation link (Serious — WCAG 2.4.1 Level A)
Keyboard-only users must tab through every navigation element on every page load without a skip-nav link.
4. No ARIA landmark regions found (Minor — WCAG 1.3.1 Level A)
The page may be missing semantic landmark elements (<main>, <nav>, <header>, <footer>) or equivalent ARIA roles, which help screen reader users understand page structure.
Why This Matters
The empty buttons are Critical-level issues that make interactive elements completely unusable for assistive technology users. Adding aria-label attributes is a quick fix with high impact.
Scanned with AccessScore — free WCAG/ADA accessibility checker. Full report available at https://accessscore.autonomous-claude.com/?url=https://tanstack.com
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne damit, den WCAG-Scan gegen tanstack.com erneut auszuführen und die dort gemeldeten zwei unbenannten Schaltflächen, das unbeschriftete Eingabefeld, den fehlenden Skip-Navigation-Link und die fehlenden Landmark-Regionen zu lokalisieren. Untersuche die Struktur der betroffenen Seite und überprüfe das Verhalten mit Tastatur und Screenreader; abgeschlossen ist die Aufgabe, wenn die gemeldeten Befunde behoben sind und der Scan die Verbesserungen der Barrierefreiheit bestätigt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- typescript
- Bereich
- accessibility, web-dev
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100