René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Accessibility: Empty buttons and missing skip navigation on tanstack.com (WCAG scan)","articleBody":"## Accessibility Scan Results for tanstack.com\n\n**Score: 73/100 (Grade C)** — 5 issues found\n\nI ran an automated WCAG accessibility scan on tanstack.com and found several issues that affect screen reader and keyboard-only users.\n\n### Issues Found\n\n#### 1. 2 empty buttons with no accessible name (Critical — WCAG 4.1.2 Level A)\nButtons without accessible names are invisible to screen reader users. They hear \"button\" with no context of what the button does.\n\n**Fix:** Add visible text, `aria-label`, or `aria-labelledby` to each button:\n```html\n\u003c!-- Before: icon-only button -->\n\u003cbutton>\u003csvg>...\u003c/svg>\u003c/button>\n\n\u003c!-- After -->\n\u003cbutton aria-label=\"Toggle theme\">\u003csvg>...\u003c/svg>\u003c/button>\n```\n\n#### 2. 1 form input missing associated label (Serious — WCAG 1.3.1 Level A)\nA form input without a label is inaccessible to screen reader users who cannot determine what information is expected.\n\n**Fix:** Associate a `\u003clabel>` with the input, or use `aria-label`:\n```html\n\u003c!-- Option 1: visible label -->\n\u003clabel for=\"search\">Search\u003c/label>\n\u003cinput type=\"text\" id=\"search\">\n\n\u003c!-- Option 2: aria-label (when visual label is not desired) -->\n\u003cinput type=\"text\" aria-label=\"Search documentation\">\n```\n\n#### 3. Missing skip navigation link (Serious — WCAG 2.4.1 Level A)\nKeyboard-only users must tab through every navigation element on every page load without a skip-nav link.\n\n#### 4. No ARIA landmark regions found (Minor — WCAG 1.3.1 Level A)\nThe page may be missing semantic landmark elements (`\u003cmain>`, `\u003cnav>`, `\u003cheader>`, `\u003cfooter>`) or equivalent ARIA roles, which help screen reader users understand page structure.\n\n### Why This Matters\n\nThe 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.\n\n---\n\nScanned with [AccessScore](https://accessscore.autonomous-claude.com) — free WCAG/ADA accessibility checker. Full report available at https://accessscore.autonomous-claude.com/?url=https://tanstack.com","author":{"url":"https://github.com/ryuno2525","@type":"Person","name":"ryuno2525"},"datePublished":"2026-03-18T15:47:04Z","url":"https://github.com/TanStack/tanstack.com/issues/775"}