Accessibility improvements: heading hierarchy, skip navigation, link text
Nadie ha tomado este issue todavía.
- Lenguaje dominante
- JavaScript
- Estrellas
- 11.8k
- Forks
- 7.9k
- Merge medio
- 1 d 11 h
- PR fusionados (30 d)
- 11
Descripción
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
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Línea de trabajo
Comienza ejecutando npx accessscore https://react.dev y revisa las páginas indicadas para las tres categorías: navegación de omisión, jerarquía de encabezados y texto descriptivo de los enlaces. Se considera terminado cuando se hayan corregido los problemas de accesibilidad aplicables y se haya vuelto a ejecutar el análisis automatizado, teniendo en cuenta las comprobaciones manuales porque el informe señala que la automatización solo detecta una parte del problema.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- javascript, react
- Área
- accessibility, documentation
- Tipo de issue
- Error
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100