Els quatre principis de les WCAG

Com hem esmentat anteriorment! WCAG és un conjunt de directrius creades per ajudar a fer que els llocs web siguin accessibles per a tothom! incloses les persones amb discapacitat. Les directrius se centren a fer que els llocs web siguin clars! fàcils de navegar i funcionals per a tots els usuaris. En aquest segment! explorarem els quatre principis de WCAG! que diuen que els llocs web han de ser perceptibles ! operables ! comprensibles i robusts .

 

El primer principi! Perceptible significa que els usuaris 

capaços de detectar i entendre la informació d’una principis de les WCAG pàgina. Per exemple! oferir alternatives de text per a contingut que no sigui de text! com ara imatges! clips d’àudio i contingut de vídeo! garanteix que els usuaris que confien en lectors de pantalla o altres eines d’assistència encara puguin accedir a aquesta informació. Fer que el contingut sigui perceptible ajuda a garantir que els usuaris no perdin informació! independentment de la forma en què interactuen amb el contingut.

 Operable
El segon principi! Operable! se centra a assegurar-se que els usuaris puguin navegar i utilitzar fàcilment la interfície. Això inclou permetre la navegació només amb Llista de números de telèfon mòbil precisa el teclat perquè els que no puguin utilitzar el ratolí encara tinguin accés complet. Assegurar-se que totes les característiques i funcions! com ara menús! botons! formularis i elements interactius! siguin accessibles per a tothom és clau per crear una experiència operativa.

 Comprensible
El tercer principi! comprensible! se centra a assegurar-se que el contingut és fàcil de llegir i interactuar amb ell. Això significa utilitzar un llenguatge clar i senzill i oferir una guia clara quan principis de les WCAG  els usuaris s’equivoquen. Per exemple! quan un usuari envia un formulari de manera incorrecta! un missatge d’error hauria d’explicar exactament què ha fallat! com ara perdre un camp obligatori. Això ajuda els usuaris a tornar al camí més fàcilment.

 

El quart principi robust significa que el

contingut s’ha de crear per funcionar bé amb les tecnologies principis de les WCAG actuals i futures! incloses les eines d’assistència com els lectors de pantalla. Això implica crear llocs web flexibles i adaptables que continuïn funcionant a mesura que sorgeixen noves tecnologies! assegurant-se que el contingut es mantingui accessible al llarg del temps i que tots els usuaris hi puguin accedir i interactuar! independentment de la tecnologia que facin servir ara o en el futur.

Fem una ullada a un altre exemple d’abans i després de Joyful Bees Honey pel que fa als principis de WCAG. A la captura de pantalla anterior! podem veure problemes com un contrast de color insuficient del text del botó! camps de formulari sense etiquetar i camps de formulari amb errors no identificats.

Una captura de pantalla d’una pàgina amb un formulari amb diversos problemes d’accessibilitat.
I així és com hauria de ser la pàgina! seguint les directrius WCAG.

Una captura de pantalla d’una pàgina amb un formulari que s’alinea amb WCAG.
Cinc àrees clau d’accessibilitat
Ara que hem explorat els quatre principis bàsics de WCAG! fem una ullada a algunes àrees clau on es necessita l’accessibilitat. En el següent segment! descriurem Iibso rasaasta  cinc àrees essencials d’accessibilitat! amb exemples pràctics i bones pràctiques per guiar-vos per fer que el vostre contingut digital sigui més inclusiu.

Text i llegibilitat

Quan es tracta d’accessibilitat de text! el contingut llegible és crucial. Mitjançant l’ús d’un llenguatge senzill ! les organitzacions poden assegurar-se que el seu contingut és fàcil d’entendre per tothom. El format lògic ! com ara els encapçalaments i els punts clars! també millora el flux d’informació! facilitant-ne el seguiment. Per als usuaris amb discapacitat visual! és essencial seleccionar tipus de lletra adaptables i fàcils de llegir i permetre que el text s’ajusti. Això ajuda a mantenir el text llegible! fins i tot per a persones amb problemes de visió.

Imatges i multimèdia
Fer que les imatges i els multimèdia siguin accessibles ajuda a tots els usuaris a participar plenament amb el vostre contingut! independentment de les seves habilitats sensorials. Afegir subtítols de vídeo i transcripcions d’àudio permet que les persones que utilitzen lectors de pantalla o aquells que no poden escoltar l’àudio entenguin i interactuen amb el vostre contingut de manera més eficaç.

L’ús de text alternatiu descriptiu també millora l’accessibilitat visual. Alt-text proporciona als usuaris una descripció de què és la imatge! assegurant que no es perdi informació important. Per als usuaris que confien en lectors de pantalla! el text alternatiu esdevé essencial! però també és útil en situacions en què les imatges no es carreguen.

Aquí teniu alguns exemples de text alternatiu per inspirar-vos:

Imatge del producte : “Primer pla d’una tassa de ceràmica vermella amb un logotip blanc al davant! col·locada sobre una taula de fusta”.
Foto de l’esdeveniment : “Un grup de principis de les WCAG  persones que assisteixen a una conferència! assegudes en files! amb un altaveu al davant de la sala”.
Infografia : “Una infografia que il·lustra les etapes del cicle de vida del contingut”.
L’accessibilitat del text i dels mitjans és només el començament. Fem ara una ullada a altres àrees clau d’accessibilitat que marquen la diferència.

Navegació i interacció amb l’usuari
La navegació accessible és essencial per oferir una experiència perfecta a tots els usuaris! especialment aquells que depenen de la navegació amb teclat o lectors de pantalla. Per als usuaris que no utilitzen un ratolí! és important assegurar-se que els elements interactius com els botons! els enllaços i els formularis es poden navegar només amb un teclat. També és útil proporcionar dreceres de teclat que ajudin els usuaris a saltar entre seccions ràpidament o saltar-se els enllaços de navegació a la part superior de la pàgina que permeten saltar directament al contingut principal.

Per a les persones amb discapacitat visual! els lectors de pantalla són eines essencials per navegar per la web. Per donar suport a la compatibilitat amb els lectors de pantalla ! és útil estructurar el vostre lloc amb encapçalaments! etiquetes i descripcions clars perquè els usuaris sàpiguen on són i amb què poden interactuar. Per exemple! en comptes de frases vagues com “Fes clic aquí”! les organitzacions poden considerar l’ús de text descriptiu com “Més informació sobre els nostres serveis” perquè els lectors de pantalla puguin proporcionar un context útil.

Exemple de pàgina amb enllaços descriptius.

Formularis i continguts interactius
La creació de formularis accessibles és crucial per garantir que tots els usuaris puguin interactuar fàcilment amb els llocs web. Quan es dissenyen formularis! és important incloure etiquetes de formularis accessibles per a cada camp. Aquestes etiquetes ajuden els usuaris a entendre quina informació es demana i faciliten l’ompliment de formularis! especialment per als que utilitzen lectors de pantalla o altres tecnologies d’assistència.

A més d’etiquetes clares! és útil proporcionar instruccions quan sigui necessari. Per exemple! si un camp requereix un format específic! com ara un número de telèfon o una adreça de correu electrònic! les organitzacions poden indicar als usuaris quin és el format requerit per evitar confusions.

Els missatges d’error també han de ser descriptius i útils. Si un usuari envia un formulari amb una entrada no vàlida! és útil proporcionar comentaris sobre què ha fallat i orientar-los sobre com solucionar-ho. Per exemple! en comptes de dir només “Entrada no vàlida”! és molt més útil provar alguna cosa com ara “Introduïu una adreça de correu electrònic vàlida! com ara [email protected]”.

Color i contrast principis de les WCAG 

Per a l’accessibilitat visual! és important assegurar-se que el text i el fons tinguin un contrast de color suficient perquè el contingut sigui fàcil de llegir! especialment per als usuaris amb baixa visió o daltonisme.

Seguint les directrius WCAG! les organitzacions haurien d’aspirar a una proporció de contrast elevada entre el text i el seu fons. En concret! es recomana una relació de contrast d’almenys 4!5:1 per al text i les imatges del text. Per exemple! el text de color gris clar sobre un fons blanc probablement no compliria aquesta directriu perquè els colors són massa semblants en brillantor! però l’ús de text negre o gris fosc ho faria. Aquesta directriu s’aplica a la majoria del text! però per a text més gran! com ara els encapçalaments! s’accepta una relació de contrast lleugerament inferior de 3:1.

Un exemple de pàgina amb una relació de contrast elevada.
Les organitzacions haurien de procurar una proporció de contrast elevada entre el text i el seu fons per assegurar-se que el seu contingut sigui accessible.
A més! en comptes d’utilitzar només el color per transmetre informació! és bo considerar combinar-lo amb etiquetes de text o icones per assegurar-se que tothom entén el contingut. Per exemple! en comptes de mostrar només un error en vermell! també podeu incloureprincipis de les WCAG una icona com un signe d’exclamació o la paraula “Error” per aclarir el missatge.

Quan trieu una combinació de colors accessible !

és possible que vulgueu considerar l’ús de paletes de colors per al daltonisme que proporcionin prou diferenciació entre colors. Eines com els verificadors de contrast poden ajudar a assegurar-se que les combinacions de colors del lloc de la vostra organització compleixen els estàndards de llegibilitat WCAG 2.1.

Verificador de contrast que mostra una ració de contrast acceptada pel WCAG.
Consells pràctics per fer accessible el vostre contingut
La creació de contingut inclusiu no ha de ser difícil; fins i tot petits ajustaments poden marcar una gran diferència. Ara que hem cobert les cinc àrees clau de l’accessibilitat! vegem com fer que el contingut sigui accessible a la pràctica.

Realitzar una auditoria d’accessibilitat

Per assegurar-vos que el vostre contingut compleix els estàndards d’accessibilitat! fer una auditoria d’accessibilitat és un bon començament. Avaluar el vostre lloc web i el contingut digital existent us pot ajudar a identificar àrees que poden necessitar una mica de millora.

Les eines automatitzades! com ara WAVE o Lighthouse! poden analitzar ràpidament el vostre lloc per detectar problemes d’accessibilitat habituals! com ara la falta de text alternatiu! un contrast de color baix i una estructura de títol incorrecta. Aquestes eines solen generar informes que descriuen les àrees problemàtiques! donant-vos un punt de partida clar per a les millores.

L’ús de directrius d’accessibilitat! com ara les WCAG o les llistes de verificació d’accessibilitat! sempre és útil. Una llista de verificació us permet desglossar cada component Xogta Taleefanka Gacanta de l’accessibilitat! com ara encapçalaments! contrast de colors o formularis! i confirmar que compleixen els estàndards requerits.

Afegiu text alternatiu i enllaços descriptius
Per donar suport a l’accessibilitat de les imatges! és molt útil afegir text alternatiu i utilitzar text d’enllaç descriptiu. Alinear-se amb les millors pràctiques de text alternatiu significa escriure descripcions breus i informatives de les imatges! que permetin als lectors de pantalla descriure la imatge als usuaris amb discapacitat visual. Els textos alternatius també poden ser útils quan les imatges no es carreguen.

Un exemple de text alternatiu utilitzat a la pràctica.
De la mateixa manera! el text descriptiu dels enllaços proporciona context per als enllaços! deixant clar cap a on porten. En lloc d’utilitzar frases com “Fes clic aquí”! proveu d’aconseguir alguna cosaprincipis de les WCAG  més descriptiva perquè tothom pugui navegar fàcilment pel vostre contingut.

Un exemple d’enllaç descriptiu en una pàgina.

Inclou subtítols i transcripcions de vídeo
Incloure subtítols i transcripcions dels vídeos és una bona manera de donar suport a l’accessibilitat dels vídeos. Els subtítols fan que el contingut parlat sigui visible a la pantalla! ajudant els usuaris sords o amb problemes d’audició i oferint flexibilitat per veure’ls en diferents entorns! com ara llocs sorollosos o molt tranquils