vailabel/vailabel-studio

a11y: Several image elements are missing alt text

Open

#250 ouverte le 19 juin 2026

Voir sur GitHub
 (0 commentaires) (0 réactions) (0 assignés)TypeScript (22 forks)auto 404
good first issuehacktoberfest

Métriques du dépôt

Stars
 (62 stars)
Métriques de merge PR
 (Métriques PR en attente)

Description

Summary Multiple <img> elements across the studio render without an alt attribute, so screen readers can't describe them and the markup fails basic accessibility/lint checks.

Where (non-exhaustive)

  • apps/studio/src/app/layout/main-layout.tsx:140
  • apps/studio/src/features/studio/components/file-list-panel.tsx:162
  • apps/studio/src/features/studio/components/canvas/canvas.tsx:54
  • apps/studio/src/features/projects/components/image-upload.tsx:64
  • apps/studio/src/features/projects/components/image-table.tsx:95
  • apps/studio/src/features/studio/components/editors/video/video-library.tsx:180

Find the rest with: grep -rn "<img" --include=*.tsx apps/studio/src | grep -v "alt="

Steps

  1. Branch: git checkout -b a11y/img-alt-text.
  2. Add a descriptive alt to each (e.g. alt={image.name} for dataset thumbnails, alt="Vailabel logo" for the logo). Use alt="" only for purely decorative images.
  3. Run yarn lint and yarn typecheck; open a PR.

Acceptance criteria

  • Every meaningful <img> has a descriptive alt; decorative ones use alt="".
  • grep -rn "<img" --include=*.tsx apps/studio/src | grep -v "alt=" returns nothing.

Good first issue — comment here if you'd like to take it.

Guide contributeur

Direction de recherche
Utilisez grep pour trouver tous les éléments <img> sans attribut alt dans le répertoire src. Pour chacun, déterminez s'il est décoratif (utilisez alt="") ou informatif (ajoutez un texte alt descriptif basé sur le contexte, par exemple le nom de l'image ou son but). Exécutez yarn lint et typecheck après les modifications.
Stack technique
typescriptreact
Domaine
frontenddesktop
Type d'issue
Accessibilité
DifficultéDifficulté estimée pour un nouveau contributeur, de 1 pour un très petit changement à 5 pour un travail expert.
1
Temps estiméFourchette de temps approximative pour investiguer, implémenter, tester et préparer une pull request.
1-3 heures
Statut d'activitéDisponibilité apparente de l'issue : fraîche, active, ancienne, bloquée ou en attente d'un mainteneur.
Récente
ClartéClarté avec laquelle l'issue explique le changement attendu, les critères d'acceptation et la prochaine étape.
Claire
Prérequis
Git
Accessibilité débutantScore de 1 à 100 estimant l'accessibilité de cette issue pour un premier contributeur.
90