Accessibility improvements: heading hierarchy, skip navigation, link text

Aberta
#8,360 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
javascript, react
Domínio
accessibility, documentation

Direção de pesquisa

Comece executando npx accessscore https://react.dev e inspecione as páginas reportadas para as três categorias: navegação para pular, hierarquia de títulos e texto descritivo de links. Considera-se concluído quando os problemas de acessibilidade aplicáveis forem corrigidos e a varredura automatizada for executada novamente, levando em conta as verificações manuais porque o relatório observa que a automação encontra apenas parte do problema.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Summary

Ran an automated WCAG 2.1 scan against react.dev and found a few accessibility issues that could be improved:

Score: 82/100 (Grade B)

Issues Found
1. Missing Skip Navigation (WCAG 2.4.1, Level A)

No skip navigation link found. Keyboard-only users must tab through the entire navigation on every page load before reaching content. This is especially impactful on documentation sites where users navigate between many pages.

Fix: Add a visually-hidden skip link as the first focusable element:

<a href="#main" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:bg-white focus:text-black focus:p-3 focus:rounded">
  Skip to main content
</a>
2. Heading Hierarchy Issues (WCAG 1.3.1, Level A)

Found heading level jumps (e.g., h1 → h3 with no h2). Screen reader users navigate by headings like a table of contents — skipping levels creates confusing navigation.

3. Vague Link Text (WCAG 2.4.4, Level A)

10 links have non-descriptive text that doesn't convey purpose when read out of context. Screen reader users often navigate by listing all links on a page.

Methodology

Scanned using 16 automated WCAG 2.1 Level A and AA checks. Automated scans catch roughly 30-50% of issues — the rest require manual testing.

For a quick automated baseline: npx accessscore https://react.dev

Linguagem predominante
JavaScript
Estrelas
11.8k
Forks
7.9k
Merge médio
16h 6min
PRs com merge (30d)
7

Guia de contribuição

Abrir o guia de contribuição

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de reactjs/react.dev

Todas as issues de reactjs/react.dev

Issues semelhantes

Mais issues de JavaScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.