TanStack / TanStack/tanstack.com
Accessibility: Empty buttons and missing skip navigation on tanstack.com (WCAG scan)
Chưa có ai nhận issue này.
- Ngôn ngữ chính
- TypeScript
- Star
- 1.1k
- Fork
- 401
- Merge trung bình
- 18 giờ 14 phút
- Pull request đã merge (30 ngày)
- 56
Mô tả
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
Hướng dẫn đóng góp
Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này
Bắt đầu từ đâu
- Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
- Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
- Fork repository và làm thay đổi trên một nhánh.
- Mở pull request có tham chiếu số hiệu của issue.
Hướng nghiên cứu
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.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- typescript
- Lĩnh vực
- accessibility, web-dev
- Loại issue
- Lỗi
- Độ khó
- 4/5
- Thời gian dự kiến
- 3-5 ngày
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 35/100