vailabel/vailabel-studio

a11y: Several image elements are missing alt text

Open

#250 geöffnet am 19. Juni 2026

Auf GitHub ansehen
 (0 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)TypeScript (22 Forks)auto 404
good first issuehacktoberfest

Repository-Metriken

Stars
 (62 Stars)
PR-Merge-Metriken
 (PR-Metriken ausstehend)

Beschreibung

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.

Contributor Guide

Research-Richtung
Verwenden Sie grep, um alle <img> Elemente ohne alt Attribut im src Verzeichnis zu finden. Bestimmen Sie für jedes, ob es dekorativ ist (alt="" verwenden) oder informativ (beschreibenden alt Text basierend auf dem Kontext hinzufügen, z. B. Bildname oder Zweck). Führen Sie nach den Änderungen yarn lint und typecheck aus.
Tech Stack
typescriptreact
Domain
frontenddesktop
Issue Type
Barrierefreiheit
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
1
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 Stunden
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
Frisch
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
Klar
Voraussetzungen
Git
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
90