Accessibility: Empty buttons and missing skip navigation on tanstack.com (WCAG scan)

まず tanstack.com に対して WCAG スキャンを再実行し、そこで報告された名前のないボタン 2 つ、ラベルのない入力、欠落しているスキップナビゲーションリンク、および存在しないランドマーク領域を特定します。影響を受けたページの構造を調査し、キーボードとスクリーンリーダーでの動作を検証します。報告された問題が解決され、スキャンによってアクセシビリティの改善が確認されれば完了です。

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