TanStack / TanStack/tanstack.com
Accessibility: Empty buttons and missing skip navigation on tanstack.com (WCAG scan)
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 1.1k
- 派生
- 401
- 平均合并
- 18 小时 14 分钟
- 30 天内合并 PR
- 56
描述
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
贡献指南
这个仓库没有索引到贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
首先重新对 tanstack.com 运行 WCAG 扫描,并定位其中报告的两个未命名按钮、未标记的输入框、缺失的跳过导航链接以及缺失的地标区域。检查受影响页面的结构,并验证键盘和屏幕阅读器行为;当报告的问题得到解决且扫描确认无障碍改进后,即表示完成。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- typescript
- 领域
- accessibility, web-dev
- Issue 类型
- 缺陷
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100