Skip to content

Text alternativ descriptiv pe imaginile de conținut

Pe paginile publice ale magazinului, 31 din cele 47 de etichete <img> din frontend/src au alt="". Nouăsprezece dintre ele nu sunt marcate nici ca decorative, deși sunt imagini de conținut: imaginea mare a fiecărei colecții, panourile de pe About și Recovery Rooms, tabelul de mărimi, miniaturile din galeria de produs. Pentru un vizitator care folosește un cititor de ecran, aceste imagini nu spun nimic, iar pentru căutarea Google după imagini pur și simplu nu există. Ce e cu adevărat ornament — iconițele, a doua poză care apare la trecerea cu mouse-ul — are deja aria-hidden și rămâne așa.

Ce am găsit

Nouăsprezece imagini de conținut cu alt gol și fără aria-hidden

Parsarea fiecărei etichete <img> din frontend/src, cu /admin exclus: 47 de etichete, 0 fără atributul alt, 31 cu alt="", dintre care exact 19 fără aria-hidden.

Pozițiile, toate în frontend/src:

  • components/SplitFeature.tsx:35
  • components/AboutMissionSplit.tsx:27
  • components/AboutAdvancing.tsx:23
  • components/RecoveryRoomsAvailability.tsx:27
  • components/RecoveryRoomsCustomize.tsx:30
  • components/RecoveryRoomsFeature.tsx:15
  • components/RecoveryRoomsContact.tsx:26
  • components/TherapyLandingPage.tsx:231 și :283
  • components/CollectionPage.tsx:60, :178 (imaginea hero a colecției) și :295
  • components/GiftGuideJaydenFeature.tsx:29
  • components/SizeGuideModal.tsx:75 (tabelul de mărimi)
  • components/GalleryLightbox.tsx:111 (miniaturile din galeria de produs)
  • components/checkout/CheckoutMobileTotal.tsx:43
  • pages/OrderConfirmation.tsx:75
  • pages/Account.tsx:113 și :121

Exemplu, components/AboutAdvancing.tsx:23:

<img src="/about/advancing.jpg" alt="" loading="lazy" className="absolute inset-0 h-full w-full object-cover" />

Aceleași goluri în DOM-ul randat pe live

  • /products/hypervolt-3-pro: 31 din 37 de imagini randate au alt gol.
  • /collections/shop-all: 37 din 74.
  • /recovery-rooms: 16 din 26.

Cele patru fotografii de caracteristici sunt marcate decorative, deși sunt conținut

frontend/src/components/FeaturesCarousel.tsx:96 randează features/1.jpg … 4.jpg cu alt="" și aria-hidden="true". Sunt cele patru imagini mari de pe fiecare fișă de produs, care ilustrează câte o caracteristică — conținut, nu ornament.

De făcut

  • Completează alt pe cele 19 poziții de mai sus cu text luat din traduceri, nu scris direct în componentă.
  • Imaginea hero a colecției (CollectionPage.tsx:178) primește numele colecției.
  • Panourile de pe About și Recovery Rooms primesc textul propriu al panoului.
  • Miniaturile din GalleryLightbox.tsx:111 primesc numele produsului plus numărul imaginii.
  • Tabelul de mărimi din SizeGuideModal.tsx:75 primește o descriere a ceea ce arată.
  • Imaginile din FeaturesCarousel.tsx:96 primesc titlul caracteristicii pe care o ilustrează — există deja în date — și nu mai sunt marcate ca decorative.
  • Cele patru poziții care sunt într-adevăr decorative primesc aria-hidden în loc de text: Account.tsx:113 și :121 (siglele Google și Apple din butoane care au deja text), CheckoutMobileTotal.tsx:43, OrderConfirmation.tsx:75.

Criteriu de acceptare

  • Reluarea numărătorii în frontend/src, fără /admin, arată 0 imagini cu alt="" care să nu aibă și aria-hidden.
  • Pe /products/hypervolt-3-pro, /collections/hypervolt și /recovery-rooms, fiecare imagine mai lată de 200px din DOM-ul randat are alt nevid.
Edited by Vitalie