En aquesta secció, explorarem com les persones amb diverses discapacitats interactuen amb la web. Comprendre aquestes interaccions és fonamental per dissenyar i desenvolupar llocs web accessibles que siguin inclusius per a tothom.

Tipus de Discapacitats i les seves Necessitats

  1. Discapacitats Visuals

    • Ceguesa Total: Les persones cegues utilitzen lectors de pantalla que converteixen el text en veu o braille.
    • Visió Reduïda: Poden necessitar augmentar la mida del text o ajustar el contrast de colors.
    • Daltonisme: Requereixen un bon contrast de colors i no dependre únicament del color per transmetre informació.
  2. Discapacitats Auditives

    • Sordesa Total o Parcial: Necessiten subtítols per a contingut de vídeo i transcripcions per a àudio.
    • Pèrdua Auditiva: Els ajustaments de volum i la claredat del so són importants.
  3. Discapacitats Físiques

    • Mobilitat Reduïda: Poden utilitzar dispositius d'entrada alternatius com commutadors, teclats especials o controladors de veu.
    • Dificultats de Coordinació: Requereixen interfícies que no depenguin de moviments precisos.
  4. Discapacitats Cognitives

    • Dificultats d'Aprenentatge: Beneficien de contingut clar, senzill i ben estructurat.
    • Trastorns de l'Atenció: Requereixen interfícies que minimitzin les distraccions.

Tecnologies Assistencials

Les tecnologies assistencials són eines que ajuden les persones amb discapacitats a accedir a la informació i interactuar amb la web. Algunes de les més comunes inclouen:

  • Lectors de Pantalla: Programes que llegeixen el text de la pantalla en veu alta o el converteixen en braille.
  • Ampliadors de Pantalla: Eines que augmenten la mida del contingut de la pantalla.
  • Teclats Alternatius: Dispositius que permeten la introducció de dades sense un teclat estàndard.
  • Reconeixement de Veu: Permet controlar l'ordinador i introduir text mitjançant la veu.

Exemples Pràctics

Exemple 1: Navegació amb un Lector de Pantalla

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Pàgina Accessible</title>
</head>
<body>
    <h1>Benvinguts a la Pàgina Accessible</h1>
    <nav>
        <ul>
            <li><a href="#inici">Inici</a></li>
            <li><a href="#sobre">Sobre Nosaltres</a></li>
            <li><a href="#contacte">Contacte</a></li>
        </ul>
    </nav>
    <section id="inici">
        <h2>Inici</h2>
        <p>Aquesta és la secció d'inici.</p>
    </section>
    <section id="sobre">
        <h2>Sobre Nosaltres</h2>
        <p>Informació sobre la nostra organització.</p>
    </section>
    <section id="contacte">
        <h2>Contacte</h2>
        <p>Com contactar amb nosaltres.</p>
    </section>
</body>
</html>

Explicació: Aquest exemple mostra una estructura HTML senzilla amb encapçalaments i enllaços que un lector de pantalla pot interpretar fàcilment. Els encapçalaments ajuden a navegar per la pàgina de manera eficient.

Exemple 2: Subtítols en Vídeo

<video controls>
    <source src="video.mp4" type="video/mp4">
    <track kind="subtitles" src="subtitles.vtt" srclang="ca" label="Català">
    El teu navegador no suporta l'element de vídeo.
</video>

Explicació: Aquest fragment de codi mostra com afegir subtítols a un vídeo, cosa que és essencial per a persones amb discapacitats auditives.

Exercici Pràctic

Exercici: Crea una pàgina web senzilla que inclogui:

  • Un encapçalament principal.
  • Una llista de navegació amb tres enllaços.
  • Un paràgraf de text.
  • Un vídeo amb subtítols.

Solució:

<!DOCTYPE html>
<html lang="ca">
<head>
    <meta charset="UTF-8">
    <title>Pàgina Accessible</title>
</head>
<body>
    <h1>Benvinguts a la Pàgina Accessible</h1>
    <nav>
        <ul>
            <li><a href="#inici">Inici</a></li>
            <li><a href="#sobre">Sobre Nosaltres</a></li>
            <li><a href="#contacte">Contacte</a></li>
        </ul>
    </nav>
    <section id="inici">
        <h2>Inici</h2>
        <p>Aquesta és la secció d'inici.</p>
    </section>
    <video controls>
        <source src="video.mp4" type="video/mp4">
        <track kind="subtitles" src="subtitles.vtt" srclang="ca" label="Català">
        El teu navegador no suporta l'element de vídeo.
    </video>
</body>
</html>

Conclusió

Entendre com les persones amb discapacitats utilitzen la web és crucial per crear experiències accessibles. Les tecnologies assistencials i les bones pràctiques de disseny poden ajudar a superar les barreres d'accessibilitat i garantir que tothom pugui accedir a la informació de manera equitativa. En el proper mòdul, explorarem els principis del disseny accessible per aprofundir en com implementar aquestes pràctiques.

© Copyright 2024. Tots els drets reservats