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
-
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ó.
-
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.
-
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.
-
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.
Curs d'Accessibilitat Web
Mòdul 1: Introducció a l'Accessibilitat Web
- Què és l'Accessibilitat Web?
- Importància de l'Accessibilitat Web
- Visió General de les Lleis i Estàndards d'Accessibilitat
- Introducció a WCAG
Mòdul 2: Comprensió de les Discapacitats i les Tecnologies Assistencials
- Tipus de Discapacitats
- Visió General de les Tecnologies Assistencials
- Com les Persones amb Discapacitats Utilitzen la Web
Mòdul 3: Principis del Disseny Accessible
- Perceptible: Fer el Contingut Accessible als Sentits
- Operable: Interfície d'Usuari i Navegació
- Comprensible: Informació i Operació
- Robust: Compatibilitat amb Tecnologies Actuals i Futures
Mòdul 4: Implementació de l'Accessibilitat en HTML i CSS
- HTML Semàntic
- Formularis Accessibles
- Ús de Rols i Propietats ARIA
- Contrast de Color i Redimensionament de Text
Mòdul 5: Accessibilitat en JavaScript i Multimèdia
- Creació de Ginys JavaScript Accessibles
- Accessibilitat del Teclat
- Contingut de Vídeo i Àudio Accessible
- Proporcionar Alternatives de Text per a Imatges
Mòdul 6: Prova i Avaluació de l'Accessibilitat
- Tècniques de Prova Manual
- Eines de Prova Automatitzades
- Prova d'Usuari amb Tecnologies Assistencials
- Interpretació d'Informes d'Accessibilitat