En aquest tema, explorarem com fer que la informació i les operacions d'un lloc web siguin comprensibles per a tots els usuaris, incloent aquells amb discapacitats cognitives, d'aprenentatge o de llenguatge. La comprensibilitat és un dels principis fonamentals de les Directrius d'Accessibilitat per al Contingut Web (WCAG).
Objectius d'Aprenentatge
- Entendre la importància de la comprensibilitat en l'accessibilitat web.
- Aprendre a crear contingut que sigui fàcil de llegir i entendre.
- Implementar operacions intuïtives i predictibles en interfícies d'usuari.
Conceptes Clau
- Llegibilitat del Contingut
-
Ús de Llenguatge Clar i Senzill: Utilitza un llenguatge que sigui fàcil de comprendre per a la majoria dels usuaris. Evita l'ús de jerga tècnica o termes complexos sense definicions clares.
-
Divisió del Text en Seccions: Organitza el contingut en paràgrafs curts i utilitza encapçalaments per dividir les seccions. Això ajuda els usuaris a escanejar i comprendre millor la informació.
-
Tipografia Adequada: Assegura't que la mida de la font sigui prou gran i que el tipus de lletra sigui fàcil de llegir. Evita fonts decoratives que puguin dificultar la lectura.
- Previsibilitat de les Operacions
-
Comportament Consistent: Les accions de l'usuari han de tenir resultats consistents. Per exemple, els enllaços i botons han de comportar-se de la mateixa manera en tot el lloc web.
-
Feedback Immediat: Proporciona retroalimentació immediata després d'una acció de l'usuari, com ara un missatge de confirmació després d'enviar un formulari.
-
Evitar Canvis Sobtats de Context: Els canvis de context inesperats poden confondre els usuaris. Evita que les pàgines es recarreguin o canviïn de manera automàtica sense l'acció de l'usuari.
- Ajuda i Documentació
-
Proporcionar Ajuda Contextual: Inclou consells o suggeriments al costat de camps de formulari o funcions complexes per ajudar els usuaris a comprendre com utilitzar-los.
-
Documentació Accessible: Si el teu lloc web inclou documentació o guies, assegura't que siguin accessibles i fàcils de seguir.
Exemple Pràctic
A continuació, es mostra un exemple de com millorar la comprensibilitat d'un formulari d'inscripció:
<form> <label for="username">Nom d'usuari:</label> <input type="text" id="username" name="username" aria-describedby="usernameHelp"> <small id="usernameHelp">El nom d'usuari ha de tenir entre 6 i 12 caràcters.</small> <label for="password">Contrasenya:</label> <input type="password" id="password" name="password" aria-describedby="passwordHelp"> <small id="passwordHelp">La contrasenya ha de contenir almenys una lletra majúscula i un número.</small> <button type="submit">Inscriure's</button> </form>
Explicació del Codi
-
Etiquetes i Descripcions: Cada camp del formulari té una etiqueta clara i una descripció addicional proporcionada per l'atribut
aria-describedby
, que ajuda a explicar els requisits específics. -
Consistència i Feedback: El formulari proporciona informació clara sobre els requisits abans que l'usuari enviï el formulari, evitant errors i confusions.
Exercici Pràctic
Exercici: Revisa una pàgina web existent i identifica elements que podrien millorar-se per ser més comprensibles. Proposa canvis específics per millorar la llegibilitat del contingut i la previsibilitat de les operacions.
Solució Sugerida:
-
Identificació de Problemes: Potser has trobat que els enllaços no tenen descripcions clares o que el text és massa dens.
-
Proposta de Millores:
- Afegir descripcions als enllaços amb l'atribut
title
. - Dividir el text en paràgrafs més curts i utilitzar encapçalaments per a cada secció.
- Afegir descripcions als enllaços amb l'atribut
Conclusió
La comprensibilitat és essencial per garantir que tots els usuaris puguin accedir i utilitzar el contingut web de manera efectiva. Implementar un llenguatge clar, operacions consistents i proporcionar ajuda contextual són passos clau per aconseguir-ho. En el següent tema, explorarem com fer que el contingut sigui robust i compatible amb tecnologies actuals i futures.
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