Title: Normes d’accessibilitat i usabilitat
Author: SGTI
Last saved by: Ana-Carlos
Company: Departament d'Ensenyament

Recull de normes d’usabilitat i accessibilitat

Recull de normes d’accessibilitat i usabilitat
Índex
Índex
1.	Continguts alternatius per als elements no textuals (visuals i auditius)
2.	No emprar el color com element diferenciador
3.	Utilitzar etiquetes de marcatge i fulls d’estil correctament
4.	Identifiqueu el llenguatge natural usat
5.	Creu taules que es transformin correctament
6.	Assegureu que les pàgines que incorporen noves tecnologies es transformin correctament
7.	Assegureu a l’usuari el control sobre els canvis dels continguts amb una seqüència temporal
8.	Proporcioneu l’accessibilitat directa de les interfícies d’usuari incrustades
9.	Dissenyeu amb independència del dispositiu
10.	Utilitzeu solucions provisionals
11.	Utilitzeu les tecnologies i pautes W3C
12.	Proporcioneu informació de context i orientació
13.	Proporcioneu mecanismes clars de navegació
14.	Assegureu que els documents siguin clars i simples
Referències

1.	Continguts alternatius per als elements no textuals (visuals i auditius) 
Proporcioneu un contingut que, presentat a l’usuari, compleixi essencialment la mateixa funció o propòsit que el contingut visual o auditiu (A)

Per a tots els elements no textuals, incloeu un text equivalent via "alt", "longdesc" o en el contingut de l'element. Sempre que utilitzeu un element no textual cal incloure un text equivalent que compleixi la mateixa funció. 
El W3C (World Wide Web Consortium) considera elements no textuals els següents: imatges, el text inclòs en imatges o altres formats gràfics, símbols, regions dels mapes d'imatge, animacions, "ascii art", "frames", "scripts", imatges utilitzades per marcar cadascun dels elements d'una llista, imatges utilitzades com a espaiadors, botons gràfics, sons (activats amb la interacció de l’usuari o sense), arxius de so, pistes d'àudio en vídeos, vídeos, "applets" i altres objectes de programació.

•	Text alternatiu per a una imatge senzilla
<IMG SRC="arbre.gif" ALT="Dibuix d’un arbre.">

•	Text alternatiu per a una imatge que il·lustra un enllaç
<A HREF="inici.htm" title="Anar a la pàgina d’inici” > <IMG SRC="logo.gif" ALT="Inici" title="Anar a la pàgina d’inici."> </A>

•	Text alternatiu per a una imatge complexa
Si la informació que conté una imatge és important per a la comprensió dels continguts (per exemple un gràfic) i requereix una descripció més llarga que la es pot incloure en l'atribut "alt", caldrà incloure una descripció més llarga. L’atribut "longdesc" permet incloure un enllaç a la pàgina que conté aquesta descripció.
<IMG SRC="grafic.gif" LONGDESC="grafic.html" ALT="Gràfic de dades matemàtiques."> 

Com que hi ha pocs programes que interpretin l’atribut "longdesc", cal incloure un "d-link" que enllaci a la pàgina que conté la descripció.
<IMG SRC="grafic.gif" LONGDESC="grafic.html" ALT="Gràfic de dades matemàtiques."> <a href="grafic.html" title="descripció del gràfic">D</a>

•	Text alternatiu per a una animació
<IMG SRC="semàfor.gif" ALT="Animació. Icona d’un semàfor que canvia de color"> 

•	Text alternatiu amb l’element APPLET
Si utilitzeu l'element APPLET incloeu el text alternatiu entre les etiquetes d’obertura i tancament de l'element.
<APPLET code="Blink.class" width="400" height="35" alt="Java applet: text en moviment."> En aquest applet es pot llegir: edu365, el teu portal educatiu" </APPLET> 

•	Text alternatiu amb l’element OBJECT
Si s’utilitza OBJECT per incloure la imatge, incloeu el text alternatiu entre les etiquetes d’obertura i tancament de l’element.
<OBJECT data="grafic.gif" type="imatge/gif" height=150 width=400> Gràfic format per ..... que recull ...... Descripció detallada del gràfic. </OBJECT> 

•	Textos o símbols en imatges
 L’atribut "alt" ha de contenir el mateix text que la imatge.
<IMG SRC="logo_edu365.gif" ALT="Edu365"> 

•	Textos alternatius en mapes d’imatges (tipus client)
Incloeu l'atribut "alt" per a cada "area" del mapa d’imatge.
<IMG SRC="barra.gif" ALT="Mapa d'imatge: Cada àrea conté un text alternatiu." TITLE="Icones per als diferents apartats del centre" USEMAP="#map1" BORDER=0>
<MAP NAME="map1">
<AREA COORDS="0,0,50,50" HREF="inici.html" ALT="Inici">
<AREA COORDS="30,0,105,50" HREF="cercar.html" ALT="Cercar ">
<AREA COORDS="60,0,170,50" HREF="registre.htm" ALT="Usuaris registrats ">
<AREA COORDS="90,0,225,50" HREF="ajuda.htm" ALT="Ajuda a la navegació">
</MAP> 

•	Ús d’elements creats amb caràcters ASCII.
Si utilitzeu elements creats amb caràcters ASCII, heu que proveir un enllaç que permeti als usuaris de lectors de pantalla saltar aquest element. Així mateix, cal incloure-hi un text alternatiu. Segons la il·lustració, n’hi pot haver prou amb un text breu o fer un enllaç a una descripció més llarga.
A continuació trobareu un dibuix realitzat amb caràcters ASCII. En el dibuix es veu un arbre. Saltar el dibuix 

       /\
      //\\       
     ///\\\
    ////\\\\
       ||

Dibuix d'un arbre realitzat amb caràcters ASCII

Ús de l’element NOSCRIPT
Utilitzeu l’element NOSCRIPT per descriure l’acció o incloure les funcions que aporten els scripts inclosos en les vostres pàgines. Per exemple, si el vostre SCRIPT fa que, en passar el cursor del ratolí o seleccionar mitjançant el teclat una imatge, aquesta canviï. 
<SCRIPT type="text/javascript"> SCRIPT per produir el canvi d’imatge </SCRIPT>
<NOSCRIPT> En la primera imatge es veu un nen que duu un globus a la mà. En la segona imatge es veu el nen plorant i el globus que se li ha escapat volant molt amunt. </NOSCRIPT> 

•	Ús d’imatges en llistes
Si utilitzeu imatges a través de l’element IMG per marcar cadascun dels elements d’una llista, heu d’incloure un text alternatiu per a cadascuna d’elles. Els textos alternatius podrien ser: una paraula com a element o ítem, un símbol com un guió o un asterisc, o bé un espai en blanc com a únic contingut de l’atribut "alt". El tercer cas permet que els usuaris de lectors de pantalla no hagin d’escoltar al principi de cada línia la mateixa paraula o símbol.
Nota: sempre que sigui possible, utilitzeu els fulls d’estil per incloure aquesta mena d’elements gràfics.
<IMG SRC="boto.gif" alt="element: ">Alumnes
<IMG SRC="boto.gif" alt="- ">Pares
<IMG SRC="boto.gif" alt=" ">Professorat 

•	Text alternatiu per a imatges invisibles.
Si utilitzeu imatges invisibles per crear efectes de presentació, per exemple, una imatge transparent en format GIF per fixar la distància entre dos elements, l’atribut "alt" ha d’aparèixer buit.
 Nota: recordeu que sempre és preferible utilitzar els fulls d’estil per crear aquesta mena d’efectes.
<IMG src="transparent.gif" height="2" width="10" alt=" "> 

2.	No emprar el color com element diferenciador
Assegureu-vos que els textos i gràfics són comprensibles quan es vegin sense color

•	La informació tramesa amb color ha de estar disponible també sense color. (A)

•	Les combinacions dels colors de fons i primer pla tinguin suficient contrast (AA imatges, AAA textos)
3.	Utilitzar etiquetes de marcatge i fulls d’estil correctament
Marqueu els documents amb els elements estructurals adients. Controleu la presentació amb fulls d’estil en comptes d’elements i atributs de presentació.

El mal ús de les etiquetes de marcatge per a un efecte de presentació (per exemple, utilitzant una taula per a la composició o una capçalera per canviar la grandària de la font) crea dificultats. 

Contingut, estructura i presentació del document 
El contingut d’un document es refereix al que aquest diu a l’usuari amb text, imatges, sons, vídeos, animacions, etc. L’estructura és la seva organització lògica (per exemple en capítols, amb una introducció i sumari, etc.). Un element (per exemple, P, STRONG, BLOCKQUOTE en HTML) que especifica l’estructura del document s’anomena element estructural. La presentació del document és com aquest es visualitza (per exemple imprès, en una presentació gràfica bidimensional, en una presentació amb només text, amb parla sintetitzada, en Braille, etc.). Un element que especifica la presentació del document (per exemple B, FONT, CENTER) s’anomena element de presentació. Penseu, per exemple, en la capçalera d’un document. El contingut de la capçalera és el que aquest diu (per exemple, vaixells de vela). En HTML la capçalera és un element estructural marcat amb una etiqueta H2, per exemple. Finalment, la presentació de la capçalera pot ser un text en negreta, justificat, una línia de text centrada, un títol parlat amb un cert estil de veu (com si fos una font oral), etc. (AA)

•	Utilitzeu MathML per marcar equacions matemàtiques i fulls d’estil per al format de text i el control de la composició. Igualment, eviteu la utilització d’imatges per representar textos. Mathematical Markup Language (MathML^™) 1.01 Specification http://www.w3.org/1999/07/REC-MathML-19990707/  (AA)

•	Creeu documents que estiguin validats per les gramàtiques formals publicades. Per exemple, incloeu en la declaració del tipus de document, al començament d’aquest, la referència a una DTD publicada (per exemple, la DTD HTML 4.0 estricta). (Consulteu el catàleg de referències  validades http://validator.w3.org/sgml-lib/catalog) (AA)

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

•	Utilitzeu fulls d’estil per controlar la composició i la presentació. Per exemple, utilitzeu la propietat "font" de CSS en lloc de l’element HTML FONT per controlar l’estil de les fonts. (AA)

•	Utilitzeu unitats relatives en lloc d’absolutes en el moment d’especificar els valors en els atributs del llenguatge de marcatge i en els valors de les propietats de les fulles d’estil. Per exemple, en CSS utilitzeu "em" o mesures percentuals en comptes de "pt" o "cm", que són unitats absolutes. Si s’usen unitats absolutes, comproveu que el contingut presentat sigui utilitzable. (AA)
Les unitats relatives especifiquen una mesura en relació a una altra propietat de mesura. El llenguatge CSS permet emprar diferents unitats de mesures relatives:
em: el tamany ('font-size') de la font rellevant 
ex: la 'altura de la x' de la font rellevant 
percentatjes: referits al tamany dels elements pare 
2em - 4ex 
Les unidades absolutes de CSS són:
in: inches (polzades) - 1 polzada és igual a 2.54 centímetres 
cm: centímetres 
mm: mil·límetres 
pt: punts - 1 punt és igual a 1/72 de polzada 
pc: picas - 1 pica és igual a 12 punts 
px: pixels, relacionats amb els dispositius visuals 
1cm - 8mm - 24pt - 2pc - 24px
Les unitats de mesura absoluta són útils solament quan les propietats físiques del medi de sortida són conegudes i, en cas de ser utilitzades, s’han de verificar los resultats en distints navegadore i dispositius.

•	Utilitzeu elements de capçalera per transmetre l’estructura del document i useu-los d’acord amb l’especificació. Per exemple, en HTML utilitzeu H2 per indicar una subsecció d'H1. No feu servir elements de capçalera per aconseguir efectes tipogràfics. (AA)

Guia de disseny web(títol principal: H1)
Conceptes (primera secció: H2)
Determinar la estructura (primer tema de la secció: H3)
Text, text, text, text ,text
Definir les jerarquies (segon tema de la secció: H3)
Text, text, text, text 
Eines (segona secció: H2)

•	Marqueu correctament les llistes i els seus elements. Per exemple, en HTML jerarquitzeu els elements de llistes OL, UL i DL adequadament. (AA)
DL, per a les llistes de definicions 
UL, per a las llistes sense ordenar 
OL, per a les llistes ordenades 
/* Números romans en majúscules */ I, II, III
list-style-type: upper-roman	
/* Ordre alfabètic en minúscules */ a b c 
list-style-type: lower-alpha
/* Vinyeta predeterminada (quadrat) */  ▪ ▪ ▪
list-style-type: square	
/* Vinyeta personalitzada (imatge) */  boleta boleta boleta
list-style-image:url(boleta.gif)

•	Marqueu les citacions. No utilitzeu el marcatge de citacions per a efectes de format com ara els sagnats. Per exemple, en HTML utilitzeu els elements Q i BLOCKQUOTE per marcar citacions curtes i llargues respectivament. (AA)
<q lang="es">con diez ca&ntilde;ones por banda </q> va dir el profesor

L’element BLOCKQUOTE identifica un bloc de text como una cita i la majoria dels navegadors indenten (sagnen) el text marcat a l’ús de la composició gràfica de textos. Per aquest motiu s’utiliza freqüentment BLOCKQUOTE amb el propòsit d’aconseguir un efecte visual en la pàgina desatenent el propòsit d’aquest element dintre del codi.
 <blockquote cite="http://cvc.cervantes.es/obref/quijote/parte1/parte01/cap01/default.htm">
 En un lugar de la Mancha, de cuyo nombre no quiero acordarme, no ha mucho tiempo...
</blockquote>

4.	Identifiqueu el llenguatge natural usat
Utilitzeu etiquetes de marcatge que facilitin la pronunciació o interpretació de text abreujat o estranger. 

•	Identifiqueu de forma clara els canvis en el llenguatge natural del text del document i en qualsevol text equivalent (per exemple, a les llegendes) (A) Per exemple, en HTML utilitzeu l'atribut "lang". En XML utilitzeu "xml:lang". 
<q lang="en">Suggestions</q> Com suggerim i prenen decisions en anglès?

Especifiqueu l’expansió de cada abreviatura o acrònim quan apareguin per primera vegada en el document. Per exemple, en HTML utilitzeu l’atribut "title" dels elements ABBR i ACRONYM. Proporcionar l’expansió en el cos principal del document també ajuda a la utilització del document. (AAA)
Les pàgines que pertanyen a  la <acronym title="Xarxa Telemàtica Educativa de Catalunya" XTEC </acronym> volen complir les normes del <abbr title="World Wide Web Consortium" lang="en">W3C</abbr>
Les pàgines que pertanyen a la XTEC  volen complir les normes del W3C

Identifiqueu el llenguatge natural principal d’un document. Per exemple, en HTML col·loqueu l’atribut "lang" en l’element HTML. En XML utilitzeu "xml:lang". (AAA)
<html lang="es">
Codi de representació dels noms dels idiomes segons la ISO 639, revisada 1989
http://www.oasis-open.org/cover/iso639a.html

5.	Creu taules que es transformin correctament
Assegureu que les taules tenen el marcatge necessari per facilitar-ne la conversió per navegadors accessibles i altres agents d’usuari.
Les taules haurien d’utilitzar-se solament per marcar la informació tabular ("taules de dades"). Els creadors de continguts haurien d’evitar usar-les per a la composició de pàgines ("taules de composició"). Les taules per a qualsevol ús presenten també especials dificultats per als usuaris de lectors de pantalla 
•	En les taules de dades identifiqueu les capçaleres de fila i columna 
Per exemple, en HTML utilitzeu TD per identificar les cel·les de dades i TH per a les capçaleres. (A)
•	Per a les taules de dades que tenen dos nivells lògics o més de capçaleres de fila o columna, utilitzeu etiquetes de marcatge per associar les cel·les de dades i les cel·les de capçalera . Per exemple, en HTML utilitzeu THEAD, TFOOT i TBODY per agrupar les files, COL i COLGROUP per agrupar les columnes i els atributs "axis", "scope" i "headers" per descriure relacions més complexes entre les dades. (A)
•	No utilitzeu taules per a la composició llevat que la taula tingui sentit quan es transcrigui de línia en línia. D’altra banda, si la taula no té sentit proporcioneu una alternativa equivalent (la qual pot ser una versió llegible de línia en línia) (AA)
Nota: una vegada que els agents d’usuari permetin l’ús del posicionament mitjançant fulls d’estil, les taules no s’haurien d’utilitzar per a la composició. 

Software per accedir al contingut del web, incloent-hi els navegadors gràfics, els navegadors textuals, els navegadors de veu, els telèfons mòbils, les consoles multimèdia, els connectors, i altres eines software d’assistència que s’usen conjuntament amb els navegadors, com ara lectors de pantalla, amplificadors de pantalla o software de reconeixement de veu

•	Si s’empra una taula per a la composició, no utilitzeu elements estructurals per representar un format visual. Per exemple, en HTML no utilitzeu l’element TH per fer que el contingut d’una cel·la (que no sigui capçalera de taula) es visualitzi centrat i en negreta. (AA)
•	Proporcioneu resums de les taules. Per exemple, en HTML utilitzeu l’atribut "summary" de l’element TABLE. (AAA)
•	Proporcioneu abreviatures per a les etiquetes de capçalera. Per exemple, en HTML utilitzeu l’atribut "abbr" en l’element TH. (AAA)

6.	Assegureu que les pàgines que incorporen noves tecnologies es transformin correctament

Assegureu que les pàgines són accessibles fins i tot quan no permeten la utilització de les tecnologies més modernes o aquestes estiguin desconnectades.
•	Organitzeu els documents de manera que puguin ser llegits sense fulls d’estil. Per exemple, quan un document HTML és interpretat sense associar-lo a un full d’estil s’ha de poder llegir. (A)
•	Quan el contingut està organitzat d’una manera lògica, serà interpretat amb claredat fins i tot quan els fulls d’estil estiguin desconnectats o no hi funcionin. (A)
•	Assegureu que els equivalents d’un contingut dinàmic són actualitzats quan canvia el contingut dinàmic. (A) ( fa referència a l’ús de frames)
•	Assegureu que les pàgines són utilitzables quan es desconnectin o no es doni suport als scripts, applets o altres objectes de programació. Si això no és possible, proporcioneu informació equivalent en una pàgina alternativa accessible. Per exemple, assegureu que els enllaços que activen scripts funcionen encara que aquests estiguin desconnectats o no es puguin emprar (per exemple, no utilitzeu un "javascript" com a objectiu d'un enllaç). Si no és possible fer la pàgina utilitzable sense scripts, proporcioneu un text equivalent amb l’element NOSCRIPT o utilitzeu un script de servidor en lloc d’un script de client, o bé proporcioneu una pàgina alternativa accessible. (A)
Per exemple, s’han d’evitar els vincles que fan servir "javascript" com a URL quan es desitja obrir una finestra nova. Si l’usuari no pot emprar l’script, l’enllaç resultarà inaccessible donat que el navegador no podrà crear el contingut de l’enllaç:
<a 
href="javascript:void(open('pagina.html','Popup','...'))">
Obrir una finestra nova
</a>
En el seu lloc, s’ha d’emprar com a referència la pàgina que desitja obrir en una finestra:
<a href="pagina.html" 
target="Popup" 
onClick="window.open(this.href,this.target,'...');return false;">
Obrir una finestra nova</a>
D’aquesta forma, si el navegador no suporta JavaScript, encara serà possible seguir l’enllaç de la pàgina.

•	Per als scripts i applets assegureu que els controladors d’esdeveniments siguin entrades independents del dispositiu.(AA)
Els manejadors de comportaments són invocats en produir-se una determinada acció en la pàgina (per exemple, el punter del ratolí es belluga, es polsa una tecla, …). Quan la funcionalitat de la pàgina depèn de l’execució de manejadors de comportaments, es necessari proporcionar mecanismes d’entrada redundants (per  el ratolí i el teclat).
Exemple:
"onmousedown" amb "onkeydown" 
"onmouseup" amb "onkeyup" 
"onclick" amb "onkeypress" 

<button name="boto" type="button" 
   onMouseDown="missatge()" onKeyDown="missatge()">
      Mensaje 
      <img src="graf/robot.gif" alt="Robot" 
      width="32" height="30">
</button>

<SCRIPT language="JavaScript" type="text/javascript">
   function missatge() { 
   alert ("¡Fem pàgines accessibles!") 
   }
</SCRIPT>

•	Assegureu que els continguts dinàmics siguin accessibles o proporcioneu una pàgina o presentació alternativa. Per exemple, en HTML utilitzeu NOFRAMES al final de cada frameset i NONSCRIPT. Per a algunes aplicacions les seqüències del servidor poden ser més accessibles que les del client. (AA)
<SCRIPT language="JavaScript" type="text/javascript">
   function missatge() { 
   alert ("¡Fem les pàgines més accessibles!") 
   }
</SCRIPT>
<NOSCRIPT>Missatge: ¡Fem les pàgines més accessibles!</NOSCRIPT>
7.	Assegureu a l’usuari el control sobre els canvis dels continguts amb una seqüència temporal
Assegureu que els objectes o pàgines que es mouen, parpellegen, es desplacen o s’actualitzen automàticament puguin ser aturats momentàniament o definitivament.
•	Fins que els agents d’usuari permetin controlar-ho, eviteu provocar parpelleig en la pantalla (A)
•	Eviteu el parpelleig del contingut (per exemple, canvi de presentació en períodes regulars, com ara les accions d’encendre i apagar) (AA)
•	Eviteu els moviments en les pàgines. Quan una pàgina inclou contingut mòbil, proporcioneu un mecanisme dintre d’una seqüència o una miniaplicació que permeti als usuaris congelar el moviment o l’actualització. L’ús dels fulls d’estils amb seqüències que creïn moviment permet als usuaris desconnectar o obviar l’efecte més fàcilment. (AA)
•	Fins que els agents d’usuari proporcionin la possibilitat d’aturar les actualitzacions no creeu pàgines que s’actualitzin automàticament de forma periòdica. (AA) Per exemple, en HTML no creeu pàgines que s’actualitzin automàticament amb "HTTP EQUIV=refresh" fins que els agents d’usuari permetin desconnectar aquesta característica. 
Exemple incorrecte:
<META http-equiv="refresh" content="60">
<BODY>
<P>...Contingut de la pàgina...
</BODY>
S’ha d’evitar l’ús de l’element META en HTML para redirigir a l’usuari d’una pàgina a d’altra després d’un determinat període.
Exemple incorrecte:
<HEAD>
   <TITLE>Pàgina vella</TITLE>
   <META http-equiv="refresh" content="5;
         http://www.altra.com/pagina.html">
</HEAD>
<BODY>
   <P>La pàgina se ha mudat a un altre servidor.
   Si en 5 segons no es portat a la
   <A href="http://www.altra.com/pagina.html">
   Nova adreça</A>
   faci servir l’enllaç.
</BODY>

8.	Proporcioneu l’accessibilitat directa de les interfícies d’usuari incrustades
Assegureu que la interfície d’usuari segueix els principis d’un disseny accessible: accés a les funcionalitats amb independència del dispositiu, operativitat del teclat, veu automàtica, etc. (A) (AA)
•	Quan un objecte incrustat té la seva "pròpia interfície", aquesta (igual que la interfície del mateix navegador) ha de ser accessible. Si la interfície de l’objecte incrustat no pot fer-se accessible, s’ha de proporcionar una solució alternativa que sigui accessible
Els programadors han de saber que la accessibilitat dels elements de programació que utilitzen la seva pròpia interface és independent de l’aplicació d’usuari. 
Per tant, aquests elements de programació que requereixen la interacció de l’usuari han de resultar directament accessibles, si la interacció no es pot aconseguir en un formato alternatiu.
•	Quan la accessibilitat de la interfase de l’objecte no pot ser incrustada en el mateix, s’ha de proporcionar una alternativa accessible per a tots els dispositius d’entrada.
Algunes fonts d’informació sobre com crear applets accessibles:
Active Accessibility, Microsoft 
Java Accessibility -- Trace R&D Center 
IBM Guidelines for Writing Accessible Applications Using 100% Pure Java -- IBM Special Needs Systems 
9.	Dissenyeu amb independència del dispositiu
Utilitzeu característiques que permetin l’activació dels elements de la pàgina per part de diversos dispositius d’entrada
•	Proporcioneu mapes sensitius de client en lloc de mapes de servidor, excepte en el cas que les àrees no es puguin definir amb una forma geomètrica disponible. (A)
•	Assegureu que qualsevol element que tingui la seva pròpia interfície es pugui manejar de forma independent del dispositiu.(AA)
Proporcionar textos equivalents per a les àrees actives dels mapes d’imatge controlats pel client i enllaços redundants per als mapes controlats per el servidor. 
Definir dreceres de teclat per als enllaços o controls de formularis importants de la pàgina. 
Assegurar un ordre lògic de tabulació dels enllaços i controls de formulari. 
Desenvolupar els objectes de programació quan la seva  interface no pot ser controlada a través del llenguatge de marques de forma que resultin directament accessibles. 

•	Per als scripts, especifiqueu controladors d’esdeveniments lògics en lloc de controladors d’esdeveniments dependents dels dispositius. (AA)
Creeu un ordre lògic per navegar amb el tabulador a través dels enllaços, controls de formulari i objectes. (AAA) Per exemple, en HTML, especifiqueu l’ordre de navegació amb els tabuladors utilitzant l'atribut "tabindex" o bé assegureu un disseny de pàgina lògic. 

Exemple amb TABINDEX
>a href="links.html" tabindex="1">1</a> - 
<a href="links.html" tabindex="2">2</a><br>
<a href="links.html" tabindex="3">3</a> - 
<a href="links.html" tabindex="4">4</a>

<a href="links.html" tabindex="5">1</a> - 
<a href="links.html" tabindex="7">3</a><br> 
<a href="links.html" tabindex="6">2</a>  - 
<a href="links.html" tabindex="8">4</a>
La propietat "tabindex" pot aplicar-se als següents elements en HTML: <A>, <AREA>, <BUTTON>, <INPUT>, <OBJECT>, <SELECT> Y <TEXTAREA>.
Nota: un disseny amb una distribució lògica dels seus enllaços  controls mantindrà un ordre adequat de tabulació que farà innecesari l’ús d’aquest atribut. S’ha de tenir en compte que, en cas d’existir un "tabindex" en la pàgina, serà necessari aplicar-lo també a tots els elements actius de la pàgina

•	Proporcioneu dreceres de teclat per als enllaços més importants (inclosos els dels mapes sensibles de client ), els controls de formulari i els grups de controls de formulari. Per exemple, en HTML, especifiqueu les dreceres de teclat mitjançant l’atribut "accesskey". 

<a rel="previous" href="ejem49-0.html" accesskey="P">
<img src="../graf/left.gif" alt="Previa" 
title="Torna a ..."></a>

<a rel="contents" href="index.html" accesskey="C">
<img src="../graf/toc.gif" alt="Continguts" 
title="Taula de Continguts"></a>

<a href="ejem50-1.html" accesskey="E">
<img src="../graf/change.gif" alt="Canviar estil" 
title="Canviar estil"></a>

<a rel="next" href="ejem50-0.html" accesskey="S">
<img src="../graf/right.gif" alt="Següent" 
title="Anar a ..."></a>
Cal tenir en compte que l’atribut "acceskey" no identifica de cap forma la tecla que s’ha de polsar, per tant, s’ha de trobar la forma d’informar a l’usuari sobre quina és la lletra que s’ha d’emprar en cada cas. (AAA)

10.	Utilitzeu solucions provisionals
Utilitzeu solucions provisionals d’accessibilitat per tal que les tecnologies d’ajuda i els navegadors antics operin correctament.
•	Fins que les aplicacions d’usuari no permetin als usuaris desactivar la generació de finestres, no s’ha de provocar que apareguin crides emergents o d’altres finestres i no s’ha de canviar el focus de la finestra actual sense informar abans a l’usuari. Per exemple, en HTML, eviteu utilitzar un marc que tingui com a destí una nova finestra. (AA)
Per a no confondre als usuaris, s’ha d’avisar quan el destí d’un vincle s’obri en una altra finestra, quan provoqui l’aparició d’una finestra del tipus “pop-up” o es bellugui el focus a un nou marc o finestra.  .
<a href="links.html" target="_blank">
Un vincle en una nova finestra</a> 
Les paraules reservades per a "target" i el seu significat especial:
_blank 
El navegador obra el document en un nova finestra. 
_self 
El navegador obra el document en el mateix marc en que es  troba el vincle. 
_parent 
El navegador obra el document en l’element FRAMESET pare de l’actual marc. 
_top 
El navegador obra el document en la finestra original complerta, cancel·lant els marcs. 
•	Fins que els agents d’usuari no suportin de manera explícita associacions entre etiquetes i controls de formulari, per a tots els controls de formulari amb etiquetes associades de manera implícita, assegureu que l’etiqueta està correctament col·locada. (AA) L’etiqueta ha de precedir de manera immediata el seu control a la mateixa línia (es permet més d’una etiqueta/control per línia) o estar en la línia que precedeix el control (amb només una etiqueta i control per línia).
Una etiqueta està associada amb un control de formulari a través del llenguatge de marques o per la seva posició en la pàgina.
Emprant l’element LABEL i la seva propietat "for" els usuaris no vidents podran identificar la etiqueta corresponent a un control encara que aquest no forma part del contingut de LABEL
Principi del formulari
Nom 
E-mail: 

Final de formulari
<label>Nom: 
   <input type="text" id="nom">
</label>
<label>E-mail:
   <input type="text" id="mail">
</label>
<input type="submit" value="Enviar">
Si l’element de control no es troba  dintre de LABEL, s’ha d’emprar l’atribut "for" per a associar explícitament l’etiqueta amb el control identificat amb ID.
<label for="nom">Nom:</label>
<input type="text" id="nom">
<label for="mail">E-mail:</label>
<input type="text" id="mail">
<input type="submit" value="Enviar">

•	Fins que els agents d’usuari (incloent-hi les tecnologies d’ajuda) interpretin correctament els textos contigus, proporcioneu un text lineal alternatiu (a la mateixa pàgina o en una altra) per a totes les taules que maqueten el text en paral·lel o en columnes. (AAA)
L’ús de taules per a  maquetar pàgines on el text es presentat en columnes paral·leles representa un problema per a alguns navegadors i lectors de pantalla antics que no interpreten correctament el codi HTML o no permeten navegar per les celes individualment. Aquestes aplicacions antigues exploren les pagines a l’ample, llegint  oracions d’una mateixa fila de la taula, però de distintes columnes, com una sola oració. Si resulta imprescindible disposar el text en columnes s’hauria de proporcionar una versió lineal del contingut de la taula.
•	Fins que els agents d'usuari no manegin correctament els controls buits, incloeu caràcters per defecte en els quadres d'edició i àrees de text. (AAA) Per exemple, en HTML, féu això amb TEXTAREA i INPUT

Principi del formulari
Nom: 
E-mail: 

Final del formulari

<input type="text" id="nom" value="El seu nom">
<input type="text" id="mail" value="El seu mail">
<input type="submit" value="Enviar">

•	Fins que els agents d’usuari (incloent-hi les tecnologies d’ajuda) no interpretin de manera separada els enllaços adjacents, incloeu caràcters imprimibles (rodejats d’espais), sense funció d’enllaç, entre els enllaços adjacents.(AAA)
[ Àfrica | Amèrica | Antàrtida | Àsia | Europa | Oceania ]

[ <a href="#africa">Àfrica</a> | 
<a href="#america">Amèrica</a> | 
<a href="#antartida">Antàrtida</a> | 
<a href="#asia">Àsia</a> | 
<a href="#europa">Europa</a> | 
<a href="#oceania">Oceania</a> ]
11.	Utilitzeu les tecnologies i pautes W3C
Utilitzeu les tecnologies W3C (d’acord amb les especificacions) i seguiu les pautes d’accessibilitat. Allà on no sigui possible utilitzar la tecnologia W3C, o si es fa dóna com a resultat materials de difícil conversió, proporcioneu una versió alternativa del contingut que sigui accessible
•	Utilitzeu les tecnologies del W3C quan estiguin disponibles i siguin apropiades per a la tasca, i utilitzeu les darreres versions en quant siguin suportades.
•	Eviteu emprar elements obsolets com per exemple: l’ús de FONT  per donar format al text és una pràctica obsoleta. 
Alguns elements i atributs que han quedat obsolets en HTML 4.01:
APPLET, BASEFONT, CENTER, DIR, FONT, ISINDEX, STRIKE, S, U.
align, valign, clear, nowrap, hspace, vspace, compact, face, size, background, bgcolor, color, text, link, alink, vlink, noshade
•	Proporcioneu la informació de manera que els usuaris puguin rebre els documents d’acord amb les seves preferències (per exemple: idioma, tipus de contingut, etc.).
Oferiu als usuaris la possibilitat de rebre el contingut en el seu idioma de preferència i amb la presentació més apropiada per a les seves necessitats de percepció. Per això, utilitzeu el sistema de negociació de continguts i diverses fulles d’estil en cascada.
Pera obtenir més infomació sobre negociació de continguts,  consulteu: HTTP Content Negotiation
Si no és possible utilitzar la negociació de continguts, utilitzeu l’atributo’ 'hreflang' amb els  elements <a> o <link> per a identificar el llenguatge dels documents enllaçats.
En HTML, els autors poden especificar qualsevol nombre de fulles d’estil, mútuament excloents o no anomenades fulles d’estil alternatives. Els usuaris poden seleccionar la fulla segons les seves preferències. 
Per exemple, un autor pot especificar una fulla d’estil dissenyada per a pantalles petites i una altra per a  usuaris amb poca visió (per exemple, amb fonts grans). Els agents d’usuari haurien de permetre als usuaris seleccionar les fulles d’estil alternatives.
<LINK href="estil.css" rel="stylesheet" type="text/css">
Defineix una fulla d’estilo persistent, que els agents d’usuari han d’aplicar a més a més de qualsevol fulla d’estil alternativa .
<LINK href="estil.css" title="visual" 
rel="stylesheet" type="text/css">
Amb l’atribut  "title" es converteix en la fulla d’estil preferent de l’autor, que els agents d’usuari haurien d’aplicar a menys que l’usuari   hagi seleccionat una alternativa diferent.
<LINK href="estil.css" title="impres" 
rel="alternate stylesheet" type="text/css">
Si se afegeix la paraula clau  "alternate" a l’atribut "rel" es converteix en una fulla d’estil alternativa.

12.	Proporcioneu informació de context i orientació
Proporcioneu informació de context i orientació per ajudar els usuaris a entendre pàgines o elements complexos.
Agrupar els elements i proporcionar informació contextual sobre les relacions entre els elements pot resultar útil a tots els usuaris. Les relacions complexes entre parts d’una pàgina poden ser difícils d’interpretar per persones amb discapacitats cognitives o visuals.
•	Poseu un títol a cada marc per facilitar la seva identificació i navegació. (A) Per exemple, en HTML, utilitzeu l'atribut "title" en els elements FRAME
•	Descriviu el propòsit dels marcs i com es relacionen entre si, si no resulta obvi amb només els títols dels marcs. (AA) Per exemple, en HTML, utilitzeu "longdesc" o un enllaç descriptiu
•	Dividiu els blocs llargs d'informació en grups més manejables quan fer-ho sigui natural i adient. (AA)
FIELDSET permet agrupar controls de formulari i descriure el grup amb l’element LEGEND. 
OPTGROUP organitza llistes de menús extenses en grups més petits. 
TABLE s’utilitza per a presentar informació tabular i es descriu amb CAPTION. 
Les files i columnes d’una taula es poden agrupar amb THEAD, TBODY, TFOOT i COLGROUP. 
Poden anidar-se els distints tipus de llistes amb UL, OL i DL. 
H1-H6 permeten estructurar els documents dividint el text en seccions. 
P divideix els blocs de text en paràgrafs. 
És possible utilitzar MAP per a agrupar enllaços relacionats
•	Associeu de manera explícita les etiquetes amb els seus controls. (AA) Per exemple, en HTML, utilitzeu LABEL i el seu atribut "for". 

13.	Proporcioneu mecanismes clars de navegació
Proporcioneu mecanismes clars i consistents de navegació (informació d’orientació, barres de navegació, mapa del lloc web, etc.) per incrementar la probabilitat que una persona trobi allò que està buscant en un lloc web.
•	Els mecanismes de navegació clars i consistents són importants per a les persones amb discapacitats cognitives o ceguesa, i beneficia tots els usuaris. Identifiqueu clarament l’objectiu de l’enllaç. Els usuaris cecs o amb deficiències visuals no poden recórrer ràpidament la pàgina amb els seus ull. Per revisar els enllaços de les pàgines o trobar ràpidament un en particular, aquests usuaris fan servir la tecla del tabulador per passar d’un enllaç a l’altre. Quan arriben a un enllaç, el text  del mateix ( el text que es troba <A> i </A>) es llegit. (AA)
Consulteu la <a href="index.html" 
title="anar a la taula de continguts del manual">taula de continguts del manual</a> de creació de .....
•	Proporcioneu metadades per afegir informació semàntica a les pàgines i als llocs web. (AA) 
Per exemple, utilitzeu RDF ([RDF]) per indicar l’autor d’un document, el tipus de contingut, etc. 

"Resource Description Framework (RDF) Model and Syntax Specification", O. Lassila, R. Swick, ed., 22 de febrer de 1999. La recomanació RDF es troba a: http://www.w3.org/TR/1999/REC-rdf-syntax-19990222. La darrera versió de l'RDF 1.0 es troba a: http://www.w3.org/TR/REC-rdf-syntax.

TITLE, defineix el títol del document. 
ADRESS, permet proporcionar informació sobre l’autor. 
META, utilitzat per a identificar propietats d’un document (autor, data de caducitat, paraules clau, etc.) i assignar valors en aquestes propietats
LINK, permet descriure mecanismes de navegació entre documents relacionats. 
PICS o EARL per a indicar conformitat de la pàgina amb les WCAG 
Exemple: per a indicar conformitat AA amb les WCAG emprant metadades en lloc  de o a més de les ícones:
<META http-equiv="PICS-Label" content='(PICS-1.1
"http://www.w3.org/wai/wcag-conformance" 
labels exp "1999.12.31" for "http://www.foo.com/foo.html" 
by "jow@foo.com" ratings (c 1))'>
Nota: alguns agents d’usuari HTML poden construir eines de navegació a partir de les relacions entre documents descrites amb l'element HTML LINK i els atributs "rel" o "rev" (per exemple: rel="next", rel="previous", rel="index", 

•	Proporcioneu informació sobre la maqueta general d’un lloc web (per exemple: un mapa del lloc web o un sumari). En descriure la maqueta del lloc, destaqueu i expliqueu les característiques d’accessibilitat disponibles. (AA) És important que  el text dels vincles  es correspongui amb el títol  principal de la pàgina, per a no confondre a l’usuari amb diferents encapçalaments.
•	Utilitzeu els mecanismes de navegació de manera consistent. (AA)
Un estil consistent de presentació permet que els usuaris identifiquin el contingut principal de cada document i trobin fàcilment la forma de navegar entre les pàgines. Un estil que permeti precedir on es troba la informació desitjada en cada pàgina beneficia a tots els usuaris i, principalment, a aquelles persones amb dificultats de lectura o d’aprenentatge. Les pàgines han de tenir un  estilo comú per a totes, amb una disposició dels elements de navegació i de contingut similars. Els estils s’han de mantenir a tot el llocs web. 
•	Proporcioneu barres de navegació per destacar i donar accés als mecanismes de navegació. (AAA). La tècnica d’agrupar els enllaços importants en una barra de navegació permet trobar fàcilment la forma de navegar entre les pàgines. ( Anar a la pàgina anterior, a la següent, a la taula de continguts, canviar el full d’estil). Un benefici addicional que representen els vincles agrupats es que permeten saltar el grup d’enllaços per a arribar a un altre contingut de la pàgina.
•	Agrupeu els enllaços relacionats, identifiqueu les agrupacions (per als agents d’usuari) i, mentre els agents d’usuari no ho facin, proporcioneu una manera per saltar-se una agrupació.
Els usuaris que utilitzen lectors de pantalla normalment utilitzen els enllaços per a cercar informació o examinar cada pàgina. Així, passen d’un enllaç a un altre escoltant el text de l’enllaç (el text entre <A> i </A>).
Amb la barra de navegació sovint és el  primer que es troba en una pàgina, aquests usuaris han d’escoltar una llarga sèrie d’enllaços similars en cada pàgina abans d’arribar al contingut principal.
Una forma de convertir els diversos enllaços d’una barra de navegació en una unitat és incloure un enllaç anterior que permeti saltar sobre ella i evitar-la, del mateix mode que els usuaris amb visió evitant llegir els enllaços quan trobin el mateix grup  en cada pàgina.
Un mètode recomanat consisteix en agrupar els  enllaços relacionats dintre de l’element MAP. En aquests casos, els enllaços dintre de MAP no necessiten ser àrees d’imatge, que és l’ús més freqüent per a MAP.
•	Si proporcioneu funcions de cerca, permeteu diferents tipus de cerca per a diferents nivells d’habilitat i de preferències (AAA)
•	Col·loqueu la informació destacada a l’inici dels encapçalaments, paràgrafs, llistes, etc (AAA)
Nota: això és normalment anomenat front-loading ("posar al davant") i és especialment útil per a les persones que accedeixen a la informació amb dispositius en mode paraula per paraula com són els sintetitzadors de veu
•	Proporcioneu informació sobre les col·leccions de documents (per exemple: documents formats per múltiples pàgines). (AAA) 
Per exemple, en HTML, especifiqueu les col·leccions de documents amb l’element LINK i els atributs "rel" i "rev". Un altre sistema per crear una col·lecció és fent un arxiu (per exemple: amb zip, tar i gzip, stuffit, etc.) que incorpori les diferents pàgines. 
Nota: així permeteu una reducció de costos de navegació a les persones amb discapacitat que han de navegar lentament, i feu possible una navegació en mode desconnectat (no en línia). 
•	Proporcioneu un mitjà per saltar sobre un gràfic ASCII de diverses línies. (AAA)
14.	Assegureu que els documents siguin clars i simples
Assegureu que els documents siguin clars i simples per tal que puguin ser entesos amb facilitat.
La maquetació consistent de pàgines, gràfics recognoscibles i un llenguatge fàcil i entenedor beneficien tots els usuaris. De manera particular, ajuden les persones amb discapacitats cognitives o aquelles que tenen dificultats en la lectura .
La utilització d’un llenguatge simple i clar promou una comunicació efectiva. L’accés a la informació escrita pot ser difícil per a les persones amb discapacitats cognitives o d’aprenentatge. Utilitzar un llenguatge senzill i clar també beneficia aquelles persones que no tenen com a primer idioma el del document, o aquelles persones que usualment es comuniquen amb el llenguatge de signes.
•	Utilitzeu el llenguatge apropiat de la forma més clara i senzilla, d’acord amb el contingut d’un lloc web. (A) 
•	Complementeu el text amb gràfics o presentacions auditives si facilita la comprensió de la pàgina. (AAA)
•	Creeu un estil de presentació que sigui consistent al llarg de les pàgines (AAA)

Normes recomanades
Incloeu dreceres de teclat per als enllaços més habituals del vostre centre. 
Utilitzeu l’atribut TABINDEX per crear un ordre de tabulació lògic. 
Utilitzeu els elements ABRR i ACRONYM per expandir abreviatures i acrònims. 
Per a la programació de les pàgines utilitzeu sempre les darreres versions dels llenguatges (HTML, CSS, ...) publicades pel W3C. Eviteu l’ús d’elements que hagin estat declarats obsolets. 
Utilitzeu fulls d’estil per especificar la compaginació i la presentació dels vostres documents. 
Separeu els enllaços adjacents amb un caràcter imprimible. 
Sempre que sigui possible, utilitzeu scripts de servidor que permetin personalitzar la presentació dels continguts segons les preferències o les necessitats de l’usuari. 
Incloeu metainformació per afegir informació sobre els continguts de la pàgina, la relació existent entre les pàgines i, si n’hi hagués, entre les diferents versions d’una mateixa pàgina. 
Oferiu informació sobre l’estructura del centre web a través de mapes o índexs. 
No utilitzeu taules per a efectes de diagramació excepte quan tingui sentit si són transcrites línia a línia. Cas que això no sigui possible, oferiu el mateix contingut en una versió alternativa. 
Si una taula és utilitzada per a efectes de diagramació, no utilitzeu marcadors d’estructura per crear efectes de presentació. 
Descriviu el propòsit de cada FRAME i com es relacionen entre si, cas que no n’hi hagi prou amb l’atribut TITLE. 
Fins que els agents d’usuari no permetin congelar els continguts en moviment, eviteu d’incloure moviment en les pàgines. 
Si utilitzeu l’element BODY d’HTML per donar informació d’un color, introduïu informació de color per a tots els elements, inclosos els enllaços, enllaços actius i visitats. 
Faciliteu una manera de saltar la barra de navegació. 
Creeu barres de navegació que no excedeixin de set opcions i utilitzeu-les en tot el vostre web. 
Recordeu que moltes persones poden accedir al centre web per qualsevol de les seves pàgines. Utilitzeu els elements necessaris perquè l’usuari sàpiga en cada moment on es troba. 
Eviteu que l’usuari hagi de seguir més de tres enllaços per arribar a la informació essencial del vostre centre. 
Agrupeu els enllaços relacionats i il·lustreu-los, sempre que sigui possible, amb una icona o imatge que transmeti la idea o el tema pel qual els heu agrupat. Proporcioneu un mecanisme que permeti a l’usuari saltar els grups d’enllaços. 
Incloeu l’adreça de la pàgina web al peu d’aquesta. 
Incloeu un índex o mapa del web. 
Valideu cadascuna de les vostres pàgines utilitzant les eines de validació del W3C.
Valideu cadascuna de les vostres pàgines amb l’eina d’accessibilitat Bobby. 

Referències

World Wide Web Consortium (W3C) 
http://www.w3.org/

Curso de diseño web accesible
http://www.sidar.org/acti/cursos/cursotener/index.html

Directrius per a l'accessibilitat al contingut de pàgines web, versió 1.0.
Recomanació W3C, 5 de maig de 1999
http://www.ub.es/bid/06w3c.htm

*Document elaborat per Cristina Fuertes