En aquest tema, explorarem com fer que el contingut web sigui perceptible per a tots els usuaris, incloent aquells amb discapacitats sensorials. El principi de "perceptible" en l'accessibilitat web es refereix a assegurar-se que la informació i els components de la interfície d'usuari siguin presentats de manera que puguin ser percebuts pels sentits dels usuaris.

1. Text Alternatiu per a Imatges

   • Proporciona descripcions textuals per a imatges perquè els usuaris amb discapacitat visual puguin entendre el contingut visual a través de lectors de pantalla.
   • Exemple de codi HTML:

     <img src="imatge.jpg" alt="Descripció de la imatge">
     

   • Consell: Assegura't que el text alternatiu sigui concís però descriptiu.

2. Subtítols i Transcripcions per a Contingut Multimèdia

   • Inclou subtítols per a vídeos i transcripcions per a àudio per ajudar els usuaris amb discapacitat auditiva.
   • Exemple de codi HTML per a subtítols:

     <video controls>
       <source src="video.mp4" type="video/mp4">
       <track kind="subtitles" src="subtitols.vtt" srclang="ca" label="Català">
     </video>
     

   • Consell: Els subtítols han de sincronitzar-se amb l'àudio i reflectir tant el diàleg com els sons importants.

3. Contrast de Color Adequat

   • Assegura't que hi hagi un contrast suficient entre el text i el fons per facilitar la lectura a persones amb discapacitat visual.
   • Consell: Utilitza eines de verificació de contrast per assegurar-te que compleixes els estàndards WCAG.

4. Estructura Semàntica i Encapsulament de Contingut

   • Utilitza etiquetes HTML semàntiques per estructurar el contingut de manera lògica i accessible.
   • Exemple de codi HTML:

     <header>
       <h1>Títol de la Pàgina</h1>
     </header>
     <main>
       <article>
         <h2>Títol de l'Article</h2>
         <p>Contingut de l'article...</p>
       </article>
     </main>
     

   • Consell: L'ús correcte de les etiquetes semàntiques ajuda els lectors de pantalla a interpretar millor el contingut.

• Objectiu: Practicar la creació de text alternatiu per a imatges.
• Instruccions: Afegeix text alternatiu a les següents imatges:

  <img src="gat.jpg" alt="">
  <img src="paisatge.jpg" alt="">
  

• Solució:

  <img src="gat.jpg" alt="Un gat negre assegut en una finestra">
  <img src="paisatge.jpg" alt="Un paisatge de muntanya amb un llac al fons">
  

• Objectiu: Utilitzar una eina de verificació de contrast per avaluar el contrast de color d'un lloc web.
• Instruccions: Tria un lloc web i utilitza una eina com WebAIM Contrast Checker per verificar el contrast de color. Anota els resultats i proposa millores si cal.

Fer el contingut perceptible és un pas fonamental per garantir que tots els usuaris, independentment de les seves capacitats, puguin accedir a la informació. Proporcionar text alternatiu, subtítols, contrast adequat i una estructura semàntica són pràctiques essencials per aconseguir-ho. En el següent tema, explorarem com fer que la interfície d'usuari sigui operable per a tots els usuaris.