vailabel/vailabel-studio

a11y: Several image elements are missing alt text

クローズ

#250 opened on 2026/06/19

 (0 件のコメント) (0 件のリアクション) (0 人の担当者)TypeScript (22 件のフォーク)auto 404
good first issuehacktoberfest

Repository metrics

Stars
 (62 個のスター)
PR merge metrics
 (平均マージ 6d 18h) (30d で 9 merged PRs)

説明

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.

コントリビューターガイド