TanStack / TanStack/tanstack.com

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

未关闭
#775 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 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

贡献指南

这个仓库没有索引到贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

首先重新对 tanstack.com 运行 WCAG 扫描,并定位其中报告的两个未命名按钮、未标记的输入框、缺失的跳过导航链接以及缺失的地标区域。检查受影响页面的结构,并验证键盘和屏幕阅读器行为;当报告的问题得到解决且扫描确认无障碍改进后,即表示完成。

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
accessibility, web-dev
Issue 类型
缺陷
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。