TanStack / TanStack/tanstack.com

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

Đang mở
#775 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

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

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. 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.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. 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

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.