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
