Logo de Mosaic
Accessibilitat
Conceptes bàsics d'accessibilitat

25. Conceptes bàsics d'accessibilitat

Tom Hughes-Croucher. 26 de setembre de 2008. Darrera modificació: 1 d'agost de 2017 (equip docent del grau de Multimèdia de la UOC). Publicat a: wcag, alt, 508, secció, legal.

Quan creeu un lloc web, l'accessibilitat (aconseguir que tothom el pugui utilitzar siguin quines siguin les seves capacitats o discapacitats) hauria de ser una de les preocupacions més importants. En aquest curs, fins ara l'accessibilitat ha estat sempre implícita en tots els exemples que hem vist, fins i tot encara que no us n'adonéssiu. En aquest apartat, però, en parlaré explícitament perquè pugueu entendre bé què és, per què és important, com es garanteix que els llocs siguin accessibles i quines directrius existeixen per definir els llocs accessibles.

Abans de parlar concretament de l'accessibilitat al web, començarem parlant de l'accessibilitat en general; al cap i a la fi, l'accessibilitat no és només una qüestió associada als llocs web; és un aspecte que, potencialment, ha de tenir en compte tots els serveis, objectes o tecnologies amb què us trobeu.

Nota

Tingueu en compte que un tema associat sobre el que us hauríeu d'informar és WAI ARIA: la iniciativa Web Accessibility Initiative's Accessible Rich Internet Applications, que és bàsicament una metodologia que permet la creació d'aplicacions amb Ajax/JavaScript més accessibles. Podeu trobar un article molt bo d'introducció a l'ARIA a dev.opera.com.

Els continguts d'aquest apartat són els següents:

25.1. Què és l'accessibilitat?

Mireu al vostre voltant. És molt possible que veieu altres persones; si no és així, per què no aneu a fer una passejada ràpida? Probablement en gaudireu i us anirà bé. Totes les persones que veureu seran diferents: algunes tenen els cabells castanys, altres no. Algunes tenen els ulls blaus, altres no. Altres porten ulleres, altres no. Ningú és exactament igual a ningú altre. Algunes diferències, com el color dels cabells o dels ulls, són purament cosmètiques; és a dir, no afecten de cap manera important la nostra vida. Algunes diferències, com el fet de portar ulleres, sí que l'afecten. L'accessibilitat és una cosa molt senzilla, una filosofia, tot i que en alguns països també forma part de la llei.

L'accessibilitat és tractar a tothom igual, siguin quines siguin les seves capacitats.

Sóc molt conscient que aquesta afirmació està oberta a la interpretació. La majoria de les discussions sobre accessibilitat comencen parlant sobre la discapacitat. Això implica que les persones amb alguna discapacitat mereixen un tractament especial. Però l'accessibilitat no és això; en realitat és un símptoma de la manera en què la gent ha construït tradicionalment edificis, llocs web i moltes altres coses.

Quan es construeixen coses pressuposant que tothom és igual que nosaltres, podeu estar segurs que sempre funcionaran malament per a algunes persones. La gent pressuposa que l'accessibilitat és ajudar les persones amb alguna discapacitat, ja que l'accessibilitat afegida és una cosa molt present a la nostra societat. Per exemple, molts edificis que es van construir només amb escales han incorporat de sobte unes rampes barates i molt lletges. Però l'accessibilitat ha estat durant molt de temps una qüestió de disseny militar. Per què? Doncs perquè sovint és vital per a la supervivència; amb unes forces g molt elevades, els pilots dels avions de combat no poden fer el mateix que fan quan són a terra. Si els dissenyadors no tinguessin en compte les necessitats dels pilots en entorns tant de gravetat alta com baixa, hi hauria molts més accidents d'avió.

Què significa, però, per als desenvolupadors de llocs web? La resposta ràpida és que heu d'intentar ser més conscients de les necessitats de tota l'audiència que pot visitar el vostre lloc web. Una resposta més llarga implicaria, per part vostra, ser mínimament conscients dels diferents nivells de capacitats que pot tenir la gent i de l'ús que fan dels ordinadors. Aplicant les tècniques que es descriuen en aquest apartat i en altres apartats relacionats podreu crear uns llocs web que funcionin bé amb moltes formes d'interacció. Els vostres llocs web han de poder ser utilitzats per persones:

De moment no cal que us preocupeu pels detalls concrets d'aquestes interaccions; ja els anirem veient pas a pas.

25.2. Per què és important l'accessibilitat?

L'accessibilitat és important per una raó principal i per moltes altres raons petites. La principal és que tots som diferents però tots tenim el mateix dret a utilitzar els llocs web, però hi ha moltes altres raons per les quals hauríeu de tenir en compte l'accessibilitat a l'hora de crear llocs web:

Ara passarem a veure alguns d'aquests punts més detalladament.

25.2.1. Els aspectes legals de l'accessibilitat

Nota

És molt important entendre els fonaments dels aspectes legals, però si no és que sou un advocat i sabeu bé de què esteu parlant, caldria que anéssiu molt en compte a l'hora de donar una opinió sobre qüestions legals.

Al Regne Unit, segons la DDA, és il·legal discriminar les persones discapacitades a l'hora de contractar treballadors i oferir serveis o educació. La discriminació es defineix com no fer "ajustaments raonables" per donar suport a tothom, siguin quines siguin les seves capacitats o discapacitats. Això s'aplica, evidentment, als serveis i l'educació disponibles a través de llocs web.

Als Estats Units i la Unió Europea també hi ha exigències per als llocs web governamentals. Als Estats Units, els llocs web del govern federal (i d'alguns governs estatals) han de complir la Secció 508. La Secció 508 és un document que intenta definir els requisits mínims per aconseguir l'accessibilitat. La Secció 508 no afecta només els llocs web, sinó que també fa referència a qualsevol altra tecnologia que puguin utilitzar els empleats federals. A Europa, la Comissió Europea ha reconegut la Web Accessibility Initiative (WAI) de W3C i recomana el seu ús a tots els estats membres. La WAI publica directrius per a llocs web, fabricants d'eines de creació de webs i navegadors web (per exemple, el WCAG, del qual parlaré més endavant).

25.2.2. Mercats potencials

Si creeu llocs web (o qualsevol altra cosa) per a un tipus de persones concretes, estareu excloent altres menes de persones fins i tot encara que no us n'adoneu, i tota aquesta gent exclosa pot representar fàcilment una quota de mercat important (o fins i tot majoritària). L'any 2000, la cadena de supermercats Tesco del Regne Unit va posar en marxa un projecte per crear una versió diferent del seu lloc de comestibles en línia pensat específicament per a les persones amb discapacitats visuals. Julie Howell de RNIB va comentar que "La feina realitzada per Tesco.com per aconseguir que el seu servei de comestibles fos més accessible per a les persones cegues ha resultat en un augment dels ingressos de 13 milions de lliures anuals, uns ingressos que no estaven a l'abast de la companyia quan el lloc web no era accessible per als clients cecs". Així, doncs, si Tesco no hagués pensat en la gent amb discapacitats visuals no hauria arribat mai a un mercat de clients amb un valor de 13 milions de lliures com a mínim.

La lliçó que n'hem d'extreure és que tothom, siguin quines siguin les seves capacitats, necessita els mateixos serveis: queviures, taxis, electricitat... i ha de poder gaudir de les mateixes coses: pel·lícules, música, bars... Pressuposar que la situació vital personal d'algú fa que canviïn les seves capacitats o els seus desitjos de participar en tots els aspectes de la societat s'ha demostrat una i una altra vegada com un gran error.

25.2.3. Motors de cerca

Els motors de cerca no són persones. Sovint, quan algú crea un lloc web ho fa sense tenir en compte com es podrà trobar a Google, Yahoo, etc. Els motors de cerca són només programes informàtics i per indexar la pàgina només poden utilitzar la informació que poden entendre. Això els fa ser molt similars als lectors de pantalla que poden utilitzar les persones amb alguna discapacitat visual.

L'exemple més obvi dels efectes que això té sobre el disseny de webs són les imatges. Els ordinadors mostren imatges a partir d'una llista amb els colors que han de tenir tots els píxels i envien aquesta informació al monitor. Si poseu en una pàgina web una imatge que conté text, com per exemple un logotip, l'ordinador no té ni idea de què diu el text i ni tan sols sap que la imatge en conté. En HTML, l'element d'imatge conté una manera de descriure amb text el contingut d'una imatge, que és l'atribut alt. Cal que oferiu un text per descriure totes les imatges no decoratives del vostre lloc, i mai hauríeu de representar paràgrafs complets com a imatges (o Flash); les persones cegues i els motors de cerca no tindran ni idea de què diu el text. Com a resultat, la posició en un motor de cerca (és a dir, la facilitat de trobar el vostre lloc web amb motors de cerca com el Google) se'n veurà afectada i quedareu innecessàriament fora d'un mercat molt valuós.

25.2.4. Ètica i marques

Tothom hauria de tenir en compte l'accessibilitat, però això no vol dir que tothom ho faci. Si teniu en compte l'accessibilitat estareu actuant en benefici de la comunitat. Això és una cosa de la qual us podreu enorgullir; si demostreu que teniu en compte a tothom que integra la nostra societat aconseguireu millorar molt la vostra imatge de marca. Com a professionals, la nostra obligació és intentar aconseguir els resultats de la millor qualitat possible. En una societat que ens valora com a persones individuals, és important no excloure algú pel fet que tingui unes necessitats diferents.

Si seguiu uns principis responsables i demostreu d'una manera genuïna que els apliqueu, podreu crear una imatge de marca extraordinàriament positiva. Les companyies que demostren que es preocupen pels seus clients els fidelitzaran molt més que les que no ho fan.

25.3. Dissenyar pensant en l'accessibilitat

La clau per a l'accessibilitat és pensar en un problema i decidir solucionar-lo per a més d'un tipus d'usuaris.

Si preteneu tractar l'accessibilitat com alguna cosa que ja afegireu una vegada ja hàgiu acabat totes les altres feines, només aconseguireu tenir una cosa mal feta i mal integrada. Necessitareu més temps, no funcionarà bé i tindrà un aspecte horrible.

La millor manera d'aconseguir una solució ben feta és dissenyar el web tenint en compte totes les necessitats des del primer moment. Això no vol dir que no pugueu canviar els vostres plans o afegir-hi alguna cosa que us hagués passat per alt, però hauríeu d'intentar ser conscients de quin és el problema general que preteneu solucionar amb el vostre disseny. En el cas dels llocs web, això implica crear una solució usable per tots els usuaris, incloent-hi aquells que potser no poden utilitzar un ratolí, un teclat, un monitor, etc.

25.4. Requisits d'interoperabilitat

Els requisits d'interoperabilitat poden variar molt d'una situació a una altra:

Quan vulgueu construir llocs web per al web públic, doncs, caldrà que hi incorporeu una certa interoperabilitat amb una combinació molt variada d'usuaris i tecnologies. Hi ha quatre enfocaments possibles:

A les intranets, la compatibilitat amb versions anteriors i la varietat són un problema molt més petit. Una organització concreta pot garantir, per exemple, que tots els empleats amb discapacitats tinguin accés a una tecnologia d'assistència que accepti bé el DHTML. En aquestes circumstàncies, i amb les proves pertinents amb la tecnologia d'assistència oferta, seria raonable prendre el JavaScript com a referència.

La compatibilitat amb versions posteriors i la compatibilitat entre plataformes, però, sí que segueixen essent un problema, per la qual cosa s'haurien de preferir les tecnologies obertes i estàndard sobre les tecnologies de propietat i no estàndards.

Podríeu, per exemple, desenvolupar una aplicació de formació de la intranet per a una gran corporació. Us han demanat que garantiu que l'aplicació sigui accessible, però no us han especificat cap estàndard al qual us hàgiu d'adaptar. Parleu amb el departament d'informàtica i descobriu que tothom té l'última versió de l'Internet Explorer amb el JavaScript habilitat i el Flash instal·lat i activat, i també que tothom disposarà de la tecnologia d'assistència moderna necessària per poder fer servir tots aquests programes. Encara que la companyia passi a una plataforma Unix seguirà havent-hi la tecnologia d'assistència necessària per al JavaScript, però el text i els controls en Flash només són accessibles des del Windows. Podríeu fer que l'script i el Flash fossin una referència obligatòria per a la vostra aplicació. Però decidiu utilitzar el Flash només per reproduir vídeo i construir els grups de controls per al vídeo Flash a partir dels estàndards del web, ja que la tecnologia d'assistència només pot accedir als controls del Flash des de la plataforma Windows. D'aquesta manera, l'aplicació seguiria essent accessible encara que la companyia migrés a Unix.

Les polítiques de TI de l'organització poden canviar, i tots els esforços més ben intencionats per fer que les funcions JavaScript siguin operatives i per explotar els grups de funcions d'accessibilitat dels connectors poden fallar; per tant, continua essent una bona idea anar realitzant una millora progressiva de la referència tecnològica a partir d'una capa HTML bàsica.

25.5. Característiques d'una pàgina web accessible

En aquest subapartat explicaré les funcions d'accessibilitat diferents d'un lloc web; és a dir, què ha de contenir un lloc web accessible. Explicaré cadascuna d'elles en detall.

25.5.1. Estructura semàntica

Una de les bases dels estàndards del web és l'ús de l'estructura semàntica en l'HTML. L'estructura semàntica també és summament important per a l'accessibilitat. És així perquè ofereix un marc de referència per a la informació de la pàgina. Quan la gent no pot veure l'estil visual de la pàgina, l'estructura semàntica ajuda a explicar-los diverses coses. Els pot indicar la seva posició a la jerarquia del document i les maneres en què poden interactuar amb els diferents elements de la pàgina; també ofereix èmfasi al contingut textual en els llocs adequats.

Un bon exemple de la importància de l'estructura semàntica d'un document per a l'accessibilitat és la navegació. Un menú de navegació ben estructurat és una llista de punts. Podeu etiquetar-lo com una llista HTML:

<ul>
   <li>Entrada del menú 1</li>
   <li>Entrada del menú 2</li>
   <li>Entrada del menú 3</li>
</ul>

Amb uns menús de navegació estructurats com a llistes, els usuaris de lectors de pantalla podran saber molt fàcilment que és una llista encara que no la puguin veure. Això és així perquè els lectors de pantalla els diuen que és una llista. Si no utilitzeu l'etiquetatge de llista, llavors el lector de pantalla no té cap manera de saber que és una llista i no ho pot dir a l'usuari.

Vegeu també

Podeu trobar més informació sobre l'ús de la semàntica correcta al vostre HTML a molts dels apartats anteriors d'aquest curs, bàsicament als que parlen de l'HTML.

25.5.2. Contingut alternatiu

Tal com s'esmenta al subapartat sobre els motors de cerca, és essencial que hi hagi una alternativa accessible al contingut i la navegació. El text es considera la moneda universal del contingut, però sobre això cal fer una advertència, tal com veureu més endavant. Un lector de pantalla pot llegir el text sense cap dificultat, es pot fer més petit o més gran, se'n pot modificar el contrast molt fàcilment i s'hi poden fer moltes més transformacions. Com el text és tan fàcil de manipular, totes les formes més exòtiques de contingut haurien de tenir sempre una alternativa basada en text. Alguns formats, com ara les versions més modernes de Flash, ja integren l'accés a text per tal de poder accedir directament al seu contingut textual directament sense necessitat d'haver d'oferir una alternativa per a tot el suport.

Vegeu també

Vegeu els motors de cerca en el subapartat 25.2.3 d'aquest mòdul.

L'únic grup amb discapacitat per al qual una alternativa de text pot no tenir cap utilitat és el grup de persones amb discapacitats cognitives.

La dificultat que presenten les persones amb discapacitats cognitives és que normalment necessiten un contingut diferent i no el mateix contingut en un suport diferent. Amb això no volem dir que no calgui fer-ho. La simplificació del llenguatge i de la terminologia utilitzats en el vostre lloc web representarà un benefici per a tothom. Alguns grups, com la Plain Language Commission, recomanen un enfocament de "llenguatge senzill" per al material que utilitzen les companyies per donar als seus clients la informació important, com ara els requisits legals i els termes i les condicions. Aquests grups ofereixen un lèxic molt senzill que conté els termes que es poden fer servir per a una comunicació efectiva utilitzant el llenguatge més planer possible.

Com podeu incloure alternatives de text al vostre lloc web? El primer pas és identificar les coses que encara no són text. En l'HTML hi ha moltes coses que encara no són text. Les imatges en són l'exemple més evident.

Aquí teniu un exemple d'ús accessible d'una imatge:

<p>An interesting piece of art is Michelangelo's "God creates
Adam" <img src="images/adam.jpg" alt="A painting of a man
reaching up to touch God's hand reaching down. It is cracked with age."
longdesc="adam.html">.</p>

La imatge d'aquest exemple forma part integral del contingut. L'atribut alt conté una descripció breu de la imatge per a les persones (o per als motors de cerca) que potser no poden veure-la correctament. L'atribut longdesc permet enllaçar amb una pàgina HTML que conté una descripció completa de la imatge. Això es fa servir normalment només per descriure imatges complexes que es fan servir com a part important del contingut. I també té l'inconvenient que els navegadors no l'accepten completament. La majoria de les vegades només utilitzareu l'atribut alt.

Quan feu les imatges per a coses diferents que no són contingut, com ara la navegació o simplement com a decoració visual, les hauríeu de tractar diferent de les imatges de contingut. Les imatges utilitzades per fer més atractius els botons o la navegació de la pàgina han de tenir un atribut alt que coincideixi amb el text de la imatge. L'atribut alt funciona senzillament com una manera senzilla per permetre que l'ordinador llegeixi el text contingut a la imatge (i el llegeixi a un usuari d'un lector de pantalla).

En el cas de les imatges purament decoratives, les imatges utilitzades per al seguiment d'anuncis o qualsevol altra imatge que no tingui en principi cap interès per a l'usuari o amb la qual no hagi d'interactuar, l'atribut alt hauria de quedar buit. Això no vol dir que s'hagi d'ometre aquest atribut, sinó que s'ha de definir com a alt="". Això és així a causa d'una tàctica que utilitzen els lectors de pantalla per ajudar els seus usuaris a fer front a pàgines molt inaccessibles. Quan una imatge no té cap atribut alt, especialment quan forma part d'un enllaç, el lector de pantalla llegeix la URL de la imatge a l'usuari. Ho fan així perquè els usuaris puguin saber què és la imatge a partir de la URL, per exemple si la imatge té un nom similar a afegir_a_carreto.gif. Així, doncs, hauríeu de definir alt="" per a les imatges que sapigueu que no tindran cap interès per a l'usuari, de manera que els lectors de pantalla no llegeixin totes i cadascuna de les URL de les imatges, la qual cosa podria arribar a ser molt frustrant per a l'usuari del lector de pantalla.

No totes les formes de contingut són tan simples com una imatge. Els suports més complexos, com el Flash (els arxius Flash poden ser llocs web sencers en si mateixos) o les pel·lícules exigeixen unes descripcions més complexes. Les versions més recents de Flash permeten oferir alternatives de text per als elements d'una pel·lícula Flash, igual que en l'HTML.

25.5.3. Definir la interacció

Moltes webs actuals impliquen l'ús de tecnologies a més a més de l'HTML. Fins i tot una cosa tan bàsica com el CSS es pot utilitzar de maneres que facin que una pàgina o una interacció siguin molt menys accessibles.

La clau per a l'accessibilitat en la interacció es troba en el fet de començar amb les interaccions més senzilles i utilitzar-les com a components bàsics per a les interaccions més complexes.

Nota

Tingueu en compte que l'objectiu d'aquest exemple és fer-vos veure la funció que tenen els diferents elements de les pàgines web. Per garantir que siguin accessibles han de ser semànticament solvents en termes tant dels elements HTML com de les metàfores visuals que s'hi utilitzin. Si ho trobeu tot plegat una mica confós, torneu a llegir l'exemple unes quantes vegades i mireu també uns quants menús i altres components de pàgines web mentre aneu comprovant no només si s'hi utilitza l'HTML correcte sinó també si l'aspecte del component té sentit en relació amb la seva funció. No podeu esperar mai que un visitant d'una pàgina web faci una cerca amb un quadre de text que es diu "Introduïu la vostra adreça electrònica per subscriure-us al nostre butlletí informatiu", ni tampoc podeu esperar que un visitant vident pugui localitzar contingut d'interès si tots els títols tenen el mateix estil que el text normal (de manera similar, tampoc podeu esperar que un usuari cec localitzi contingut d'interès si tots els "títols" són en realitat només uns altres paràgrafs amb una mida de text més gran aplicada amb el CSS o elements font).

Un bon exemple d'això és la metàfora visual tan utilitzada de les pestanyes. La metàfora de les pestanyes s'ha extret de les carpetes d'anelles amb classificadors de temes. Això s'ha traslladat als ordinadors per permetre que una única àrea de la pantalla pugui mostrar informació de diversos temes representats per pestanyes connectades a l'àrea. Fins aquí tot és raonablement senzill. El problema són les tecnologies utilitzades per crear les pestanyes, que normalment s'apliquen amb el JavaScript.

Tan bon punt les pestanyes s'utilitzen com a part d'una interacció més complexa que el simple fet de permetre que l'usuari seleccioni la informació, la metàfora original queda trencada, però sovint se segueix utilitzant el mateix codi per representar les pestanyes. En el següent exemple, l'HTML mostra l'aspecte d'un control de pestanya que mostra informació:

<div class="tabcontrol">
   <div class="hd">
      <ul>
         <li><a href="#dogs" class="selected">Dogs</a></li>
         <li><a href="#cats">Cats</a></li>
         <li><a href="#fish">Fish</a></li>
      </ul>
   </div>
   <div class="bd">
      <p id="dogs" class="selected">Some information about dogs.
 	  The dogs tab is the default tab.</p>
      <p id="cats">Some information about cats.</p>
      <p id="fish">Some information about fish.</p>
   </div>
</div>

En aquest exemple, la classe selected s'utilitzaria per especificar quina pestanya ha de mostrar el gràfic de "pestanya frontal"; per exemple, consulteu la pestanya "Articles" de la part superior d'aquesta pàgina que utilitza aquest mètode.

Aquesta estructura és adequada per al contingut que transmet informació. En aquest exemple, la class de selected s'utilitzaria per indicar quina pestanya és l'activa, és a dir, la que està oberta i mostra la seva informació; les altres estarien tancades (és a dir, els seus paràgrafs estarien ocults) fins al moment de fer clic en els seus enllaços corresponents. La pestanya Dogs és la pestanya activa per defecte, tal com mostra la figura 1.

Control per pestanyes que mostra la pestanya 'Dogs' activa per defecte

Figura 1. Un control per pestanyes molt senzill que mostra la pestanya "Dogs" com a la pestanya activa per defecte.

Quan es fa clic en un altre enllaç (tal com mostra la figura 2) s'utilitzarà el JavaScript per moure dinàmicament class="selected" fins a aquest enllaç; en aquest moment s'aplicarà l'estil a aquesta pestanya per mostrar-la, i la que es mostrava prèviament s'ocultarà.

Control per pestanyes que mostra una pestanya nova activa després de clicar el seu enllaç

Figura 2. Ara s'ha fet clic en un enllaç diferent i la seva pestanya corresponent passa a ser la pestanya activa.

També és molt habitual utilitzar pestanyes per permetre que els usuaris seleccionin tipus diferents de cerques. En aquest cas, si intenteu reutilitzar l'estil de codi de l'exemple previ el concepte es comença a descompondre:

<div class="tabcontrol">
   <div class="hd">
      <ul>
         <li><a href="#dogs" class="selected">Dogs</a></li>
         <li><a href="#cats">Cats</a></li>
         <li><a href="#fish">Fish</a></li>
      </ul>
   </div>
   <div class="bd">
      <form id="dogs" class="selected" action="search.html"
 	  method="GET"><div><label for="dogsearch"><input type="text"
 	  name="dogsearch" id="dogsearch"><input type="submit"
 	  value="Search for Dogs"></div></form>
      <form id="cats" action="search.html" method="GET"><div><label
 	  for="catsearch"><input type="text" name="catsearch"
 	  id="catsearch"><input type="submit" value="Search for
 	  cats"></div></form>
      <form id="fish" action="search.html" method="GET"><div><label
 	  for="fishsearch"><input type="text" name="fishsearch"
 	  id="fishsearch"><input type="submit" value="Search for
 	  fish"></div></form>
   </div>
</div>

L'ús de la mateixa estructura de codi ja no té cap sentit; en aquest cas hi ha els mateixos elements form repetits una i una altra vegada perquè tot encaixi amb el concepte de substituir el contingut, la qual cosa és un malbaratament d'etiquetatge. En lloc de pensar visualment, el que és important és pensar en la interacció en si. En aquest exemple, més que seleccionar informació nova per veure les pestanyes hauríeu de canviar la interacció de l'usuari amb el formulari de cerca. De fet, l'única cosa que ha de fer una pestanya és seleccionar el tipus d'animal que cerca l'usuari. Si ho poseu en pràctica, podreu crear una interacció molt millor per a tots els usuaris del lloc amb un etiquetatge més net i més senzill de mantenir:

<form action="search.html" method="GET">
   <fieldset>
      <legend>Search within:</legend>
      <ul>
         <li><label for="dogs">Dogs</label><input id="dogs" type="radio"
 		 name="animal" value="dog" checked></li>
         <li><label for="cats">Cats</label><input id="cats" type="radio"
 		 name="animal" value="cat"></li>
         <li><label for="fish">Fish</label><input id="fish" type="radio" 
 		 name="animal" value="fish"></li>
      </ul>
   </fieldset>
   <input type="text" id="searchfield" name="search">
   <input type="submit" value="Search">
</form>

Si es crea primer la interacció, l'etiquetatge és més net i tots els usuaris del lloc n'obtindran la millor experiència possible. Quan hem començat ampliant una metàfora visual hem trencat ràpidament la interacció i hem creat un etiquetatge horrible basat en els supòsits de l'exemple previ. Si haguéssim utilitzat AJAX per inserir el contingut en lloc de tenir-lo tot a la pàgina, el resultat hauria estat encara pitjor. Els usuaris sense JavaScript haurien hagut de carregar una pàgina totalment nova per passar al formulari de cerca per a gats o peixos. Si pensem primer en la interacció bàsica (més que en l'aspecte visual), el problema serà molt més senzill. Ara podem seguir mantenint la metàfora de les pestanyes (tot i que amb uns quants estils i scripts) i utilitzar un únic formulari per a totes les cerques.

Això és bàsic per entendre com s'ha de crear una interacció accessible. Un dels punts positius de l'HTML és que la feina més feixuga d'aconseguir que les interaccions en HTML siguin accessibles ja està feta. Si no utilitzeu tecnologies amb HTML per trencar la metàfora, podreu aconseguir que la majoria de les coses funcionin sense gaires esforços per a la majoria de persones.

25.6. Estàndards de l'accessibilitat

En aquest subapartat revisaré alguns dels estàndards i directrius disponibles que pretenen definir l'accessibilitat del web i ajudar els desenvolupadors del web a crear uns llocs accessibles. La majoria d'aquests sistemes inclouen algun tipus de sistema de llista de control perquè els desenvolupadors puguin comprovar la manera en què els seus llocs compleixen els diferents criteris d'accessibilitat.

25.6.1. Directrius d'accessibilitat del contingut web 1.0

El W3C és un dels principals organismes d'estàndards d'Internet. La seva Web Accessibility Initiative (WAI) va publicar la primera versió de les seves directrius per a uns llocs web accessibles el mes de maig de 1999. Les directius d'accessibilitat del contingut web (WCAG) són l'estàndard més utilitzat per a l'accessibilitat del web. Diversos organismes governamentals, que inclouen la UE i el govern italià, recomanen o exigeixen l'ús de les WCAG 1.0.

Les WCAG 1.0 són un grup de 14 directrius que intenten resumir els objectius necessaris per fer que una pàgina sigui accessible.

Cadascuna de les directrius inclou diversos punts de control, que són l'essència real del document. Les directrius expliquen els conceptes que els autors volien transmetre, però la validació es fa amb els punts de control. Cadascun dels punts de control està classificat amb una prioritat de l'1 al 3 per identificar la seva importància. Per tal d'ajustar-se a les WCAG 1.0 cal complir tots els punts de control de prioritat 1. El compliment de tots els punts de control de prioritat 1 dóna una classificació de conformitat "A". Si, a més, es compleixen tots els punts de control de prioritat 2, llavors el nivell de conformitat és "AA". Si es compleixen tots els punts de control de prioritat 1, 2 i 3, llavors el nivell de conformitat serà "AAA", que és la classificació més elevada.

En realitat, però, les WCAG 1.0 ja han quedat una mica antiquades. Moltes companyies comencen amb una classificació de conformitat "A" o "AA" i llavors es dediquen a afegir-hi altres directrius, com per exemple la See it Right de RNIB. Les WCAG 1.0 són un bon punt de partida, però també hauríeu de tenir en compte altres estàndards més actuals, especialment si utilitzeu molt JavaScript o altres tecnologies sorgides després de l'any 1999, que va ser quan es van publicar les WCAG 1.0.

Una altra cosa important que cal tenir en compte sobre l'estàndard WCAG 1.0 és que va ser dissenyat com a part d'un conjunt de 3 documents. Un altre feia referència als "agents d'usuari", que descriu els navegadors (com ara Opera) i altres tecnologies addicionals que la gent pot necessitar per utilitzar el web (com ara lectors de pantalla). El tercer cobria les eines d'autoria, com ara Dreamweaver o els sistemes de gestió del contingut; el seu objectiu és aconseguir que aquestes eines facin una bona part de la feina necessària per acabar tenint unes pàgines web accessibles. Desafortunadament, aquesta visió no ha quallat i l'únic estàndard d'aquests tres que s'ha adoptat d'una manera generalitzada és el WCAG 1.0. Això significa que sovint no es compleixen les expectatives del WCAG 1.0 pel que fa als agents d'usuari, i que les eines d'autoria fan una part molt petita de la feina per aconseguir uns llocs webs accessibles. Això no vol dir que no pugueu utilitzar el WCAG 1.0; senzillament significa que només fa referència a una part dels criteris d'accessibilitat i que no és la solució completa.

25.6.2. Directrius d'accessibilitat del contingut web 2.0

Una vegada publicades les directrius WCAG 1.0, el W3C ja va començar a treballar amb l'estàndard WCAG 2.0.

Nota

En el moment d'escriure aquest apartat, aquesta versió actualitzada de l'estàndard es troba encara en la fase d'esborrany. Tenint en compte el procés que segueix el W3C, és molt probable que aquest estàndard es publiqui a principis de 2009.

El WCAG 2.0 és una mica diferent, ja que intenta no centrar-se tant en una tecnologia concreta com el WCAG 1.0; és a dir, que es pot aplicar a HTML, CSS, Flash, etc. El WCAG 2.0 es basa en 4 principis d'accessibilitat. Aquests són:

Perceptibilitat
Les persones han de poder accedir al contingut a través d'un suport que tinguin a la seva disposició. Per exemple, les persones amb problemes visuals han de poder escoltar el contingut.
Operativitat
Les persones han de poder interactuar amb l'aplicació o el contingut del web.
Comprensibilitat
Les persones que utilitzin el contingut i la interfície d'usuari els han d'entendre.
Robustesa
Qualsevol solució oferta hauria d'estar disponible en diferents plataformes o sistemes. Amb això es pretén evitar que s'inventin solucions que la majoria de les persones no podran utilitzar perquè el maquinari/programari està restringit o és molt car.

Aquí és important dir que no s'espera que els llocs web compleixin tots aquests requisits. La tecnologia d'un usuari també hauria de fer part de la feina. Per exemple, se suposa que les persones que el necessitin ja tindran un lector de pantalla, i per tant no cal que tots els llocs web ofereixin una versió d'àudio del contingut. Però sí que se suposa que el lloc web ha d'oferir unes pàgines que es puguin llegir fent servir la tecnologia de lectura de pantalla més habitual per tal de fer-ho possible. Aquesta diferència és important, igual que ho és la diferència entre un lloc web amb "widgets d'accessibilitat" (com per exemple un botó per fer més gran la mida de la lletra) i una pàgina web que funcionarà en moltes situacions diferents (per exemple, diversos navegadors i dispositius que serien impossibles de preveure).

El WCAG 2.0 també és diferent del WCAG 1.0 per l'enfocament envers la tecnologia. Com que aquest estàndard és més agnòstic pel que fa a la tecnologia i fa referència a conceptes sobre l'accessibilitat en lloc de concretar detalls tècnics, és important prestar atenció als documents que acompanyen l'estàndard. El document "estàndard" de WCAG 2.0 oferirà la informació bàsica, però el document "tècniques" ofereix dades sòlides i aplicables al desenvolupador. Aquest es divideix en tècniques "generals" (ambigües pel que fa a la tecnologia) i en detalls concrets per a les tecnologies individuals del W3C. El W3C no escriu documents per a tecnologies propietàries, per la qual cosa haureu de trobar tècniques per a tecnologies com Flash i Silverlight en altres llocs.

25.6.3. Altres estàndards

Un altre estàndard important desenvolupat al W3C és l'estàndard WAI-ARIA. Aquestes sigles són l'acrònim de Web Accessibility Initiative-Accessible Rich Internet Applications. Es tracta d'una sèrie de documents que defineixen la manera de fer accessibles les aplicacions web complexes que utilitzen tecnologies com HTML, JavaScript i AJAX.

Hi ha molts altres estàndards per a l'accessibilitat del web; massa nombrosos per parlar-ne en detall. El W3C manté una llista excel·lent de polítiques internacionals relatives a l'accessibilitat del web; aquest és un recurs molt important per poder trobar els documents de polítiques de tots els governs locals.

Resum

L'accessibilitat és una qüestió important per raons tant econòmiques com socials. No és una característica d'un lloc web, sinó una mesura de la qualitat amb la qual es va crear. Si teniu en compte l'audiència del vostre lloc mentre l'aneu creant (i abans de fer-ho), construireu unes pàgines més accessibles amb tots els avantatges que això comporta. Hi ha diverses directrius molt conegudes que us poden ajudar i si us hi ajusteu podreu garantir que el que hàgiu construït satisfarà els criteris experts per fer que les vostres pàgines siguin accessibles.

Preguntes de repàs

  1. Doneu 3 raons per les quals sigui important crear llocs web accessibles.

  2. Utilitzeu l'Internet per veure quines són les lleis sobre accessibilitat del vostre país i feu una llista de totes les lleis que creieu que serien aplicables als vostres llocs web. La vostra llista també hauria d'incloure si aquestes lleis us exigeixen que utilitzeu alguns estàndards del web, com ara WCAG o la Secció 508.

  3. Expliqueu de quina manera l'accessibilitat és important per a l'optimització dels motors de cerca.

  4. Creeu un exemple d'un ús accessible de contingut alternatiu fent servir part del vostre contingut propi, com per exemple una fotografia.

  5. Utilitzeu Internet per veure com podríeu aconseguir que una tecnologia com Flash o Silverlight sigui accessible i escriviu una comparació entre fer-les accessibles i com es fa accessible l'HTML.

  6. Expliqueu com dissenyaríeu una interacció d'una pàgina web perquè sigui accessible. Escriviu unes instruccions pas a pas per crear un control d'arbre (no cal que l'acabeu creant realment).

Logo Creative Commons
Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada.
: Anar a l'índex :