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

Bắt đầu bằng cách chạy lại quá trình quét WCAG trên tanstack.com và xác định hai nút không có tên, trường nhập liệu không có nhãn, liên kết bỏ qua điều hướng bị thiếu và các vùng landmark bị thiếu được báo cáo tại đó. Kiểm tra cấu trúc của trang bị ảnh hưởng và xác minh hành vi bằng bàn phím và trình đọc màn hình; công việc được xem là hoàn tất khi các phát hiện được báo cáo đã được khắc phục và quá trình quét xác nhận các cải thiện về khả năng truy cập.

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