diseño accesible de páginas web

164
7/31/2019 Diseño accesible de páginas web http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 1/164 Región de Murcia Consejería de Trabajo y Política Social Dirección General de Política Social ise ño Acce sible d e Pág inas We b ise ño Acce sible d e Pág inas We b

Upload: fabio22

Post on 04-Apr-2018

217 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 1/164

Región de Murcia

Consejería de Trabajo

y Política Soc ial

Dirección General de Política Social

D is e ñ o

A cce s ib le

d e Pá g in a s W e b

ise ñ o

A cce s ib le

d e Pá g in a s W e b

Page 2: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 2/164

is e ñ o

A c c e s i b l e

d e Pá g in a s W e b

D Pau tas d e Acce s ib ilid ad

a l c o n t e n id o e n la W e b 1 . 0

is e ñ o

A c c e s i b l e

d e Pá g in a s W e b

Traducció n y a d a p t a c ió n d e lo s t e x t o s :

Carlo s Eg e a Garc í a / Alicia Sarab ia Sán c h e z

Región de Murcia

Consejería de Trabajo

y Política Social

Dirección General de Política Social

Page 3: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 3/164

Edita: Consejería de Trabajo y Política Social

Dirección General de Política Social

Imprime: Imprenta Regional

Diseño: Pedro Manzano

AVISO LEGAL IMPORTANTE

Es t e d o c u m e n t o n o t ie n e a u t o r iz a c ió n ofic ia l d e W o r ld W i d e W e b C o n s o rt iu m (W 3 C ), W eb Acce ss ibil ity Inicia t ive

(WAI) . Cont i ene m a te r i a l con e l cop yr igh t © W3 C.

Lo s ú n ic o s d o c u m e n t o s r e c o n o c i d o s p o r e s t e C o n s o r c io s o n s u s o r ig i n a le s e n i n g lé s :

• Fac t She e t for «We b Con ten t Acces s ib i lit y Guide l ine s 1 .0 »h t t p : / / w w w . w 3 . o r g / 1 9 9 9 / 0 5 / W C A G - R E C - f a c t

• Q uick Tip s To M ake A cces s ib le W eb S it e s

h t t p : / / w w w . w 3 . o r g / W A I / R e f e r e n c e s / Q u i c k T i p s

• We b Con ten t Acces s ib ilit y Guide line s 1 .0

h t t p : / / w w w . w 3 . o r g / T R / W C A G 1 0

• Tech nique s for We b Con ten t Acce s s ib i lit y Guide line s 1 .0

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 9 / W A I - W E B C O N T E N T - T E C H S - 1 9 9 9 0 5 0 5

• Checkl is t o f Checkp oin t s for We b Co nte n t A cces s ib ilit y Guide line s 1 .0

h t t p : / / w w w . w 3 . o r g / T R / W C A G 1 0 / f u l l - c h e c k l i s t . h t m l

To d o s lo s d e r e c h o s e s tá n r e s e r va d o s p o r W 3 C .

La s n o r m a s a p l ic a b le s d e W 3 C p u e d e n e n c o n t ra rs e e n :

• Sobre e l copyr ight , l a p ropiedad in t e l ec tua l y los av i sos l ega les :

h t t p : / / w w w . w 3 . o r g / C o n s o r t i u m / L e g a l / i p r - n o t i c e - 2 0 0 0 0 6 1 2

• S o b r e u s o d e lo s d o c u m e n t o s :

h t t p : / / w w w . w 3 . o r g / C o n s o r t i u m / L e g a l / c o p y r i g h t - d o c u m e n t s

• S o b r e lic e n c i a d e s o ft w a r e :

h t t p : / / w w w . w 3 . o r g / C o n s o r tiu m / L e g a l/ c o p y rig h t - s o ft w a r e

ADVERTENCIA.- Tal y com o se re f le j a en e l p ró lo g o d e e s t e lib r o , e n é l s e in c lu y e e l d o c u m e n t o d e “Té cnicas ” q u e

a p a r e c ió , co n fe c h a 5 d e m a y o d e 1 9 9 9 , c o m o c o m p le m e n t o a l d e “Pautas d e Acce s ib i lid ad a l Conte n ido e n l a Red

1 .0 ” . En la a c t u a lid a d e s t e d o c u m e n t o h a e v o l u c io n a d o e n d o s s u c e s iv a s v e r s io n e s (c o n fe c h a 2 0 d e s e p t ie m b r e d e

2 0 0 0 y 6 d e n o v ie m b r e d e 2 0 0 0 ), q u e n o h a n s id o r e v is a d a s n i su s c rit a s p o r lo s m ie m b r o s d e W 3 C . El ca m b io

in t r o d u c id o e n e s t a s n u e v a s v e r s io n e s n o e s t a n t o d e fo n d o c o m o d e fo r m a . En la a c t u a lid a d s e c o n f ig u r a co m o u n

p o r ta l q u e d a a c c e s o a u n a s e rie d e d o c u m e n t o s r e la c io n a d o s ( cu a t ro e n t o t a l) q u e p u e d e n e v o l u cio n a r s e p a r a d a -

m e n t e . La m á s r e c ie n t e v e r s ió n s e p u e d e c o n s u lt a r e n l a s ig u ie n t e d i r e c c ió n W e b :

h t t p : / / w w w . w 3 . o r g / T R / W C A G 1 0 - T E C H S

Page 4: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 4/164

A g ra d e c im ie n t o s y re c o n o c im ie n t o s

L o s r e s p o n s a b l e s d e l a t r a d u c c ió n d e l o s d o c u m e n t o s q u e f i g u r a n e n e s t e l i b r o

q u i e re n e x p r e s a r p ú b lic a m e n t e s u a g ra d e c i m i e n t o y r e c o n o c im ie n t o a la s s ig u ie n t e s

p e rs o n a s y e n t id a d e s . El o r d e n e n q u e é s t a s a p a r e c e n n o i n d i c a p r e la c ió n , s in o m e r a

e n u m e r a c ió n .

A l E x c m o . S r . D . A n t o n i o G ó m e z F a y r é n , V i c e p r e s i d e n t e d e l a C o m u n i d a d A u t ó -

n o m a d e l a R e g ió n d e M u r c i a y C o n s e j e r o d e T r a b a j o y P o l í t i ca Soc ia l , po r haber

a c e p t a d o h a c e r la p r e s e n t a c ió n d e e s t e lib r o y m a n ife s t a r e n la m is m a s u c o m p r o m is o

con la e lim inac ió n d e t o d o t ip o d e o b s t á c u lo s q u e d i fic u lt a n e l a c c e s o d e la s p e r s o n a s

c o n d is c a p a c i d a d a lo s r e c u r s o s d e In t e r n e t .

A la Il m a . S ra . D ñ a . M ª d e l So c o rro M o re n t e S á n c h e z , D ir ec to r a Gene ra l d e Po l í -t ica So cial, q uié n a c o g ió y a p o yó n u e s t ro t r a b a jo d e t r a d u c c ió n y e s t a p u b l ic a c ió n .

A l R e a l P a t r o n a t o d e P r e v e n c i ó n y A t e n c i ó n a P e r s o n a s c o n M i n u s v a l í a , q u e

c o la b o ra e n l a e d ic ió n d e e s t e lib r o y q u e p u s o e n m a r ch a e i m p u lsó lo s t ra b a j o s d e l

S ID A R, d e n t r o d e c u y o m a r c o s e h a d e s a r r o lla d o la t a r e a d e t r a d u c c ió n q u e h e m o s

rea l i zado .

A l S e m i n a r i o d e I n i c i a t i v a s s o b r e D i s c a p a c i d a d y A c c e s i b i l i d a d e n l a R e d ( S I -D A R ) q u e a b a n d e r a e n e l m u n d o d e h a b la h is p a n a la lu c h a c o n t ra la s b a r re r a s e n l a

Re d y e n p r o d e u n “Dise ñ o p a r a t o d o s” . H a s id o d e n t r o d e l m a r co d e e s t e S e m in a rio ,

y con l a ine s t im ab le co labo rac ió n d e m u c h o s d e s u s m i e m b r o s , c o m o h a p o d i d o

lle v a r s e a c a b o n u e s t r o d e t ra b a j o d e t ra d u c c ió n .

A l G r u p o d e T r a d u c t o r e s d e l S I D A R , cuyo t r aba jo en l a t r aducc ió n d e l “Glosario

c o m b in a d o p a r a A c c e s ib ilid a d a l a s H e r ra m ie n t a s d e A u t o r, la s A p lic a c io n e s d e U s u a -

rio y e l C o n t e n i d o e n la W e b 1 . 0 ” 1 (2 7 - 0 8 - 2 0 0 0 ) , d e H a r v e y Bin g h a m , n o s h a s e r v id o

p a ra r e d o n d e a r e l t ra b a j o d e t r a d u c c ió n q u e h e m o s r e a liz a d o .

A l Gru p o 3 s o b re D i s e ñ o A c c e s i b le d e l S ID A R q u e p r o p u s o e n s u d í a , y m a n t ie n e

a c t u a lm e n t e , e n t r e s u s o b je t i v o s la t ra d u c c ió n a l c a s t e lla n o d e lo s d o c u m e n t o s s o b r e

“acce s ib i lid ad en la Red ” . A e llo s e d e b e q u e t u v ié r a m o s la d is p o s ic ió n d e h a c e r e s ta s

t ra d u c c io n e s y s u s m ie m b r o s h a n h e c h o s c o n s id e r a b le s a p o r t a c io n e s a e s t e t ra b a j o .

A l W o r ld W id e W e b C o n s o rtiu m (W 3 C ), pa r t icu l a rm en te a su W eb Acce ss ib i lit y

Inic ia t ive (WAI) , q ue red act ó lo s d o c u m e n t o s o rig i n a le s q u e a q u í s e t r a d u c e n a l c a s t e -

lla n o . S u c o m p r o m is o c o n l a a c c e s ib ilid a d e n In t e r n e t , la s e r ie d a d d e s u s t r a b a jo s , l a

r e s p o n s a b i lid a d d e s u s té c n ic o s , e l rig o r d e s u p r o c e d im ie n t o d e t r a b a jo y e l a p o y o y

di fusió n q u e p r o p o r c io n a n a e s t a ca u s a lo s h a c e a c r e e d o r e s d e t o d o e l m é r i to.

1   Es t e d o c u m e n t o s e p u e d e c o n s u lt a r e n la d ire c c i  ó n : h t t p :/ / w w w . s id a r . o rg / d o c u s / g l o s w a i1 . h t m  

Page 5: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 5/164

P r e s e n t a c ió n

La s n u e v a s t e c n o l o g í as d e l a i n fo rm ac ió n y l a co m u n icac ió n h a n e n t ra d o e n n u e s t ra s

v i d a s , e n n u e s t r a s c a s a s y e n n u e s t r o s t r a b a j o s d e t a l m a n e r a q u e s e e s t á n h a c i e n d o

im p r e s c in d ib le s p a ra a lc a n z a r lo s g ra d o s d e b ie n e s t a r q u e t o d o s d e s e a m o s . La in m e d ia -

t e z q u e p r o p o r c io n a la c o m u n ic a c ió n a t rav é s d e u n c o r re o e le c t ró n ico e s só lo c o m p a r a -

b le a la re vo luc ió n q u e s u p u s o la u t iliz ac ió n d e l te lé fo n o p a ra co n v e r s a r en la d is t an c ia . El

a c c e s o a in fo r m a c io n e s y s e r v ic io s q u e n o s p r o p o r c io n a e l c o n t e n id o d e la s p á g i n a s W e b

n o s e h a b í a c o n o c i d o h a s t a e l m o m e n t o . D e s d e u n o r d e n a d o r c o n e c t a d o a u n a lí n e a

t e l e f  ó n ic a , d e s d e n u e s t r a c a s a , n u e s t ro p u e s t o d e t ra b a jo e , in c lu s o , d e s d e u n a c a fe t e rí a ,

p o d e m o s a lc a n z a r in fo r m a c io n e s q u e a n t e s e s t a b a n a l a lc a n c e d e u n o s p o c o s p riv ile g ia -

d o s . En e l p la z o d e p o c o s a ñ o s lo q u e n o e s té e n la W e b p a r e c e rá no e x is t ir. Son m ile s d e

m illon e s las p á g i n a s q u e s e e n c u e n t ra n a d is p o s ic ió n d e c u a lq u ie r p e rs o n a e n c u a lq u ie r

lu g a r d e l m u n d o c o n e l s o lo r e q u is it o d e d is p o n e r d e d o s e le m e n t o s : u n o r d e n a d o r y u n a

lí n e a t e le f  ó nica .

Es ta au té nt ica revo luc ió n , só lo co m p arab le a la r ev o lu c ió n i n d u s t r i a l , h a s u p u es to u n

con s id e rab le ca m bio soc ia l. El acce so a l a cu ltu ra , los se rv ic ios , e l co m e rc io , e tc . se ha

d e m o c ra t iz a d o d e u n a m a n e ra q u e n u n ca p o d í a m o s i m a g i n a r. P e r o e s t a s n u e v a s p o s ib i-

lid a d e s t a m b ié n s u p o n en n u e v as lim it ac io n e s . Las d i fe ren c i a s s o c ia le s s e p u e d en ce n t r a r

a h o r a e n q u ié n p u e d e y q u ié n n o p u e d e a c c e d e r a I n t e r n e t . L a s p o s i b i l i d a d e s d e u n

e s t u d ia n t e q u e d is p o n g a d e u n o r d e n a d o r y co n e x ió n a In t e r n e t e n s u h o g a r, s o n in c o m -

p a r a b le s c o n la s d e a q u e l q u e n o d is p o n g a d e lo m is m o . Po r e llo , lo s e s fu e r z o s d e t o d o s

lo s p a í s e s a v a n z a d o s s e c e n t r a n e n lle v a r e s t a t e c n o lo g í a a t o d o s s u s c iu d a d a n o s .

Pe r o c iu d a d a n o s s o m o s t o d o s y n o t o d o s t e n e m o s la s m is m a s fa c u lt a d e s . G ru p o s d e

p e rs o n a s q u e t ie n e n a lg ú n t ip o d e lim it ac ió n fu n c io n a l n o a c c e d e n d e ig u a l m a n e ra a l a

Red d e Re d es . Pe r s o n as d e b a ja o n u la v is ió n , q u e t ien en lim it ad a la fu n c io n a lid ad d e s u sm a n o s , q u e o y e n p o c o o n a d a o q u e t i e n e n u n n i v e l d e c o m p r e n s ió n r e d u c i d o , s o n

e je m p l o s d e e s t e c o le c t iv o : la s p e r s o n a s c o n d i sc a p a c id a d . P a ra e llo s s e h a n c r e a d o in s -

t ru m e n t o s y h e r ra m ie n t a s q u e a d a p t a n e l o r d e n a d o r a s u fo r m a d e o p e ra r y se e s t ru c t u -

r a n l o s c o n t e n i d o s d e m a n e r a q u e l o s p u e d a n m a n e j a r . L a s p á g i n a s W e b n o p u e d e n

q u e d a r a l m a rg e n d e e s t e e s fu e r zo .

El Wo r ld W id e We b Co n s o r tiu m (W 3 C), a t r avé s d e u n g r u p o d e t ra b a jo c o n o c id o c o m o

WAI (We b A cce ssibility Iniciat ive ) , re co g ió e l re t o y h a h e c h o e l e s fu e rz o d e “n o rm a l i za r”

e l p r o c e d i m i e n t o d e d i s e ñ o d e l a s p á g in as Web p a ra q u e s ean acces ib l e s . E l l o s e h a

Page 6: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 6/164

p l a sm a d o e n u n a s e rie d e r e c o m e n d a c io n e s e n fo r m a d e P a u t a s. En e l la s s e e n c u e n t r a la

llav e p a ra p ro p o rc io n a r u n acce s o i g u a l it a r io p a ra t o d o s l o s u s u a r io s d e l a We b .

L o s p a í s e s m ie m b r o s d e la U n ió n Eu r o p e a h a n a s u m id o , a tra v é s d e l P l an d e A cc ió n

e E u r o p e 2 0 0 2 , e l c o m p r o m i s o d e a d o p t a r l a s p a u t a s d e l a W A I p a r a e l d i s e ñ o d e l a s

p á g in as We b d e l a s A d m in is t rac io n e s Pú blicas.

D e s d e n u e s t ra Co n s e je r í a , a t ravé s d e la D irecc ió n G e n e ra l d e P o lí t ic a So c ia l, d e n t ro d e l

Co n v e n io d e Co lab o rac ió n co n e l Rea l Pa t ro n a to d e P rev e n c ió n y d e A t e n c ió n a P e r s o n a s

c o n M in u s v a lí a , v en im o s co lab o ran d o en lo s t r ab a jo s q u e d es a r ro l la e l Sem in a r io d e In i-

c ia t iv as s o b re D is cap ac id ad y A cce s ib ilid ad en la Red (S ID A R). U n a m u e s t ra d e e s t a co la -

b o rac ió n h a s id o , r eco g ien d o l a in ic ia t iv a d e e s t e Sem in a r io , e l t rab a jo d e t rad u c ir y ad ap -t a r u n a s e r ie d e d o cu m en to s r e l a t iv o s a l a s Pau t a s d e A cces ib ilid ad a l Co n t e n id o e n la

W e b e d i ta d a s p o r la W A I. Cr e e m o s q u e s u p u b lic a c ió n e n fo r m a t o p a p e l, c o n la c o la b o r a -

c ió n d e l Rea l Pa t ro n a to , h a b rá d e con t r ibu ir a la d ifus ió n d e l c o n c e p t o d e a c c e s ib ilid a d .

Es t e e s u n p a s o m á s q u e r e fle j a e l c o m p r o m is o d e n u e s t r a Co n s e je r í a co n l a e lim in ac ió n

d e t o d o t ip o d e o b s tá c u lo s q u e d i fic u lt a n e n a c c e s o d e la s p e r s o n a s c o n d i sc a p a c id a d a

lo s r ecu rs o s d e In t e rn e t .

A n t o n io Gó m e z Fa y ré nConse je ro de Traba jo y Pol  í  t ica Socia l  

Page 7: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 7/164

I  n d i ce

P r ó l o g o . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 3

Pre g u n t a s m á s f re c u e n t e s s o b re l a s « P a u ta s d e A c c e s i b i li d a da l C o n t e n i d o e n la W e b 1 . 0 » . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 7

1 . ¿ Q u é son la s Pau ta s d e A cces ib i lid ad a l Con ten id o e n l a We b? . . . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . . 1 7

2 . ¿ Q u é s o n la s «p r i o r i d a d e s», los «n iv e le s d e a d e c u a c ió n » y có m o s e u s a n lo s lo g o t ip o s ? . .. .. .. . 1 7

3 . ¿ P a ra q u ié n e s tá n es cr itas e stas p au tas? . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . 1 8

4 . ¿ P o r q u é s o n n e c e s a r ia s e s t a s p a u t a s ? ¿ P o r q u é son im p or t an te s? . . .. . . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . . 18

5 . ¿ A cu á n t a g e n t e a fe c t a n lo s p r o b le m a s d e a c c e s i b ilid a d e n la W e b ? . .. .. . .. .. . .. .. . .. .. . .. .. . .. .. .. . .. .. 1 8

6 . ¿ Cu á le s s o n a lg u n o s e je m p l o s d e b a r re r a s h a b i tu a le s e n la s p á g inas We b? . . .. . . .. . . .. . .. . . .. . . .. . .. . 19

7 . ¿ Có m o a fe c t a n e s t a s p a u t a s a la m a n e ja b ilid a d y a p a r ie n c ia d e lo s s i t io s p a r a lo s

usu ar io s s in d isca p acida d ? . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . 1 9

8 . ¿ P o r q u é n o r e c o m ie n d a n e s t a s p a u t a s la u t iliz a c ió n d e p á g i n a s só lo t ex to? . . .. . . .. . . .. . .. . . .. . . .. . . 20

9 . ¿ Es m á s co sto so h ace r un s i t io a cce sible ? . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . 2 0

1 0 . ¿ H a y a lg u n a s h e r ra m ie n t a s d e a u t o r m e j o r e s q u e o t r a s p a r a h a c e r a c c e s ib le s l o s s it io s ? . . .. .. . . 2 0

1 1 . ¿ Se conver t i rá n e s t a s p a u t a s e n u n a e x ig e n c ia ? ¿ H a y c o n s e c u e n c ia s le g a le s p o r n o

ha ce r a cce sible un s i t io ? . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . 211 2 . ¿ Q u é r e c u rs o s d e a p o y o e s t á n d isp on ib l es p a r a usa r e s t a s p au ta s? . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . 21

1 3 . ¿ H a y h e rra m ie n t a s q u e p u e d a n a y u d a r m e ? ¿ P u e d o c o m p r o b a r la a c c e s ib ilid a d d e m i s it io ? . .. . 2 2

1 4 . ¿ Q u é es lo p r inc ipa l que hay q ue en ten d er pa r a hace r un s i t io acce s ib l e? . . . .. . . .. . .. . . .. . . .. . . .. . .. . . . 22

1 5 . ¿ M a n t e n d rá n e s t a s p a u t a s s u e s t a b i lid a d a m e d id a q u e s e d e s a r ro l le n l a s t e c n o lo g í a s

d e la We b? . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . . 22

1 6 . ¿ Q u ié n se ha im p licad o e n e l d es a r ro llo d e e s t as p au ta s? . . . .. . .. . . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. 23

1 7 . ¿ Q u é s it io s d e l a W e b e s t á n u s a n d o y a e s t a s p a u t a s ? ¿ Pued o ve r e j em p los? . . .. . . .. . . .. . .. . . .. . . .. . . 23

1 8 . ¿ Có m o s e r e la c io n a n e s t a s p a u t a s c o n o t ra s p a u t a s d e la In ic ia t iv a d e A c c e s i b ilid a de n la We b (WAI) d e l W 3 C? . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . 2 4

1 9 . ¿ Có m o a p r e n d e r m á s so bre la acce s ib i lid ad a l a We b y so bre la WAI? . . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. 24

2 0 . ¿ Cu á l es la fun ció n d e l W 3C en la acce s ib i lid ad a la We b? . . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . . .. . .. . . .. . . .. 24

Sob re la In ic ia t iva d e A cce sibilid ad e n la Web . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . 2 5

Gu í a b re v e p a ra c r e a r S it io s W e b A c c e s i b l e s . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 7

Pa u t a s d e A c c e s i b i lid a d a l C o n t e n i d o e n l a W e b 1 . 0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 9

RESUMEN ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 9

ESTATUS DE ESTE DO CUM ENTO . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 0

Page 8: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 8/164

1 . INTRO DUCCIÓ N. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . 31

2 . M O TIVO S DEL DISEÑ O ACCESIBLE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 3

2 . 1 - A s e g u ra r u n a t r a n s fo r m a c ió n ai rosa . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . 332 .2 Hace r com p rens ib l e y na ve g ab le e l con ten id o . . . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . .. . . .. 33

3 . CÓ M O SE O RGAN IZAN LAS PAUTAS. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . 34

3.1 Con ve ncion e s d e l d oc um e nto . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. 34

4 . PRIO RIDA DES. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 5

5. ADECUACIÓ N .. . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . 35

6 . PAU TAS DE ACCESIBILIDA D AL CO NTENIDO DE LA W EB. .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 7

PA U TA 1 . P ro p o r c io n e a lt e r n a t iv a s e q u iv a le n t e s a l c o n t e n id o v is u a l y a u d i tiv o . . .. . .. .. . .. .. . .. .. . 3 7

Pun to s d e ve r ificac ió n: . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 37

PA UTA 2 . N o s e b a se s ó lo e n e l co lor . . . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 39

Pun to s d e ve r ificac ió n: . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 39

PA U TA 3 . U t ilic e m a r c a d o r e s y h o ja s d e e s t ilo y h á g a l o a p r o p i a d a m e n t e . . .. . .. .. . .. .. .. . .. .. . .. .. . .. 4 0

Pun to s d e ve r ificac ió n . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . 40

PAUTA 4. Id e nt i fiq ue e l id io m a or ig inal usa d o . . . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . 42

Pun to s d e ve r ificac ió n: . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 42

PAUTA 5 . Cree t a b l as q ue se t r ans fo rm en co r rec t a m en te . . . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . . 43

Pun to s d e ve r ificac ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 43

PA U TA 6 . A s e g u r e q u e la s p á g i n a s q u e i n c o r p o r a n n u e v a s t e c n o l o g í a s s e t r a n s fo r m e nco rrecta m e nte . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . 45

Pun to s d e ve r ificac ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 45

PA U TA 7 . A s e g u r e a l u su a rio e l c o n t ro l so b r e l o s c a m b io s d e lo s c o n t e n id o s

te m p o-d e p e nd ie nte s . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . 46

Pun to s d e ve r ificac ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 46

PA U TA 8 . A s e g u r e l a a c c e s ib ilid a d d ir e c t a d e la s in t e r fa c e s d e u s u a r io i n c ru s t a d a s . . . .. .. . .. .. . . 4 8

Pun to d e ve r ificac ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . 48

PA U TA 9 . D is e ñ e p a r a l a i nde p en d en c ia d e l d isp os i t ivo . . . . .. . .. . . .. . . .. . .. . . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . 48

Pun to s d e ve r ificac ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 49

PAUTA 1 0 .Ut i lice so lucion e s p rov isiona le s . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . 49

Pun to s d e ve r ificac ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 50

PAUTA 1 1 .Ut i lice las te cno log í as y p au tas W3 C. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. 51

Pun to s d e ve r ificac ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 52

PAUTA 12 .P rop orc ione in fo rm ac ió n d e c o n t e x t o y o r ie n t a c ió n. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. 5 3

Pun to s d e ve r ificac ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 53

PA U TA 1 3 . P ro p o r c io n e m e c a n is m o s c la r o s d e n a v e g a c ió n. . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 54

Pun to s d e ve r ificac ió n. . . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 54

PAUTA 14 .As eg ure q ue los do cum e nto s sean c l a ros y s im p les . . . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . . .. . .. . . .. . . 56Pun to s d e ve r ificac ió n. . . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . . 57

Page 9: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 9/164

APENDICE A: Val id ac ió n. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . 5 8

APENDICE B: Glo sar io . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . 59

Re co no cim ie nto s. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . 67

Re fe ren cias . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . 68

Té c n i c a s p a r a la s P a u ta s d e A c c e s i b i lid a d a l Co n te n id o d e la W e b 1 . 0 . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . 71

Re sum e n . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . . .7 1

Estatus d e es te d oc um e nto . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . 71

1. Prior ida d e s . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 71

2 . Có m o s e o r g a n iz a n la s té cnicas. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . 7 2

2 .1 . Ejem p los y e j em p los d e saco nse jad os . . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . . 7 3

3. Te m as d e acce sibilid ad . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . 743 . 1 . E s tru c t u r a / p r e s e n t a c ió n. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . 7 4

3.2 . Te xto s e q uivalen te s . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . . 75

3 .2 .1 . Rev is ió n d e l a s t e c n o lo g í as. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . 7 5

3 .2 .2 . Com p at ib i lid ad re t ro sp e ct iva . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . 7 6

3 . 3 . Pá g ina s a l tern at ivas. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. 7 6

3.4 . Acc e so de sd e e l te clado . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .7 7

3 . 4 . 1 . C o n t r o l in d e p e n d i e n t e d e l d i s p o s i t iv o p a r a in t e r fa c e s e m p o t ra d a s . . . .. .. . .. .. . .. .. .. . .. .. 7 8

3 . 5 . N a v e g a c ió n. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 8

3 . 6 . C o m p r e n s ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . 7 93 .6 .1 . Est ilo d e e scr itura . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . 7 9

3 .6 .2 . Equ ivalen te s m ul t im e d ia . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . 8 0

3 . 7 . N e g o c ia c ió n d e l co nte nido . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . 8 1

3 . 8 . R e fr e s c o a u t o m á t ico d e l a p á g ina . . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .8 1

3.9 . Parpad e o d e la p an tal la . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . 8 2

3 .1 0 . Docu m en tos em p aq ue tad os . . . .. . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . . 8 3

3.11. Val idació n. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . 8 3

3 . 1 1 . 1 . Va lid a d o r e s a u t o m á t ico s. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . 8 3

3 . 1 1 . 2 . H e rra m ie n t a s d e r e p a r a ció n. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . 8 4

3 .11 .3 . Posibilid ad e s de l usu ar io . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . 8 4

3 .11 .4 . Rev i s ió n o r to g rá fica y g ram at ical . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . 8 5

3.1 2. Sop or te d e l na ve g ad or . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. 8 5

4 . Té cnicas HTM L. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 86

4 .1 . Es t ruc tu r a d e l d ocu m en to y m eta d a tos . . . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . . 8 6

4 .1 .1 . M e tad ato s. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . 8 6

4 . 1 . 2 . En c a b e z a m ie n t o s d e s e c c ió n. . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . 87

4 . 1 .3 . M e t a d a t o s d e v í n c u lo s y h e r ra m ie n t a s d e n a v e g a c ió n. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . 88

4 . 1 . 4 . A g r u p a c ió n e st ructu ral. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . 8 8

4 . 2 . In fo r m a c ió n so bre e l id iom a. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . 8 9

Page 10: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 10/164

4.3 . M arca d ore s de t e xto . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 9 0

4 . 3 . 1 . Énfasis. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 0

4 . 3 . 2 . A c ró nim os y ab re viaturas . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . 90

4.3 .3 . Citas . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .9 0

4 . 3 . 4 . M a r c a d o r e s y h o ja s d e e s t ilo m e j o r q u e i m á g e n e s : e l e je m p l o d e la s

m a t e m á t icas . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . 91

4.3 .5 . Dive rsos m arcad o re s e st ructu rale s . . . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . 91

4.4 . Listas . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . . . . 92

4 . 4 . 1 . U s o d e h o j a s d e e s t ilo p a r a c a m b ia r la s v iñ e ta s d e una lis t a . . . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. 93

4 .5 . Tab las. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 5

4.5 .1 . Tab las d e d ato s. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 95

4.5 .2 . Evite las tablas pa ra m aq ue tar. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . 10 1

4.5 .3 . Te xto inse r tad o e n tab las . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . 10 1

4 .5 .4 . Cue s t ion es d e co m p at ib i lid ad r e t rosp ec t iva pa r a t ab las . . . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. 10 2

4 . 6 . Ví ncu los . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . 10 2

4 . 6 . 1 . Ví n c u lo s d e a g ru p a c ió n y d e s v i a c ió n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . 10 3

4.6 .2 . Acce so de sd e e l te clado . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . 10 4

4.7 . Im á g e ne s y m ap as d e im ag e n. . . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . 10 5

4 . 7 . 1 . Te x t o s e q u iv a le n t e s p a r a im á g e ne s. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . 10 5

4 . 7 . 2 . Ví ncu los -d invisib le s . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . 10 7

4.7 .3 . Asc ii ar t . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. 1 07

4.7 .4 . Map as de im ag e n. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . . 10 8

4 .7 .5 . M ap as d e im ag en d e l lad o d e l c lien t e . . . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . 10 9

4 .7 .6 . M ap as de im ag en d e l lad o de l se rv id or. . . . .. . . .. . .. . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . 11 0

4 . 8 . A p p le t s y o t ro s o b j e t o s d e p r o g r a m a c ió n. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. 11 1

4 . 8 . 1 . Te x t o s e q u iv a le n t e s p a r a a p p le t s y o t ro s o b j e t o s d e p r o g r a m a c ió n . . . .. . . .. . .. . . .. . .. . . . 11 1

4 .8 .2 . Ap p le t s d ir ec t am en te acce s ib l es . . . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . 11 2

4 . 8 . 3 . So n id o e i m a g e n p r o d u c id o s p o r o b je t o s d in á m ico s. . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . 11 2

4.9 . Sonid o e im ag e n. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . 11 3

4 .9 .1 . In fo rm ac ió n so no ra . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . 11 3

4 .9 .2 . In fo rm ac ió n visual y m o vim ie nto . . . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . 11 4

4.9 .3 . Cita d e te xto s t rascr ito s . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . 11 4

4 .9 .4 . Tex tos eq u iva len tes p a r a m ul t im ed ia . . . . .. . . .. . .. . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . . 11 5

4 .9 .5 . O b je tos m ul t im ed ia e m p aq ue tad os . . . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . 11 5

4.1 0. M arco s. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . . 11 6

4 . 1 0 . 1 . Tit u le lo s m a r c o s p a r a f  á ci l or ient ació n. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . 11 6

4 .1 0 .2 . Tex tos eq u iva len tes p a r a m arcos . . . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . . 1 17

4 . 1 0 . 3 . A s e g ú r e s e d e q u e lo s d o c u m e n t o s p u e d e n le e rs e s in m a rc o s . . .. .. .. .. .. .. .. .. .. .. .. .. . 1 1 8

4 . 1 0 . 4 . H a g a q u e e l ar c h iv o d e o r ig e n d e u n m a r co s e a s ie m p r e u n d o c u m e n t o H TM L . .. 1 1 8

4 . 1 0 . 5 . Ev it e q u e a b r ir u n a n u e v a v e n t a n a s e a e l o b je t iv o d e u n m a r c o . . .. .. . .. .. . .. .. . .. .. . .. . 1 2 0

4.1 0.6 . Al tern at ivas a lo s m arco s. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . . 12 0

4.1 1. For m ular ios . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 21

4 .1 1 .1 . Hag a a cces ib l es l o s con t ro l es d e l t ec lad o . . . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . 12 1

4 .1 1 .2 . Grupo d e con t ro l es d e fo rm ula rio . . . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . .. . . .. . . .. . .. . . . 1 21

Page 11: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 11/164

4 . 1 1 . 3 . Et iq u e t e e x p lí c it am en te lo s con t ro les d e l fo rm ula rio . . . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. 12 2

4 . 1 1 . 4 . A g r u p e la s o p c io n e s d e m e n ú . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . 12 2

4 .1 1 .5 . Acce so d esd e e l t ec l ado a l o s fo rm ula rios . . . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. 12 2

4 . 1 1 . 6 . Bo t o n e s g rá fico s. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . 1 234 . 1 1 . 7 . Té c n ic a s p a r a c o n t r o l e s e s p e c í fico s. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. 12 4

4 . 1 1 . 8 . P r o b l e m a s d e c o m p a t ib ilid a d r e t r o s p e c t iv a p a r a fo r m u la r io s . . .. . .. .. . .. .. .. . .. .. . .. .. . .. 1 2 5

4.1 2. Scr ip ts . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . 12 5

4 .1 2 .1 . Transfo rm ac ió n eleg an te d e los scr ip ts . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . 1 25

4 . 1 2 . 2 . M a n ip u la d o r e s d e e v e n t o s i n d e p e n d ie n t e s d e l d i sp o s it iv o . . . .. .. . .. .. . .. .. .. . .. .. . .. .. . .. 1 2 5

4 . 1 2 . 3 . P r e s e n t a c ió n al tern at iva d e sc r ip ts . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . 1 26

5 . Té cnicas p ara CSS. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . 12 7

5.1 . Pau tas p ara crea r ho jas d e e st i lo . . . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. 1 27

5.2 . Tip os d e le t ra . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . . 12 8

5.3 . Est ilo d e l te xto . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . 12 9

5 . 3 . 1 . Te x t o e n lu g a r d e im á g e ne s. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 1 29

5.4 . For m ate o d e l te xto . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . 1 30

5.5 . Colore s . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . 13 1

5 . 6 . M a q u e t a c ió n , ub icac ió n , co locac ió n y a l ine ac ió n. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 13 2

5.6 .1 . S i debe ut i l izar im á g en es co m o e sp ac iado res . . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . .. . . .. . . .. . 13 3

5 . 7 . Lí ne as y bo rd e s. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . 1 33

M A PA DE PUN TO S DE VERIFICA CIÓ N. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . 1 35

Pauta 1 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 35Pauta 2 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 35

Pauta 3 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 36

Pauta 4 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 36

Pauta 5 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 36

Pauta 6 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 37

Pauta 7 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 37

Pauta 8 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 38

Pauta 9 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. 1 38

Pauta 10 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 1 38

Pauta 11 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 1 39

Pauta 12 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 1 39

Pauta 13 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 1 40

Pauta 14 : . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . 1 41

Índ ice d e e le m e nto s y a t r ibu to s HTM L. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . 1 42

Ele m e nto s. . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . 1 42

Atr ibu tos . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . . .. . . . 1 45

Ag rad e cim ie nto s. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. 1 48

Re fe ren cias . . . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . 1 49

Page 12: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 12/164

14

Servicios . . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . 15 2

Ta b l a d e Pu n t o s d e V e ri fi c a c i ó n p a ra l a s Pa u t a s d e A c c e s i b i li d a d a l C o n t e n i d o e nla W e b 1 . 0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 5

Re su m e n. . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . 15 5

Estatus d e l d oc um e nto . . . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . 1 55

PRIO RIDA DES .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 5 6

Pun to s d e ve r ificac ió n Prior ida d 1 . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . 15 7

Pun to s d e ve r ificac ió n Prior ida d 2 . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . 15 9

Pun to s d e ve r ificac ió n Prior ida d 3 . . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . . .. . . . . . .. . . . . . . .. . . . . . .. . . . . 16 1

Page 13: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 13/164

15

P ró l o g o

Es te lib ro , a l q u e h e m o s llam ad o “Dise ñ o a c c e s ib le d e p á g i n a s W e b ” , r eco g e l a s t r a -

d u c c io n e s , a d a p t a d a s , d e u n a s e r ie d e d o c u m e n t o s e la b o r a d o s y p u b lic a d o s p o r e l W o r ld

W i d e W e b C o n s o r t iu m (W 3 C) c o m o r e s u l ta d o d e lo s t r a b a jo s r e a liz a d o s p o r la W e b A c c e -

s s ib ilit y In ic ia t iv e (WA I) y q u e m ere c ie ro n e l r eco n o c im ien to co m o Reco m en d ac ió n W 3 C.

Por e l lo fue suscr ita p or su Dire c to r e l d í a 5 d e m a yo d e 1 9 9 9 , b a jo e l n o m b re d e “Pau ta s

d e A cces ib ilid ad a l Co n t e n id o e n la We b 1 . 0 ” (We b Conte n t Acce ss ib i lity Guid e line s 1 .0 ).

U t iliz a n d o la s p a l a b ra s d e lo s p r o p i o s a u t o r e s d e e s t a s P a u t a s , p o d e m o s d e c ir q u e :

“ Es tas p au tas e xp lican c  ó m o h a c e r a c c e s ib le s lo s c o n t e n id o s d e la W e b  

a p e r so n a s c o n d is c a p a c id a d . La s p a u t a s e s t  á n p e n s a d a s p a r a t o d o s lo s  

d e s a rro lla d o re s d e c o n t e n id o s d e la W e b (a u t o re s d e p  á  g in a s y d is e ñ a - 

d o re s d e s it io s ) y p a ra lo s d e s a r ro l la d o re s d e h e rr a m ie n t a s d e a u t o r . El  

f in p r inc ipa l de es tas pau tas es p romover l a acces ib i l idad . De cua lqu ie r  

m o d o , sig u i  é n d o la s , s e h a r  á  la W e b m  á s a s e q u ib le t a m b i  é n p a ra t o d o s  

los u suar ios , cua lq u ie ra qu e se a la ap licac i  ó n d e usua r io u t ilizad a (p . e j.

n a v e g a d o r d e s o b re m e s a , n av e g a d o r d e v o z , te l  é fo n o m  ó v il, o rd e n a d o r  

d e a b o rd o , e t c .), o la s lim it a c io n e s b a jo l a s q u e o p e re (p . e j. e n t o rn o s  

ru id oso s o s ile nc ioso s , hab itac ion e s in fra o sup ra ilum inad as , en to rno d e  m a n o s lib r e s , e t c . ). S e g u ir e s t a s p a u t a s a y u d a r  á  t a m b i  é n a c u a lq u ie r p e r -  

s o n a a e n c o n t ra r in fo rm a c i  ó n e n l a W e b m  á s r á  p id a m e n te . Es ta s p a u ta s 

no d esa lie n tan a lo s d e sar ro l lad ore s p ara la u t i lizac i  ó n d e i m  á  g e n e s , v í  - 

d e o , e tc . ; p o r e l con t ra rio , e xp lican c  ó m o h a c e r lo s c o n t e n id o s m u lt im e -  

d ia m á s a c c e s i b le s a u n a a m p l ia a u d ie n c ia  ” .

Lo s d o c u m e n t o s t ra d u c id o s q u e s e r e c o p ila n e n e s t a p u b lic a c ió n s o n lo s s ig u ie n t e s , en

o r d e n d e a p a r ic ió n e n e s t e lib ro :

• Pre g u n t as m á s f re c u e n t e s s o b re l a s “Pa u ta s d e A c c e s i b ilid a d a l C o n te n i d o e n laW e b 1 .0 ” : En e s t e d o c u m e n t o s e r e s p o n d e a v e in t e p r e g u n t a s y e s tá e n c a m in a d o a

p ro p o rc io n a r i n fo rm ac ió n s o b r e l a c i t a d a R e c o m e n d a c ió n W 3 C , a s í  c o m o s o b r e e l

t raba jo de es te Consorc io y su In ic ia t iva p ro -acces ib i l idad . En é l, e l le c to r p o d rá e n -

co n t ra r u n a am p lia in fo rm ac ió n d e r e fe r e n c ia p a ra e n c u a d ra r e l q u é , p o r q u é , p a r a q u éy p a r a q u ié n d e e s t a s Pa u t a s y có m o im p le m e n t a rla s .

• Gu ía b re v e p a ra c re a r s i tio s W e b a c c e s i b le s : En ta n s ó lo d ie z r e c o m e n d a c io n e s se

r e c o g e n lo s fu n d a m e n t o s p a r a d i se ñ a r d e fo rm a acce s ib le u n s it io W eb . Si s ig u e e s to s

d ie z p r inc ip ios b á s ic o s , e s p r e s u m ib le q u e e l d is e ñ a d o r d e p á g i n a s W e b h a rá q u e s u s

s it io s p u e d an s e r acces ib le s .

Page 14: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 14/164

16

• Pa u ta s d e A c c e s i b ilid a d a l C o n t e n i d o e n l a We b 1 . 0 : Es t e d o c u m e n t o c o n t ie n e e l

c u e r p o c e n t r a l d e e s t a s P a u t a s , q u e e s d e s a r r o l l a d o e n l o s d o c u m e n t o s p o s t e r i o r e s

s o b r e «Té cn icas» y «Tab la d e ve rificac ió n ». El le c to r p u e d e e n co n t ra r aq u í e l te x t o d e la sca to rce Pau t a s y d e lo s r e s p e c t iv o s p u n to s d e v e r ificac ió n d e c a d a u n a d e e lla s . Ju n t o

a é s t a , s e p ro p o rc io n a o t r a in fo rm ac ió n c o m o e s e l c a s o d e l o s m o t iv o s p a r a re a l iz a r

u n d i s e ñ o acces ib l e , l o s d i s t i n to s n iv e l e s d e p r i o r i d ad y ad ecu ac ió n , a s í  c om o d o s

a p é n d ic e s s o b r e e l p r o c e d im ie n t o d e v a l id a c ió n y u n g l o s a rio d e té r m i n o s e m p l e a -

d o s .

• Té c n i c a s p a ra la s Pa u ta s d e A c c e s i b ilid a d a l Co n te n id o e n l a W e b 1 . 0 : Se t ra t a d e

u n d o c u m e n t o c o m p l e m e n t a r i o a l a n t e r i o r e n e l q u e l o s a u t o r e s d e l a s P a u t a s n o s

d e s c rib e n lo s p ro ce d im ien to s p a ra ap lica r d ich as Pau t a s . A q u í s e n o s e n s e ñ a , m e d ia n -

t e e je m p lo s p rá c t ico s , c ó m o d e b e m o s d is e ñ a r n u es t r a s p á g in a s W e b p a r a q u e é s t a s

cu m p lan lo s r eq u is it o s d e acce s ib ilid ad . El d o cu m en to e s t ru c tu ra su co n t e n id o e n :

• Tem as g e n e ra le s d e acce s ib ilid ad .

• Té cn icas HTM L.

• Té cn icas CSS.

Ju n t o a e s t o s t re s g ra n d e s b l o q u e s , se n o s p r o p o r c io n a u n “m a p a d e p u n t o s d e v e r ifi-

cac ió n ” , a s í c o m o s e n d o s í n d ices d e e le m en to s y a t r ib u to s H TM L, co n r e fe re n c ia s a lo s

p u n to s d e v e r ificac ió n q u e le s s o n ap licab le s .

E l d o c u m e n t o a q u í  t r a d u c i d o e s e l q u e a p a r e c ió e l 5 d e m a yo d e 1 9 9 9 y q u e fu e

r e v is a d o y s u s c rit o p o r lo s m ie m b r o s d e l W 3 C . Co n p o s t e r io r id a d , e s t e d o c u m e n t o h a

s id o r e fo r m a d o p o r e l G ru p o d e Tra b a jo d e e s t a s Pa u t a s , y h a n a p a r e c id o d o s n u e v a s

v e r sio n e s (e l 2 0 d e s e p t ie m b r e d e 2 0 0 0 y e l 6 d e n o v ie m b r e d e 2 0 0 0 ). Es ta s n u e v a s

v e r s io n e s , q u e n o h a n s id o r e v is a d a s n i s u s c rit a s p o r lo s m ie m b r o s d e W 3 C, h a n s u -

p u e s t o c a m b i o s d e f o r m a y n o d e f o n d o . E s t e d o c u m e n t o s e h a c o n v e r t i d o e n u n

“p o r t a l” q u e d a a c c e s o a c u a tr o d ife r e n t e s d o c u m e n t o s , q u e p o d rá n e v o lu c io n a r s e p a -

r a d a m e n t e .

• Ta b l a d e Pu n t o s d e Ve rif ic a c ió n p a ra la Pa u t a s d e A c c e s ib i lid a d a l C o n te n i d o e nla W e b 1 . 0 :

Este ú lt im o d o c u m e n t o c o n t ie n e la t a b la c o n t o d o s l o s p u n t o s d e v e r ific a c ió n d e l a s

P a u t a s, a g r u p a d o s p o r p r io r id a d y p o r o b je t iv o q u e p e rs ig u e c a d a u n o d e e l lo s . Es t a t a b la

s irv e a l d e s a r ro l lad o r p a ra r ep as a r e l t rab a jo r ea lizad o a la h o ra d e co m p o n er s u p á g in a

W e b y c o m p r o b a r e l g r a d o d e a c c e s ib ilid a d a lc a n z a d o e n s u d i se ñ o . Tam bié n p u e d e s e r

ú t il e s t e d o c u m e n t o c o m o r e fe r e n c ia rá p id a a l o s p u n to s d e v e r ificac ió n , s e g ú n su p rio ri-

d a d y o b je t iv o .

Page 15: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 15/164

17

E l l ec to r d e e s t e l i b ro d eb e s e r co n s c i en t e d e l a rá p i d a e v o lu c ió n q u e s e p r o d u c e e n

In t e rn e t . Po r lo t an to , p a ra e s t a r p l en am en te a c tu a lizad o , d eb e r e cu r rir a la s fu e n t e s o r ig i-

n a l e s . P a s a d o u n t i e m p o e s m u y p o s i b l e q u e e l c o n t e n i d o d e e s t e t e x t o t e n g a a l g ú ne x t r e m o d e s a c t u a l i z a d o y s u p e r a d o p o r l o s n u e v o s p r o c e d i m i e n t o s d e d i s e ñ o y ap l ica-

c io n e s d e u s u a r io . Le i n v it am o s , p o r lo t an to , a q u e , s i e s t á in t e r e s a d o , s ig a d e c e r c a la

in fo rm ac ió n q u e s e p r o d u z c a e n e l sit io W e b h t t p :/ / w w w . w 3 . o r g / W A I.

El im p u ls o a e s t a s t rad u cc io n es p ro v in o d e l Sem in a r io d e In ic ia t iv as s o b re D is cap ac id ad

y A cce s ib ilid ad en la Red (S ID A R). Es t e s em in a r io p e rm an e n t e e s t á p r o m o v id o p o r e l Re a l

P a tr o n a t o d e P re v e n c ió n y d e A t e n c ió n a P e r s o n a s c o n M i n u s v a lí a y en t r e s u s o b j e t iv o s

e s tá e l d e p r o m o v e r lo s c r it e r io s d e a c c e s ib ilid a d e n la Re d d e n t r o d e l m u n d o d e h a b la

h is p an a . Po r lo t an to , t am b ié n e s b u e n o s e g u ir d e c e r c a la in fo r m a c ió n q u e a p a r e z ca e n

s u s it io W eb . Pu e d e en co n t ra r la e n la d ir ecc ió n : h t tp : / / w w w . s id a r. o rg .

Page 16: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 16/164

18

Page 17: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 17/164

19

P re g u n t a s m á s fre c u e n t e s s o b re la s «Pa u t a s d e

Ac c e s ib ilid a d a l Co n t e n id o e n la W e b 1 . 0 »

1 . - ¿ Q u é s o n la s P a u ta s d e A c c e s i b ilid a d a l C o n t e n id o e n la W e b ?

La s «Pau ta s d e A cces ib i l i d ad a l Co n t en id o en l a Web 1 . 0 » s o n u n a e s p ec i ficac ió n d e lW 3 C q u e p r o p o r c i o n a u n a g u í a s o b re l a acces ib i l i d ad d e l o s s i t i o s d e l a Web p a ra l a s

p e r s o n as co n d is cap ac id ad es . H a n s id o d es a r ro l lad as p o r la In ic ia t iv a d e A cce s ib ilid ad en

la W e b (WAI) de l W 3C. La e sp e c ificac ió n c o n t ie n e c a t o r c e p a u t a s , q u e s o n l o s p r in c ip i o s

g en e ra l e s p a ra e l d i s e ñ o a c c e s i b l e . C a d a p a u t a e s tá a s o c i a d a a u n o o m á s p u n t o s d e

verificació n q u e d e s c rib e n c ó m o a p l i c a r e s a p a u t a a l a s p r e s e n t a c i o n e s d e l a s p á g in as

W e b . U n a p é n d ic e d e e s t a s p a u t a s , la «Lis t a d e p u n to s d e v e r ificac ió n p a ra la s Pau t a s d e

A cce s ib ilid ad a l Co n t en id o e n la We b 1 . 0», p r e s en t a lo s p u n to s d e v e r ificac ió n clasifica -

d o s p o r p r io r id ad es , p a ra en co n t ra rla s f  á c ilm en te . Es t a s p au t a s n o s ó lo h ace n l a s p á g in as

m á s acces ib le s p a ra la s p e r so n as co n d is cap ac id ad , s in o q u e t ien en e l b e n e fic io ad ic io n a ld e h a c e r la s m á s acces ib le s p a ra t o d o s lo s u s u a r io s q u e u t iliz an n av eg ad o re s d i fe re n t e s o

lo s n u e v o s o r d e n a d o r e s p o r tá t ile s o b as a d o s e n la v o z .

2 . - ¿Q u é s o n l a s « p rio rid a d e s » , lo s « n ive le s d e a d e c u a c i ó n » y c ó m o s e u s a n lo sl o g o t i p o s ?

Cad a p u n to d e v e r ificac ió n t ie n e a s ig n a d o u n o d e lo s t r e s n iv e le s d e p r io r id a d .

• La Prio rida d 1 es p a ra lo s p u n to s d e v e r ificac ió n q u e e l d e s a r ro lla d o r t i e n e q u e s a t is -

fa c e r ; s i n o , a lg u n o s g ru p o s d e p e rs o n a s s e rá n in c a p a c e s d e a c c e d e r a la in fo r m a c ió n

d e u n s it io ;

• La Prior idad 2 e l d es a r ro l lad o r d e b e sa t i s face r la ; s in e llo a lgu ien e nco n t rará m u c h a s

d ificu lt ad e s p a ra acce d e r a la i n fo rm ac ió n ;

• La Prior idad 3 e l d e s a r ro llad o r p u e d e s a t is face r la ; d e lo co n t ra r io , a lg u n as p e r so n as

hallará n d ificu lt ad es p a ra acced e r a l a in fo rm ac ió n .

La especif icació n t ie n e t r e s «n iv e le s d e a d e c u a c ió n » p ara fac ilit a r la re fe ren c ia p or o t ras

o rg an i zac io n es :

• El n iv e l d e ad ecu ac ió n «A » (A) inc luye los p un tos d e ve r ificac ió n d e p rio r id a d 1 ;

• El nive l «D o b le A » (AA ) inc luye las p r io r id ad e s 1 y 2 ;

Es t a p á g in a d e « p re g u n ta s m á s f re c u e n te s » p r o p o r c io n a in fo r m a c ió n s o b re la

r e c o m e n d a c ió n W 3 C (W o rld W id e W e b C o n s o r t iu m ) «Pau ta s d e A cce s ib ilid ad

a l Co n t e n id o e n la W e b 1 . 0», e m it id a e l 5 d e m a y o d e 1 9 9 9 .

Page 18: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 18/164

20

• El nive l «Trip le A » (AA A) inc luye las p r io r id ad e s 1 , 2 y 3 .

Pa ra aq u e llo s cu y as p á g i n a s s ig u e n e s t a s p a u t a s , h a y d is p o n ib le s u n o s l o g o t ip o s q u e

p u e d e n c o lo c a r e n s u s s it io s p a ra m o s t ra r su n i ve l d e a d e c u a c ió n . Ve a la p r e g u n t a 1 2 d ee s t e d o c u m e n t o “¿ Q u é r e c u rs o s d e a p o y o e s tá n d is p o n ib le s p a r a u s a r e s t a s p a u t a s ? ” ,

p a ra in fo r m a r se s o b r e l o s p r o g ra m a s d e r e v is ió n , p a r cia lm e n t e a u t o m a t iz a d o s , d e a y u d a

p ara la va lo rac ió n d e los s i t ios .

3 . - ¿ Pa ra q u ié n e s t á n e s c rita s e s t a s p a u t a s ?

Es ta s p au t a s e s t á n e s c rit a s p a ra u n a v a r iad a au d ien c ia : la s p e r s o n as q u e e s tá n d is e ñ a n -

d o s i t i o s W e b ; l a s q u e e s t á n co m p ro b an d o l o s s i t i o s Web ex i s t en t e s p a ra v e r i f i ca r s u

acce s ib ilid ad ; la s o rg an i zac io n es q u e d es e an d a r a s u s s it io s u n n iv e l d e acce s ib ilid ad ; yo t r o s q u e e s tá n in t e r e s a d o s e n a s e g u ra r q u e la s p e rs o n a s c o n d i sc a p a c id a d p u e d a n a c c e -

d e r a l a in fo rm ac ió n d e la W e b .

4 .- ¿Po r q u é s o n n e c e s a ria s e s t a s p a u t a s ? ¿Po r q u é s o n i m p o rta n te s ?

La s p e r s o n a s c o n d i fe r e n t e s t ip o s d e d i sc a p a c id a d p u e d e n e x p e r im e n t a r d i fic u lt a d e s

p a ra u t iliz a r la W eb d e b id o a la co m b in ac ió n d e b a r re ra s en la in fo rm ac ió n d e l a s p á g in as

We b , co n la s b a r re ra s d e l a s «ap licac io n e s d e u s u a r io » (n av e g ad o re s , d is p o s i tiv o s m u lt i-

m e d ia o a y u d a s té c n ic a s c o m o lo s le c t o r e s d e p a n t a lla o r e c o n o c e d o r e s d e v o z ).

L as Pau t a s d e A cces ib i l i d ad a l Co n t en id o en l a Web t i en en r e l ac ió n e s p e c í ficam en te

c o n la r e d u c c ió n d e b a rr e r a s e n la s p á g in as Web . Pa ra a lg u n as p e r s o n as co n d i s cap ac i -

d ad , la s b a r re ra s p u e d en s ig n ifica r :

• la fa lt a d e acce s o a in fo rm ac ió n p r e c is a p a r a p r o g ra m a s e d u c a t iv o s ;

• la fa lt a d e acces o a in fo rm ac ió n r e la c io n a d a c o n e l e m p l e o o e n la s in t ra n e t s d e l p u e s -

t o d e t ra b a jo ;

• la fa lt a d e acce s o a in fo rm ac ió n s o b r e a c t iv id a d e s o p r o g ra m a s c í vicos ;

• la in cap ac id ad p a ra p a r t ic ip a r en e l co m erc io e n la r ed ;

• la fa lt a d e acce s o a l a in fo rm ac ió n g e n e ra l d e la W e b .

5 . - ¿ A c u á n ta g e n te a fe c ta n lo s p ro b l e m a s d e a c c e s i b ilid a d e n la W e b ?

El p o r c e n t a je d e p e rs o n a s c o n d i sc a p a c id a d s e s itú a e n t r e e l 1 0 % y e l 2 0 % e n m u c h a s

p o b lac io n es . N o t o d as la s d i s cap ac id ad e s a fec t an a l acce s o a la s t ecn o lo g í as d e la in fo r-

m a c ió n , co m o la W eb (p o r e j em p lo , la d ificu lt ad p a ra cam in a r o u n a d e fic ien c ia co ro n a r ia

n o a fec t a r í a n a l a c c e s o a la W e b ), p e r o m u c h a s s í s u p o n en u n a d ificu lt ad .

I g u a l q u e o t r o s g r u p o s d e p o b l a c ió n , n o t o d a s la s p e rs o n a s c o n d i sc a p a c id a d t ie n e n

• Preguntas más frecuentes •

Page 19: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 19/164

21

acces o a la We b . Pe ro e l n ú m e r o d e u s u a r io s d e la W e b e s tá i n c r e m e n tá n d o s e c o n s ta n t e -

m e n t e y , p a r a la s p e rs o n a s c o n d is c a p a c id a d , e l a c c e s o a e s t a t e c n o lo g í a e s a v e c e s m á s

crí t ico q u e p a ra la p o b lac ió n g en e ra l, la cu a l t ien e u n a m ay o r fac ilid ad p a ra acced e r a lo scau ce s t rad ic io n a le s d e in fo rm ac ió n , co m o lo s m e d io s im p r e s o s .

6 . - ¿ Cu á le s s o n a lg u n o s e je m p l o s d e b a rre ra s h a b itu a le s e n la s p á g in a s W e b ?

Es t a s p a u t a s s e r e fie r e n a la s b a r re r a s q u e p u e d e n e n c o n t ra r e n l a s p á g in as Web l a s

p e rs o n a s c o n d is c a p a c id a d f  í s ica , v isua l, aud it iva y cog n i t iva / ne uro ló g i ca . Lo s p r o b le m a s

hab itua le s d e a cce s ib i lid ad a los s i t ios W e b inc luyen :

• im á g e n e s s in t e x t o a lt e r n a t iv o ;

• a u s e n c ia d e t e x t o a lt e r n a t iv o p a ra lo s p u n t o s s e n s ib le s d e l o s m a p a s d e im a g e n ;• e l u s o i n co r rec to d e lo s e lem e n to s e s t ru c tu ra le s e n la s p á g in as ;

• lo s s o n id o s n o s u b t it u lad o s o la s im á g e n e s n o d e s c r it a s ;

• la au s e n c ia d e in fo rm ac ió n a lt e r n a t iv a p a ra lo s u s u a r io s q u e n o p u e d e n a c c e d e r a lo s

m arco s ( fr am es ) o a lo s p ro g ram as in c ru s t ad o s (s c rip t s );

• las tablas dif  í c ile s d e in t e rp re t a r cu an d o s e lin e a r izan ;

• o l o s s it io s c o n u n c o n t ra s t e d e c o lo r e s p o b r e .

7 . - ¿ C ó m o a f e c ta n e s t a s p a u t a s a l a m a n e ja b i lid a d y a p a rie n c i a d e lo s s itio s p a ra

lo s u s u a rio s s i n d i s c a p a c i d a d ?

Lo s s it io s W eb acces ib le s p u e d en s e r d i s e ñ ad o s co n t an t a c rea t i v id ad co m o lo s s i t i o s

in acce s ib le s . Las Pau t a s d e A cce s ib ilid ad a l Co n t en id o e n l a We b s e r e fie re n a có m o h a ce r

a c c e s ib le s u n a g r a n v a r ie d a d d e c a ra c t e rí s t ic a s d e la W e b , e n v e z d e r e c o m e n d a r q u e lo s

s i t i o s d e b e n s e r s o m b rí o s o ab u r r i d o s . L a f i n a l i d ad e s a s eg u ra r q u e t o d o t i p o d e s i t i o s

We b , in c lu y e n d o l o s m u lt im e d ia , fu n c io n e n b i en p a ra t o d o s l o s u s u a r io s . En g en e ra l, lo s

s it io s w eb a cces ib le s n o t ien en q u e d is e ñ a r se p a ra q u e s e a n m u y d ife r e n t e s . Só lo n e ces i -

t an s e r d is e ñ a d o s d e fo r m a q u e s e a n fle x ib le s :

• fle x ib le s p a r a q u e lo s u s u a r io s p u e d a n o p e ra r c o n e l lo s d e s d e d i fe r e n t e s m o d o s ( co n

t ec l ad o , ra tó n, . . . )

• y fle x ib le s p a r a q u e s e t r a n s fo r m e n d e fo r m a a g ra d a b le e n p á g inas in te lig ib les y ú t i les

s i n o s e s o p o r t a n t e c n o lo g í a s e sp e c í ficas o é s t a s n o p u e d en s e r u t iliz ad as p o r u s u a r io s

o n a v e g a d o r e s e s p e c í ficos.

M u c h a s c a ra c t e rí s t i ca s d e l a s p au t a s m e jo ra rá n e fec t i v am en te l a m an e j ab i l i d ad d e l o s

s it io s We b p a ra lo s u s u a r io s s in d is cap ac id ad , a l a s e g u ra r q u e lo s s i t io s s o n m á s f á c i lm en -

t e n a v e g a b le s y s e p u e d e a c c e d e r a e llo s a t ra vé s d e u n a d iv e r s id a d d e d i sp o s it iv o s y n o

só lo d e s d e e l tra d i cio n a l n a v e g a d o r g rá fic o d e s o b r e m e s a .

• Preguntas más frecuentes •

Page 20: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 20/164

22

8 . - ¿ Po r q u é n o re c o m i e n d a n e s t a s p a u t a s la u t iliz a c ió n d e p á g in a s s ó lo te x to ?

Ex cep to e n a lg u n o s ca s o s p a r t icu la re s , la s p á g in as s ó lo - t e x t o n o s e rá n n e ces a r ia s p a rag aran t izar la acc e s ib i lid ad d e las p á g i n a s W e b q u e s ig u e n la s P a u t a s d e A c c e s ib ilid a d a l

Co n t e n id o e n la W e b . D e h e c h o , la s p á g in as só lo - t e x t o s o n c o n t ra p r o d u c e n t e s p a ra la

a c c e s ib ilid a d , p u e s t o q u e s e t ie n d e a t e n e r la s m e n o s a c t u a liz a d a s q u e la s «p á g i n a s p r im a -

rias» y , e n a lg u n o s c a s o s , n o c o n t ie n e n in fo r m a c ió n q u e s í a p a r e ce e n é s t a s .

M u ch o s s i t i o s q u e en e l p a s ad o h an p ro cu rad o l a acces ib i l i d ad , h an u t i l i z ad o co m o

so luc ió n las p á g in as s ó lo - t e x t o ; n o o b s t a n t e , s ig u ie n d o e s t a s p a u t a s , s e rí a in n e ces a r io e n

la m a y o rí a d e l a s o c a s io n e s o , in c lu s o d e s a c o n s e ja b le , c o lo c a r y m a n t e n e r u n g r u p o s e p a -

ra d o d e p á g in as s ó l o - t ex to .

9 . - ¿ Es m á s c o s t o s o h a c e r u n s itio a c c e s i b le ?

El d ise ñ o d e u n s it io p a r a q u e s e a a c c e s ib le n o s u p o n e u n i n cr e m e n t o s ig n ific a t iv o d e l

c o s t e d e d e s a rr o llo . A lg u n o s a s p e c t o s d e la a c c e s ib ilid a d , c o m o e l u s o d e la s h o ja s d e

es t i lo , p u e d e i n c lu s o r ed u c ir e l co s t e d e l m an te n im ien to o la s ac tu a l izac io n es d e l o s s i-

t io s , y e s t e b en e fic io s e in c rem e n ta rí a c o n e l t ie m p o , p u e s t o q u e la s h o ja s d e e s t ilo e s tá n

c a d a v e z m á s a m p lia m e n t e im p le m e n t a d a s y d is p o n ib le s e n lo s n a v e g a d o re s c o m o u n a

e s t r a te g ia d e a u t o r e n la s h e rra m ie n t a s d e a u t o r.

Para los s i t ios e x is te n te s , la fac i lid ad o d ificu l tad d e h ace r los s i t ios a cce s ib les d e p e nd e

d e u n a v a r ie d a d d e fa c t o r e s , q u e i n c lu y e n e l t a m a ñ o d e l s it io , s u co m p le j id ad y la s h e r ra -

m ie n t a s d e au to r q u e s e u s a ro n p a ra crea r lo . Las ac tu a lizac io n es p e r ió dicas y rev is iones

d e l o s s i t i o s p u ed en s e r b u en as o p o r tu n id ad es p a ra r ev i s a r l a acces ib i l i d ad . Cu an d o s e

t ie n e e n c u e n t a la a m p l it u d d e la a u d ie n c ia p a ra la q u e u n s it io e s tá d is p o n ib le , a s í c o m o

la m ay o r u t ilid ad p a ra o t ro s u s u a r io s , lo s s i tio s a cces ib le s p u e d en s e r r en t ab le s .

1 0 . - ¿ H a y a l g u n a s h e r r a m i e n t a s d e a u t o r m e j o r e s q u e o t r a s p a r a h a c e r a c c e s i -b l e s lo s s i tio s ?

Las carac te rí s t ic a s c la v e a b u s c a r e n l a s h e r ra m ie n t a s d e a u t o r d e la W e b , p a r a q u e s e a n

acce s ib les , inc luyen :

• la p r o d u c c ió n d e có d ig o s HTM L y CSS vá l idos ,

• q u e c o n t e n g a n la s c a ra c t e rí s t ica s c lav e d e acces ib ilid ad en s u s e s p ec i ficac io n e s ,

• y q u e s ea n co n fig u rab le s p o r p a r t e d e l u s u a r io l o s av is o s e n p an t a l la , s e ñ a le s d e a le r t a ,

va l idac ió n y a yu d a .

• Preguntas más frecuentes •

Page 21: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 21/164

23

Bu s q u e e s t a i n fo r m a c ió n e n la d o c u m e n t a c ió n d e l p r o d u c t o o p r e g u n t e a l d e s a rr o lla d o r

d e l a h e r ram ie n t a d e a u to r. Pa ra m á s in fo rm ac ió n s o b re l a acces ib ilid ad d e la s h e r ram ien -

t a s d e au to r, v ea l a s Pau t a s d e A cce s ib ilid ad p a ra la s H e r ram ien t a s d e A u to r, d i s p o n ib le s(en in g lé s ) e n h t t p : / / w w w . w 3 . o rg / TR/ W A I- A U TO O LS .

1 1 .- ¿Se c o n ve rtirá n e s t a s p a u ta s e n u n a e x ig e n c ia ? ¿Ha y c o n s e c u e n c i as le g a l e sp o r n o h a c e r a c c e s i b le u n s itio ?

Es t a s p a u t a s so n u n a e sp e c i fic a c ió n d e sa r r o lla d a p o r W 3 C , u n c o n so r c io in d u s t r ia l in t e r-

n a c i o n a l i n d e p e n d i e n t e , y h a n s i d o d e s a r r o l l a d a s b a j o u n p r o c e s o W 3 C . W 3 C n o t i e n e

ca rá cte r le g isla t ivo y la es p e cificac ió n “Pa u t a s d e A c c e s ib ilid a d a l C o n t e n id o e n la W e b ” n o

e s u n a n o r m a t iv a . La s p a u t a s p u e d e n s e r a d o p t a d a s fo r m a l o in fo r m a lm e n t e p o r d i fe r e n t e st ip os d e o rgan izac io ne s p a ra c la r ifica r qu é nive l d e acce s ib i lid ad e x ig e l a o rgan izac ió n p a ra

su s p r o p io s s i tio s W e b . Si a u s t e d le g u s t a rí a a p r e n d e r m á s s o b r e le y e s e s p e c í ficas o p o lí -

t ic a s d e l o s d ife r e n t e s p a í s e s q u e t ie n e n r e la c ió n c o n l o s r e q u is it o s d e a c c e s ib ilid a d p a r a

lo s s it io s W e b , a lg u n a s d e e l la s e s tá n d isp o n ib le s ( e n i n g lé s ) e n la se cc ió n d e «re fe ren c ias a

p o lí t icas » d e l s it io W A I (h t t p : / / w w w . w 3 . o r g / W A I). Po r fa v o r, c o n t a c t e c o n la s a u t o r id a d e s

c o rr e s p o n d ie n t e s p a r a o b t e n e r m á s d e t a lle s so b r e o b lig a c io n e s y / o im p o s i cio n e s .

1 2 .- ¿ Q u é re c u rs o s d e a p o y o e s t á n d is p o n ib l e s p a ra u s a r e s t a s p a u ta s ?

Lo s d o s d o c u m e n t o s m á s im p o rt a n t e s p a ra u s a r e s t a s p a u t a s , s o n :

• La «Lis t a d e p u n to s d e v e r ificac ió n », u n a p é n d ic e d e la s p a u t a s q u e a g r u p a lo s p u n t o s

de verif icació n p or p r io r id ad e s y los t ip i fica p ara un a f  á ci l referencia.

• El d o c u m e n t o «Té cn icas», q u e ex p lica có m o m a r c a r d i fe r e n t e s c a ra c t e rí s t ic a s d e a c c e -

s ib ilid a d e n d i v e rs o s le n g u a je s d e m a r c a d o .

A d e m á s , e l t rab a jo d e l a O fic ina d e l Prog ram a In te rna c io na l d e l a In i c ia t iva d e A cce s ib i -

lid a d a la W e b in c lu y e fo r m a c ió n y a c t iv id a d e s d e a s is t e n c ia a l p ú b lic o . C o m o r e su l t a d o , la

WAI a ñ a d e fr e cu e n t e m e n t e r e c u rs o s q u e p u e d e n s e r ú t ile s e n la e n se ñ a n z a , r e fe r e n c ia o

ins t rucc ió n «on- l ine ». Ex is t e u n m u y b r e v e d o c u m e n t o d e r e fe r e n c ia rá p i d a («Q uick Tip s »),

d i s p o n ib le e n fo r m a t o d e t a r je t a d e v is it a , q u e p r o p o r c io n a r e c o r d a t o r io s s o b r e lo s c o n -

c e p t o s c la v e d e l a s p a u t a s . Ex is t e n r e fe r e n c ia s té c n ic a s so b r e la s c a r a c t e r í s t ic a s d e a c c e s i -

b i l i d a d e n H T M L y C SS . H a y u n a l i s t a d e r e f e r e n c i a so b r e n a v e g a d o r e s q u e v i n c u l a a

in fo r m a c ió n s o b r e c a r a ct e rí s t ic a s d e a c c e s ib ilid a d d e d i fe r e n t e s n a v e g a d o r e s . W A I h a d e -

sa r ro l la d o u n c u r rí culo «on- l ine » q u e a co m p a ñ a a l a s Pa u t a s d e A c c e s ib ilid a d a l C o n t e n id o

e n la W e b . Es t o s y o t r o s r e c u r s o s e s tá n d is p o n ib le s , e n in g lé s , e n la s p á g in a s d e l a WA I

( h t t p : / / w w w . w 3 . o r g / W A I ) .

• Preguntas más frecuentes •

Page 22: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 22/164

Page 23: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 23/164

25

d e l d i se ñ o a c c e s ib le y so n su fic ie n t e m e n t e a b s t ra c t a s c o m o p a r a s e r e s t a b l e s a lo l a rg o d e l

t ie m p o . Ca d a g r u p o d e p u n t o s d e v e rific a c ió n a s o c i a d o c o n u n a p a u t a d e t e r m i n a d a , e s

e s p e cí fico p a ra una ca rac te r í s t ica con c re ta d e l a s p á g in a s W e b , p e r o g e n e r a l p a r a u n a v a r ie -d a d d e m a rc a d o r e s y le n g u a je s d e p re s e n t a ció n . Po r ta n t o , s e e s p e r a q u e e s t a s p a u t a s s e a n

r e la t iv a m e n t e e s t a b l e s a lo la rg o d e l t ie m p o . C ie r t o s p u n t o s d e v e r ific a c ió n incluye n la f rase

«h a s t a q u e la s a p lic a c io n e s d e u su a r io . . .» p o rq u e , p u e s t o q u e lo s n a v e g a d o r e s y ay u d a s

té c n ic a s t a le s c o m o l e c t o r e s d e p a n t a lla e v o lu c io n a n , s e rá n c a p a c e s d e m a n e ja r a u t o m á t i-

c a m e n t e c ie r to s a s p e c t o s q u e , fr e c u e n t e m e n t e , c r e a n b a rr e ra s e n la s p á g i n a s .

El d o c u m e n t o s e p a r a d o «Té cn icas», q u e n o fo r m a p a r te d e l d o c u m e n t o b á s ico d e la s

p a u t a s , e s e s p e c í fic o p a ra le n g u a je s d e m a r c a c ió n c o n c r e t o s y s e rá a c t u a liz a d o c o n m a -

y o r fr e c u e n c ia a m e d id a q u e e v o lu c io n e la t e c n o lo g í a .

1 6 .- ¿ Q u ié n s e h a im p lic a d o e n e l d e s a rro l lo d e e s ta s p a u ta s ?

Co m o m iem b ro s d e u n co n s o rc io in d u s t r ia l in t e rn ac io n a l, la s m á s d e 3 0 0 o rg a n iz a c io -

n e s m i e m b r o s d e W 3 C h a n t e n i d o f r e c u e n t e s o p o r t u n i d a d e s d e r e v i s a r y c o m e n t a r l a s

p a u t as a m e d id a q u e é s t a s h a n e v o lu c io n a d o , y a lg u n a s o r g a n iz a c io n e s m ie m b r o s h a n

p a r t ic ip a d o d ir e c t a m e n t e e n e l G ru p o d e Tra b a jo d e P a u t a s d e Co n t e n id o d e la W e b o e n

e l Gru p o d e In t e ré s WA I, q u e p r o p i cia u n d e b a t e p e r m a n e n t e e in fo r m a c ió n a lo s g ru p o s

d e t r ab a jo WA I s o b re la s n e ces id ad es y s o lu c io n es d e acce s ib ilid ad d e la We b . A d em á s ,

la In ic ia t iv a d e A cce s ib ilid ad en la Red d e W3 C p ro p o rc io n a a la s o rg an i zac io n es d e p e r -

s o n a s c o n d is c a p a c id a d , lo s c e n t r o s d e in v e s t ig a c ió n d e la acce s ib ilid ad y a lo s g o b ie rn o s

u n fo ro p a ra p a r t i c i p a r co n l o s r ep re s en t an t e s d e l a i n d u s t r i a en e l p ro ces o W3 C. L a

par t ic ipac ió n e n la s Pau t a s d e A cce s ib ilid ad a l Co n t en id o e n la We b h a i n c lu id o r e p re s e n -

t a n te s d e t o d a s e s t a s á r ea s , co n u n a a m p lia p a r t ic ip ac ió n in t e r n a c io n a l . Co m o Re c o m e n -

d a c ió n W3 C, e s t a e s p ec i f i cac ió n h a s id o fo r m a lm e n t e r e v is a d a p o r la s o r g a n iz a c io n e s

m ie m b r o d e W 3 C y to d o s lo s c o m e n t a r io s r e m it id o s h a n s id o t e n id o s e n c u e n t a .

1 7 .- ¿Q u é s itio s d e la W e b e s tá n u s a n d o y a e s t a s p a u t a s ? ¿Pu e d o ve r e je m p lo s ?

La p ub licac ió n d e l a s Pa u t a s d e A c c e s ib ilid a d a l Co n t e n id o e n la W e b , c o m o Re c o m e n -

d a c ió n, sign ificó su e s tab ilizac ió n . W A I h a r e c ib id o c o m p r o m is o s d e d i ve r s a s o r g a n iz a -

c io n e s q u e t ie n e n p r e v is t o q u e s u s s it io s s e a d e c u e n a la s p a u t a s . M u c h o s s it io s e s tá n

m a n ife s t a n d o s u in t e ré s e n a d e c u a r s e a l n iv e l «D o b le A », q u e in c lu y e t o d o s lo s p u n t o s d e

verificació n d e p rio r id a d e s 1 y 2 . A m e d id a q u e l o s s it io s im p l e m e n t e n la s p a u t a s , W A I

p r o p o r c i o n a rá v í n c u lo s a u n m u e s t r e o d e s it io s e n lo s q u e h a y u n n iv e l d e a d e c u a c ió n

«D o b le A ». Por favor, visite la p á gina p r inc ipa l de la WAI para m á s in fo rm ac ió n (h t t p : / /  

w w w . w 3 . o r g / W A I ) .

• Preguntas más frecuentes •

Page 24: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 24/164

26

1 8 .- ¿C ó m o s e re l a c io n a n e s t a s p a u t a s c o n o tra s p a u t a s d e la In ic ia tiva d e A c c e -s ib i li d a d e n l a W e b (W A I) d e l W 3 C ?

La s P a u t a s d e A c c e s ib ilid a d a l Co n t e n id o e n la W e b e s t u d ia n u n a s p e c t o d e la e c u a c ió n

acces ib i l idad : ¿ có m o d e a c c e s ib le e s e l c o n t e n id o d e u n s it io ? U n a s e g u n d a p a rt e d e la

e c u a c ió n e s la acce s ib ilid ad d e lo s n av e g ad o re s , la cu a l WA I e s t á e s t u d ia n d o a t ra v é s d e

u n g r u p o d e «Pau ta s d e A cces ib i l i d ad p a ra l a s A p l i cac io n es d e U s u a r io ». U n a t e rce ra

p a r t e d e l a e c u a c ió n e s l a a c c e s i b i l i d a d d e l a s h e r r a m i e n t a s d e a u t o r e m p l e a d a s p a r a

d es a r ro l la r s it io s , q u e h a s i d o e s tu d iad a e n la s «Pau ta s d e A cce s ib ilid ad p a ra la s H e r ra -

m ie n t a s d e A u t o r». Si la s h e r ram ien t a s d e au to r lleg an a s o p o r t a r m e jo r u n a au to rí a a c c e -

sible, e llo fac ili tará g r a n d e m e n t e l a cr e a c ió n d e c o n t e n id o s a c c e s ib le s .

A d e m á s d e l d e s a r ro l lo d e l a s p au t a s , WA I t am b ié n t ra b a ja in t e n s a m e n t e p a r a a s e g u r a rq u e la s t e c n o l o g í as d e la W eb , t a le s co m o H TM L, CSS, SM IL, XM L, D O M , e t c . , co lab o ren

en la acce s ib ilid ad . WA I s e co o rd in a co n o t r a s o rg an izac io n es p a ra d es a r ro l la r h e r ram ien -

t a s q u e p u e d a n a y u d a r a l a e v a l u a c ió n , a rea jus ta r p á g in as y p ro p o rc io n a r s o lu c io n es

a lt e rn a t iv as p a ra s o p o r t a r la a cces ib ilid ad . WA I r ea l iza u n e s fu e rzo ac t iv o ed u ca t iv o y d e

as i s tenc ia té cn ica , y co o rd in a a lg u n a ac t iv id ad d e in v e s t ig ac ió n y d e s a rr o llo q u e p u e d a

a fec t a r a l fu tu ro d e l acces o a la We b .

1 9 . - ¿C ó m o a p re n d e r m á s s o b re l a a c c e s i b il id a d a la W e b y s o b re l a WA I?

La p á g i n a p r in c ip a l d e W A I, e n h t t p : / / w w w . w 3 . o rg / W A I, t ie n e in fo r m a c ió n ac tua lizad a

s o b re t o d o s l o s r ecu r s o s d e la In ic ia t iv a d e A cce s ib ilid ad en la We b . H ay r e cu r s o s y á r e a s

d e r e fe re n c ia q u e s o n ac tu a lizad o s co n fr ecu e n c ia :

• lis t a d o s d e e v e n t o s p ró x i m o s ;

• v í n c u lo s a m u c h o s g ru p o s d e t r a b a jo y g r u p o s d e in t e ré s WAI;

• y u n g r u p o d e in t e ré s g lob al p ara la d iscus ió n g e n e ra l d e lo s t e m a s d e a c c e s ib ilid a d e n

la W e b .

H a y u n g r a n n ú m e r o d e o r g a n i z a c i o n e s h a c i e n d o u n e x c e l e n t e t r a b a j o e n e l á r e a d e

acce s ib ilid ad en la W eb , y m u ch as d e e l la s p a r t ic ip an e n l a WA I. Lo s v í ncu los re ferenc ia-

d o s p o r la W A I p r o p o r c io n a n u n p u n t o d e p a rt id a p a r a e n c o n t ra r m u c h a s d e e s t a s o r g a -

n i zac io n es .

2 0 . - ¿C u á l e s l a fu n c ió n d e l W 3 C e n l a a c c e s i b il id a d a la W e b ?

La m is ió n d e W 3 C e s p r o m o v e r la e v o l u ció n e in te rop e ra t iv id ad d e la We b . La In ic ia t iva

d e A cces ib i l i d ad en l a Web , p a t ro c in ad a p o r W3 C, e s u n a s p ec to e s en c i a l d e l t r ab a jo

n e c e s a r io p a r a p r o m o v e r la u n i ve r s a lid a d d e la W e b .

• Preguntas más frecuentes •

Page 25: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 25/164

27

S o b re la In i c ia tiva d e A c c e s i b i lid a d e n l a W e b .

La In ic ia t iva d e A cce s ib i lid ad e n la W e b (WAI) d e W 3C, en aso c iac ió n co n o rg a n izac io -n e s d e t o d o e l m u n d o , e s tá p r o m o v ie n d o la a c c e s ib ilid a d d e la W e b a t ra v é s d e c in c o

a c t iv id a d e s c o m p le m e n t a r ia s :

• A s e g u r a r q u e la s t e c n o lo g í as e s e n c ia le s d e l a Web s o p o r t en l a acces ib ilid ad .

• D es a r ro lla r p a u t a s p a ra la au to rí a d e p á g in as , ap licac io n es d e u s u a r io y h e r ram ien t a s

d e a u t o r.

• D es a r ro lla r h e r ram ien t a s d e e v a lu ac ió n y r e fo rm a p a ra la acce s ib ilid ad .

• Dirig ir la fo rm ació n y as i s ten c ia t é cn ica .

• Seg ui r la p is ta a l a inve s t ig ac ió n y d es a r ro l lo q u e p u e d a a fe c t a r a la acce s ib ilid ad fu tu ra

d e la W e b .La O fic ina d e l Prog ram a In te rna c ion al d e la WAI e s tá s o s t e n id a , e n p a rt e , c o n fo n d o s d e

la Fun d ació n N a c io n a l d e l a Cien c ia d e E E. U U. , e l D ep a r t am en to d e E d u cac ió n d e l Ins t i tu -

t o N ac io n a l d e In v e s t ig ac ió n so bre la D iscap ac idad y la Re hab ilit ac ió n d e EE.UU. , e l Pro -

g ram a d e A p licac io n es Te l em á t ic a s p a ra la s Pe r s o n as co n D is cap ac id ad y Pe rs o n as M ay o -

re s d e la D irecc ió n Ge ne ral XIII d e la Un ió n Eu r o p e a , e l G o b ie r n o d e Ca n a d á , IBM, Lotu s

D ev e lo p m en t Co rp o ra t io n , M ic ro s o ft Co rp o ra t io n y N CR. Pa ra m á s in fo rm ac ió n s o b re l a

In ic ia t iv a d e A cce s ib ilid ad e n la We b , v ea h t t p : / / w w w . w 3 . o rg / WA I.

• Preguntas más frecuentes •

Page 26: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 26/164

28

Page 27: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 27/164

29

G 1 . Im á g e n e s y an im a c io n e s : Use te x to a lte rna t ivo (a t ribu to a lt) p ara d e scribir la fun ció n

d e lo s e le m e n t o s v is u a le s .

2 . M ap a s d e i m a g e n : U s e m ap as d e c lien t e y t ex to a lt e rn a t iv o p a ra la s zo n a s ac t iv as .

3 . M u ltim e d i a : Fac ilite su bt í tu los y t rascr ip c ió n d e lo s fich e ro s d e s o n id o , d e s c rip c ió n d e

lo s v í d e o s y v e rs io n e s a c c e s ib le s e n e l c a s o d e u s a r fo r m a t o s n o a c c e s ib le s .

4 . En la c e s d e h ip e rte x to : Us e t e x t o q u e t e n g a s e n t id o c u a n d o s e le a fu e r a d e c o n t e x t o .

P o r e je m p l o , n o u s a r «p i n c h a a q u í».

5 . O rg a n iz a c ió n d e l a s p á gin a s : Us e e n c a b e z a d o s (H1 , H2 , H3 , . . . ) , l i s tas y es tructura

co n s i s t en t e . U s e H o ja s d e E s t ilo s e n Cas cad a (CSS ) p a r a m a q u e t a ció n y e s t ilo , d o n d e

s e a p o s ib le .

6 . Grá fic o s d e d a to s : Res u m a o u s e e l a t r ib u to l o n g d e s c .

7 . Sc rip ts , a p p l e ts y p lu g - in s : O f rezca a l t e rn a t i v as acces ib l e s en e l ca s o d e q u e l a s

ca rac t e rí s t ic a s a c t iv a s n o s e a n a c c e s ib le s o n o t e n g a n s o p o r te .

8 . M a rc o s (Fra m e s ): Et iq ue te co n los a t r ibu tos title o n a m e .

9 . Ta b la s : Realí c e la s d e m a n e r a q u e s e p u e d a n le e r lí n e a a lí n e a . In c lu y a u n r e s u m e n .

Ev it e e l u s o d e t ab la s p a ra d a r fo rm a to a la s p á g in as .

1 0 . Re v is e s u t ra b a jo : Valid e e l có d i g o HTML. U se h e r ra m ie n t a s d e e v a lu a c ió n y n a ve g a -

d o r e s só lo - te x to p ara v e r ificar l a acce s ib i lid ad .

u í a b r e v e p a ra c r ea r s it io s We b a cce s ib le s

Page 28: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 28/164

30

Page 29: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 29/164

31

RESUMEN

Es ta s p au t a s e x p lican c ó m o h ace r acces ib le s lo s c o n t e n id o s d e la W e b  a p e r so n a s c o n

d i sc a p a c id a d . La s p a u t a s e s tá n p e n s a d a s p a ra t o d o s lo s d e s a rro lla d o re s d e c o n t e n id o s  d e

la W e b (a u t o r e s d e p á ginas y d i se ñ ad o re s d e s it io s ) y p a ra lo s d es a r ro l lad o re s d e her ra -  

m ie n t a s d e a u t o r. El fin p rin c ip a l d e e s t a s p au t a s e s p ro m o v e r la acce s ib ilid ad . D e cu a l-q u ie r m o d o , s ig u ié n d o la s , se h a rá la W e b m á s a s e q u ib le t a m b ié n p a ra t o d o s lo s u s u a r io s ,

cu a lq u i e ra q u e s ea l a apl icac i  ó n de u sua r io   u t i l i z a d a ( p . e j . n a v e g a d o r d e s o b r e m e s a ,

n a v e g a d o r d e v o z , t e lé fo n o m ó v il, o rd en ad o r d e a b o rd o , e t c . ), o l a s lim it ac io n es b a jo la s

q u e o p e re (p . e j. en to rn o s ru id o s o s o s ilen c io s o s , h ab it ac io n es i n fra o s u p ra ilu m in ad as ,

e n t o r n o d e m a n o s l ib r e s , e t c . ). Se g u ir e s t a s p a u t a s a y u d a rá t a m b ié n a c u a lq u ie r p e r s o n a

a en co n t ra r i n fo rm ac ió n e n la W e b m á s rá p i d a m e n t e . Es t a s p a u t a s n o d e s a lie n t a n a lo s

d e sar ro l lad ore s en la u t ilizac ió n d e im á g e n e s , v í d eo , e t c . , p o r e l co n t ra r io e x p lican c ó m o

h a c e r lo s c o n t e n id o s m u lt im e d ia m á s acces ib le s a u n a am p lia au d ien c ia .

Es t e e s u n d o c u m e n t o d e r e fe r e n c ia e n c u a n t o a p rin c ip i o s d e a c c e s ib ilid a d e id e a s d ed ise ñ o . A l g u n a s d e l a s e s t r a t e g i a s p l a n t e a d a s e n e s t e d o c u m e n t o t r a t a n c i e r t o s t e m a s

co n ce rn ien t e s a la in t e rn ac io n a lizac ió n d e l a W e b y a l a cc e s o d e s d e d is p o s it iv o s m ó viles .

S in e m b a r g o , e s t e d o c u m e n t o s e c e n t ra e n la a c c e s ib ilid a d y n o t r a t a t o t a lm e n t e lo r e la -

c io n ad o co n o t ra s ac t iv id ad es d e l W3 C. Po r fav o r co n s u lt e l a p á g ina p r inc ipa l de las A ct i-

v id a d e s d e A c c e s o d e s d e D is p o s it iv o s M ó v ile s d e W 3 C (h t t p : / / w w w . w 3 . o rg / M o b ile ) y

la p á g ina p r inc ip a l d e A ct iv id ad es d e In terna c ion alizac ió n d e la W 3 C (h t t p :/ / w w w . w 3 . o r g /  

In t e rn a t io n a l) p a ra m ay o r in fo rm ac ió n .

Es t e d o c u m e n t o e s t á co n ceb id o p a ra s e r d e fin it iv o , y p o r tan to n o p ro p o rc io n a in fo r -

m a c ió n e s p e c í fic a s o b r e s o p o r t e s d e n a v e g a d o r p a r a la s d ife r e n t e s t e c n o lo g í a s , p u e s t o

P au t a s d e A cces i b i l i d ad a l C o n t en i d o en l a

W e b 1 .0 .R e c o m e n d a c ió n W 3 C d e 5 d e m a yo d e 1 9 9 9

E d i t o r e s :We nd y Chisho lm , Trace R & D Cente r, Unive rs ity o f Wisco ns in - M ad iso n .

Greg g Van d e rhe id e n , Trace R & D Cente r, Unive rs ity o f W isco ns in - Mad iso n .

Ian Jaco bs , W 3C

N o ta d e lo s tra d u c to r e s :Esta t radu cció n h a r e c ib id o c o n t r ib u c io n e s d e a lg u n o s d e lo s m ie m b r o s d e l G ru -

p o d e Ex p e r to s d e l Sem in a r io d e In ic ia t iv as s o b re D is cap ac id ad y A cce s ib ilid ad

en la Red (SIDAR).

Page 30: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 30/164

32

q u e e s t a in fo r m a c ió n c a m b ia rá p id am en te . En s u lu g a r, la “Iniciat iva d e A cce sibilid ad a la

W e b - WA I” p r o p o r c io n a e s a i n fo r m a c ió n (con su lte [WAI-UA-SUPPO RT]).

Es t e d o c u m e n t o in c lu y e u n a p é n d ic e q u e o rg a n iz a t o d o s lo s  p u n to s d e ve rific a c i ó 

n  p o rt em as y p r io r id ad . Lo s t em as id en t ificad o s in c lu y e n im á g e n e s , m u lt im e d ia , t a b la s , m a r-

co s , fo rm ulario s y scrip ts . El ap é n d i c e e s t a d i s p o n i b l e e n f o r m a d e t a b l a - r e s u m e n d e

p u n to s d e v e r ificac ió n e n e s te m is m o d o c u m e n t o .

U n d o c u m e n t o a p a r t e , tit u la d o “Té cn icas p a ra la s Pau t a s d e A cce s ib ilid ad d e l Co n ten i-

d o e n la W e b 1 . 0” ([TECHN IQ UES]), e xp lica có m o ap lica r lo s p u n to s d e v e r ificac ió n d e fi-

n id o s e n e s t e d o c u m e n t o . El d o c u m e n t o d e Té cn icas t r a t a cad a p u n to d e v e r ificac ió n c o n

m á s d e t a lle y p ro p o rc io n a e jem p lo s u s an d o e l Len g u a je d e M arcad o d e H ip e rt ex to (H TM L ),

las Ho jas d e Es t ilo e n Cascad a (CSS), e l Le ng uaje d e In teg rac ió n M u lt im ed ia S in c ro n i zad a

(SM IL) y e l Le n g u a j e d e M arcad o M ate m á t ico (M a th M L). El d o cu m e n to d e Té cn icas t am -b ié n inc luye té cn icas p ara la va lid ac ió n y a n á lis is d e d o c u m e n t o s y u n í n d ic e d e e le m e n -

tos y a t r ibu tos d e HTM L (y cuá le s so n las té cn icas p a ra u s a r lo s ) . El d o cu m en to d e Té cn icas

h a s id o d is e ñ a d o p a r a s e g u ir lo s c a m b io s e n la t e c n o lo g í a y e s d e e s p e r a r q u e s e a re n o -

v a d o c o n m á s fr e c u e n c ia q u e e l p r e s e n t e d o c u m e n t o .

N o t a : N o t o d o s lo s n a v e g a d o r e s y h e r ra m ie n t a s m u lt im e d ia p u e d e n s o p o r ta r la s c a ra c -  

te r í  s t ic a s d e sc r it a s e n e s t a s p a u ta s . En p a r tic u la r , la s n ue va s c a r a c t e r  í  s t icas d e H TM L 4 .0 ,

CSS 1 y CSS 2 p u e d e n n o s e r s o p o rt a d a s .

E s t e d o c u m e n t o e s p a r t e d e u n a s e r i e d e p a u t a s d e a c c e s i b i l i d a d p u b l i c a d a s p o r l a

In ic ia t iva p ara la Acce s ib i lid ad d e la W e b (WAI). Es ta se r ie inc luye tam bié n la s Pau t a s d e

Acce s ib i lid ad d e las A p licac ione s d e Usua r io [WAI-USERAGENT] y las Pau tas d e Acce s ib i -

lid ad p a ra H e r ram ien t a s d e A u to r [WA I-A U TO O LS].

ESTATUS DE ESTE DOCUMENTO

El o rig ina l e n ing lé s d e e s t e d o c u m e n t o h a s id o r e v is a d o p o r lo s m ie m b r o s d e l W 3 C y

o t r a s p a rt e s in t e r e s a d a s y h a s id o r e fr e n d a d o p o r e l D ir e c t o r c o m o u n a d e l a s Re c o m e n -

d a c ió n d e l W 3 C. Es u n d o c u m e n t o e s t a b le y d e b e s e r u s a d o c o m o m a t e r ia l d e r e fe r e n c ia

o c it a d o c o m o r e fe r e n c ia d e s d e o t r o s d o c u m e n t o s . El o b je t iv o d e W 3 C c o n la e la b o r a c ió n

d e la Re c o m e n d a c ió n e s a t rae r la a t e n c ió n h ac ia e s t a e s p ec i ficac ió n y p ro m o v e r su u t i liz a -

c ió n g e n e ra liz a d a . Es t o a m p lí a l a fu n c io n a lid ad y u n iv e r s a lid ad d e la We b .

La ve rs ió n i n g l e s a d e e s t a e s p ec i f i cac ió n e s la ú nica vers ió n n o r m a t iv a . Sin e m b a r g o ,

t ra d u c c io n e s e n o t ra s le n g u a s p u e d e n v e r se e n :

h t tp : / / w w w .w 3.o rg / WAI/ GL/ WAI-W EBCON TENT-TRAN SLATIO NS .

La lis t a d e e r ro r e s c o n o c id o s d e e s t e d o c u m e n t o (e n in g lé s ) e s tá d i sp o n ib le e n :

h t tp : / / w w w .w 3.o rg / WAI/ GL/ WAI-W EBCON TENT-ERRATA .

• Pautas •

Page 31: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 31/164

33

La lis t a d e la s a c t u a le s Re c o m e n d a c io n e s d e l W 3 C y o t r o s d o c u m e n t o s té c n ic o s p u e -

d e n e n c o n t r ars e e n :

h t tp : / / w w w . w 3 . o rg / TR .Es t e d o cu m en to h a s id o p ro d u c id o co m o p a r t e d e la In ic ia t iv a p a ra la A cce s ib ilid ad d e

la We b d e l W3 C. El o b je t i v o d e l G ru p o d e Trab a jo d e l a s Pau t a s d e Co n te n id o e n la We b

s e e x p lic a e n l o s e s t a t u t o s d e c o n s t it u c ió n d e l G ru p o d e Trab a jo .

1. INTRODUCCIÓN

A q u e llo s q u e n o e s té n fam ilia r izad o s co n lo s p ro b l em as d e acces ib ilid ad r e lac io n ad o s

co n e l d i s e ñ o d e p á g i n a s W e b , d e b e n c o n s i d e r a r q u e m u c h o s u s u a r i o s p u e d e n e s t a r

o p e r a n d o e n c o n t e x t o s m u y d ife r e n t e s a l s u y o p r o p io :• Pu e d e n n o s e r ca p a c e s d e v e r, e s c u ch a r, m o v e rs e o p u e d e n n o s e r ca p a c e s d e p r o c e -

s a r a lg u n o s t ip o s d e i n fo rm ac ió n f á c ilm e n t e o e n a b s o l u to .

• P u e d e n t e n e r d ific u lt a d e n la le c t u r a o c o m p r e n s ió n d e u n t e x to .

• N o t ie n e n p o r q u é t e n e r o s e r c a p a c e s d e u s a r u n t e c la d o o u n r a tó n .

• P u e d e n t e n e r u n a p a n t a l l a q u e s ó lo p r e s e n t a t e x t o , u n a p a n t a lla p e q u e ñ a o u n a c o -

n e x ió n le n ta a IN TERN ET.

• P u e d e n n o h a b l a r o c o m p r e n d e r c o n f l u i d e z l a l e n g u a e n l a q u e e s t é r e d a c t a d o e l

d o c u m e n t o .

• P u e d e n e n c o n t ra r se e n u n a s it u a c ió n e n la q u e s u s o jo s , o í d o s o m a n o s e s té n o c u p a -

d o s u o b s t a c u l i z a d o s ( p . e j . c o n d u c i e n d o u n a u t o m ó v i l , t r ab a j an d o en u n en to rn o

ru idoso , . . . )

• Pu e d e n t e n e r u n a v e r sió n a n t e r io r d e l n a v e g a d o r, u n n a v e g a d o r co m p l e t a m e n t e d i fe -

r e n t e , u n n a v e g a d o r d e v o z o u n s is t e m a o p e r a t iv o d is t in t o .

Lo s d e s a r ro lla d o r e s d e c o n t e n id o s d e b e n t e n e r e n c u e n t a e s t a s co n s id e ra c io n e s m ie n -

t ras d ise ñ an las p á g i n a s . P u e s t o q u e h a y m u y d iv e r s a s sit u a c io n e s a t e n e r e n c u e n t a , c a d a

v e z q u e s e e l ig e d i se ñ a r d e fo r m a a c c e s ib le , g e n e r a lm e n t e s e b e n e fic ia a m u c h o s g ru p o s

d e p e rs o n a s c o n d is c a p a c id a d , a s í c o m o a la c o m u n id a d W e b a l c o m p le t o . Po r e je m p lo ,

u s a n d o ho ja s de e s t i l o   p a ra co n t ro l a r l o s e s t i l o s d e fu en t e , y e l im in an d o e l e l em en to

“FONT” , l o s au to re s H T M L t en d rá n m a y o r c o n t r o l s o b r e s u s p á g in as , h a rá n é s t a s m á s

a c c e s ib le s a p e r s o n a s d e e s c a s a v is ió n y , c o m p a r t ie n d o la s p á g i n a s d e e s t ilo , a m e n u d o

aco r t a rá n lo s t ie m p o s d e c a rg a d e la s p á g in as , p a ra to d o s lo s u s u a r io s .

L as p au t a s t r a t an l o s a s p ec to s d e acces ib i l i d ad y p ro p o rc io n an s o lu c io n es d e d i s e ñ o

acces ib le s . In d ican s it u ac io n e s h a b it u a le s (s im ila re s a l e jem p lo d e e s t ilo d e fu e n t e s ) q u e

p u e d a n s u p o n e r p r o b l e m a s a l o s u s u a r i o s c o n c i e r t a s d i s c a p a c i d a d e s . P o r e j e m p l o , l a

p rim era p a u t a ex p lica có m o lo s d e s a r ro lla d o r e s p u e d e n c r e a r im á g e n e s a c c e s ib le s . A l g u -

• Pautas •

Page 32: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 32/164

34

n o s u s u a r io s p u e d e n n o s e r c a p a c e s d e v e r im á g e n e s , o t r o s u t iliz a r n a v e g a d o r e s b a s a d o s

e n fo r m a t o t e x t o q u e n o s o p o r ta n im á g e n e s , e n t a n to q u e o t ro s p u e d e n h a b e r d e s c o n e c -

t a d o e l so p o r t e p a ra im á g e n e s (p o r e je m p lo , d e b id o a u n a c o n e x ió n le nt a co n IN TERN ET).La s p a u t a s n o s u g i e r e n q u e s e e v it e n l a s im á g e n e s c o m o m e d io p a r a m e jo r a r la a c c e s ib i-

lid ad ; sin e m b arg o , e x p lican c ó m o , p ro p o r c io n a n d o u n t e x t o e q u iv a le n t e   d e la im a g e n ,

é s t a s e h a rá acces ib le .

¿ Có m o h a c e u n t e x t o e q u iv a le n t e a c c e s ib le la im a g e n ? A m b a s p a la b r a s, “t e x t o ” y “e q u i -

v a l en t e ” , s o n im p o rt a n t e s .

• El c o n t e n id o d e l t e x t o p u e d e s e r p r e s e n t a d o a l u s u a r io c o m o u n a v o z s in t e t iz a d a , e n

b ra ille y en t ex to v is ib le . Cad a u n o d e e s to s t r e s m eca n is m o s u t iliz a u n s en t id o d ife -

r e n t e (o í d o p a ra la s í ntes i s de voz , t ac to para e l b ra i l l e o v i s ta para e l t ex to v i s ib le )

h ac i en d o l a in fo rm ac ió n a c c e s ib le a g ru p o s r e p r e s e n t a t iv o s d e u n a v a r ie d a d d e d i sc a -p a c id a d e s s e n s o ria le s y d e o t r o s t ip o s .

• A fin d e s e r ú t il, e l t ex to d eb e t ran s m it ir la m is m a fu n c ió n o p r o p ó s it o d e l a im a g e n .

P o r e j e m p l o , c o n s i d e r e m o s e l t e x t o e q u i v a l e n t e p a r a u n a i m a g e n f o t o g r á f ica de la

Tie r ra v is ta d e sd e e l e sp ac io . Si e l p rop ó s it o d e l a im a g e n e s s im p l e m e n t e d e c o r a tiv o ,

e l t ex to e q u iv a len t e “Fotograf  í a d e la Tie rr a v is t a d e s d e e l e s p ac io ” p o d rí a cu m p lir co n

la func ió n r eq u e r id a . S i e l p ro p ó s it o d e la fo to g ra f  í a e s ilus t ra r una in fo rm ació n e s p e c í -fic a s o b r e g e o g ra f  í a m u n d ia l, e l t e x t o e q u iv a le n t e d e b e r í a t ransm it ir e sa in fo rm ació n .

Si la fo to g raf  í a h a s i d o d is e ñ a d a p a ra h a c e r q u e e l u s u a rio s e le c c io n e la im a g e n (p . e j.

p u ls an d o s o b re e lla ) p a ra acced e r a la in fo rm ac ió n s o b re la Tie r r a , e l tex to e q u iv a len t e

d e b e rí a s e r “In fo rm ació n so bre la Tie rra ” . De e s e m o d o , s i e l t e x t o t ra n s m it e la m is m a

funció n o p r o p ó s it o p a ra e l u s u a r io c o n d is c a p a c id a d c o m o la im a g e n lo h a c e c o n e l

r e s t o d e u s u a r io s , p u e d e s e r co n s id e ra d o u n t e x t o e q u iv a le n t e .

A d v ie r t a q u e , c o m o c o m p l e m e n t o a lo s b e n e fic io s q u e im p l ic a p a r a lo s u s u a r io s c o n

d i sc a p a c id a d , e l t e x t o e q u iv a le n t e p u e d e a y u d a r a t o d o s lo s u s u a r io s a e n c o n t r a r p á g in as

c o n m a y o r ra p i d e z , y a q u e l o s ro b o t s d e b ú s q u e d a p u e d e n u s a r e l t e x t o c u a n d o in d e x e n

las p á g in as .

M i e n t ra s q u e lo s d e s a rr o lla d o r e s d e c o n t e n id o s e n la W e b d e b e n p r o p o r c io n a r t e x t o

eq u iv a len t e p a ra la s im á g e n e s y p a ra o t r o s c o n t e n i d o s m u lt im e d ia , e s r e s p o n s a b ilid a d d e

la s a p lic a c ion e s d e u sua rio  (p . e j. n a v e g a d o r e s y a y u d a s t é cn icas t a le s co m o l e c to r e s de  

 p a n ta lla , d isp o si t ivo s b ra ille  , e t c . ) p re s e n t a r la i n fo rm ac ió n a l usua r io .

Lo s e q u iv a len t e s n o t ex tu a le s a l t ex to (p . e j. ico n o s , lo cu c io n e s p reg rab ad as o u n v í d e o

d e u n a p e r s o n a t ra d u c ie n d o e l t e x t o a le n g u a je d e s e ñ a s ) p u e d e n h a c e r u n d o c u m e n t o

acces ib l e a p e r s o n as q u e p u ed en t en e r d i f i cu l t ad es p a ra acced e r a l l en g u a j e e s c r i t o , i n -

c lu y e n d o m u c h o s i n d iv id u o s c o n d i sc a p a c id a d e s c o g n it iv a s , d e a p r e n d i za je o s o r d e ra .

L o s e q u i v a l e n t e s n o t e x t u a l e s d e l t e x t o p u e d e n a y u d a r t a m b ié n a lo s an a l fab e to s . U n a

d es c r ip c ió n a u d it iv a e s u n e je m p l o d e e q u iv a le n t e n o t e x t u a l d e la in fo r m a c ió n visual .

• Pautas •

Page 33: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 33/164

35

Un a de sc r ipc i  ó n au d it iva   d e la b a n d a v is u a l d e u n a p r e s e n t a c ió n m u lt im ed ia b e n e fic ia a

la s p e rs o n a s q u e n o p u e d e n v e r la in fo r m a c ió n visual .

2. MOTIVOS DEL DISEÑO ACCESIBLE

La s p a u t a s s e e n m a r c a n e n d o s m o t iv o s g e n e ra le s : a s e g u ra r u n a t ra n s fo r m a c ió n a i ros a

y h a c e r e l c o n t e n id o c o m p r e n s ib le y n a v e g a b le .

2 . 1 - A s e g u ra r u n a t ra n s f o rm a c i ó n a iro s a

S ig u ie n d o e s t a s p a u t a s , lo s d e s a r ro lla d o r e s d e c o n t e n id o s p u e d e n c r e a r p á g in a s q u e s e

t ra n s fo r m e n d e m a n e ra e le g a n t e . Es t e t ip o d e p á g i n a s s ig u e n s ie n d o a c c e s ib le s a p e s a rd e cu a lq u ie ra d e la s lim it ac io n es d es c r it a s e n l a in t ro d u cc ió n , in c lu y e n d o la s d is cap ac id a -

d e s f  í s icas , se nso r ia les y cog n i t ivas , las re s t r icc ion e s d e b idas a l t raba jo y las ba r re ras t ec-

n o ló g i ca s . H e a q u í a lg u n a s c lav e s p a ra e l d is e ñ o d e p á g i n a s q u e s e t ra n s fo r m a n a i ro s a -

m e n t e :

• Sep a re e l co n t e n id o , la e s t ru c tu ra y la p re s en t ac ió n (con su l ta r en e l G los ar io –a p é n d i -

ce B– la d ife re nc ia e n t r e c on te n id o , e s t ruc tu r a y p re se n ta c i  ó n ).

• Pro p o rc io n e t ex to s (in c lu id o s t e x t o s e q u iv a le n t e s  ). Lo s t e x t o s p u e d e n s e r in t e r p r e t a -

d o s p o r la in m e n s a m a y o rí a d e lo s m e c a n is m o s d e n a v e g a c ió n y s o n acce s ib le s p a ra la

in m e n s a m a y o rí a d e u s u a r io s .

• Cr e e d o c u m e n t o s q u e fu n c io n e n in c lu s o s i e l u s u a rio n o p u e d e v e rlo s y / u o í r lo s . Pro-

p o r c io n e in fo r m a c ió n q u e s irv a a l m is m o p r o p ó s i to y fun ció n t a n to e n s o n id o c o m o e n

im ag e n p a ra q u e s e d is p o n g a d e u n can a l s en s o r ia l a lt e rn a t iv o . Es to n o s ig n ifica c rea r

u n a v e rs ió n s o n o ra p reg rab ad a d e t o d o e l s i t i o p a ra h ace r lo acces ib l e a l o s u s u a r io s

c ie g o s . Lo s u s u a r io s c ie g o s p u e d e n u s a r le c to re s d e p a n ta l la  p a ra in t e rp re t a r t o d a la

in fo rm ac ió n t e x t u a l d e u n a p á g in a .

• Cr e e d o c u m e n t o s q u e n o s ó lo fu n c io n e n c o n u n t ip o d e t e r m in a d o d e h a r d w a r e . La s

p á g in a s p u e d e n s e r u s a d a s p o r p e r so n a s q u e n o d is p o n g a n d e ra tó n , co n p an t a l la s

p e q u e ñ as , d e b a j a re s o lu c ió n , en b lan co y n e g ro , s in p an t a l la s , só lo c o n s a lid a d e v o z

o t e x t o , e t c .

El t em a d e l a t ran s fo rm ac ió n a iro s a e s tá r e c o g id o p r in c ip a lm e n t e p o r la s p a u t a s 1 a 1 1 .

2 . 2 H a c e r c o m p re n s i b le y n a ve g a b le e l c o n t e n id o

L o s d e s a r r o l l a d o r e s d e c o n t e n i d o s d e b e n h a c e r q u e e l c o n t e n i d o s e a c o m p r e n s i b l e y

n av e g ab le . Es to in c lu y e n o só lo la u tiliza ció n d e u n le n g u a je c la r o y s im p l e , s in o t a m b ié n

p r o p o r c io n a r m e c a n is m o s c o m p r e n s ib le s p a ra n a v e g a r p o r y e n t re p á g ina s . El p rop orc io -

• Pautas •

Page 34: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 34/164

36

n a r h e r r a m i e n t a s d e n a v e g a c ió n e in fo r m a c ió n o r ien ta t iva en las p á g i n a s m a x im iz a rá la

acces ib i l idad y la u t i l idad . No todos los usuar ios pueden u t i l i zar l as p i s tas v i sua les t a les

c o m o m a p a s , b a r r a s d e d e s p l a z a m i e n t o , m a r c o s c o n t i g u o s o g rá f i ca s q u e g u í an a l o su s u a r io s v id en t e s . L o s u s u a r io s p i e rd en t am b ié n i n fo rm ac ió n d e l c o n t e x t o c u a n d o s ó lo

p u e d e n v e r u n a p a rt e d e la p á g i n a , t a n t o p o r q u e a c c e d e n a la p á g in a p a lab ra p o r p a lab ra

(c o n s in t e t iz a d o r e s d e v o z o d isp o sit ivo s b ra ille  ), o d e s e c c ió n e n s e c c ió n (v is o r e s p e q u e -

ñ o s o m ag n i f i cad o res d e p an t a l l a ) . S in u n a i n fo rm ac ió n o r i en t a t i v a , e s p o s ib l e q u e l o s

u s u a r io s n o c o m p r e n d a n t a b la s , lis t a s o m e n ú s m u y la r g o s .

E l t e m a s o b r e c ó m o h a c e r e l c o n t e n i d o c o m p r e n s i b l e y n a v e g a b l e s e r e c o g e e n l a s

p a u t a s 1 2 a 1 4 .

3 . C Ó MO S E O R GA N IZ A N LA S PA U TA S

Es t e d o c u m e n t o in c lu y e c a t o r ce p a u t a s o p r in c ip i o s g e n e r a le s d e d is e ñ o acces ib le . Cad a

p au t a i n c lu y e :

• N ú m e r o d e la p a u t a .

• Expos ic ió n d e la p a u t a .

• El fu n d a m e n t o q u e s u s t e n t a la p a u t a y a lg u n o s g ru p o s d e u s u a rio s q u e s e b e n e fic ia n

d e e lla .

• U n a l is t a d e d e fin ic io n es d e lo s p u n to s d e v e r ificac ió n .

Las d e fin ic io n es d e lo s p u n to s d e v e r ificac ió n e x p lican c ó m o s e a p lic a la p a u t a e n s it u a -

c io n es t í p icas d e d es a r ro l lo d e co n t e n id o s . Cad a p u n to d e v e r ificac ió n inc luye :

• N ú m e r o d e l p u n t o d e v e r ific a c ió n .

• Explicació n d e l p u n to d e v e r ificac ió n .

• La p r io r id ad d e l p u n to d e v e r ificac ió n . Lo s p u n to s d e v e r ificac ió n d e P r io r id ad 1 e s tá n

r e s a lt a d o s e n n e g rit a .

• N o tas in fo rm a t iv as o p c io n a le s , e jem p lo s a c la ra to r io s y r e fe re n c ia s c ru zad a s a p au t a s o

p u n to s d e v e r ificac ió n r e l ac io n ad o s .

• Referencia a l a secc ió n d e l D o cu m e n t o d e Té cn icas ( inc luyendo la p á g in a ) d o n d e s e

t ra t an la e j ecu c ió n y e je m p lo s d e l p u n to d e v e r ificac ió n .

Cad a p u n to d e v e r ificac ió n e s lo s u fic ie n t e m e n t e e s p e c í f i co , d e fo rm a q u e cu a lq u i e ra

q u e r e v is e u n a p á g i n a o s it io p u e d a c o m p r o b a r q u e d ic h o p u n t o h a s id o s a t is fe c h o .

3 . 1 Co n v e n c io n e s d e l d o c u m e n to

En e l d o cu m e n to s e u t iliz an la s s ig u ie n t e s co n v e n c io n es e d it o r ia le s :

• Lo s n o m b r e s d e l o s e le m e n t o s e s t á n e n m a yú scu las .

• Su s a t r ib u to s e s tá n e n m in ú scu las y e n t re co m illas .

• Pautas •

Page 35: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 35/164

37

• Cu an d o u n t ex to a p a rece s u b ray ad o y en le t ra cu r s iv a h ace r e fe re n c ia a u n a d e fin ic ió n

reco g id a e n e l G lo s a r io (ap é nd ice B).

• Cu a n d o u n t e x t o a p a r e c e e n m a yú s cu la s y en t r e co rch e t e s , s ig n ifica q u e e s t á incluidoen e l ap a r t ad o Refe re n c ia s d e l A p é n d ice B.

• Lo s p u n to s d e v e r ificac ió n d e P rio r id a d 1 a p a r e c e n r e s a lt a d o s e n n e g r it a .

4. PRIORIDADES

Cad a p u n to d e v e r ificac ió n t ien e u n n iv e l d e p r io r id ad a s ig n ad o p o r e l Gru p o d e Trab a jo

y fu n d a m e n t a d o e n s u im p a c t o e n la a c c e s ib ilid a d .

[Prio rida d 1 ] :U n d e s a r r o l l a d o r d e c o n t e n i d o s d e p á g i n a s W e b t i e n e q u e s a t i s f a c e r e s t e p u n t o d e

verificació n . D e o t r a fo r m a , u n o o m á s g r u p o s d e u s u a r io s e n c o n t r a rá n im p o s ib le a c c e d e r

a la in fo r m ació n d e l d o cu m en to . Sa t is face r e s t e p u n to d e v e r ificac ió n e s u n r e q u e rim ie n t o

b á s ic o p a r a q u e a lg u n o s g r u p o s p u e d a n u s a r e s to s d o c u m e n t o s W e b .

[Prio rida d 2 ] :U n d e s a rr o lla d o r d e c o n t e n id o s d e p á g i n a s W e b d e b e sa t i s face r e s te p un to d e ve r ifica-

c ió n . D e o t r a fo r m a , u n o o m á s g r u p o s e n c o n t ra rá n d ificu lt ad es en e l acces o a l a in fo rm a-

c ió n d e l d o c u m e n t o . Sa t is fa c ie n d o e s t e p u n t o d e v e r ific a c ió n e lim inará i m p o r t a n t e s b a -

rr e ra s d e a c ce s o a lo s d o c u m e n t o s W e b .[Prio rida d 3 ] :U n d e s a rr o lla d o r d e c o n t e n id o s d e p á g i n a s W e b p u e d e sa t i s face r e s te p un to d e ve r ifi-

cac ió n . D e o t ra fo r m a , u n o o m á s g r u p o s d e u s u a r io s e n c o n t r a rá n a lgu na d ificu l tad p ara

acced e r a la in fo rm ac ió n d e l d o c u m e n t o . S a tis fa c ie n d o e s t e p u n t o d e v e r ific a c ió n m e jo r a -

rá la a c c e s ib ilid a d d e lo s d o c u m e n t o s W e b .

A lg u n o s p u n to s d e v e r i f i cac ió n t i e n e n e s p e c i f i c a d o u n n i v e l d e p r i o r i d a d q u e p u e d e

var ia r ba jo c ie r tas con d ic ion e s ( ind icad as ) .

5 . A D E C U A C I ÓN

Esta secc ió n d e fin e t re s n i v e le s d e a d e c u a c ió n d e u n d o c u m e n t o W e b a e s t as Pa u t a s:

• A d e c u a c i ó n d e n ive l A (A ): s e s a t is face n t o d o s l o s p u n to s d e v e rificac ió n d e p r io r id ad

1 .

• A d e c u a c i ó n d e n i ve l D o b le A (A A ): s e s a t is face n t o d o s l o s p u n to s d e v e r ificac ió n d e

p r io r id a d e s 1 y 2 .

• A d e c u a c i ó n d e n i ve l Trip l e A ( A A A ) : s e s a t is face n t o d o s l o s p u n to s d e v e r ificac ió n

d e p r io r id a d e s 1 , 2 y 3 .

• Pautas •

Page 36: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 36/164

38

La afirm ació n d e a d e c u a ció n d e u n d o c u m e n t o W e b a e s t a s Pa u t a s d e b e u s a rs e d e u n a

d e la s d o s fo r m a s s ig u ie n t e s :

For m a 1 : Esp e c ifiq ue :• Tí t u lo d e la s p a u t a s : “Pau ta s d e A cce s ib ilid ad a l Co n t en id o e n la We b 1 . 0 ” .

• La U RL: h t t p : / / w w w . W3 . o rg / TR/ 1 9 9 9 / WA I-WE BCO N TEN T-1 9 9 9 0 5 0 5 .

• El n iv e l d e ad ecu ac ió n sa t i s fecho : “A ” , “d o b le A ” o “ t r ip le A ” .

• El a lcan ce cub ie r to p or la a f irm ació n (p . e j. p á g ina , s i t io o p ar te d e fin ida d e u n s i t io ).

Ejem p lo p a ra la fo rm a 1 :

“Esta p á g i n a s e a d a p t a a l a s “P a u t a s d e C o n t e n i d o A c c e s i b l e e n W e b 1 . 0 ” d e l W 3 C ,

d i s p o n ib l e en h t t p : / /w w w . w 3 . o rg /T R/1 9 9 9 /WA I-WE BCO N T E N T -1 9 9 9 0 5 0 5 , n iv e l D o b le

A ” .

For m a 2 : Inc lu ir, e n ca d a p á g i n a q u e a s e g u r e s u a d e c u a c ió n , u n o d e l o s t r e s i c o n o sp r o p o r c io n a d o s p o r W 3 C y u n v í ncu lo hac ia l a exp licac ió n d e W 3 C so b r e la a d e c u a ció n .

La in fo r m ació n s o b re l o s i co n o s y c ó m o in s e r t a rlo s e n la s p á g i n a s e s tá d i s p o n ib l e en

[WCAG-ICONS].

• Pautas •

Page 37: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 37/164

39

6. PAUTAS DE ACCESIBILIDAD AL CONTENIDO DE LA WEB

PA U TA 1 - Pro p o rc i o n e a l te rn a t iv a s e q u iv a le n t e s a l c o n t e n id o v is u a l y a u d i tiv o

P r o p o r c i o n e u n c o n t e n i d o q u e , p r e s e n t a d o a l u s u a r i o , c u m p l a e s e n c i a l m e n t e l am i s m a fu n c i ó n o p ro p ó s ito q u e e l c o n te n id o vis u a l o a u d i tivo .

Si b ien a lg u n as p e r s o n as n o p u e d e n u t i liz a r im á g e n e s , p e lí cu la s , s o n id o s , ap p le t s , e t c

d i re c t a m e n t e , s í p u e d en u t iliz a r p á g in as q u e in c lu y e n in fo rm ac ió n e qu iva l e n t e  a lo s co n -

t en id o s v is u a l e s o au d it iv o s . L a in fo rm ac ió n e q u iv a le n t e d eb e cu m p lir la m is m a fin a l id ad

q u e lo s co n t e n id o s v is u a le s o au d it iv o s . A s í u n t e x t o e q u iv a le n t e p a ra la im a g e n d e u n a

f l e c h a a s c e n d e n t e q u e v i n c u l e c o n u n a t a b l a d e c o n t e n i d o s , p o d r í a s e r “I r a t ab la dec o n t e n i d o s ” . En a lg u n o s c a s o s , u n e q u iv a le n t e d e b e r í a d e scr ib i r la ap ar ie nc ia de l co n te n i -

d o v i s u a l (p . e j . p a ra t ab l a s co m p le j a s , c a r t e l e s o d i ag ram as ) o e l s o n id o d e l co n t en id o

a u d it iv o ( p . e j. p a r a lo s e je m p l o s s o n o r o s u s a d o s e n e d u c a c ió n ).

Es t a p au t a e n fa t iza la im p o r t an c ia d e a p o r t a r t e x t o s e q u iv a le n t e s  p a ra lo s c o n t e n id o s n o

te x tua le s (p . e j. im á g e n e s , s o n id o p r e g ra b a d o , v í d eo . .. ). La im p o r t an c ia d e l t ex to eq u iv a -

le n t e ra d i ca e n s u c a p a c id a d p a r a s e r in t e r p r e t a d o p o r v í a s q u e s o n a c c e s ib le s p a ra p e r s o -

n a s p e r t e n e c i e n t e s a d i f e r e n t e s g r u p o s d e d i s c a p a c i d a d u s a n d o d i v e r s a t e c n o l o g í a. El

t e x t o p u e d e s e r in t e r p r e t a d o p o r sin t e t iz a d o r e s d e v o z o d isp o si t ivo s b ra ille   y p u e d e s e r

p r e s e n t a d o v is u a lm e n t e (e n v a r io s t a m a ñ o s ) en p an t a l la s d e o rd e n ad o r y p ap e l . El s in t e -

t i zad o r d e v o z e s e s en c i a l p a ra p e r s o n as c i eg as y p a ra l a s q u e t i en en d i f i cu l t ad es d e

le c tu ra q u e a m e n u d o a c o m p a ñ a n a d i sc a p a c id a d e s c o g n it iv a s , d e a p r e n d iz a je o s o r d e ra .

El b ra ille e s e s e n c ia l p a ra p e r s o n as s o rd o -c ieg as , t an to co m o p a ra m u ch o s in d iv id u o s q u e

s o lam en te s o n c ieg o s . La s a lid a v is u a l d e t e x to b e n e fic ia a lo s u s u a r io s s o rd o s t an to co m o

a la m a y o rí a d e u s u a r io s d e l a W e b .

P ro p o rc io n a r eq u iv a l en t e s n o t ex tu a l e s (d ib u jo s , v id eo s , s o n id o ) d e l t ex to e s t am b ié n

b e n e fic io s o p a ra a lg u n o s u s u a r io s , e s p ec i a lm en te l o s an a l fab e to s o p e r s o n as co n d ificu l-

t ad p a ra la lec tu ra . En l a s p e lí cu la s o p re s e n t ac io n es v is u a le s , la acc ió n r e p r e s e n t a d a , t al

co m o e l l en g u a j e co rp o ra l u o t r a s p i s t a s v i s u a l e s , p o d rí a n o e s t a r a c o m p a ñ ad a d e s u f i -

c ien t e in fo rm ac ió n au d it iv a co m o p a ra t ran s m it ir la m is m a in fo rm ac ió n . A m e n o s q u e s e

p r o p o r c io n e n d e s c r ip c io n e s v e r b a le s d e l a s a c c io n e s r e p r e s e n t a d a s , la s p e rs o n a s q u e n o

p u e d a n v e r (o a c c e d e r a ) e l co n t e n id o v is u a l, n o p o d rá n p e rc ib i rlo .

Pu n t o s d e ve rif ic a c ió n :1 . 1 P ro p o rc i o n e u n t e x t o e q u iv a le n t e p a ra to d o e le m e n t o n o te x tu a l (p . e j. a tra vé s

d e “ a l t ” , “ l o n g d e s c ” o e n e l c o n t e n i d o d e l e l e m e n t o ) . E s t o i n c l u y e : i m á g e n e s ,

r e p r e s e n t a c i o n e s g r á f i c a s d e l t e x t o , m a p a s d e i m a g e n , a n i m a c i o n e s ( p . e j . G I F s

• Pautas •

Page 38: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 38/164

40

a n i m a d o s ) , a p p le ts y o b je to s d e p r o g ra m a c i ó n , A S C II a rt, m a r c o s , s c rip t s , i m á g e -n e s u s a d a s c o m o viñ e t a s e n l as lis t as , e s p a c i a d o re s , b o t o n e s g rá fic o s , s o n i d o s

(e je c u t a d o s c o n o s in in t e ra c c ió n d e l u s u a rio ), a rc h i vo s e x c l u s i va m e n t e a u d iti vo s ,b a n d a s o n o ra d e l v íd e o y víd e o s [ Prio rid a d 1 ] .Po r e je m p lo , e n H TM L:

• Utilice “a lt” p a ra lo s e l em en to s IM G , IN PU T y A PPLET o p ro p o rc io n e t ex to eq u iv a le n t e

e n e l con te n ido d e los e le m e nto s O BJECT Y APPLET.

• Para co n t en id o s co m p le jo s (p . e j . la s g rá fica s ) en lo s q u e e l t ex to d e l a t rib u to “a lt” n o

e s s u fic ien t e , p ro p o rc io n e u n a d e s c rip c ió n a d ic io n a l u s a n d o , p o r e je m p lo “l o n g d e s c”co n IM G o FRA M E, u n e n lace d en t ro d e u n e le m en to O BJECT o u n e n la c e d e sc r ip t ivo  

e n e l d o c u m e n t o .

• P a ra m a p a s d e im a g e n , u s e e l a t rib u t o “a lt” c o n A REA o e l e le m e n t o M A P c o n e l e -m e n t o s A ( y o t r o t e x t o ) c o m o c o n t e n id o .

Co n s u lt a r t am b ié n e l p u n to d e v e r ificac ió n 9 . 1 y p u n to d e v e r ificac ió n 1 3 . 1 0 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 . 1 :

3 . 2 - Tex to s e q u iv a len t e s , p á g in a 7 5 .

4 . 7 . 1 – Tex to s e q u iv a le n t e s p a ra im á g e n e s , p á g in a 1 0 5 .

1 . 2 Pro p o rc i o n e e n la c e s re d u n d a n te s e n fo r m a to t e x t o c o n c a d a z o n a a c tiva d e u nm a p a d e im a g e n t ip o s e rvid o r [Prio rid a d 1 ] .

Co n s u lt a r t am b ié n e l p u n to d e v e r ificac ió n 1 . 5 y p u n to d e v e r ificac ió n 9 . 1 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 . 2 :

3 .2 – Tex to s e q u iv a len t e s , p á g in a 7 5 .

4 . 7 . 6 – M a p a s d e im a g e n d e l la d o d e l s e r v id o r, p á g in a 1 1 0 .

1 .3 Ha s t a q u e la s a p l ic a c i o n e s d e u s u a rio  p u e d a n l e e r a u to m á t ic a m e n te e l te x to e q u i -

v a l e n t e d e l a b a n d a v i s u a l , p r o p o r c i o n e u n a d e s c r i p c i ó n a u d i t i v a d e l a i n f o r m a -

c i ó n i m p o rta n t e d e la b a n d a v is u a l d e u n a p re s e n t a c ió n m u l tim e d i a [Prio rid a d 1 ] .

Sinc ro nice la de sc r ipc i  ó n au d it iva  c o n la b a n d a s o n o r a c o m o s e p r o p o n e e n e l p u n t o d e

verificació n 1 . 4 .

Co n s u lt a r t am b ié n e l p u n to d e v e r ificac ió n 1 . 1 , p a ra in fo rm ac ió n s o b r e t e x t o s e q u iv a -

le n t e s p a ra e l co n t en id o v i s u a l.

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 . 3 :

4 . 9 . 2 – In fo rm ació n v is u a l y m o v im ien to , p á g in a 1 1 4 .

1 . 4 P a ra to d a p r e s e n ta c i ó n m u ltim e d i a te m p o d e p e n d i e n t e (p . e j. u n a p e líc u l a o a n i -m a c i ó n ) s i n c r o n i c e a lte rn a t iv a s e q u iva l e n t e s (p . e j. s u b t ítu l o s o d e s c rip c io n e s d e

l a b a n d a v is u a l ) c o n l a p re s e n t a c i ó n [Pri o ri d a d 1 ].

• Pautas •

Page 39: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 39/164

41

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 . 4 :

4 . 8 . 3 – In fo rm ació n v is u a l y m o v im ien to , p á g in a 1 1 4 .

1 .5  H a s t a q ue la s a p lic a c ion e s d e u s ua r io   in t e r p r e t e n e l t e x t o e q u iv a le n t e p a r a lo s e n la c e s

d e l o s m a p a s d e i m a g e n d e l l a d o d e l c l i e n t e , p r o p o r c i o n e e n l a c e s e n f o r m a t o t e x t o

r e d u n d a n t e s p a ra c a d a z o n a a c t iv a d e l m a p a d e im a g e n d e l la d o d e l c lie n t e [P rio r id a d 3 ].

Co n s u lt a r t am b ié n e l p u n to d e v e r ificac ió n 1 . 2 y p u n to d e v e r ificac ió n 9 . 1 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 . 5 :

3 .2 – Tex to s e q u iv a len t e s , p á g i n a 7 5 .

4 . 7 . 5 – M a p a s d e im a g e n d e l la d o d e l c lie n t e , p á g in a 1 0 9

PA U TA 2 : N o s e b a s e s ó lo e n e l c o lo r

A s e g ú r e s e d e q u e l o s t e x t o s y g r á f i c o s s o n c o m p r e n s i b l e s c u a n d o s e v e a n s i nc o l o r .

Si e l co lo r p or s í m is m o s e u s a p a ra t ran s m it ir in fo rm ac ió n , la s p e r s o n a s q u e n o p u e d a n

d ife re n c ia r c ie r t o s co lo re s , y lo s u s u a r io s q u e n o t en g an p an t a l la s e n co lo r o u t ilic en d is -

p os i t ivo s de sa l id a no v isua le s , no re c ib i rá n la in fo rm ació n . Cu a n d o lo s c o lo r e s d e p rim e r

p l a n o y d e fo n d o t ie n e n u n t o n o s im ila r, p u e d e n n o p r o p o r c io n a r s u fic ie n t e c o n t ra s t e e n

l a s p an t a l l a s m o n o c ro m á t icas , as í c o m o a la s p e r s o n a s c o n d i fe r e n t e s t ip o s d e d e fic ie n -

c ia s d e p e r ce p c ió n d e lo s c o lo r e s .

Pu n t o s d e ve rif ic a c ió n :2 . 1 A s e g u re q u e to d a la in f o rm a c ió n tra n s m itid a a t ra vé s d e lo s c o lo r e s ta m b ié n e s t é

d i s p o n i b le s i n c o lo r, p o r e je m p l o m e d i a n te e l c o n t e x t o o p o r m a rc a d o re s [ Prio ri-d a d 1 ].

Té cn icas p a ra e l p u n to d e v e r ificac ió n 2 . 1 :

5 .5 – Colore s , p á g in a 1 3 1 .

2 . 2 A s e g u r e q u e la s c o m b in a c io n e s d e lo s c o lo r e s d e fo n d o y p rim e r p la n o t e n g a n s u fi-

c ie n t e c o n t ra s t e p a ra q u e s e a n p e r c ib id a s p o r p e rs o n a s c o n d e fic ie n c ia s d e p e r c e p c ió n

d e co lo r o p o r p a n t a lla s e n b l an co y n e g ro [P rio r id ad 2 p a ra la s im á g en es . P rio r id ad 3

p a ra lo s t e x to s ] .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 2 . 2 :

5 .5 – Colore s , p á g in a 1 3 1 .

• Pautas •

Page 40: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 40/164

42

PA U TA 3 : U tilic e m a rc a d o re s y h o ja s d e e s t ilo y h á g a l o a p ro p i a d a m e n t e

M a rq u e lo s d o c u m e n to s c o n lo s e le m e n to s e s t ru c t u ra le s a p ro p ia d o s . Co n tro l e l ap re s e n t a c ió n c o n h o ja s d e e s tilo e n ve z d e c o n e le m e n t o s y a trib u to s d e p re s e n t a -c i ó n .

El u s o d e m a r c a d o r e s d e fo r m a in a p r o p i a d a ( e s d e c ir, n o d e a c u e r d o c o n l a s e s p e c ific a -

c io n es ) d i ficu lt a la acce s ib ilid ad . El m a l u s o d e m arcad o re s p a ra u n a p re s e n t ac ió n (p . e j.

u t iliz a n d o u n a t a b la p a ra m a q u e t a r o u n e n c a b e z a d o - e t iq u e t a H - p a r a ca m b ia r e l ta m a -

ñ o d e la fu e n t e ) d ificu lt a q u e lo s u s u a r io s co n s o ftw are e s p e c ia l en t ien d an l a o rg an izac ió n

d e la p á g i n a o có m o n a v e g a r p o r e lla . M a s a ú n, la util izació n d e m a rc ad o r e s d e p r e se n -

t ac ió n e n l u g a r d e m arcad o re s e s t ru c tu ra le s p a ra t ran s m it ir e s t ru c tu ra (p . e j . co n s t ru ir loq u e p a r e c e u n a t a b la d e d a t o s c o n u n e le m e n t o H TM L PRE) h a c e d i f  í c il a o t ros d isp os it i-

v o s i n t e rp re t a r u n a p á g ina d e fo rm a in te lig ib le (co nsu lta r la d e scr ip c ió n d e diferencia  

e n t re c o n t e n id o , e s t ru c t u ra y p r e s e n t a c i  ó n ).

Lo s d e s a r ro lla d o r e s d e c o n t e n i d o s p u e d e n s e n t ir la t e n t a c ió n d e u s a r (o u s a r m a l) co n s -

t ru c c io n e s q u e a s e g u r e n e l fo r m a t o d e s e a d o e n lo s n a v e g a d o r e s a n t ig u o s . De b e n d a rs e

c u e n ta d e q u e e s ta s p rá c t ica s cau s an p ro b l em as d e acces ib ilid ad y d eb en co n s id e ra r s i e l

fo r m a t o e s t a n im p o rt a n t e c o m o p a ra h a c e r e l d o c u m e n t o in a c c e s ib le a a lg u n o s u s u a r io s .

En e l o t r o e x t re m o , lo s d e s a r ro lla d o r e s d e c o n t e n id o s n o d e b e n s a c r ific a r e l m a r ca d o r

a p r o p ia d o p o r q u e u n d e t e r m in a d o n a v e g a d o r o a yu d a t é c n i c a n o p u e d a n p r o c e s a r l o

co r rec t am en te . Po r e j em p lo , e s ap ro p iad o u s a r e l e l em e n to TA BLE e n H TM L p a ra m arca r

in form ac i  ó n t a bu la r  a u n q u e a lg u n o s le c t o r e s d e p a n t a lla a n t ig u o s n o m a n e je n c o rr e c t a -

m en te e l t ex to co n t i g u o ( co n s u l t a r e l p u n to d e v e r i f i cac ió n 1 0 . 3 ) . El u s o d e l e le m e n t o

TABLE co rre c tam e nte y la c re ac ió n d e t a b la s q u e s e t ra n s fo r m e n a d e c u a d a m e n t e (c o n s u l-

t a r la p au t a 5 ) h ace p o s ib le a l s o ftw are i n t e rp re t a r t ab la s d e o t ra fo rm a q u e co m o re jilla e n

d o s d im e n s io n e s .

Pu n t o s d e v e rif ic a c ió n :3 . 1 C u an d o e x is t a u n m a r ca d o r a p r o p ia d o , u s e m a r ca d o r e s e n v e z d e im á g e n e s p a ra

t ransm it ir la in fo r m ació n [Prioridad 2] .

P o r e je m p l o , u t ilic e M a t h M L p a r a m a r c a r e c u a c io n e s m a t e m á t icas y ho ja s d e e s t ilo  p a r a

e l f o r m a t o d e t e x t o y e l c o n t r o l d e l a m a q u e t a c ió n . Ig ualm e nte , ev i te la u t i lizac ió n d e

im á g en es p a ra re p re s e n t a r tex to s . Ut ilice e n s u lu g a r tex to y h o ja s d e e s t i lo .

Co n s u lt a r t am b ié n p a u t a 6 y p a u t a 1 1 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 3 . 1 :

4 . 3 . 4 – M a r c a d o r e s y h o ja s d e e s t ilo m e jo r q u e im á g e n e s : e l e je m p lo d e la s m a t e m á t i-

ca s , p á g in a 9 1 .

• Pautas •

Page 41: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 41/164

43

3 . 2 Cr e e d o c u m e n t o s q u e e s té n v a l id ad o s p o r la s g ram á t icas fo rm ale s p ub licad as [Prio r i-

d a d 2 ].

Po r e je m p lo , i n c lu y a e n l a d ec l a rac ió n d e l t ip o d e d o c u m e n t o , a l c o m ie n z o d e l m is m o ,la referencia a una DTD publicada (p . ej . la DTD HTML 4.0 es tr icto) .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 3 . 2 :

4 .1 – Es t ru c t u ra d e l d o c u m e n t o , p á g in a 8 6 .

3 . 3 U t ilice h o ja s d e e s t i lo p a ra co n t ro l a r la m aq u e t ac ió n y la p r e s e n t a c ió n [Prioridad 2] .

Po r e jem p lo , u t i lic e la p ro p ied ad ‘font ’ d e CSS en l u g a r d e l e l em e n to H TM L FO N T p a ra

co n t ro la r e l e s t ilo d e la s fu e n t e s .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 3 . 3 :

3 .2 – Tex to s e q u iv a len t e s , p á g in a 7 5 .4 . 3 . 1 –  Énfasis, p á g i n a 9 0 .

5 – Té cn icas p ara CSS, p á g in a 1 2 7 .

3 .4 Ut ilice u n idad e s re la t ivas e n lug ar de abs o lu tas a l e sp e c ificar los va lo re s en los a t r ibu -

t o s d e lo s m a r c a d o r e s d e le n g u a je y e n l o s v a lo r e s d e la s p r o p ie d a d e s d e la s h o ja s d e

e st i lo [Prio rid ad 2 ] .

Por e je m p lo , e n CSS, u t ilice ‘e m ’ o m e d id a s p o r ce n t u a le s , e n v e z d e ‘p t ’ (p u n to s ) o

‘cm ’ ( cen t í m e t r o s ), q u e s o n u n id a d e s a b s o lu t a s . Si s e u s a n u n id a d e s a b s o lu t a s , v a lid e

q u e e l co n t en id o p re s en t ad o e s u t iliz ab le . ( co n s u lt a r la s e cc ió n “Validació n ” en lo s an e x o s ).

Té cn icas p a ra e l p u n to d e v e r ificac ió n 3 . 4 :

5 .1 – Pau ta s p a ra c rea r h o j a s d e e s t ilo , p á g in a 1 2 7 .

3 . 5 U t i l i ce e l em en to s d e en cab ezad o p a ra t r an s m i t i r l a e s t ru c tu ra ló g ica y u t i lí c e lo s d e

acu e rd o co n l a e s p ec i ficac ió n [Prioridad 2] .

Po r e jem p lo , e n H TM L, u t ilic e H 2 p a ra in d ica r u n a s u b s e cc ió n d e H 1 . N o u t ilic e e n c a b e -

z a d o s p a r a h a c e r e fe c t o s d e fu e n t e .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 3 . 5 :

4 . 1 . 2 – En c a b e z a m ie n t o d e s e c c ió n , p á g i n a 8 7 .

3 . 6 M arq u e co r rec t am en te l a s lis t a s y lo s p u n to s d e la s lis t a s [P rio r id ad 2 ] .

Po r e jem p lo , e n H TM L, an id e l o s e lem en to s d e l is t a s O L, VL y D L ad ecu ad am en te .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 3 . 6 :

4 .4 – Lista s, p á g in a 9 2 .

3 . 7 M a r q u e la s c it a s . N o u t ilic e e l m a r c a d o r d e c it a s p a r a e fe c t o s d e fo r m a t o t a le s c o m o

s a n g rí as [Prioridad 2] .

• Pautas •

Page 42: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 42/164

44

Po r e j em p lo en H TM L, u t ilic e lo s e lem en to s Q y BLO CKQ U O TE p a ra m arca r c it a s co r ta s

y la rg a s , r e s p e c t iv a m e n t e .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 3 . 7 :4 . 3 . 3 – Citas, p á g in a 9 0 .

PA U TA 4 . Id e n t if iq u e e l id i o m a o rig i n a l u s a d o

U s e m a rc a d o re s q u e f a c ilite n la p ro n u n c i a c i ó n o i n te rp r e t a c ió n d e te x to a b re via d oo e x t r a n j e r o .

Cu a n d o lo s d e s a r ro lla d o r e s d e c o n t e n id o e s p e c ific a n lo s c a m b io s e n e l id iom a o r ig ina l  

d e u n d o c u m e n t o , lo s s in t e t iz a d o r e s d e v o z y lo s d is p o s it iv o s b r a ille p u e d e n c a m b ia ra u t o m á t i c a m e n t e a l n u e v o i d i o m a , h a c i e n d o e l d o c u m e n t o m á s acces ib l e a u s u a r io s

m ultiling ü e s . L o s d e s a r r o l l a d o r e s d e c o n t e n i d o d e b e rí an i d e n t ifica r e l id io m a p red o m i-

n a n t e d e l c o n t e n i d o d e u n d o c u m e n t o ( a t r a v é s d e u n m a r c a d o r o e n e l e n c a b e z a d o

HTTP). Deberí a n t am b ié n p r o p o r c io n a r la e x p a n s ió n d e la s ab rev ia tu ra s y lo s a c ró n i m o s .

A d e m á s , p a ra la s ay u d as té cn icas , la id e nt i ficac ió n d e l id i o m a o r ig i n a l u s a d o p e r m it e a

lo s m o t o r e s d e b ú s q u e d a lo ca l iza r la s p a lab ra s c lav e s e id en t ifica r lo s d o cu m en to s e n e l

id i o m a d e s e a d o . Lo s m a r c a d o r e s d e id i o m a o r ig i n a l m e j o ra n t a m b ié n la le g ib i lid ad d e la

W e b p a ra t o d o e l m u n d o , in c lu s o p a ra a q u e llo s c o n d is c a p a c id a d e s d e a p r e n d i za je , c o g -

n it iv a s o s o rd e ra .

Cu an d o l a s ab rev i a tu ra s y lo s cam b io s e n e l id io m a o rig in a l n o s o n id en t ificad o s , p u e -

d e n se r ind e sc ifrab le s p ara lo s le c to re s d e p an ta lla y los d isp os i t ivo s b ra ille .

Pu n t o s d e v e rif ic a c ió n :4 . 1 Id e n tif iq u e c l ara m e n te lo s c a m b i o s e n e l id i o m a o rig in a l d e l te x to d e l d o c u m e n -

to y e n c u a l q u ie r te x to e q u iva le n t e   (p . e j. le y e n d a s ) [P ri o r id a d 1 ] .Por e jem p lo e n H TM L, u t ilice e l a t r ibu to «lang ». En XML, utilice «xm l: lan g ».

Té cn icas p a ra e l p u n to d e v e r ificac ió n 4 . 1 :

4 .2 – In fo rm ac ió n s o b r e e l id i o m a , p á g in a 8 9 .

4 . 2 Es p e c ifiq u e la e x p an s ió n d e c a d a a b r e v ia t u ra o a c ró n im o c u a n d o a p a r e z c a n p o r p r i-

m e r a v e z e n e l d o c u m e n t o [P rio r id a d 3 ] .

Po r e jem p lo , e n H TM L, u s e e l a t rib u to «title » d e lo s e le m e n t o s «ABBR» y «ACRO NYM ».

P ro p o rc io n a r l a ex p an s ió n e n e l c u e r p o p r i n c i p a l d e l d o c u m e n t o t a m b ié n f av o rece l a

u s a b ilid a d d e l m is m o .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 4 . 2 :

4 . 3 . 2 – A cró n im o s y ab re v ia tu ra s , p á g in a 9 0 .

• Pautas •

Page 43: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 43/164

45

4 . 3 Id en t ifiq u e e l id io m a o r ig in a l p r in c ip a l d e u n d o cu m en to [Pr io r id ad 3 ] .

Po r e jem p lo , e n H TM L, co lo q u e e l a t rib u to «lang » e n e l e le m e nto HTM L. En XM L, u t ilice

«xm l: lang ». Lo s o p e r a d o r e s d e s e rv id o r e s p o d r í an co n fig u ra r s u s s e rv id o re s p a ra ap ro v e -ch a r lo s m eca n is m o s d e t ran s fe re n c ia d e l co n t e n id o d e l p ro to co lo H TTP ([RFC2 0 6 8 ] , s ec -

c ió n 1 4 . 1 3 ), d e fo r m a q u e lo s c lie n t e s p u e d a n r e c ib ir a u t o m á t ic a m e n t e lo s d o c u m e n t o s

e n e l id i o m a s e l e c c io n a d o .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 4 . 3 :

4 .2 – In fo rm ació n s o b r e e l id i o m a , p á g in a 8 9 .

PA U TA 5 . Cre e ta b l a s q u e s e tra n s f o r m e n c o rre c t a m e n t e

A s e g u re q u e la s t a b la s t ie n e n l o s m a rc a d o re s n e c e s a rio s p a ra tra n s f o r m a rla s m e -d i a n te n a ve g a d o re s a c c e s i b le s y o t ra s a p l ic a c i o n e s d e u s u a rio .

L as t ab l a s d eb e rí an u t iliz a r s e s o l am en te p a ra m arca r la in form ac i  ó n t a bu la r  («t ab la s d e

d a t o s»). Lo s d e s a r r o lla d o r e s d e c o n t e n id o s d e b e r í an e v it a r u s a r la s p a ra m aq u e t a r p á g in as

(«t a b la s d e c o m p o s ic ió n »). U s a r la s t ab l a s p a ra cu a lq u i e r co s a p re s e n t a t am b ié n e s p e c ia -

le s d ificu l tade s p ara los u sua r io s d e le c to re s d e p a n ta l la  (consu l ta r pun to de ver i f icac ió n

1 0 . 3 ) .

A l g u n a s a p lic a c ion e s d e u sua r io  p e r m it e n a é s t e n av e g a r en t r e la s ce ld as d e la s t ab la s

y a c ce d e r a lo s e n c a b e z a m ie n t o s y o t ra s in fo r m a c io n e s d e la s c e ld a s . A m e n o s q u e m a r-

q u e m o s a p r o p ia d a m e n t e la s t a b la s , é s t a s n o p ro p o rc io n a ran a la ap licac ió n d e u s u a r io l a

in fo rm ac ió n n e ces a r ia (co n s u lt a r t am b ié n la p au t a 3 ).

Lo s s ig u ien t e s p u n to s d e v e r ificac ió n b e ne fic ia rá n d ir e c ta m e n t e a la s p e rs o n a s q u e a c -

c e d a n a la t a b la p o r m e d io s a u d it iv o s (p o r e je m p l o u n le c t o r d e p a n t a lla o u n o r d e n a d o r

d e a b o r d o ), o a a q u e llo s q u e s ó l o v e a n u n a p a r t e d e l a p á g in a cad a v ez (p o r e j . l o s

u s u a r io s c ie g o s o d e e s cas a v is ió n q u e u t ilic en u n s i st em a au d it iv o o u n d isp o sit ivo bra i lle  

u o t r o s u s u a r io s d e d i sp o s it iv o s c o n v is o r e s p e q u e ñ os , e tc . ) .

Pu n t o s d e ve rif ic a c ió n :5 . 1 En la s t a b l a s d e d a t o s , id e n t if iq u e l o s e n c a b e z a m ie n t o s d e f ila y c o lu m n a [Prio -

r i d a d 1 ] .Po r e jem p lo , e n H TM L, u s e TD p a ra id en t ifica r la s ce ld as d e d a to s y TH p a ra lo s en cab e -

z a m i e n t o s .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 5 . 1 :

4 . 5 . 1 – Tab la s d e d a to s , p á g in a 9 5 .

• Pautas •

Page 44: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 44/164

46

5 . 2 Pa ra la s t ab la s d e d a to s q u e tie n e n d o s o m á s n ive l e s ló g ic o s d e e n c a b e z a m ie n -to s d e f ila o c o lu m n a , u tilic e m a rc a d o re s p a ra a s o c i ar la s c e ld a s d e e n c a b e z a -

m ie n t o y la s c e ld a s d e d a t o s [Prio rid a d 1 ] .Por e je m p lo , e n HTM L, u t ilice THEAD, TFO O T, y TBOD Y, p ara ag rup ar las filas , CO L y

CO L GRO U P p a ra ag ru p a r la s co lu m n as y l o s a t r ib u to s «axis», «s c o p e » y «h e a d e r s» p a r a

d e scr ib i r re lac ion e s m á s c o m p l e ja s e n t r e lo s d a t o s .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 5 . 2 :

4 . 5 . 1 – Tab la s d e d a to s , p á g in a 9 5 .

5 . 3 N o u t ilic e t a b la s p a r a m a q u e t a r, a m e n o s q u e la t a b la t e n g a s e n t id o c u a n d o s e a lin e e .

Po r o t ro lad o , s i la t ab l a n o t i en e s en t id o , p ro p o rc io n e u n a a lt e rn a t iv a e q u iv a len t e ( la

c u a l d e b e s e r u n a ve r s i  ó n q u e p u e d a s e r le  í  d a a lin e a d a  ) [Prio rid ad 2 ] .N o t a . - Un a v e z q u e la s a p lic a c io n e s d e u s u a r io s o p o rt e n l a m a q u e t a c ió n m e d ia n te h o -

 ja s d e e s t ilo , la s t a b la s n o se d e b e n u t iliz a r p a ra m a q u e ta r.

Co n s u lt a r t am b ié n e l p u n to d e v e r ificac ió n 3 . 3 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 5 . 3 :

4 . 5 . 2 – Evite l as t ab las para m aq ue tar, p á g in a 1 0 1 .

5 . 4 S i u t iliz a u n a t ab la p a ra m aq u e t a r, n o u t ilic e m arcad o res e s t ru c tu ra le s p a ra r ea liza r u n

form ate o v isua l [Prio r id ad 2 ] .

P o r e je m p l o , e n H TM L n o u t ilic e e l e le m e n t o TH p a ra h a c e r q u e e l c o n t e n id o d e u n a

c e ld a (q u e n o s e a d e e n c a b e z a m ie n t o d e t a b la ) s e v is u a lic e c e n t ra d o y e n n e g r it a .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 5 . 4 :

4 . 5 . 2 – Evite l as t ab las para m aq ue tar, p á g in a 1 0 1 .

5 . 5 P r o p o r c io n e r e s ú m en e s d e la s t ab l a s [P rio r id ad 3 ] .

Po r e je m p lo , e n H TM L, u s e e l a t rib u to «s u m m a r y » e n e l e le m e nto TABLE.

Té cn icas p a ra e l p u n to d e v e r ificac ió n 5 . 5 :

4 . 5 . 1 – Tab la d e d a to s , p á g in a 9 5 .

5 . 6 P ro p o rc io n e ab re v ia tu ra s p a ra la s e t iq u e t a s d e e n cab e zam ien to [P rio r id ad 3 ].

Po r e je m p lo , e n H TM L, u s e e l a t rib u to «a b b r» e n e l e l e m e n t o TH .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 5 . 6 :

4 . 5 . 1 – Tab la s d e d a to s , p á g in a 9 5 .

Co n s u lt a r t am b ié n e l p u n to d e v e rificac ió n 1 0 . 3 .

• Pautas •

Page 45: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 45/164

47

PA U TA 6 . A s e g u re q u e la s p á g i n a s q u e i n c o rp o ra n n u e v a s te c n o lo g ía s s e tra n s -f o r m e n c o r r e c t a m e n t e

A s e g u re q u e l a s p á g in a s s o n a c c e s ib le s in c lu s o c u a n d o n o s e s o p o rta n la s te c n o -lo g ía s m á s m o d e r n as o é s ta s e s té n d e s c o n e c ta d a s .

Si b i en s e a l i en t a a l o s d es a r ro l l ad o res d e co n t en id o s a u s a r n u ev as t ecn o lo g í a s q u e

s u p e r e n lo s p r o b le m a s q u e p r o p o r c io n a n la s t e c n o lo g í a s e x is t e n t e s , d e b e rá n s a b e r có m o

h a c e r p a r a q u e s u s p á g i n a s f u n c i o n e n c o n n a v e g a d o r e s m á s a n t i g u o s , y p a r a q u i e n e s

d e c id a n d e s c o n e c t a r e s t a c a ra c t e rí s t ica.

Pu n t o s d e ve rif ic a c ió n :6 . 1 O r g a n i c e e l d o c u m e n t o d e f o r m a q u e p u e d a s e r l e í d o s i n h o j a d e e s t i l o . P o r

e je m p lo , c u a n d o u n d o c u m e n to HTM L e s in te rp re ta d o s i n a s o c i a rlo a u n a h o ja d ee s t ilo , tie n e q u e s e r p o s i b l e le e rlo [Prio rid a d 1 ] .

C u a n d o e l c o n t e n i d o e s tá o r g a n i z a d o ló g ic a m e n t e , e s in t e rp r e t a d o d e fo r m a q u e la

o rg an i zac ió n co n t in ú a s ie n d o c la r a in c lu s o c u a n d o s e d e s c o n e c t e n o n o s e s o p o r t e n la s

h o ja s d e e s t i lo .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 6 . 1 :

5 .1 – Pau ta s p a ra c rea r h o j a s d e e s t ilo , p á g in a 1 2 7 .

6 . 2 A s e g u re q u e lo s e q u iva le n t e s d e u n c o n te n i d o d in á m i c o s o n a c tu a liz a d o s c u a n -d o c a m b i a e l c o n t e n i d o d i n á m ic o [Prio rid a d 1 ] .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 6 . 2 :

4 . 1 0 . 4 – H a g a q u e e l a r ch iv o d e o rig e n d e u n m a r co s e a s ie m p r e u n d o c u m e n t o H TM L,

p á g in a 1 1 8 .

6 . 3 A s e g u re q u e la s p á g in a s s i g an s i e n d o u tiliz a b le s c u a n d o s e d e s c o n e c te n o n o s es o p o rte n lo s s c rip t s , a p p le ts u o tro s o b je to s d e p ro g ra m a c ió n . Si e s t o n o e s p o s i-b l e , p r o p o rc i o n e in f o r m a c ió n e q u iva l e n t e e n u n a p á g i n a a lte rn a t iva a c c e s i b l e [ Prio -r i d a d 1 ] .

P o r e j e m p l o , a s e g u r e q u e l o s e n l a c e s q u e l a n z a n s c r i p t s f u n c i o n a n c u a n d o é s to s s e

d e s c o n e c t e n o n o s e s o p o r t e n ( p . e j . n o u t i l i z a r u n « ja v a s crip t :» c o m o o b j e t i v o d e u n

en lace ). S i n o e s p o s ib le h ace r la p á g in a u t iliz ab l e s in s c r ip t s , p ro p o rc io n e u n t ex to e q u i-

v a le n t e co n e l e le m en to N O SCRIPT o u t ilic e u n s c rip t d e l s e rv id o r e n l u g a r d e u n s c rip t d e l

c lie n t e o p r o p o r c io n e u n a p á g in a a l te rn a t iv a acce s ib le co m o p a ra e l p u n to d e v e r ificac ió n

1 1 . 4 . Co n s u lt a r t a m b ié n la p a u t a 1 .

• Pautas •

Page 46: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 46/164

Page 47: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 47/164

49

t z ios ) , con un n ive l m á x i m o a l o s 2 0 d e s t e l l o s p o r s e g u n d o , a s í  c o m o c o n l o s ca m b io s

rá p i d o s d e o s c u r id a d a ilu m in a c ió n ( co m o l a s lu c e s e s t ro b o s có picas ) .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 7 . 1 :3 .9 – Parp ad eo d e la p an t a l la , p á g in a 8 2 .

7 .2 H a s ta que l a s a p l i c a c ione s de u sua r io   p e r m i t a n c o n t r o l a r l o , e v i t e e l p a r p a d e o d e l

c o n t e n id o (p o r e je m p lo , c a m b io d e p r e s e n t a c ió n e n p e r io d o s r e g u la r e s , a sí c om o e l

e n c e n d id o y a p a g a d o ) [P rio r id a d 2 ] .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 7 . 2 :

5 .3 – Est ilo d e l t e x to , p á g in a 1 2 9 .

7 .3 H a s ta q ue la s a p lic a c ion e s d e u sua r io  p e r m it a n c o n g e la r e l m o v im ie n t o d e lo s c o n t e -n id o s , ev i te l o s m o v im ie n to s e n la s p á g inas [Prio r id ad 2 ] .

Cu a n d o u n a p á g in a in c lu y e co n t e n id o m ó v il, p r o p o r c io n e u n m e c a n is m o d e n t r o d e u n

s c rip t o u n a p p le t q u e p e r m it a a l o s u s u a r io s c o n g e la r e l m o v im ie n t o o a c t u a liz a c ió n. El

u s o d e la s h o ja s d e e s t ilo c o n s c rip t s q u e c r e e n m o v im ie n t o , p e r m it e a l o s u s u a rio s d e s -

co n e c t a r u o b v i a r e l e fec to m á s f á c i l m e n t e .

Co n s u lt a r t am b ié n la p a u t a 8 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 7 . 3 :

4 . 9 . 2 – In fo rm ació n v is u a l y m o v im ien to , p á g in a 1 1 4 .

7 .4 H a s ta que l a s a p l i c a c ione s de u sua r io   p r o p o r c i o n e n l a p o s i b i l i d a d d e d e t e n e r l a s

ac tu a lizac io n es , n o c ree p á g i n a s q u e s e a c t u a lic e n a u t o m á t ic a m e n t e d e fo r m a p e rió -

dica [Prioridad 2] .

Po r e jem p lo , e n H TM L, n o c ree p á g i n a s q u e s e a c t u a lic e n a u t o m á t ic a m e n t e c o n «HTTP

EQUIV=refresh» h a s t a q u e la s a p lic a c io n e s d e u s u a r io p e r m it a n d e s c o n e c t a r e s t a c a r a c te -

rí s t ica.

Té cn icas p a ra e l p u n to d e v e r ificac ió n 7 . 4 :

3 .8 – Refre s co au to m á t ico d e la p á g in a , p á g in a 8 1 .

7 .5 H a s ta q ue la s a p lic a c ion e s d e u sua r io  p r o p o r c io n e n la p o s ib ilid a d d e d e t e n e r e l r e d i -

r e c c io n a m ie n t o a u t o m á t ico , no u t i lice m arcad ore s p ara re d ir ig ir las p á g i n a s a u t o m á t i-

cam en te . En s u lu g a r, co n fig u re e l s e rv id o r p a ra q u e e j ecu t e e s t a p o s ib ilid ad [P rio r id ad

2 ].

Té cn icas p a ra e l p u n to d e v e r ificac ió n 7 . 5 :

3 . 8 - Re fre s co au to m á t ico d e la p á g in a , p á g i n a 8 1 .

N o t a : Lo s e lem e nto s BLINK y MA RQ UEE no e s tá n d e fin id o s e n n in g u n a e s p e c ificac ió n

W 3 C H TM L , y n o d e b e r í an s e r u t i liz ad o s . Co n s u lt a r t am b ié n la p a u t a 1 1 .

• Pautas •

Page 48: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 48/164

50

PA U TA 8 . A s e g u re la a c c e s ib i lid a d d i re c t a d e la s i n t e r fa c e s d e u s u a rio in c ru s ta d a s

A s e g u r e q u e l a i n t e r f a z d e u s u a r i o s i g u e l o s p r i n c i p i o s d e u n d i s e ñ o a c c e s i b l e :a c c e s o a l a fu n c i o n a l id a d in d e p e n d i e n t e d e l d i s p o s i tivo , te c l a d o o p e ra tivo , v o z a u -to m á tic a , e tc .

Cu a n d o u n o b je t o in c ru s t a d o t ie n e s u «prop ia in te r faz», é s ta (a l ig ua l qu e la in te r faz d e

s u n av eg ad o r ) d eb e s e r acces ib l e . S i l a i n t e r f az d e l o b j e to i n c ru s t ad o n o p u ed e h ace r s e

a c c e s ib le , d e b e p r o p o r c io n a r s e u n a s o l u ció n a l te rna t iva acces ib le .

N o t a : Para in fo rm ació n s o b re i n t e r f aces acces ib l e s , p o r f av o r co n s u l t e l a s Pau t a s d e

Acce s ib i lid ad a l as A p licac ione s d e Usua r io [WAI-USERAGENT] y las Pau tas d e Acce s ib i -

lid ad p a ra la s H er ram ien t a s d e A u to r [WA I-A U TO O L].

Pu n t o d e ve rif ic a c ió n :8 . 1 Ha g a lo s e le m e n to s d e p ro g ra m a c ió n , ta le s c o m o s c rip t s y a p p l e t s , d ire c t am e n te

a c c e s i b le s o c o m p a tib le s c o n la s a y u d a s t é c n ic a s  [Pri o ri d a d 1 s i la f u n c i o n a l id a de s i m p o r t a n t e   y n o s e p re s e n ta e n o tro lu g a r; d e o t ra m an e ra , P rio r id ad 2 ] .

Co n s u lt a r t am b ié n la p a u t a 6 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 8 . 1 :

4 . 8 . 2 – A p p l e t s d ir e c t a m e n t e a c c e s ib le s , p á g in a 1 1 2 .

4 . 8 . 3 – S o n id o e im a g e n p r o d u c id o s p o r o b je t o s d in á m ico s , p á g in a 1 1 2 .

PA U TA 9 . D is e ñ e p a ra l a in d e p e n d e n c i a d e l d is p o s i tiv o

U tilic e c a ra c t e rí s tic a s q u e p e rm ita n l a a c tiva c i ó n d e lo s e le m e n t o s d e la p á g i n a atra vé s d e d i ve rs o s d i s p o s i tivo s d e e n tra d a .

El acceso a t r av  é s d e d i sp o s it iv o s in d e p e n d i e n t e s  s ig n ifica q u e e l u s u a r io p u e d e in t e -

rac tuar con la ap l icac ió n d e u s u a r i o o e l d o c u m e n t o c o n u n d i s p o s i t i v o d e e n t r a d a ( o

sa l id a) p re fe r id o - ra tó n , t ec lad o , v o z , p u n t e ro d e ca b e za (lico rn io ) u o t ro . Si, p o r e jem -

p lo , u n co n t ro l d e fo rm u la r i o só l o p u e d e s e r a c t i v a d o c o n u n r a t ó n u o t ro d i s p o s i t i v o

a p u n t a d o r, a lg u ie n q u e u s e la p á g i n a s in v e rla , c o n e n t ra d a d e v o z , c o n t e c la d o o q u ie n

u t ilic e o t r o d is p o s it iv o d e e n t ra d a q u e n o s e a d e a p u n t a m ie n t o , n o s e rá cap az d e u t iliz a r

e l fo r m ulario .

N o t a : P ro p o r c io n a n d o t e x t o s e q u iv a le n t e s p a r a lo s m a p a s d e im a g e n o la s im á g e n e s

u s ad a s c o m o v í n cu lo s , s e h ace p o s ib le a l o s u s u a r io s i n t e rac tu a r co n e l lo s s in u n d is p o s i -

t iv o ap u n t ad o r. Co n s u lt a r t am b ié n la p a u t a 1 .

G e n e ra lm e n t e , la s p á g i n a s q u e p e r m it e n la in t e r a c c ió n a t rav é s d e l t e c la d o s o n t a m b ié nacce s ib les a t ravé s d e u n a e n t r a d a d e v o z o u n a s e rie d e c o m a n d o s .

• Pautas •

Page 49: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 49/164

51

Pu n t o s d e ve rif ic a c ió n :9 . 1 P r o p o r c i o n e m a p a s d e i m a g e n c o n t r o l a d o s p o r e l c l i e n t e e n l u g a r d e p o r e l

s e r v i d o r , e x c e p t o d o n d e l a s z o n a s s e n s i b l e s n o p u e d a n s e r d e f i n i d a s c o n u n af o r m a g e o m é t ri c a [ Pri o ri d a d 1 ] .Co n s u l t a r t am b ié n e l p u n to d e v e r ificac ió n 1 . 1 , p u n to d e v e r i f i cac ió n 1 . 2 y p u n t o d e

verificació n 1 . 5 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 9 . 1 :

4 . 7 . 5 – M a p a s d e im a g e n d e l la d o d e l c lie n t e , p á g in a 1 0 9 .

9 . 2 A s e g u r e q u e c u a l q u i e r e l e m e n t o q u e t i e n e s u p r o p i a i n t e r f a z p u e d a m a n e j a r s e d e

fo rm a in d ep e n d ien t e d e l d is p o s i tiv o [Pr io r id ad 2 ] .

Con su ltar la d e finició n d e in d e p e n d e n c ia d e l d is p o s it iv o  .Co n s u lt a r t am b ié n la p a u t a 8 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 9 . 2 :

3 .4 – A c c e s o d e s d e e l te c la d o , p á g in a 7 7 .

9 .3 Para los «scripts », e s p e c ifiq u e m a n e ja d o r e s d e e v e n t o ló g ic o s e n v e z d e m a n e ja d o r e s

d e e v e n t o d e p e n d i e n t e s d e d i sp o s it iv o s [ Prio r id a d 2 ] .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 9 . 3 :

4 . 1 2 . 2 – M a n e j a d o r e s d e e v e n t o s in d e p e n d i e n t e s d e l d i sp o s it iv o , p á g in a 1 2 5 .

9 . 4 Cr e e u n o r d e n ló g i co p a ra n a v e g a r c o n e l t a b u la d o r a t r a vé s d e v í n cu lo s , co n t ro le s d e

form ulario y o b je to s [Pr io r id ad 3 ] .

P o r e je m p l o , e n H TM L , e s p e c ifiq u e e l o r d e n d e n a v e g a c ió n co n e l t ab u l ad o r a t rav é s

d e l a t r ibu to «t a b i n d e x » o a s e g u r e u n d is e ñ o d e p á g in a ló g ico .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 9 . 4 :

4 . 1 1 . 1 – H ag a acce s ib le s l o s co n t ro l e s d e l t e c l ad o , p á g in a 1 2 1 .

9 . 5 P r o p o r c io n e a t a jo s d e t e c la d o p a ra lo s v í n cu lo s m á s im p o r t an t e s (in c lu id o s lo s d e lo s

m a p a s d e i m a g e n d e l l a d o d e l c l i e n t e  ) , l o s co n t ro l e s d e fo rm u la r i o y l o s g ru p o s d e

con t ro les d e fo r m ulario [Pr io r id ad 3 ] .

Po r e jem p lo , e n H TM L, e s p ec i fiq u e lo s a t a jo s a t r avé s d e l a t r ibu to «a c c e s s k e y».

Té cn icas p a ra e l p u n to d e v e r ificac ió n 9 . 5 :

4 . 1 1 . 1 – H ag a acce s ib le s l o s co n t ro l e s d e l t e c l ad o , p á g in a 1 2 1 .

PA U TA 1 0 . U ti lic e s o lu c io n e s p ro v is io n a l e s

U tilic e s o lu c i o n e s d e a c c e s i b ilid a d p ro v is i o n a l e s d e f o rm a q u e la s a y u d a s té c n i c a sy lo s a n tig u o s n a v e g a d o re s o p e re n c o rre c t a m e n te .

• Pautas •

Page 50: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 50/164

52

P o r e je m p l o , lo s n a v e g a d o r e s a n t ig u o s n o p e r m it e n a l u s u a r io n a v e g a r a c u a d r o s d e

e d i c ió n v a c í o s . Lo s an t ig u o s lec to re s d e p an t a l la le en la s lis t a s d e v í n cu lo s co n s ecu t i v o s

c o m o u n s o lo v í n c u lo . Es t o s e l e m e n t o s a c t iv o s s o n , p o r ta n t o , d e d i f  í c il o im p o s ib le acce -s o . Ig u a lm e n t e , c a m b ia r la v e n t a n a a c t u a l o h a c e r a p a r e c e r in e s p e ra d a m e n t e n u e v a s v e n -

t a n a s, p u e d e s e r m u y d e s o r ie n t a d o r p a r a lo s u s u a rio s q u e n o p u e d e n v e r q u e e s t o e s t áo cu r r i en d o .

N o t a : L o s s i g u i en t e s p u n to s d e v e r i f i cac ió n s e a p l i c a n h a s t a q u e l a s ap l icac iones de  

usuar io  (incluidas las a y u d a s t  é cnicas  ) s o lu c io n e n e s t o s p r o b le m a s . Es t o s p u n t o s d e v e r i-

ficació n e s tá n c las i ficad os co m o «p ro v i s i o n a l e s» m ien t ra s q u e e l Gru p o d e Trab a jo d e l a s

P a u t a s d e Co n t e n id o e n la W e b lo s c o n s id e r e v á lid os y ne ce sar ios p ara la acce s ib i lid ad d e

la W eb a p a r t ir d e la p u b l icac ió n d e e s t e d o c u m e n t o . Sin e m b a r g o , e l G ru p o d e Tra b a jo

e s p e r a q u e e s t o s p u n t o s d e v e rific a c ió n n o s e a n n e c e s a rio s e n u n fu t u r o , u n a v e z q u e l a st e c n o l o g í a s d e la W e b h a y a n in c o r p o r a d o la s c a ra c t e rí s t ic a s y c a p a c id a d e s e s p e r a b le s .

Pu n t o s d e v e rif ic a c ió n :1 0 . 1 H a s ta q ue la s a p lic a c ion e s d e u sua r io  p e r m i t a n d e s c o n e c t a r l a a p e r t u r a d e n u e v a s

v e n t a n a s , n o p r o v o q u e a p a r i c i o n e s r e p e n t i n a s d e n u e v a s v e n t a n a s y n o c a m b i e l a

ve n tan a ac tua l s in in fo rm ar a l usu ar io [Prio r id ad 2 ] .

P o r e je m p l o , e n H TM L , e v it e u s a r u n m a r c o c u y o o b je t iv o e s u n a n u e v a v e n t a n a .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 0 . 1 :

4 . 1 0 . 5 – Ev it e q u e a b r ir u n a n u e v a v e n t a n a s e a e l o b je t iv o d e u n m a r co , p á g in a 1 2 0 .

1 0 . 2 H a s ta que l a s a p l i c a c ione s de u sua r io  s o p o r t e n e x p lí c i t am en te l a a s o c i ac ió n e n t r e

co n t ro l d e fo rm u la r io y e t i q u e t a , p a ra t o d o s lo s co n t ro le s d e fo rm u la r io s co n e t i q u e t a s

a s o c ia d a s im p lí c it a m e n t e , a s e g u r e q u e la e t iq u e t a e s tá c o lo c a d a a d e c u a d a m e n t e [P rio -

r id ad 2 ] .

La e t iq u e t a d e b e p r e c e d e r in m e d ia t a m e n t e a s u c o n t ro l e n la m is m a lí n e a (s e p e r m it e

m á s d e u n a e t iq u e t a / c o n t r o l p o r lí n e a ) o e s t a r en la lí n e a q u e p r e c e d e a l c o n t r o l (c o n s ó lo

u n a e t iq u e t a y u n c o n t r o l p o r lí n ea ) .

Co n s u lt a r t am b ié n e l p u n to d e v e rificac ió n 1 2 . 4 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 0 . 2 :

4 . 1 1 . 3 – Et iq u e t e e x p lí c it am en te l o s co n t ro l e s d e fo rm u la r io , p á g in a 1 2 2 .

1 0 . 3 H a s ta que l a s a p l i c a c ione s de u sua r io   ( incluidas las a y u d a s t  é cnicas  ) i n t e rp re t en

co r rec t am en te lo s t e x to s co n t ig u o s , p ro p o rc io n e u n t ex to lin e a l a lt e rn a t iv o ( en la p á -

g i n a a c t u a l o e n a lg u n a o t ra ) p a ra t o d a s la s t a b la s q u e m a q u e t a n t e x t o e n p a ra le l o , e n

co lu m n as d e p a lab ra s [P rio r id ad 3 ] .

No ta : Por favo r, co nsu lte la d e fin ic ió n d e t a b la a line a d a  . Es te pun to de ver i f icac ió n b e -

• Pautas •

Page 51: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 51/164

53

n e fic ia a aq u e llo s q u e t ien en a p lic a c ion e s d e u sua r io  (c o m o a lg u n o s le c to re s de p a n ta lla  )

q u e s o n i n c a p a c e s d e m a n e j a r b l o q u e s d e t e x t o c o n t i g u o ; e l p u n t o d e v e r i f i c a c ió n n o

d e b e d e s a n i m a r a lo s d e s a r ro lla d o r e s d e c o n t e n i d o s e n e l u s o d e t a b la s p a r a p r e s e n t a rin form ac i  ó n t a bu la r  .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 0 . 3 :

4 . 5 . 3 – Te x to i n s e r t ad o e n t ab la s , p á g in a 1 0 1 .

1 0 . 4 H a s ta q ue la s a p lic a c ion e s d e u sua r io  m a n e je n c o rr e c t a m e n t e lo s c o n t r o le s v a c í o s ,

in c lu y a c a ra c t e r e s p o r d e fe c t o e n lo s c u a d r o s d e e d ic ió n y á r ea s d e t ex to [P rio r id ad 3 ] .

Por e je m p lo , e n H TM L, ha g a e s to co n TEXTAREA e INPUT.

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 0 . 4 :

4 . 1 1 . 7 – Té c n ic a s p a ra c o n t r o le s e s p e c í fico s, p á g in a 1 2 4 .

1 0 . 5 H a s ta que l a s a p l i c a c ione s de u sua r io   ( inc lu idas las ayudas t é cn icas ) in t e rp re t e n

c la ram en te lo s v í n cu lo s co n t ig u o s , in c lu y a ca rac t e re s im p r im ib le s (ro d ea d o s d e e s p a -

c io s ), q u e n o s irv a n c o m o v í n cu lo , en t r e l o s v í ncu los con t iguos [Pr io r idad 3 ] .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 0 . 5 :

4 . 7 . 5 – M a p a s d e im a g e n d e l la d o d e l c lie n t e , p á g in a 1 0 9 .

PA U TA 1 1 . U ti lic e la s te c n o lo g í a s y p a u t a s W 3 C

U tilic e te c n o lo g í a s W 3 C (d e a c u e rd o c o n l as e s p e c i fic a c i o n e s ) y s i g a la s p a u ta s d ea c c e s i b i l i d a d . D o n d e n o s e a p o s i b l e u t i l i z a r u n a t e c n o l o g í a W 3 C , o u s á n d o l a s eo b tie n e n m a te ria le s q u e n o s e tra n s f o r m a n c o rre c t am e n te , p ro p o r c io n e u n a v e rs i ó na lte rn a tiva d e l c o n te n id o q u e s e a a c c e s i b le .

La s a c t u a le s p a u t a s r e c o m ie n d a n la s t e c n o lo g í as W 3C (p . e j. HTM L, CSS, e tc . ) po r va-

r ias razones :

• Las t e cn o lo g í as W 3 C in c lu y e n in co rp o rad as la s ca rac t e rí s t icas de acces ib i l idad .

• L as e s p ec i f i cac io n es W3 C p ro n to s e rá n r e v is a d a s p a ra a s e g u r a r q u e lo s a s p e c t o s d e

a c c e s ib ilid a d s e t e n g a n e n c u e n t a e n la fa s e d e d i se ñ o .

• Las e s p e c ificac io n es W 3 C e s tá n d e s a r ro lla d a s e n u n p r o c e s o a b i e rt o d e l a b o rio s o c o n -

s e n s o .

M u c h o s fo r m a t o s n o r e c o m e n d a d o s p o r W 3 C (p o r e je m p l o , P DF, Sc h o c k w a v e , e t c .)

r eq u i e ren s e r v i s t o s b i en co n p lu g - in s o co n ap l i cac io n es au tó n o m a s . A m e n u d o , e s to s

fo r m a t o s n o p u e d e n s e r v is u a liz a d o s o n a v e g a d o s c o n a p lic a c ion e s d e u sua r io  e s tá n d a r

( inc luyendo a y u d a s t  é cnicas  ). Ev ita r es to s fo rm ato s y carac ter í s t ica s n o e s t á n d a r (e le m e n -

t o s , a trib u t o s , p r o p ie d a d e s y e x t e n s io n e s p a t e n t a d a s ) , t e n d e rá a h a c e r m á s acce s ib les l as

p á g in as a m á s g e n t e q u e u t iliz a u n a a m p l ia v a rie d a d d e h a r d w a r e y s o ft w a r e . Cu a n d o

• Pautas •

Page 52: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 52/164

54

deba u t i l i zar t ecno log í a s n o a c c e s ib le s ( p a t e n t a d a s o n o ), d e b e p r o p o r c io n a r u n a p á g in a

eq u iv a l en t e acces ib l e .

In c lu s o cu an d o s e u t ilic en t ecn o lo g í a s W 3 C , d e b e n s e r u sa d a s d e a c u e r d o c o n la s p a u -t a s d e acce s ib ilid ad . Cu an d o u t ilic e n u e v as t e cn o lo g í a s , a se g u r e q u e s e t ra n s fo r m a n c o -

rr e c t a m e n t e (Co n s u lt a r ta m b ié n la p au t a 6 ).

N o t a : Convi rt ie nd o los d o cum e nto s (d e sd e PDF, Pos t s cr ip t , RTF, e tc . ) a le ng ua je s d e

m a r c a d o W 3 C ( H T M L , X M L ) n o s i e m p r e s e c r e a u n d o c u m e n t o a c c e s i b l e . P o r t a n t o ,

v a lid e cad a p á g in a r e s p e c to a l a acces ib ilid ad y u t ilid ad d es p u é s d e l p r o c e s o d e c o n v e r-

s ió n ( co n s u l t e la s e cc ió n “Validació n ” en lo s a n e x o s ) . Si u n a p á g i n a n o s e c o n v ie r t e d e

for m a le g ib le , rev i se la p á g i n a h a s ta q u e s u p r e s e n t a c ió n o r ig in a l s e co n v ie r ta ad ecu ad a -

m e n t e o b ie n p r o p o r c io n e u n a v e r sió n e n H TM L o e n t e x t o p la n o .

Pu n t o s d e v e rif ic a c ió n :11 .1 Ut ilice t e cno log í a s W 3 C cu a n d o e s té n d is p o n ib le s y s ean ap ro p iad as p a ra la t a r ea , y

u s e la s ú lt im as v e r s io n e s cu an d o s e an s o p o r t ad as [P rio r id ad 2 ] .

Co n s u lt e la l is t a d e r e fe re n c ia s ( en lo s an e x o s ) p a ra in fo rm ac ió n s o b r e d ó n d e e n c o n t ra r

la s ú lt im as e sp e c ificac ione s W 3C y [WAI-UA-SUPPO RT] para in fo rm ació n so bre las ap li-

c a c io n e s d e u s u a r io s o p o r t a d a s p o r la s t e c n o lo g í a s W 3 C.

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 1 . 1 :

3 . 1 2 – S o p o rt e d e l n a v e g a d o r, p á g in a 8 5 .

1 1 . 2 E v it e ca rac t e rí s t ica s d e s aco n s e j ad as p o r la s t ecn o lo g í as W 3C [Pr io r id ad 2 ] .

Po r e jem p lo , e n H TM L, n o u t ilic e e l e lem e n to d e s a c o n s e j a d o  FO N T ; u s e en s u l u g a r

h o j a s d e e s t ilo (p o r e je m p l o , la p r o p i e d a d «fon t» e n CSS).

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 1 . 2 :

5 .2 – Tip os d e le t ra , p á g in a 1 2 8 .

5 .3 – Est ilo s de te x to , p á g in a 1 2 9 .

Ín d ic e d e e le m e n t o s y a t rib u t o s , p á g in a 1 4 2 .

1 1 . 3 P ro p o rc io n e la in fo rm ac ió n d e m o d o q u e lo s u s u a rio s p u e d a n r e c ib ir lo s d o c u m e n -

t o s s e g ú n s u s p re fe re n c ia s (p . e j. id io m a , t ip o d e co n t en id o , e t c . ) [P rio r id ad 3 ] .

N o t a : U s e la n e g o c iac ió n d e c o n t e n id o s d o n d e s e a p o s ib le .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 1 . 3 :

3 .7 – N e g o c i a c ió n d e l co n t e n id o , p á g in a 8 1 .

1 1 . 4 S i, d e s p u  é s d e lo s m a y o re s e s fu e r z o s  , n o p u e d e c re a r u n a p á g in a acce s ib le , p ro p o r -

c i o n e u n v í n c u l o a u n a p á g i n a a lt e r n a t iv a q u e u s e t e c n o l o g í a s W 3 C , s e a acces ib le  ,

t e n g a in fo r m a c ió n e qu iva l e n t e   (o fu n c io n a l) y s ea ac tu a l izad a t an a m en u d o co m o la

• Pautas •

Page 53: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 53/164

55

p á g ina (orig ina l) ina cce sible [Prio rid ad 1 ] .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 1 . 4 :

3 .3 – Pá ginas a l te rna t ivas , p á g in a 7 6 .N o t a : Lo s d e s a r r o lla d o r e s d e c o n t e n id o só lo d e b e n e n v ia r a p á g in as a lt e rn a t iv as cu a n -

d o o t ra s s o lu c io n es fa llen , p o rq u e la s p á g in as a l t e rn a t iv as s e ac tu a lizan co n m e n o r fr e -

cu en c i a q u e l a s p á g in as p r im ar ia s . U n a p á g in a n o ac tu a l i zad a p u ed e s e r t an f ru s t r an t e

c o m o u n a p á g i n a in a c c e s ib le , p u e s t o q u e e n a m b o s c a s o s la in fo r m a c ió n d e l a p á g in a

or ig ina l no e s tá d is p o n ib le . La g en e rac ió n a u t o m á t ic a d e p á g i n a s a lt e r n a t iv a s p u e d e c o n -

duci r a ac tua l izac iones m á s f r e c u e n t e s , p e r o l o s d e s a r r o l l a d o r e s d e c o n t e n i d o s d e b e n

a s e g u r a r q u e la s p á g in a s g e n e r a d a s s ie m p r e t e n g a n s e n t id o y q u e lo s u s u a rio s p u e d a n

n av e g a r p o r e l s it io s i g u ien d o l o s v í n cu lo s d e la s p á g inas p r im ar ias , las p á g inas a lte rna t i -

v a s o a m b a s . A n t e s d e e n v ia r a u n a p á g in a a lt e rn a t iv a , r eco n s id e re e l d is e ñ o d e la p á g in aoriginal ; hacié n d o la a c c e s ib le e s p r o b a b le q u e m e j o r e p a ra t o d o s lo s u s u a r io s .

PA U TA 1 2 . Pro p o rc i o n e in f o r m a c ió n d e c o n t e x t o y o rie n t a c ió n

P r o p o r c i o n e i n f o r m a c i ó n d e c o n t e x t o y o r i e n t a t i v a p a r a a y u d a r a l o s u s u a r i o s ae n t e n d e r p á g in a s o e le m e n t o s c o m p le jo s .

A g ru p a r lo s e le m e n t o s y p r o p o r c io n a r in fo r m a c ió n co n t ex tu a l s o b re l a r e l ac ió n e n t re

e le m e n t o s p u e d e s e r ú t il a t o d o s l o s u s u a r io s . Las r e l ac io n es co m p le ja s e n t r e la s p a r t e s

d e u n a p á g i n a p u e d e n r e s u lt a r d i f  í c ile s d e in t e r p r e t a r p a r a p e rs o n a s c o n d is c a p a c id a d e s

cogn i t ivas o v i sua les .

Pu n t o s d e ve rif ic a c ió n :1 2 . 1 T i t u l e c a d a m a r c o p a r a f a c i l i t a r l a i d e n t i f i c a c i ó n y n a v e g a c i ó n d e l o s m i s m o s

[Prio rida d 1 ] .Por e je m p lo , e n H TM L, u t ilice e l a t r ibu to «title » en lo s e lem en to s FRA M E.

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 2 . 1 :

3 .2 – Tex to s e q u iv a len t e s , p á g i n a 7 5 .

4 . 1 0 . 1 – Titu le lo s m arco s p ara f  á cil o rie nta ció n , p á g in a 1 1 6 .

1 2 . 2 D es c r ib a e l p ro p ó s it o d e lo s m a r c o s y có m o é s t o s s e r e la c io n a n e n t r e s í , s i no resu lta

o b v io s o l a m e n t e c o n e l t í t u lo d e l m arco [P rio r id ad 2 ] .

Por e je m p lo , e n H TM L, u t i lice «l o n g d e s c» o u n v í  nculo desc r ip t ivo  .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 2 . 2 :

3 .2 – Tex to s e q u iv a len t e s , p á g i n a 7 5 .

4 . 1 0 . 2 – Te x to s eq u iv a len t e s p a ra m arco s , p á g in a 1 1 7 .

• Pautas •

Page 54: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 54/164

56

1 2 . 3 D iv id a l o s b lo q u es l a rg o s d e i n fo rm ac ió n e n g r u p o s m á s m a n e ja b le s c u a n d o s e a

natu ra l y aprop iado [Pr io r idad 2 ] .

Po r e je m p lo , e n H TM L, u t ilic e O PTG RO U P p a ra ag ru p a r lo s e le m en to s O PTIO N d e n t rod e un SELECT; ag rup e co ntro le s d e fo rm ulario co n FIELDSET y LEGEND; u t ilice lis tad o s

a n id a d o s c u a n d o s e a a p r o p i a d o ; u t ilic e e n c a b e z a m ie n t o s p a r a e s t ru c t u ra r d o c u m e n t o s ,

e t c . Co n s u lt a r t am b ié n la p a u t a 3 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 2 . 3 :

4 . 1 . 4 – A g r u p a c ió n e s t ruc tu ra l, p á g i n a 8 8 .

1 2 . 4 A s o c ie e x p lí c it am e n te la s e t iq u e t a s co n s u s co n t ro le s [Pr io r id ad 2 ] .

Por e je m p lo , en HTM L, ut i lice LABEL y su a tr ibu to «fo r».

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 2 . 4 :4 . 1 1 . 3 – Et iq u e t e e x p lí c it am en te l o s co n t ro le s d e l fo rm u la r io , p á g in a 1 2 2 .

PA U TA 1 3 . Pro p o rc i o n e m e c a n i s m o s c l a ro s d e n a v e g a c i ó n

Pro p o r c io n e m e c a n i s m o s d e n a ve g a c ió n c l aro s y c o h e re n te s , (in f o rm a c ió n o rie n -t a t i v a , b a r r a s d e n a v e g a c i ó n , u n m a p a d e l s i t i o , e t c . ) p a r a i n c r e m e n t a r l a p r o b a b i l i -d a d d e q u e u n a p e rs o n a e n c u e n tre l o q u e e s t á b u s c a n d o e n u n s itio .

Lo s m e c a n is m o s d e n a v e g a c i  ó n  c la r o s y c o h e r e n t e s s o n im p o rt a n t e s p a r a la s p e rs o n a s

co n d is cap ac id ad co g n it iv a o ce g u e ra y b e n e fic ian a t o d o s lo s u s u a r io s .

Pu n t o s d e v e rif ic a c ió n :1 3 . 1 Id en t ifiq u e c la ram en te e l o b je t iv o d e cad a v í ncu lo [Prio r id ad 2 ] .

El t e x t o d e l v  í  nculo   t i en e q u e t en e r s i g n i f i cad o s u f i c i en t e cu an d o s ea l e í d o f u e r a d e

c o n t e x t o (p o r sí m is m o o c o m o p a rt e d e u n a s e cu e n c ia d e v í ncu los ). Tam bié n d e b e s e r

co n c i s o .

Por e je m p lo , e n HTM L, escr iba «in fo rm ac ió n s o b re la v e r s ió n 4 . 3 » e n lu g a r d e «p in ch a

a q u í». A d e m á s d e t e x t o s d e l v í n c u l o c l a r o s , l o s d e s a r r o l l a d o r e s d e c o n t e n i d o s d e b e n

clari f icar el objet ivo de un v í n c u lo c o n u n t í t u lo in fo r m a t iv o d e l m is m o (p o r e je m p l o , e n

HTM L, e l at r ibu to «title »).

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 3 . 1 :

4 .6 – Ví ncu los , p á g in a 1 0 2 .

1 3 . 2 P r o p o r c i o n e m e t a d a t o s p a r a a ñ ad ir in fo rm ació n s e m á nt ica a l as p á ginas y s i t ios

[Prio rid ad 2 ] .

Po r e jem p lo , u s e RD F ([RD F]) p a ra in d ica r e l au to r d e lo s d o cu m e n to s , e l t ip o d e co n t e -n id o , e t c .

• Pautas •

Page 55: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 55/164

57

N o t a : A l g u n a s a p lic a c ion e s d e u sua r io  d e H TM L p u e d e n c o n s t r u ir h e rra m ie n t a s d e n a -

v e g a c ió n a p a r t i r d e l a s r e l a c i o n e s e n t r e d o c u m e n t o s d e s c r i t a s e n e l e l e m e n t o H T M L

LINK y los atr ibutos «re l» o «re v» (p o r e jem p lo r e l= s ig u ien t e ; r e l= an t e r io r ; r e l= í n d i c e ,e t c . ). Co n s u l ta r t am b ié n e l p u n to d e v e r ificac ió n 1 3 . 5 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 3 . 2 :

3 .5 – N a v e g a c ió n , p á g in a 7 8 .

4 . 1 . 1 – M e t a d a t o s , p á g i n a 8 6 .

4 . 1 . 3 – M e t a d a t o s d e v í n c u lo s y h e r ra m ie n t a s d e n a v e g a c ió n , p á g in a 8 8 .

1 3 . 3 P r o p o r c io n e in fo r m a c ió n s o b r e l a m a q u e t a c ió n g e n e r a l d e u n s i t i o ( p o r e j e m p l o ,

m ap a d e l s it io o t ab la d e co n t en id o s ) [P rio r id ad 2 ] .

En la de scr ip c ió n d e la m a q u e t a ció n d e l s it io , d e s t aq u e y ex p liq u e la s ca rac t e rí s t icas d eacces ib i l idad d i spon ib les .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 3 . 3 :

3 .5 – N a v e g a c ió n , p á g in a 7 8 .

1 3 . 4 U t ilic e lo s m e c a n is m o s d e n a v e g a c ió n d e fo rm a co h e ren t e [P rio r id ad 2 ].

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 3 . 4 :

3 .5 – N a v e g a c ió n , p á g in a 7 8 .

1 3 . 5 P r o p o r c i o n e b a r r a s d e n a v e g a c ió n p a r a d e s t a c a r y d a r a c c e s o a l m e c a n i s m o d e

n a v e g a c ió n [Prioridad 3] .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 3 . 5 :

3 .5 – N a v e g a c ió n , p á g in a 7 8 .

1 3 . 6 A g r u p e l o s v í n cu lo s r e l ac io n ad o s , i d en t i f i q u e e l g ru p o (p a ra l a s ap l i cac io n es d e

usu ar io ) y , ha s t a q ue la s a p lic a c ion e s d e u sua r io  lo h a g a n , p r o p o r c io n e u n a m a n e r a d e

e v ita r e l g rup o [Prio r id ad 3 ] .

Té cn ica p a ra e l p u n to d e v e r ificac ió n 1 3 . 6 :

4 .6 – Ví ncu los , p á g in a 1 0 2 .

1 3 . 7 S i p r o p o r c io n a fu n c io n e s d e b ú s q u e d a , p e r m it a d ife r e n t e s t ip o s d e b ú s q u e d a s p a r a

d iversos n ive les de hab i l idad y p referenc ias [Pr io r idad 3 ] .

Té cn icas p a ra p u n to d e v e rificac ió n 1 3 . 7 :

3 .5 – N a v e g a c ió n , p á g in a 7 8 .

1 3 . 8 Co lo q u e l a i n fo rm ac ió n d e s t a c a d a a l p r i n c i p i o d e l o s e n c a b e z a m i e n t o s , p á rrafos,

lis ta s , e tc . [Prio rid ad 3 ] .

• Pautas •

Page 56: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 56/164

58

N o t a : Es to e s co m ú n m e n te d e n o m in a d o «f ron t - load ing » (co lo ca r a l fr en t e ) y e s e s p e -

c i a lm en te ú t i l p a ra l o s q u e acced en a l a i n fo rm ac ió n co n d i s p o s i t i v o s s e r i a l e s co m o u n

s in t e t i zad o r d e v o z .Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 3 . 8 :

3 .6 – C o m p r e n s ió n , p á g in a 7 9 .

1 3 . 9 P r o p o r c io n e in fo r m a c ió n s o b r e l a s c o l e c c i o n e s d e d o c u m e n t o s ( p o r e j e m p l o , l o s

d o c u m e n t o s q u e c o m p re n d a n m ú lt ip le s p á ginas) [Prioridad 3] .

P o r e je m p l o , e n H TM L , e s p e c ifiq u e la s c o le c c io n e s d e d o c u m e n t o s c o n e l e le m e n t o

LINK y los atr ibu to s «re l» y «re v». O t r o m o d o d e c r e a r u n a c o le c c ió n e s c o n s tru y e n d o u n

a rch iv o (p o r e jem p lo co n z ip , t a r an d g z ip , s t u ffit , e t c . . ) d e la s p á g in as m ú l t ip les .

N o t a : La m e jo r a e n la p r e s e n t a c ió n o b t e n id a p o r u n p r o c e s a m ie n t o fu e r a d e lí ne a (offli-n e ) p u e d e h a c e r la n a v e g a c ió n m u c h o m e n o s c a ra a la s p e rs o n a s c o n d is c a p a c id a d q u e

p u e d a n e s t a r n a v e g a n d o le n t a m e n t e .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 3 . 9 :

3 . 1 0 – D o cu m e n t o s e m p a q u e t a d o s , p á g in a 8 3 .

1 3 . 1 0 P ro p o rc io n e u n m ed io p a ra s a lt a r s o b re u n A SCII a r t d e v a r ia s lí ne as [Prio r id ad 3 ] .

Consu l ta r pun to de ver i f icac ió n 1 . 1 y e l e je m p lo d e A SCII a r t en e l g los a r io  .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 3 . 1 0 :

3 .2 – Tex to s e q u iv a len t e s , p á g in a 7 5 .

4 . 7 . 3 – ASCII art, p á g in a 1 0 7 .

PA U TA 1 4 . A s e g u re q u e lo s d o c u m e n to s s e a n c la ro s y s im p le s

A s e g u re q u e lo s d o c u m e n t o s s o n c la ro s y s im p le s p a ra q u e p u e d a n s e r m á s fá c il-m e n te c o m p re n d i d o s .

L a m a q u e t a c ió n d e p á g i n a s c o h e r e n t e s , g rá f i co s r eco n o c ib l e s y l en g u a j e f  á c ilm en te

co m p ren s ib le b e n e fic ia a t o d o s l o s u s u a r io s . En p a r t icu la r, ay u d a a p e r s o n as co n d is cap a -

c id ad es co g n it iv as o co n d ificu lt ad es en la le c tu ra . (Po r t an to , a s e g u re q u e la s im á g e n e s

t ien en t ex to s eq u iv a len t e s p a ra lo s c ieg o s , lo s d e b a ja v is ió n o p a ra cu a lq u ie r u s u a r io q u e

n o p u e d e o h a e le g id o n o v e r lo s g rá fico s . Co n s u lt e t am b ié n la p au t a 1 ).

La util izació n d e u n l e n g u a j e c l a r o y s i m p l e p r o m u e v e u n a c o m u n i c a c ió n efect iva. El

acce s o a l a in fo rm ac ió n e s c rit a p u e d e s e r d if  í c il p a r a p e r s o n a s c o n d i sc a p a c id a d e s c o g n i-

t ivas o d e a p ren d iza je . La u t i lizac ió n d e u n le n g u a je c la r o y s im p l e t a m b ié n b e ne fic ia a las

p e r s o n as cu y o p r im er i d io m a e s d i f e ren t e a l d e l d i s e ñ ad o r , i n c lu id o s aq u e l l o s q u e s e

c o m u n ic a n p r in c ip a l m e n t e m e d ia n t e le n g u a d e s ig n o s .

• Pautas •

Page 57: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 57/164

59

Pu n t o s d e ve rif ic a c ió n :1 4 . 1 U tilic e e l le n g u a je a p ro p ia d o m á s c l a ro y s i m p l e p a ra e l c o n t e n i d o d e u n s itio

[Prio rida d 1 ] .Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 4 . 1 :

3 .6 – C o m p r e n s ió n , p á g in a 7 9 .

1 4 . 2 C o m p le m e n t e e l t e x t o c o n p r e s e n t a c io n e s g rá ficas o a ud it ivas cu an d o e llo facilite la

c o m p r e n s ió n d e la p á g ina [Prio r id ad 3 ] .

Co n s u lt a r t am b ié n la p a u t a 1 .

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 4 . 2 :

3 .6 – C o m p r e n s ió n , p á g in a 7 9 .

1 4 . 3 Cr e e u n e s t ilo d e p r e s e n t a c ió n q u e s e a c o h e r e n t e p a r a t o d a s la s p á g ina s [Prio rid ad

3 ].

Té cn icas p a ra e l p u n to d e v e r ificac ió n 1 4 . 3 :

3 .5 – N a v e g a c ió n , p á g in a 7 8 .

• Pautas •

Page 58: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 58/164

60

A PEND ICE A : Val id ac ió n

Va lid e la a c c e s i b i lid a d c o n h e rra m ie n t a s a u t o m á tic a s y re v is i ó n h u m a n a . Lo s m é -to d o s a u to m á tic o s s o n g e n e ra lm e n te rá p i d o s y o p o rtu n o s , p e ro p u e d e n n o i d e n tifi-c a r to d o s lo s p ro b le m a s d e a c c e s i b ilid a d . La re vis i ó n h u m a n a p u e d e a yu d a r a a s e -g u ra r la c la rid a d d e l le n g u a je y f a c ili d a d d e n a v e g a c ió n .

Com ie nce a u t ilizar m é t o d o s d e v a lid a c ió n d e s d e lo s p rim e r o s e s t a d io s d e l d e s a r r o llo .

Lo s p r o b le m a s d e a c c e s ib ilid a d id e n t ific a d o s d e fo r m a t e m p r a n a s o n m á s f á c ile s d e co -

rreg ir y ev itar .

A co n t i n u ac ió n s e e x p o n e n a l g u n o s i m p o r t a n t e s m é t o d o s d e v a l i d a c ió n , e x p u e s t o s

c o n m á s d e t a l le e n la s e cc ió n d e v a l id ac ió n d e l D o cu m e n t o d e Té cn icas .

1 . U t ilic e u n a h e r ra m ie n t a d e a c c e s ib ilid a d a u t o m á t ic a y u n a h e r ram ien t a d e v a lid ac ió n

d e l n a v e g a d o r. Po r fa v o r, c o m p r u e b e q u e e l so ft w a r e d e la s h e rra m ie n t a s t r a ta t o d o s

lo s p ro b l em as d e acces ib ilid ad , co m o la s ig n ificac ió n d e l te x t o d e l v í ncu lo , la ap licab i-

lid a d d e u n t e x t o e q u iv a le n t e  , e t c .

2 . Val id e la s in tax is (p . e j . HTM L, XM L, e tc . ) .

3 . Va lid e la s h o ja s d e e s t i lo (p . e j . CSS).

4 . U tilic e u n n a v e g a d o r só lo - t e x t o o u n e m u la d o r.

5 . U tilic e v a rio s n a v e g a d o r e s g rá ficos con :

• S o n id o s y g rá fico s ca rg ad o s .

• Grá fico s n o ca rg ad o s .

• S o n id o s n o c a rg a d o s .

• Sin rató n .

• M arco s , s c rip t s , h o ja s d e e s t i lo y ap p le t s n o ca rg ad o s .

6 . U t ilic e v a r io s n a v e g a d o r e s , v ie j o s y n u e v o s .

7 . U t ilic e u n n a v e g a d o r p o r v o z , u n le c t o r d e p a n t a lla s , u n s o ft w a r e d e m a g n ific a c ió n , u n

v is o r p e q u e ñ o , e t c .

8 . U t ilic e v e rific a d o r e s d e o r t o g r a f  í a y g ram á t ica . Q uien lea la p á g in a co n u n s in t e t izad o r

d e v o z p u e d e n o s e r ca p a z d e d e s c ifra r lo q u e r e p r o d u c e e l s in t e t iz a d o r p o r u n e rr o r

o r t o g rá f i co . E l im in an d o p ro b l em as g ram a t i ca l e s s e i n c rem en ta l a co m p ren s ió n .

9 . Re v is e e l d o c u m e n t o p a r a o b t e n e r c la r id a d y s im p l ic id a d . La s e s t a d í s t icas de legibi l i -

d a d , ta le s c o m o la s g e n e ra d a s p o r a lg u n o s p r o c e s a d o r e s d e t e x t o s, p u e d e n s e r ú t i les

in d icad o re s d e c la r id ad y s im p lic id ad . M e jo r a ú n , p i d a a u n e x p e r i m e n t a d o e d i t o r

(h u m a n o ) q u e r e v is e l a c la rid a d d e l t e x t o e s c rit o . Lo s e d i to r e s p u e d e n t a m b ié n i n c re -

m e n ta r la u t ilid ad d e u n t ex to id en t ifican d o p o t e n c ia le s p ro b lem as in t e rcu lt u ra le s q u e

p u e d e n s u r g ir a c a u s a d e l le n g u a je o lo s ic o n o s u s a d o s .

1 0 . In v it e a p e r s o n as co n d is cap ac id ad a r ev is a r lo s d o cu m en to s . U su a r io s d is cap ac it ad o s

e x p e r t o s y n o v e l e s p r o p o r c i o n a rá n u n a r e t r o a lim e n t a c ió n va l ios a so bre la acce s ib i li-

d a d o lo s p r o b le m a s d e u s o y s u g r av e d a d .

• Pautas • Val idación •

Page 59: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 59/164

61

A PEND ICE B. Glo s a rio

A c c e s i b l e .El c o n t e n id o e s a c c e s ib le c u a n d o p u e d e s e r u s a d o p o r a lg u ie n c o n d is c a p a c id a d .

A p lic a c i ó n d e u s u a rio .P ro g ra m a s (s o ft w a r e ) p a r a a c c e d e r a l c o n t e n id o d e la W e b , in c lu y e n d o l o s n a v e g a d o r e s

g rá fic o s d e s o b r e m e s a , lo s n a v e g a d o r e s d e t e x t o , lo s n a v e g a d o r e s d e v o z , lo s t e lé fo n o s

m ó v ile s , lo s ap a ra to s m u lt im e d ia , lo s “p lu g - in s” y a lg u n o s p r o g r a m a s (s o ft w a r e ) d e a y u -

d a s té c n ic a s u t iliz a d o s c o n ju n t a m e n t e c o n n a v e g a d o r e s , t a le s c o m o le c t o r e s d e p a n t a lla ,

m a g n ific a d o r e s d e p a n t a lla s o p r o g ra m a s (s o ft w a r e ) d e r e c o n o c im ie n t o d e v o z .

A p p l e t .U n p r o g r a m a in s e rt a d o e n u n a p á g in a W e b .

A SCII a rt.Se r e fie re a lo s ca rac t e re s d e t ex to y s í m b o lo s q u e s e c o m b in a n p a r a c re a r u n a im a g e n .

P o r e je m p l o , «;- )» e s e l “e m o t i có n ” d e s o n r is a c o n g u iñ o . A co n t i n u ac ió n p o d e m o s v e r

un a fig ura ASCII q ue m ue s t ra la re lac ió n en t r e l a f r ecu en c i a d e d es t e l l o y l a r e s p u es t a

fo to co n v u ls iv a e n p ac ien t e s co n lo s o jo s ab ie r t o s y ce r rad o s .

• Pautas • G losar io •

Page 60: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 60/164

62

A s i s t e n t e D i g it a l Pe rs o n a l (PD A ) .Es u n p e q u e ñ o d is p o s i tiv o d e in fo rm á t ica p or tá t il. La m ayo rí a d e l o s PD A s e u s a n p a r a

ra s t re a r d a t o s p e r s o n a le s c o m o a g e n d a s , co n t a c t o s y c o rr e o s e l e c t ró n ic o s . G e n e r a lm e n t ee s u n in s tru m e n t o d e m a n o c o n u n a p e q u e ñ a p a n t a lla q u e p e r m it e la e n t r a d a d e d a t o s

d e s d e v a rio s o r í g e n e s .

A tra vé s d e d i s p o s i tivo s in d e p e n d i e n t e s .L o s u s u a r io s d eb en p o d e r i n t e rac tu a r co n u n a ap l i cac ió n d e u s u a rio ( y e l d o c u m e n t o

q u e e l la m u e s t ra ) u t iliz an d o l o s d i s p o s it iv o s d e e n t r ad a y s a l id a d e s u e l ecc ió n y a c o rd e s

a s u s n e ces id ad es . Lo s d is p o s it iv o s d e e n t r ad a p u e d en in c lu ir d is p o s it iv o s p a ra ap u n t a r,

t ec l ad o s , d is p o s it iv o s b ra ille , p u n t e ro s d e ca b e za , m ic ró fo n o s y o t ro s . Lo s d is p o s i tiv o s d e

sa l id a p ue d e n inc lu ir m on ito re s , s in te t izad ore s de vo z y d isp o s it ivo s b ra ille . Por favo r,t e n g a e n c u e n t a q u e e l «s o p o r t e in d e p e n d ie n t e d e l d is p o s it iv o » no s ig n i fica q ue las a p li-

c a c io n e s d e u s u a r io t e n g a n q u e s o p o r t a r t o d o s lo s d is p o s it iv o s d e e n t ra d a y s a lid a . La s

a p lic a c io n e s d e u s u a r io d e b e n o fr e c e r m e c a n is m o s d e e n t ra d a y s a lid a r e d u n d a n t e s p a r a

aq u e llo s d is p o s i tiv o s q u e s o n s o p o r t ad o s . Po r e jem p lo , s i u n a ap licac ió n d e u s u a rio s o -

p o rt a la e n t ra d a m e d ia n t e t e c la d o y ra tó n , lo s u s u a r io s d e b e n p o d e r in t e r a c tu a r c o n t o d a

la p r e s e n t a c ió n u t iliz an d o e l t e c lad o o e l ra tó n .

A y u d a t é c n i c a .P ro g ra m a s (s o ft w a r e ) y a p a r a to s (h a r d w a r e ) q u e h a n s id o e s p e c í f i cam en te d i s e ñ a d o s

p a ra a y u d a r a p e rs o n a s c o n d i sc a p a c id a d e n e l d e s e n v o lv im ie n t o d e la s a c t iv id a d e s d i a -

r ias . Las ayudas t é cn icas inc luyen s i l l as de ruedas , m á q u in as lec to ra s , d is p o s i tiv o s p a ra

as i rse , e tc . En e l á r ea d e la A cce s ib ilid ad a la We b , la s ay u d as té cn icas h ab it u a le s b as ad as

en e l s o f tw are i n c lu y en l ec to re s y m ag n i f i cad o res d e p an t a l l a , s i n t e t i zad o res d e v o z y

p r o g r a m a s d e e n t r a d a d e v o z q u e o p e r a n j u n t o c o n n a v e g a d o r e s g rá f icos (en t re o t ras

a p lic a c ion e s d e u sua r io  ). Las ayu d as t é cn icas d e l h a rd w are in c lu y e n t ec l ad o s a lt e rn a t iv o s

y d is p o s it iv o s ap u n t ad o re s a lt e rn a t iv o s .

Brai l le .U t iliza s e is p u n to s en r e lie v e en d ife re n t e s p o s i cio n es p a ra r ep re s e n t a r le t r a s y n ú m e r o s

q u e lo s c ie g o s le e n c o n lo s d e d o s . La p a la b r a «acces ib le » e n b ra ille e s :

• Pautas • G losar io •

Page 61: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 61/164

63

Un d isp os it ivo b ra ille , co m ú n m e n t e lla m a d o “d isp os it ivo d in á m ico brai lle ” , e le v a o b a j a

la s p a u t a s d e p u n t o s s e g ú n la o r d e n d e u n d is p o s it iv o e le c t ró n ic o , n o rm a lm e n t e u n o r d e -

n ad o r. El r e s u l t ad o e s u n a lí ne a d e b ra ille q ue cam bia a in te rva lo s . Lo s d i spo s it ivo s b ra illed in á m ic o s p r e s e n t a n la h ile r a e n t a m a ñ o q u e a b a rc a d e s d e lí n e a s d e u n a c e l d a (s e is u

o c h o p u n t o s ) h a s t a u n a lí n e a d e 8 0 c e ld a s , a u n q u e la m a y o rí a t ie n e e n t r e 1 2 y 2 0 c e ld a s

p o r lí n e a .

C o m p a t ib i l id a d re t ro a c t i va .Dise ñ o s q u e c o n t in ú a n fu n c io n a n d o c o n v e rs io n e s a n t e r io r e s d e u n le n g u a je , p r o g r a -

m a , e t c .

C o n t e n i d o , e s tru c t u ra y p re s e n ta c ió n d e l d o c u m e n to .El c o n t e n id o d e u n d o c u m e n t o s e r e fie r e a lo q u e le d i ce a l u s u a r io a t ra v é s d e l id i o m a ,

las im á g e n e s , lo s s o n id o s , lo s v í d e o s , la s a n im a c io n e s , .. . La e s t ru c t u ra d e u n d o c u m e n t o

e s có m o s e o r g a n iz a ló g i ca m e n t e ( p . e j. e n c a p í t u lo s , co n u n a in t ro d u cc ió n y u n a t a b la d e

co n t e n id o s , e t c . ). U n e l e m e n t o  (p . e j. en HTM L los e le m e nto s P, STRO NG, BLO CKQ UO -

TE) q u e e s p ec i fica la e s t ru c tu ra d e u n d o cu m en to e s llam ad o u n e lem en to e s t ru c tu ra l. La

p r e s e n t a c ió n d e u n d o c u m e n t o s e r e f i e r e a c ó m o é s t e e s r e p r e s e n t a d o ( p . e j . c o m o

d i b u jo , c o m o u n a p r e s e n t a c ió n g rá fica b id im e n s io n a l, co m o u n a p re s e n t ac ió n só lo t e x to ,

co m o u n a v o z s in t e t izad a , co m o b ra ille , e t c . ). U n e l e m e n t o  q u e e s p ec i fica la p re s en t ac ió n

d e u n d o cu m en to (p . e j. B, FO N T, CEN TER) e s l lam ad o e lem e n to d e p re s e n t ac ió n . Con s i-

d e r e m o s , p o r e je m p lo , e l e n c a b e z a m ie n t o d e u n d o c u m e n t o . El c o n t e n id o d e é s t e e s lo

q u e e l e n c a b e z a m ie n t o d ic e (p . e j . “Veleros”). En H TM L, e l en cab e zam ien to e s u n e le -

m e n t o e s t ru c t u ra l m a r c a d o , p o r e je m p l o , c o n u n e le m e n t o H 2 . Fin a lm e n t e , la p r e s e n t a -

c ió n d e u n e n c a b e za m ie n t o p u e d e s e r u n b lo q u e d e t e x to e n m a yú scu las ne g r itas a l ine a-

d o a l m a rg e n , u n a lí n e a d e t e x t o c e n t ra d a , u n t í t u lo d ic h o c o n c ie r t o t o n o d e v o z (c o m o

u n a fu e n t e au d it iv a ) , e t c .

D e s a r r o l l a d o r e s d e c o n t e n i d o s .Cu a lq u ie r au to r d e p á g in as o d is e ñ a d o r d e s it io s W e b .

D e s a c o n s e j a d o .U n e le m e n t o o a t rib u t o d e s a c o n se ja d o e s a q u e l q u e h a q u e d a d o a n t ic u a d o p o r la a p a -

rició n d e n u e v a s c o n s t ru c c io n e s . Lo s e le m e n t o s d e s a c o n s e ja d o s p u e d e n q u e d a r o b s o le -

tos en fu tu ras vers iones de HTML. E l í n d i c e d e e l e m e n t o s y a t r i b u t o s d e H T M L e n e l

D o cu m e n t o d e Té cn icas ind ica cu á le s s o n lo s e le m e n t o s y a t rib u t o s d e s a c o n s e ja d o s e n

H TM L 4 . 0 . Lo s a u t o r e s d e b e n e v it a r e l u s o d e e le m e n t o s y a t rib u t o s d e s a c o n s e ja d o s . La s

a p l ic a c io n e s d e u s u a r io d e b e n c o n t in u a r s o p o r tá n d o lo s p o r ra z o n e s d e c o m p a t ib ilid a dre t ro ac t i v a .

• Pautas • G losar io •

Page 62: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 62/164

64

E l e m e n t o .E s te d o cu m en to u t i l i z a e l t é r m i n o “e l e m e n t o ” t a n t o e n e l e s t r i c t o s e n t i d o q u e l e d a

S GM L (u n e le m e n t o e s u n a c o n s t ru c c ió n s in tá c t ica ) co m o , m á s h ab i t u a lm en te , p a ra s ig n i-fic a r u n t ip o d e c o n t e n id o (c o m o u n v í d e o o s o n i d o ) o u n a c o n s t ru c c ió n ló g i ca (c o m o u n

e n c a b e z a d o o u n a lis t a ). El s e g u n d o s e n t id o e n fa t iz a q u e u n a p a u t a in s p i ra d a e n H TM L

p u e d e a p lic a rs e f  á c ilm e n t e a o t r o le n g u a je d e m a r ca d o .

Te n g a e n c u e n t a q u e a l g u n o s e le m e n t o s (S GM L ) t ie n e n c o n t e n id o q u e e s m o s t ra d o (p .

e j . lo s e l em en to s P, LI o TA BLE en H TM L), a lg u n o s s o n r e m p lazad o s p o r u n co n t en id o

e x te rno (p . e j. IM G) y a lg un os a fe c tan a l p ro ce sam ie n to (p . e j. STYLE y SCRIPT g e ne ran

in fo rm ac ió n p a r a q u e s e a p r o c e s a d a p o r l a s h o j a s d e e s t i l o o e l m o t o r i n t é r p r e t e d e

g u io n e s (‘s c r i p t en g in e ’) . U n e l e m e n t o q u e g e n e r a c a r a c t e r e s d e t e x t o p a r a q u e s e a n

p a r te d e l d o c u m e n t o e s lla m a d o e le m e n t o t e x t u a l.

E q u i v a l e n t e .U n c o n t e n id o e s “eq u iv a l en t e ” a o t ro c u a n d o a m b o s c u m p le n e s e n c ia lm e n t e la m is m a

funció n o p r o p ó s it o e n c u a n t o a la p r e s e n t a c ió n a l u s u a rio . En e l c o n t e x t o d e e s t e d o c u -

m e n t o , e l e q u iv a le n t e d e b e c u m p l ir e s e n c ia lm e n t e la m is m a fu n c ió n p a ra la p e r s o n a c o n

d i sc a p a c id a d (a l m e n o s e n la m e d id a e n q u e s e a p o s ib le , d a d a la n a t u r a le z a d e la d is c a -

p a c id a d y e l e s t a d o d e d e s a rr o llo d e l a te c n o lo g í a ) co m o lo h a c e e l c o n t e n id o p r im a rio

p a ra p e r s o n a s s in n in g u n a d i sc a p a c id a d . P o r e j e m p l o , e l t e x t o “Lun a lle na ” d e b e t ra n s m i-

t ir la m ism a in fo r m ació n q u e u n a im a g e n d e la lu n a lle n a c u a n d o s e p r e s e n t a a l u s u a r io .

Te n g a e n c u e n t a q u e la in fo r m a c ió n e q u iv a le n t e s e c e n t ra e n c u m p l ir l a m i s m a f u n c i ó n .

S i la im a g e n e s p a rt e d e u n v í n c u lo y la c o m p r e n s ió n d e l a im a g e n e s c ru c ia l p a r a c o n o c e r

e l o b j e t iv o d e l v í n c u lo , u n e q u iv a le n t e t a m b ié n d eb e d a r a l u s u a r io u n a id ea d e la fin a l i-

d a d d e l v í n cu lo . P ro p o rc io n a r in fo rm ac ió n e q u iv a le n t e d e lo s c o n t e n i d o s i n a c ce s ib le s e s

u n a d e l a s m a n e ra s p r in c ip a le s c o n la s q u e e l a u t o r p u e d e h a c e r a c c e s ib le s s u s d o c u m e n -

t o s a la s p e r s o n a s c o n d i sc a p a c id a d .

C o m o p a r t e d e l c u m p l i m i e n t o d e l a m i s m a f u n c ió n q u e e l c o n t e n i d o , u n e q u iv a le n t e

d e b e im p l ic a r u n a d e s c r ip c ió n d e l o q u e c o n t ie n e ( p . e j. có m o s e v e e l c o n t e n id o o c ó m o

s e o y e ). Po r e je m p l o , p a ra q u e u n u s u a r io c o m p r e n d a la in fo r m a c ió n t ran s m it id a p o r u n

g rá fico co m p le jo , lo s a u to re s d eb en d es c r ib ir la in fo rm ac ió n v i s u a l q u e a p a r e c e e n e l

g rá fico.

Ya q u e u n c o n t e n id o t e x t u a l p u e d e s e r p r e s e n t a d o a l u s u a r io a t ra vé s d e u n s in t e t iz a d o r

d e v o z , b ra ille o u n t e x t o m o s t ra d o v is u a lm e n t e , e s t a s p a u t a s re q u ie r e n e q u iv a le n t e s e n

fo rm a to t ex to p a ra l a i n fo rm ac ió n g rá fic a y s o n o r a . Lo s t e x t o s e q u iv a le n t e s d e b e n s e r

e s c r it o s d e m a n e ra q u e t ra n s m it a n t o d o e l c o n t e n id o e s e n c ia l. Lo s e q u i va le n te s n o te x -t u a l e s (p . e j . u n a d es c r ip c ió n a u d it iv a d e u n a p r e s e n t a c ió n v i sua l ; un v í d e o d e u n a p e rs o -

n a c o n t a n d o u n a h is t o ria u t iliz a n d o e l le n g u a je d e s ig n o s c o m o u n e q u iv a le n t e p a ra la

• Pautas • G losar io •

Page 63: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 63/164

65

his to r ia e scr it a , e tc . ) t am bié n m e j o ra n la a c c e s ib ilid a d p a r a p e rs o n a s q u e n o p u e d e n a c c e -

d e r a l a in fo rm ac ió n v is u a l o a l t ex to e s c r it o , in c lu y en d o m u ch o s in d iv id u o s c ie g o s , co n

d iscap ac id ad es co g n it ivas o d e ap ren d iza je y los so rd os . La in fo rm ació n e q u iv a le n t e p u e d eo fr e c e r s e d e m u y d iv e r s a s m a n e ra s , in c lu s o a t r a vé s d e a t r ib u to s (p . e j. u n v a lo r d e t ex to

para e l a t r ibu to “a lt” e n H TM L y SM L ), c o m o p a rt e d e l c o n t e n id o d e l e le m e n t o (p . e j.

O BJECT en H TM L), co m o p a r t e d e la p ro s a d e l d o cu m en to o a t ravé s d e u n v í n cu lo e n la -

zad o (p . e j . u t ilizan d o e l a t r ibu to “l o n g d e s c” en H TM L o co n u n en lace d e s c rip t iv o ) . D e -

p e n d i e n d o d e l a c o m p l e j i d a d d e l e q u i v a l e n t e , p u e d e s e r n e c e s a r i a l a c o m b i n a c ió n d e

té cnicas (p . e j. u t ilice “a lt” p a ra u n e q u iv a le n t e a b r e v ia d o , ú t il p ara los le cto re s fam iliari-

z a d o s , ju n t o c o n “ l o n g d e s c” c om o v í n cu lo p a ra u n a i n fo rm ac ió n m á s c o m p le t a , ú t i l p ara

los l ec to re s p r im e r izos ). El d e ta l le d e c ó m o y cu á n d o p r o p o r c io n a r in fo r m a c ió n e q u iv a -

le n t e e s p a rt e d e l D o c u m e n t o d e Té cn icas ([TECH N IQ UES]).Un a t r a s c r i p c i ó n d e t e x t o e s u n t e x t o e q u i v a l e n t e d e u n a i n f o r m a c ió n s o n o r a q u e

in c lu y e p a la b r a s h a b la d a s y s o n i d o s n o h a b la d o s , c o m o lo s e fe c t o s d e s o n id o . U n s u b t í -tu lo (cap t ion) es una t rascr ipc ió n e n t e x t o d e la b a n d a s o n o ra d e u n a p r e s e n t a c ió n d e

v í d e o q u e e s tá s in c ro n izad a co n l a s b an d as v is u a l y s o n o ra . Lo s s u b t í t u lo s g e n e ra lm e n t e

s e p r e s e n t a n s o b re im p r e s o s e n e l v í d eo , l o cu a l b en e f i c i a a l a s p e r s o n as s o rd as o co n

d e fic ien c ia s au d it iv as y a aq u e llo s q u e n o p u e d an o í r la p a rt e s o n o r a (p . e j. c u a n d o s e e s táe n u n a h a b it a c ió n ru idosa) . Una t r a s c r i p c i ó n i n t e r c a l a d a d e t e x t o co m b in a (in t e rca la )

s u b t í t u lo s co n d es c r i p c io n es t ex tu a l e s d e l a i n fo rm ac ió n v i s u a l (d es c r ip c io n e s d e la ac -

c ió n , l en g u a j e co rp o ra l , g rá fico s y cam b io s d e e s cen a e n la b an d a v is u a l). Es t e t e x to

e q u i v a l e n t e h a c e a c c e s i b l e l a s p r e s e n t a c i o n e s a p e r s o n a s s o r d o - c i e g a s y a q u i e n e s n o

p u e d e n e je c u t a r la s p e lí cu la s , an im ac io n es , e t c . Tam b ié n h a ce d is p o n ib le l a in fo rm ac ió n a

lo s m o t o r e s d e b ú s q u e d a .

U n e je m p l o d e u n e q u iv a le n t e n o t e x t u a l e s u n a d e s c rip c i ó n s o n o ra d e lo s e le m e n t o s

v is u a le s c la v e d e u n a p r e s e n t a c ió n . La d e scr ip c ió n p u e d e s e r t a n to u n a v o z h u m a n a p r e -

g r a b a d a c o m o u n a v o z s in t e t iz a d a ( g ra b a d a o g e n e r a d a e n e l m o m e n t o ). La s d e s c rip c io -

n e s s o n o ra s e s tá n s in c r o n iz a d a s c o n la b a n d a s o n o ra d e l a p r e s e n t a c ió n , h ab i t u a lm en te

d u ran t e la s p au s as n a tu ra le s en l a m is m a . Las d es c r ip c io n es s o n o ras in c lu y e n in fo rm ac ió n

s o b re acc io n es , len g u a je co rp o ra l, g rá fic o s y c a m b io s d e e s c e n a .

Ha s t a q u e la s a p l ic a c i o n e s d e u s u a rio . . .En la m ay o r í a d e l o s p u n to s d e v e r ificac ió n , a lo s d e s a r ro lla d o r e s d e c o n t e n id o s s e le s

p i d e q u e a s e g u r e n la a c c e s ib ilid a d d e s u s p á g in as y s it io s . D e t o d as m an e ras , h ay n e ces i -

d a d e s d e a c c e s ib ilid a d q u e s e r í a n m á s a p r o p ia d a m e n t e s a t is fe c h a s p o r u n a apl icac i  ó n d e 

usuar io  ( inc luyendo las a y u d a s t  é cnicas  ) . Has ta l a pub l icac ió n d e e s t e d o c u m e n t o , n o

to d as la s ap licac io n es d e u s u a r io o ay u d as té cn icas p ro p o rc io n an e l co n t ro l d e acces ib ili-

d a d q u e e l u s u a r i o r e q u i e r e ( p o r e j e m p l o , a l g u n a s a p l i c a c i o n e s d e u s u a r i o p u e d e n n o

• Pautas • G losar io •

Page 64: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 64/164

66

p e r m it ir a lo s u s u a r io s d e s c o n e c t a r lo s c o n t e n id o s q u e p a rp a d e a n o a l g u n o s l e c t o re s d e

p an t a l la p u e d en n o m an e ja r b ien la s t ab l a s ). Lo s p u n to s d e v e r ificac ió n q u e c o n t ie n e n la

frase “h as t a q u e la s ap licac io n es d e u s u a r io . . .” r e q u ie r e n q u e lo s d e s a r ro lla d o r e s d e c o n -t en id o s p ro p o rc io n en s o p o r t e ad ic io n a l p a ra la acces ib ilid ad h as t a q u e la m ay o r í a d e la s

ap licac io n es d e u s u a r io t e n g an d is p o n ib le s p a ra s u s u s u a r io s l a s n ece s a r ia s ca rac t e rí s t icas

d e acce s ib ilid ad .

N o t a : El s it io e n la W e b d e l W3 C WAI (co nsu lte [WAI-UA-SUPPO RT]) p ro p o rc ion a in fo r-

m a c ió n s o b re la s ca rac t e rí s t ica s d e acce s ib ilid ad q u e s o p o r t an la s ap licac io n es d e u s u a r io .

Lo s d e s a r ro lla d o r e s d e c o n t e n id o s s o n in s t a d o s a c o n s u lt a r e s t a s p á g i n a s r e g u l a r m e n t e

p ara ac tu a lizar la in fo r m ació n .

He rra m i e n t a s d e a u t o r.Lo s e d it o re s H TM L, la s h e r ram ien t a s d e co n v e r s ió n d e d o c u m e n t o s , la s q u e g e n e ra n

c o n t e n id o s W e b d e s d e b a s e s d e d a t o s , s o n t o d a s h e r ra m ie n t a s d e a u t o r. Pa ra d is p o n e r

d e m á s in fo rm ac ió n s o b r e c ó m o d es a r ro l la r h e r ram ien t a s acce s ib le s , co n s u l te la Pau t a s

d e A cce s ib ilid ad p a ra H e r ram ien t a s d e A u to r ([WA I-A U TO O LS]).

Ho ja s d e e s til o .U n a h o ja d e e s t ilo e s u n co n ju n to d e in s t ru cc io n es q u e e s p ec i fican la p re s e n t ac ió n d e

u n d o c u m e n t o .

Pu e d e n t e n e r tr e s o rí g e n e s d i f e r e n t e s : p u e d e n e s t a r e s c r i t a s p o r l o s p r o v e e d o r e s d e l

co n t en id o , c r ea d as p o r lo s u s u a r io s o co n s t ru id as e n l a s ap l icac io n es d e l u s u a r io . En CSS

([CSS2]), la interacció n e n t r e h o j a s d e e s t i lo d e l co n t en id o , d e l u s u a rio y d e l a ap l icac ió n

d e l u s u a r io d e u n a h o j a d e e s t ilo , s e d e n o m in a c a s c a d a .

M a rc a d o r d e p re s e n ta c ió n : e s u n m a r c a d o r q u e r e a liz a u n e fe c t o d e e s t ilo ( n o

d e e s t ru c t u ra ), c o m o lo s e le m e n t o s B e I e n H TM L . Te n g a e n c u e n t a q u e lo s e le -

m e n t o s “STRO N G” y “EM ” n o s e c o n s id e ra n m a r ca d o re s d e p r e s e n t a ció n p u e s to

q u e t ra n s m it e n i n fo r m a c ió n q u e e s in d e p e n d ie n t e d e u n e s t ilo d e fu e n t e p a rt ic u la r.

HTML dinámico (DHTML).D H TM L e s e n n o m b r e d e m e r c a d o q u e s e a p lic a a la m e z c la d e e s tá n d a r e s q u e in c lu y e

H TM L , h o j a s d e e s t ilo , M o d e lo d e O b je t o d e D o c u m e n t o [D O M 1 ] y le n g u a je g u io n i za d o

(“script ing ”). Sin e m b arg o , n o h ay u n a e s p e c ificac ió n d e W 3 C q u e d e fin a fo r m a lm e n t e e l

DHTM L. La m ayo rí a d e la s p a u t a s p u e d en s e r ap l icab l e s a ap l icac io n e s q u e u s a n D H TM L;

s in e m b a r g o la s s ig u ie n t e s p a u t a s s e c e n t r a n e n p r o b le m a s r e la c io n a d o s c o n e l “scrip-

ting ” y la s h o j a s d e e s t ilo : p a u t a 1 , p a u t a 3 , p a u t a 6 , p a u t a 7 y p a u t a 9 .

I m a g e n .Cu a lq u i e r p re s en t ac ió n g rá fica.

• Pautas • G losar io •

Page 65: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 65/164

67

I m p o r t a n t e .U n a in fo rm ac ió n e n u n d o c u m e n t o e s im p o rt a n te s i s u co m p r e n s ió n e s c ruc ia l para la

c o m p r e n s ió n d e l d o c u m e n t o .

In f o rm a c i ó n t a b u l a r.Cu an d o la s t ab la s s e u t iliz an p a ra p re s e n t a r la r e lac ió n ló g i ca e n t r e d a t o s (t e x t o , n ú m e -

ros , im á g e n e s , e t c .), e s a in fo r m a c ió n s e d e n o m in a “in fo rm ac ió n t ab u la r” y las t a b las se

d e n o m i n a n “ t a b la s d e d a t o s ” . La s re la c io n e s e x p r e s a d a s m e d ia n t e u n a t a b la p u e d e n s e r

r e p r e s e n t a d a s v is u a lm e n t e (n o r m a lm e n t e e n u n a p a rrilla b id i m e n s io n a l ), a u d it iv a m e n t e

(a m e n u d o c o n in fo r m a c ió n d e e n c a b e z a m i e n t o p r e c e d i e n d o a l a s c e l d a s ) o e n o t r o s

f o r m a t o s .

Le c t o r d e p a n t a ll a .Es u n p r o g r a m a d e s o ft w a r e q u e le e e n v o z a lt a a l u s u a r io e l c o n t e n id o d e la p a n t a lla .

L o u s an p r i n c ip a lm en te l o s c i eg o s . H ab i t u a lm en te l o s l ec to re s d e p an t a l l a só lo p u e d e n

le e r t e x t o s q u e e s t é n “i m p r e s o s” en la p an t a l la , n o p in t ad o s .

Id i o m a o ri g in a l .L e n g u a j e h u m a n o h a b l a d o , e s c r i t o o d e s e ñ as co m o e l f r an cé s , j ap o n é s , le n g u a je d e

se ñ as am er ican o o b ra ille . El id io m a o r ig in a l d e l co n t en id o d eb e s e r in d icad o co n e l a t ri-

b u t o “lang ” en HTML ([HTML 40], secció n 8 .1 ) y e l a t r ibu to “xm l: lang ” en XML [XML],

s e c c ió n 2 . 1 2 ).

M a g n i fi c a d o r d e p a n ta lla .Es u n p r o g r am a d e s o ft w a r e q u e a m p lia u n a p a rt e d e la p a n t a lla , p a ra q u e p u e d a s e r

vis ta m á s f á c ilm en te . Lo u s an p r in c ip a lm en te la s p e r so n as d e e s cas a v i s ió n .

M a p a d e im a g e n .U n a i m a g e n q u e h a s i d o d i v i d i d a e n z o n a s c o n a c c i o n e s a s o c i a d a s . A l p u l s a r c o n e l

ra tó n e n u n a z o n a a c t iv a , se d e s e n c a d e n a d i ch a a c c ió n .

C u a n d o e l u s u a r i o p u l s a e n u n a z o n a a c t i v a d e l m a p a d e i m a g e n d e t i p o c l i e n t e , l a

ap l icac ió n d e u s u a r io ca l cu la e n q u é z o n a s e h a p r o d u c id o la p u ls a c ió n y s ig u e e l v í ncu lo

a s o c i a d o c o n e s a z o n a . P u l s a n d o e n u n a z o n a a c t i v a d e u n m a p a d e i m a g e n d e t i p o

s e rv id o r, s e e n v í a a é s te l a in fo rm ació n c o r re s p o n d ie n t e a la s c o o r d e n a d a s e n la s q u e s e

h a p r o d u c id o la p u ls a c ió n . En e l s e rv id o r s e r eco g e d ich a in fo rm ac ió n y s e p r o c e s a d e s -

e n c a d e n a n d o a lg u n a a c c ió n .

L o s d e s a r r o l l a d o r e s d e c o n t e n i d o s p u e d e n h a c e r a c c e s i b l e s l o s m a p a s d e i m a g e n d e

t ip o c lien t e p ro p o rc io n an d o a l u s u a r io v í n cu lo s d e acces o a la in fo rm ac ió n in d e p e n d ie n -

• Pautas • G losar io •

Page 66: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 66/164

68

t e s d e l d i sp o s it iv o q u e l le v e n a lo s m is m o s d e s t in o s q u e l a s z o n a s d e l m a p a d e im a g e n .

Lo s m a p a s d e im a g e n d e t ip o c lie n t e p e r m it e n a la a p lic a c ió n d e u s u a r io p r o p o r cio n a r

in fo rm ac ió n in m ed ia t a a l u s u a r io s o b re s i e l p u n t e ro d e l u s u a r io e s tá o n o s o b r e u n a z o n aac t iva .

M e c a n is m o s d e n a ve g a c i ó n .Es c u a lq u ie r m e d io p o r e l c u a l u n u s u a r io p u e d e n a v e g a r u n a p á g in a o s it io . A lg u n o s

m e c a n is m o s t í picos inc luyen :

Ba rra s d e n a v e g a c ió n : e s u n a c o le c c ió n d e v í n cu lo s h ac i a la s p a r t e s m á s im p o rt a n -

t e s d e u n d o c u m e n t o o s it io .

M a p a d e l s i tio : p r o p o r c io n a u n a v i sió n g lo b a l d e l a o rg an izac ió n d e u n a p á g in a o

sitio.Ta b l a d e c o n te n id o s :  g e n e ra lm e n te , lis t a y en laza a la s s e cc io n es m á s im p o rt a n t e s

d e u n d o c u m e n to .

Ta b l a a l in e a d a .P ro c e s o d e i n te r p r e t a c ió n d e u n a t a b la d o n d e lo s c o n t e n id o s d e u n a c e ld a s e c o n v ie r -

t e n e n u n a s e rie d e p á r ra fo s un o t ras o t ro (p . e j. a lo l a rgo d e la p á g ina ) . Lo s p á rrafo s s e

s u c e d e rá n e n e l m is m o o r d e n q u e l a s c e ld a s d e fin í an e n e l d o cu m en to o r ig in a l . Las ce l -

d a s d e b e n t e n e r se n t id o c u a n d o s e le a n e n o r d e n y d e b e n in c lu ir e l e m e n t o s e s t ru c t u ra le s  

(q u e g e n e r a n p á r ra fo s , e n cab e zam ien to s , lis t a s , e t c . ), d e fo rm a q u e la p á g in a t e n g a s e n -

t id o t ras su a l ine ac ió n .

Te x t o d e l v ín c u l o .Co n t e n id o t e x t u a l d e u n v í n cu lo .

• Pautas • G losar io •

Page 67: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 67/164

69

RECONOCIMIENTOSCo - d ir e c t o r e s d e l Gru p o d e Tra b a jo d e P a u t a s d e Co n t e n id o e n la W e b :

Ch u ck Le to u rn ea u , S t a r lin g A cce s s Se rv ices .G re g g Va n d e r h e id e n , Tra c e Re s e a r c h a n d D e v e l o p m e n t .

Co n t a c t o s c o n e l e q u ip o W 3 C:

Judy Brewer y Daniel Dardai l ler .

D e s e a m o s d a r la s g r a c ia s a la s s ig u ie n t e s p e r s o n a s q u e h a n c o n t rib u id o c o n s u t ie m p o

y s u s v a lio s o s c o m e n t a r io s a d a r fo r m a a e s t a s p a u t a s :

Ha rvey Bing ham , Ke v in Care y , Che tz Colw e ll, Ne al Ew e rs , Geo ff Free d , A l Gilm an , Larry

Goldberg , Jon Gunderson , Er ic Hansen , Ph i l l Jenk ins , Leonard Kasday , George Kerscher ,

M ar ja-Riit t a Koivun e n , Josh Kr ie g e r, Sco t t Lueb k ing , Wi lliam Lou g hb oro ug h , M urray M a-

lo n ey , Ch a r le s M cCa th ie N e v ile , M e g aZ o n e (Liv in g s to n En t e rp r is e s ) , M as a fu m i N ak an e ,M ark N o v ak , Ch a r le s O p p e rm an n , M ik e Pac ie l lo , D av id Paw s o n , M ich ae l P iep e r, G reg

Ro sm aita , Liam Q uinn , Dave Rag g e t t , T.V. Ram an , Ro be rt Sav e llis , Jut t a Tre viran us , Steve

Tyle r, Jaa p van Le lie ve ld y Jaso n W hite .

El b o r ra d o r o r ig i n a l d e e s t e d o c u m e n t o e s t a b a s a d o e n “The Uni fie d We b Site Acce ss i-

bi lity Guid e line s” ([UW SAG]) com p ilad o p or e l Trace R & D Cen te r de la Univers id ad d e

Wis co n s in . E s t e d o cu m en to i n c lu y e u n a l i s t a ad i c io n a l d e p e r s o n as e i n s t i t u c io n es q u e

h an co n t r ib u id o .

• Pautas • Reconocimientos •

Page 68: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 68/164

70

REFERENCIASPara la ú lt im a ve rs ió n d e cu a lq u ie r e s p ec i ficac ió n W3C, por favor consu l te l a l i s ta de

In fo rm es Té c n ic o s d e W 3 C.[CSS1]“CSS, lev e l 1 Reco m m en d a t io n ” , B. Bo s , H . W iu m Lie , e d s . , 1 7 d e d ic ie m b r e d e 1 9 9 6 ,

r e v is a d o e l 1 1 d e e n e r o d e 1 9 9 9 . La re c o m e n d a c ió n CSS1 e s tá e n :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 9 / R E C - C S S 1 - 1 9 9 9 0 1 1 1

La ú lt im a ve rs ió n d e C SS 1 e s tá d i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T R/RE C-CSS1

[CSS2]“CSS, le v e l 2 Reco m m en d a t io n ” , B. Bo s, H. W ium Lie , C. Lille y e I . Jaco bs , ed s . , 12 d e

m a yo d e 1 9 9 8 . La r e co m e n d a c ió n CSS2 e s tá e n :h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 8 / R E C - C S S 2 - 1 9 9 8 0 5 1 2

La ú lt im a ve rs ió n d e C SS 2 e s tá d i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T R/RE C-CSS2

[ D O M 1 ]“D o cu m en t O b jec t M o d e l (D O M ) Lev e l 1 Sp ec i fica t io n ” , V. Ap p arao , S . Byrne , M Cham -

p io n, S. Isaa cs , I. Jaco bs , A. Le H o rs , G. Nico l, J. Ro bie, R. Suto r, C. Wilso n y L. Wo o d , e d s . ,

1 d e o c tu b re d e 1 9 9 8 . La r e co m e n d a c ió n d e n iv e l 1 d e D O M e s tá e n :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 8 / R E C - D O M - L e v e l - 1 - 1 9 9 8 1 0 0 1

La ú lt im a ve rs ió n d e l n iv e l 1 d e D O M e s tá d i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T R/RE C-D O M -L ev e l -1

[HTML40]“H TM L 4 . 0 Re c o m m e n d a t io n ” , D . Rag g e t t , A . Le H o rs e I. Jaco b s , ed s . , 1 7 d e d ic ie m b re

d e 1 9 9 7 , r e v is a d a e l 2 4 d e a b r il d e 1 9 9 8 . La r e c o m e n d a c ió n H TM L 4 . 0 e s t á e n :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 8 / R E C - h t m l 4 0 - 1 9 9 8 0 4 2 4

La ú lt im a ve rs ió n d e H TM L 4 . 0 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - h t m l 4 0

[HTML32]“H TM L 3 . 2 Re c o m m e n d a t io n ” , D. Ra g g e t t , e d . , 1 4 d e e n e r o d e 1 9 9 7 . La ú lt im a ve rs ió n

d e H TM L 3 . 2 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - h t m l 3 2

[MATHML]“M a t h e m a t ic a l M a rk u p La n g u a g e ” , P. Io n y R. Mine r, ed s . , 7 d e a br il d e 1 9 98 . La re co-

m e n d a c ió n M a t h M L 1 . 0 e s tá e n :

h t tp : / / w w w . w 3 . o rg / TR/ 1 9 9 8 / REC- M a t h M L- 1 9 9 8 0 4 0 7

La ú lt im a ve rs ió n d e M a t h M L 1 . 0 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - M a t h M L

• Pautas • Referencias •

Page 69: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 69/164

71

[PNG]“PNG (Por tab le Ne tw ork Graph ics ) Sp e c ifica t io n” , T. Bo ute ll, e d . , T. Lan e , e d . p art icip an -

t e , 1 d e o c t u b re d e 1 9 9 6 . La ú lt im a ve rs ió n d e PN G 1 . 0 e s tá e n :h t t p : / / w w w . w 3 . o r g / T R / R E C - p n g

[RDF]“Re so urce De scr ip t ion Fram e w ork (RDF) M od e l an d Syn tax Sp e cifica t ion” , O . Las sila, R.

Sw ic k, e d s . , 2 2 d e fe b r e r o d e 1 9 9 9 . La r e c o m e n d a c ió n RDF e st á e n :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 9 / R E C - r d f - s y n t a x - 1 9 9 9 0 2 2 2

La ú lt im a ve rs ió n d e RD F 1 . 0 e s t á d i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T R/RE C-rd f - s y n t ax

[ R F C 2 0 3 8 ]

“HTTP Version 1.1 ” , R. Fie ld ing , J. Ge t tys , J. M o g ul , H. Frystyk Nielse n y T. Bern e rs-Le e ,e n e r o 1 9 9 7 .

[SMIL]“Synchro n ized M ul t im e d ia In te g ra t ion Lang uag e (SM IL) 1 .0 Sp e cifica t ion ” , P. Ho schka ,

e d . , 1 5 d e ju n io d e 1 9 9 8 . La r e c o m e n d a c ió n SM IL 1 . 0 e s t á e n :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 8 / R E C - s m i l - 1 9 9 8 0 6 1 5

La ú lt im a ve rs ió n d e S M IL 1 . 0 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - s m i l

[TECHNIQUES]

“Te chn iq ue s fo r We b Con te n t A cce ss ib i lity Guid e line s 1 .0 ” , W. Chisho lm , G . Van d e rhe i-

d e n , I. Ja c o b s , e d s . Es t e d o c u m e n t o e x p lic a c o m o im p l e m e n t a r lo s p u n t o s d e v e r ific a c ió n

d e fin ido s en las “Pau ta s d e A cce s ib ilid ad a lo s Co n te n id o s e n la We b 1 . 0 ” . Es te d o c u m e n -

t o e s tá d i s p o n ib l e en :

h t tp : / /www.w3.org /TR/WAI-WEBCONTENT-TECHS

Versió n e n e s p a ñ ol (castel lano):

h t t p : / / w w w . g e o c i t i e s . e s / c a r l o s _ e g e a / t e c n i c a s w c a g 1 0 . h t m

[WAI-AUTOOLS]“Au tho r ing Too l Acce ss ib i lity Gu id e line s” , J. Tre viranu s, J. Rich ar d s, I. Jac o bs , C. M cCa-

t h ie N e v ille , e d s . El d o c u m e n t o d e e s t a s p a u t a s p a r a h e r ra m ie n t a s d e a u t o r d e d i se ñ o

acces ib le e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / W A I - A U T O O L S

[WAI-UA-SUPPORT]Este p á g in a t r a t a s o b re a lg u n a s ca rac t e r í s t ica s d e acces ib ilid ad s o p o r t ad a s p o r la s ap li-

cac io n es d e u s u a rio (in c lu id as l a s ay u d as t é cn icas ) lis t ad a s en e s t e d o cu m en to . La p á g in a

e s tá d i s p o n ib l e en :

h t t p : / / w w w . w 3 . o r / T R / R e s o u r c e s / W A I - U A - S u p p o r t

• Pautas • Referencias •

Page 70: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 70/164

72

[WAI-USERAGENT]“Use r Ag e n t Acce ss ib i lity Guid e line s” , J. Gund e rson e I. Jaco bs , e d s . El ú lt im o Bo r rad o r

d e Trab a jo d e e s t a s p au t a s p a ra la s ap licac io n es d e u s u a r io p a ra e l d is e ñ o acce s ib le e s tád i sp o n ib le e n :

h t tp : / /www.w3.org /TR/WAI-USERAGENT/  

[ W C A G - I C O N S ]La in fo rm ació n s o b r e l o s i c o n o s d e a d e c u a c ió n a e s te d o c u m e n t o y có m o ut ilizarlos

e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / W A I / W C A G 1 - C o n f o r m a n c e . h t m l

[ U W S A G ]The Unified Web Si te Accessibi l i ty Guidel ines” , G . Van d e rh e id e n , W. Ch is h o lm , ed s .

Es t a s Pau t a s fu e ro n co m p ilad as p o r e l Trace R & C Cen t e r d e la U n iv e r s id ad d e Wis co n s infun d ad o p o r e l Na t ion al Ins t i tu te on Disab ility an d Re ha b i lit a t ion Re se arch (NIDRR), De -

p a r ta m e n t o d e Ed u c a c ió n d e E st a d o s U n id o s .

Es te d o c u m e n t o e s t á d i sp o n ib le e n :

h t t p : / / w w w . t r a c e c e n t e r . o r g / d o c s / h t m l _ g u i d e l i n e s / v e r s i o n 8 . h t m

[XML]“Ex ten s ib le M arku p Lan g u ag e (XM L ) 1 . 0 ” , T. Bray , J. Pao l i, C .M . Spe rberg -M cQ ue e n ,

e d s ., 1 0 d e fe b r e r o d e 1 9 9 8 . La re c o m e n d a c ió n X M L 1 . 0 e s tá e n :

h t tp : / / w w w . w 3 . o rg / TR/ 1 9 9 8 / REC- x m l- 1 9 9 8 0 2 1 0

La ú lt im a ve rs ió n d e X M L 1 . 0 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - x m l

• Pautas • Referencias •

Page 71: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 71/164

73

RESUMEN

Es t e d o c u m e n t o e s u n lis ta d o d e té c n ic a s q u e im p l e m e n t a n lo s p u n t o s d e v e r ific a c ió n

def in idos en las «Pau ta s d e A cce s ib ilid ad a l Co n t en id o d e l a Web 1 . 0 ».

Es t e d o c u m e n t o e s p a rt e d e u n a s e r ie d e d o c u m e n t o s d e a c ce s ib ilid a d p u b lic a d o s p o r

la Iniciat iva d e Acc e sibilid ad a la We b (WAI).

ESTATUS DE ESTE DOCUMENTO

Es t e d o c u m e n t o e s u n a N O TA d is p u e s t a p o r W 3 C ú n ic a m e n t e p a ra d e b a t e .La p ub licac ió n d e e s ta N o t a p o r W 3 C n o in d ic a s u a d h e s ió n p o r W 3 C , e l e q u ip o d e

W 3 C o c u a lq u ie r m ie m b r o d e W 3 C.

En t a n t o q u e la s P a u t a s d e A c c e s ib ilid a d a l Co n t e n id o d e la W e b 1 . 0 p r e t e n d e n s e r u n

d o c u m e n t o e s t a b le (c o m o u n a Re c o m e n d a c ió n d e W 3 C), se e s p e r a q u e e l p r e s e n t e d o -

c u m e n t o e v o lu c io n e a m e d id a q u e c a m b ie n la s t e c n o lo g í a s y lo s d e s a r ro lla d o r e s d e c o n -

t e n id o s d e s c u b ra n té cn icas m á s e fec t ivas p ara d ise ñ a r p á g in as acces ib le s .

Es t e d o c u m e n t o h a s id o p r o d u c id o c o m o p a r t e d e la In ic ia t iv a d e A c c e s ib ilid a d a la

We b d e W 3 C. La fin a l id ad d e l Gru p o d e Trab a jo d e l a s Pau t a s d e l o s Co n ten id o s d e l a

We b s e t ra t a e n e l Es t a tu to d e l G ru p o d e Trab a jo .La lis t a d e la s a c t u a le s Re c o m e n d a c io n e s d e W 3 C y o t r o s d o c u m e n t o s té c n ic o s p u e d e

h a lla r se e n h t t p : / / w w w . w 3 . o rg / TR .

P o r fa v o r, lo s c o m e n t a rio s s o b r e e s t e d o c u m e n t o d e b e n e n v ia rs e a :

w a i - w c a g - e d i t o r @ w 3 . o r g .

1 . - PRIO RIDA DES

Cad a p u n to d e v e r ificac ió n t ien e u n n iv e l a s ig n ad o p o r e l G ru p o d e Trab a jo , b a s ad o e n

e l im p a c t o d e d i ch o p u n t o s o b r e la a c c e s ib ilid a d .

T é cn ica s p a ra la s Pau t a s d e A cce s ib ilid ad a l

Co n te n id o d e la W e b 1 .0A n e x o d e la Re c o m e n d a c ió n d e W 3 C d e 5 d e m a yo d e 1 9 9 9

E d i t o r e s :We n d y Ch is h o lm , Trace R & D Cen t e r, U n iv e r s id ad d e W is co n s in (M a d is o n ).

G reg g Van d e rh e id en , Trace R & D Cen t e r, U n iv e r s id ad d e W is co n s in (M ad is o n ).

Ian Jaco bs , W 3 C.

Page 72: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 72/164

74

[Pr ior idad 1 ]E l d es a r ro l l ad o r d e co n t en id o s d e l a Web t i e n e q u e s a t i s f ace r e s t e p u n to d e v e r i f i ca -

c ió n . De o t r o m o d o , a u n o o m á s g ru p o s le s r e s u lt a rá im p o s ib le a cced e r a la in fo rm ac ió nd e l d o c u m e n t o . Q u e e s t e p u n t o d e v e r ific a ció n s e a s a t is fe c h o e s u n r e q u e r im ie n t o b á sico

p a r a q u e a lg u n o s g ru p o s se a n c a p a c e s d e u s a r d o c u m e n t o s W e b .

[Pr ior idad 2 ]El d es a r ro l lad o r d e co n t e n id o s d e la We b d e b e s a t is face r e s t e p u n to d e v e r ificac ió n . De

o t ro m o d o , a u n o o m á s g ru p o s le s r e s u lt a rá d if í c il acce d e r a la in fo r m ació n d e l d o c u m e n -

to . La sat isfacció n d e e s t e p u n t o d e v e r ific a c ió n re m o v e rá i m p o r t a n t e s o b s tá cu lo s p a ra

a c ce d e r a d o c u m e n t o s W e b .

[Pr ior idad 3 ]

El d es a r ro l lad o r d e co n t e n id o s d e la We b p u e d e t e n e r e n c u e n t a e s t e p u n t o d e v e rific a -c ió n . De o t r o m o d o , u n o o m á s g ru p o s p o d rí an e n co n t ra r a lg u n a d ificu lt ad en e l acces o a

la in fo r m ació n d e l d o cu m en to . La s a t is facc ió n d e e s t e p u n t o d e v e r ific a c ió n m e j o ra rá e l

a c ce s o a lo s d o c u m e n t o s W e b .

A lg u n o s p u n to s d e v e r ificac ió n e s p ec i fican u n n iv e l d e p r io r id ad q u e p u e d e v a r ia r b a jo

c ie r t a s co n d ic io n e s (q u e s e rá n ind icadas ) .

Lo s p u n to s d e v e r ificac ió n d e e s t e d o c u m e n t o e stá n n u m e r a d o s d e ig u a l m a n e r a q u e

en la s «Pau ta s d e A cce s ib ilid ad a l Co n t en id o d e l a Web 1 . 0 ».

2. CÓMO SE ORGANIZAN LAS TÉCNICAS

Es te d o c u m e n t o e s u n lis t ad o d e té c n ic a s q u e im p l e m e n t a n lo s p u n t o s d e v e r ific a c ió n

d e f in id o s en la s «Pau ta s d e A cce s ib ilid ad a l Co n t en id o d e l a Web 1 . 0 ». Es te d o c u m e n t o s e

o r g a n i za d e l a s ig u ie n t e m a n e r a :

Te m a s d e a c c e s i b ilid a d :Esta secc ió n in t r o d u c e a lg u n a s té cn icas g e n e ra le s p a ra p ro m o v e r la acces ib ilid ad , q u e

s o n in d e p e n d ie n t e s d e c u a lq u ie r le n g u a je d e m a r ca d o .

Técnicas HTML:Esta se cc ió n e xp lica c ó m o im p l e m e n t a r p u n t o s d e v e r ific a c ió n a p licab le s e n H TM L (con -

su l ta r [HTM L 4 .0 ], [HTM L 3 .2 ]) e inc luye nu m e roso s e jem p lo s p rá c t i co s . Pa ra co m p le -

m e n t a r e s ta s e c c ió n , u n í  n d ic e d e e le m e n t o s y a t rib u t o s H TM L  p r o p o r c io n a in fo r m a c ió n

s o b r e t o d o s lo s e le m e n t o s d e H TM L 4 .0 y t o d o s lo s a t rib u t o s q u e a fe c t a n d ir e c t a m e n t e a

la acce s ib i lid ad .

Té c n i c a s C S S :Esta secc ió n ex p l i ca có m o i m p l e m e n t a r p u n t o s d e v e r i f i c a c ió n ap l icab les en CSS1 y

CSS2 (consultar [CSS1], [CSS2]).

S e p r o p o r c io n a u n m a p a d e p u n t o s d e v e rific a c i  ó n  p a ra la n a v e g a c ió n e n la s té cn icas .

• Técnicas •

Page 73: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 73/164

75

Para cad a p u n to d e v e rificac ió n , e l m ap a i n c lu y e s u d e fin ic ió n (t a l y c o m o a p a r e c e e n la s

«Pau ta s d e A cce s ib ilid ad a l Co n t en id o d e l a Web 1 . 0») y n o t a s s o b re l a s té cn icas a consu l-

t a r. A d em á s , a l p r in c ip io d e cad a s e cc ió n d e e s t e d o c u m e n t o s e e n u m e ra n lo s p u n t o s d everificació n q u e s e i n c lu y e n e n e lla .

2 . 1 . - Eje m p lo s y e je m p lo s d e s a c o n s e ja d o s

Es te d o cu m en to co n t ien e a lg u n o s e jem p lo s q u e ilu s t ran s o lu c io n es acce s ib le s e n H TM L,

CS S, e t c , p e r o t a m b ié n e je m p l o s d e s a c o n s e j a d o s , q u e ilu s t ra n lo q u e lo s d e s a r ro lla d o r e s

n o d e b e n h a c e r . E s t o s e j e m p l o s d e s a c o n s e j a d o s l o s l e c t o r e s d e b e r í a n a b o r d a r l o s c o n

p r e c a u c ió n , ya q u e e s tá n ex p u e s to s co n u n a fin a l id ad m eram e n te ilu s t r a t iv a .

• Técnicas •

Page 74: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 74/164

76

3.- TEMAS DE ACCESIBILIDAD

Las s e cc io n es s i g u i en t e s t ra t an a lg u n a s cu e s t io n es d e acces ib ilid ad q u e lo s d es a r ro l la -d o r e s d e c o n te n id o s W e b d e b e n t e n e r e n m e n t e c u a n d o d is e ñ a n d o c u m e n t o s y s it io s .

3 . 1 . - E s t r u c t u r a / p r e s e n t a c i ó n

C u a n d o s e d i s e ñ a u n d o c u m e n t o o u n a s e r ie d e d o c u m e n t o s , lo s d e s a rro lla d o r e s d e

c o n t e n id o s d e b e n e s fo r z a rs e e n id e n t ific a r la e s t ru c t u ra q u e d e s e a n d a r a s u s d o c u m e n -

t o s , a n t e s d e p e n s a r e n c ó m o s e p r e s e n ta rá n los m ism os a l usu ar io . D is t ing u i r la e s t ruc tu -

ra d e l d o c u m e n t o d e la fo r m a e n q u e s e p r e s e n t a e l c o n t e n id o o fr e c e a lg u n a s v e n t a ja s ,

in c lu id o u n au m e n to d e la acces ib ilid ad , m an e jab i lid ad y t r an s fe r ib ilid ad .La identificació n d e lo q u e e s e s t ru c t u ra y lo q u e e s p r e s e n t a c ió n p u e d e s e r u n re t o a

v e c e s . Po r e je m p l o , m u c h o s d e s a r ro lla d o r e s c o n s id e ra n q u e u n a lí ne a ho r izo n ta l (e l e le -

m e n t o H R) co m u n ic a u n a d i v is ió n e s t ru c tu ra l. Es to p u e d e s e r cie r t o p a ra u s u a r io s co n u n a

visió n n o rm a l, p e ro p a ra u s u a r io s s in v is ió n o s in n a v e g a d o r e s g rá fico s , un a lí n e a h o riz o n -

tal no s ignif ica prá c t ic a m e n t e n a d a (u n o d e b e rí a «ad iv inar» q u e u n e le m e n t o H R im p l ic a

un a d iv is ió n e s t ruc tu ra l, pe ro , s in o t ra in fo rm ació n , e s t o n o p u e d e g a ran t iza r se ) . En H TM L,

lo s d e s a r ro lla d o r e s d e b e r í a n u s a r lo s e l e m e n t o s d e e n c a b e z a m ie n t o ( H 1 - H 6 ) p a ra id e n -

t ific a r n u e v a s s e c c io n e s . Es t o s e le m e n t o s p u e d e n s e r c o m p l e m e n t a d o s p o r in d ic a c io n e s

v is u a le s o d e o t r o t ip o t a le s c o m o lí n e a s h o riz o n t a le s , p e r o n o d e b e n s e r re e m p la z a d o s

p or e l las .

Tam bié n s e m a n t ie n e lo c o n t ra rio : lo s d e s a r ro lla d o r e s n o d e b e n u s a r e le m e n t o s e s t r u c -

t u ra le s p a ra lo g ra r e fe c t o s d e p r e s e n t a c ió n . Po r e je m p l o , e n H TM L , a u n q u e e l e le m e n t o

BL O CK Q U O T E p u ed e c rea r s an g rí a s d e t e x t o e n a l g u n o s n a v e g a d o r e s , e s t á dise ñ a d o

p a ra i d en t i f i ca r u n a c i t a , n o p a ra c rea r u n a p re s en t ac ió n co n e fec to s la t e ra le s . L o s e le -

m e n t o s B LO CKQ U O TE u s a d o s p a ra s a n g rí a s c o n fu n d e n a lo s u s u a r io s y a lo s m o t o r e s d e

b ú s q u e d a , q u e e s p e ra n q u e e l e le m e n t o s e u t ilic e p a ra s e ñ a lar una c ita .

La s e p a rac ió n d e p r e s e n t a ció n y e s t ru c tu ra e s i n h e ren t e a l o s d o cu m en to s X M L , t a l y

c o m o e s t ab le c e la N o r m a W a ls h e n «A G u id e t o XM L» [WALSH]:

“Lo s n a v e g a d o r e s H TM L s o n e n s u m a y o rí a d e d if  í cil co d ifica ció n . U n e n c a b e z a m ie n t o

d e p r im e r n iv e l a p a r e c e e n t a l m o d o p o r q u e e l n a ve g a d o r re c o n o c e la e t iq u e t a H 1 . D e

n u e v o , p u e s t o q u e l o s d o c u m e n t o s X M L n o t i e n e n f i j a d a s e t i q u e t a s , e s t e e n f o q u e n o

funcionará . La p re s e n t ac ió n d e u n d o c u m e n t o XM L d e p e n d e d e u n a h o ja d e e s t ilo ” .

¡ T e s t r á p i d o ! P a ra d e t e r m in a r s i e l c o n t e n id o e s e s t ru c t u ra l o d e p r e s e n t a c ió n , c re e u n

b o r ra d o r d e s u d o c u m e n t o . Ca d a p u n t o d e la je r a rq u í a d e n o t a u n c a m b i o e s t r u c t u r a l .

U t ilic e m a r c a d o r e s e s t ru c t u ra le s p a ra m a r c a r e s o s c a m b io s y m a r c a d o r e s d e p r e s e n t a c ió n

p a ra h ace r lo s m á s a p a r e n t e s v is u a l o a u d it iv a m e n t e . O b s e r v e q u e la s lí n e as h o r izo n t a le s

• Técnicas • Temas de Accesibi l idad •

Page 75: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 75/164

77

n o a p a r e c e rá n e n e s t e b o r ra d o r y p o r t a n t o n o s o n e s t r u c tu r a le s s in o d e p r e s e n t a c ió n .

N o t a :  e s t e t e s t rá p id o s e ap lica a la e s t ru c tu ra d e cap í t u lo , s e cc ió n y p á r ra fo . Para d e te r-

m in a r la e s t ru c tu ra d e la s fra s e s , b u s q u e ab re v ia tu ra s , c am b io s e n e l id io m a o r ig in a l ,d e fin ic ion e s y lis tas d e í t e m s .

3 . 2 . - Te x to s e q u iva le n t e s

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 1 . 1 , 1 . 2 , 1 . 5 , 1 3 . 1 0 , 3 . 3 , 1 2 . 1 y 1 2 . 2 .

El t ex to s e co n s id e ra acces ib le p a ra p rá c t ic a m e n t e t o d o s lo s u s u a r io s s i p u e d e s e r m a -

n e j a d o p o r le c t o r e s d e p a n t a lla , n a v e g a d o r e s n o v is u a le s y l e c t o r e s b r a ille . D e b e p o d e r

s e r d e s p le g a d o v is u a lm e n t e , a g r a n d a d o , s in c r o n iz a d o c o n u n v í d e o p a ra c re a r u n t í tu lo ,

e t c . E n l a m e d i d a e n q u e d i s e ñ e u n d o c u m e n t o q u e c o n t e n g a i n f o r m a c ió n n o t e x t u a l(im á g e n e s , a p p l e t s , s o n i d o s , p r e s e n t a c i o n e s m u l t i m e d i a , e t c . ) , d e b e p e n s a r e n s u p l e -

m e n t a r e s a in fo r m a c ió n c o n t e x t o s e q u iv a le n t e s c u a n d o s e a p o s ib le .

U n t ex to eq u iv a l en t e d es c r i b e l a fu n c ió n o f i n a l i d ad d e l co n t en id o . Pa ra co n t en id o s

c o m p l e jo s (g rá ficas , g rá fico s , e t c . ) e l t ex to e q u iv a len t e d eb e s e r m á s larg o e incluir infor-

m a c ió n d es c r ip t iv a .

D e b e n p r o p o r c io n a r s e t e x t o s e q u iv a le n t e s p a ra lo s l o g o t ip o s , fo t o g ra f  í a s , b o t o n e s d e

p r e s e n t a c ió n , ap p le t s , v iñ e t a s en lis t a s , «ascii art» y e n t o d o s lo s v í n c u lo s c o n t e n id o s e n

u n m a p a d e i m a g e n , a s í  c o m o e n l a s i m á g e n e s i n v i s i b l e s u s a d a s p a r a m a q u e t a r u n a

p á g in a .

¡ T e s t r á p i d o ! U n b u e n t e s t p a r a d e t e r m in a r si u n t e x t o e q u iv a le n t e e s ú t il, es im ag inar

q u e s e e s tá l e y e n d o e n v o z a l t a e l d o c u m e n t o p o r t e lé fo n o . ¿ Q u é d irí a s o b r e l o q u e

e n c u e n t ra e n e s t a im a g e n p a ra h a c e rla c o m p r e n s ib le a l in t e r lo c u t o r ?

3 .2 .1 . - Revis ió n d e la s t e c n o lo g í a s

Có m o s e e s p e c ific a u n t e x t o e q u iv a le n t e d e p e n d e d e l le n g u a je d e l d o c u m e n t o .

P o r e je m p l o , d e p e n d ie n d o d e l e l e m e n t o , H TM L p e r m it e a l d e s a rr o lla d o r e s p e c ific a r

t ex to s eq u iv a l en t e s a t r av é s d e a t r ib u to s («a lt» o «l o n g d e s c») o e n e l c o n t e n id o d e l e le -

m e n t o (e l e le m e n t o «O BJECT»).

Lo s fo r m a t o s d e v í d eo , co m o e l Q u ick t im e , p e rm it en a l d e s a r ro l lad o r in c lu ir u n a v a r ie -

d ad d e b an d as v i s u a le s y au d it iv as a l t e rn a t iv as . SM IL [SM IL] p e rm it e a l d e s a r ro l lad o r

s in c r o n iz a r d e fo r m a a lt e r n a t iv a t r o z o s d e im a g e n y s o n id o , y a r ch iv o s d e t e x t o c o n c a d a

u n o .

Cu an d o c re e XM L D TD s , a s eg ú re s e d e q u e lo s e le m e n t o s q u e p o d rí an n eces i t a r u n a

d es c r i p c ió n t ie n e n a lg u n a m a n e ra d e a s o c ia rs e p o r sí m is m o s a d ic h a d e s c rip c ió n .

A lg u n o s fo r m a t o s d e im a g e n p e r m it e n t e x t o in t e r n o e n e l a r c h iv o d e d a t o s ju n t o c o n la

• Técnicas • Tem as de Accesibi l idad •

Page 76: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 76/164

78

in fo rm ac ió n v i sua l . S i e l t ex to es t á s o p o rt a d o p o r u n fo r m a t o d e im a g e n (p o r e je m p lo ,

Po r t ab l e N e tw o rk G rap h i c s , v e r [PN G ] , l o s d es a r ro l l ad o res d e co n t en id o s t am b ié n p o -

d rí a n p r o p o r c io n a r in fo r m a c ió n a llí .

3 .2 .2 . - C o m p a t ib ilid ad r e t ro sp ec t iv a

Lo s d e s a r ro lla d o r e s d e c o n t e n id o s d e b e n t e n e r e n c o n s id e ra c ió n la co m p a t ib ilid ad r e -

t r o s p e c t iv a c u a n d o d i se ñ e n p á g i n a s o s it io s W e b , p u e s t o q u e :

• A lg u n a s ap l icac io n es d e u s u a r io n o s o p o r t an a lg u n a s p re s e n t ac io n es H TM L.

• La g e n t e p u e d e u s a r n a v e g a d o r e s o re p r o d u c t o r e s d e v í d e o a n t ig u o s .

• P u e d e n s u r g ir p r o b le m a s d e c o m p a t ib ilid a d e n t r e e l s o ft w a r e .

P o r t a n t o , c u a n d o s e d is e ñ e p a ra t e c n o l o g í a s m á s a n t ig u a s , c o n s id e r e e s t a s té cn icas :• Pro p o rc io n e t e x to s eq u iv a len t e s in t e rn o s . Po r e j em p lo , in c lu y a u n a d es c r ip c ió n d e la

im a g e n in m e d ia t am e n t e d e s p u é s d e la m is m a .

• P ro p o r c io n e v í n cu lo s h ac ia t ex to s eq u iv a len t e s e x t en s o s , y a s ea en u n a rch iv o d is t in to

o e n la m is m a p á g i n a . E s t o s s o n d e n o m i n a d o s v í n cu lo s d es c r i p t i v o s o «d-l inks». El

t e x t o d e l v í n c u lo d e b e rí a e x p lica r q u e e l v í n cu lo s e ñ a la a u n a d es c r ip c ió n . D o n d e s e a

p o s i b l e , t a m b ié n d e b e rí a ex p l i ca r l a n a tu ra l eza d e l a d es c r i p c ió n . N o o b s t a n t e , l o s

d e s a rr o lla d o r e s p r e o c u p a d o s p o r e l m o d o e n q u e e l v í n c u lo d e s c rip t iv o p u e d e a fe c t a r

a l a ap ar ie nc ia v isua l d e las p á g i n a s , p u e d e n u s a r ví n c u lo s d e t e x t o m á s d is c re to s t a le s

c o m o «[D ]», l o cu a l e s r eco m en d ad o p o r N CA M (co n s u l t a r [N CA M ]) . E n e s t e ca s o ,

d e b e n t a m b ié n p r o p o r c io n a r m á s in fo rm ac ió n s o b r e la e t iq u e t a d e l ví n c u lo , d e m o d o

q u e lo s u s u a r io s p u e d an d is t in g u ir lo s v í n c u lo s q u e c o m p a r te n «[D ]» c o m o c o n t e n id o

(p o r e je m p l o , m e d ia n t e e l a t rib u t o «title » e n H TM L).

3 . 3 . - Pá g i n a s a l te rn a t iv a s

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 1 . 4 y 6 . 5 .

S i b ie n e s p o s ib le h a c e r a c c e s ib le la m a y o r p a r t e d e l c o n t e n id o , p u e d e o c u r rir q u e t o d a

o p a rt e d e u n a p á g i n a p e r m a n e z c a in a c c e s ib le . A l g u n a s t é cn icas ad ic io n a le s p a ra c rea r

a lt e rn a t iv as acce s ib le s p o d rí an s e r :

1 . Pe r m it a a l u s u a rio n a v e g a r a o t ra p á g in a d ife re n t e q u e s ea acce s ib le , la cu a l s e rá a c t u a -

lizad a co n la m is m a fr ecu e n c ia q u e la p á g ina o r ig ina l inac ce s ib le .

2 . En lu g a r d e p á g in as a l t e rn a t i v as e s tá t icas, sitú e e n e l s e r v i d o r s c r i p t s q u e g e n e r e n

v e r sio n es a cces ib le s d e l a p á g ina so lic itad a .

3 . Co n s u lt e lo s e je m p lo s p a ra M a r c o s  y Scr ipts  .

4 . Pro p o r cio n e u n n ú m e r o d e t e lé fon o , fax , d i recc ió n d e c o r re o e l e c t ró n ic a o p o s t a l d o n -

d e l a in fo rm ac ió n e s té d is p o n ib le y acces ib le la s 2 4 h o ra s d e l d í a .

• Técnicas • Temas de Accesibi l idad •

Page 77: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 77/164

79

H e a q u í d o s té cn icas p ara v incu lar a una p á g in a acces ib le :

1 . Pro p o rc io n e v í ncu los a l p r inc ip io tan to d e la p á g in a p r in c ip a l co m o d e la a l te rn a t iv a ,

p a ra p e rm it ir a l u s u a r io m o v e r se en t r e e lla s . Po r e j em p lo , a l p r in c ip io d e u n a p á g in ag rá fica incluya un v í n cu lo co n la p á g in a s ó lo - t e x to , y e n e l p r in c ip io d e é s ta inc luya un

v í ncu lo hac ia l a p á g i n a g rá fica. A se g ú r e se d e q u e e s to s v í n c u lo s s o n u n a d e l a s p rim e -

ra s co s as q u e e l u s u a r io v a a t en e r a l a v is t a , s it u á nd olo a l p r inc ip io d e la p á g i n a , a n t e s

q u e o t r o s v í n cu lo s .

2 . U se m e t ain fo r m a c ió n p a ra d is e ñ a r d o c u m e n t o s a lt e r n a t iv o s . Lo s n a v e g a d o r e s d e b e -

rí an ub icar la p á g in a a lt e rn a t iv a au to m á t ic a m e n t e b a sá n d o s e e n e l tip o y p r e fe r e n c ia s

d e l n av eg ad o r d e l u s u a r io . Po r e jem p lo , e n H TM L, u s e e l e l em e n to L IN K t a l y co m o

s i g u e :

E j e m p l o :L as ap l i cac io n es d e u s u a r io q u e s o p o r t an L IN K u b i ca rá n la p á gina a l te rna t iva

p a r a lo s u s u a r io s c u y o n a v e g a d o r p u e d a s e r id e n t ific a d o c o m o p o r t a d o r d e e je -

c u c i o n e s «au ra l», «braille » o «t ty».

<HEAD>

<TITLE>¡Bienvenido al Paseo Virtual!</TITLE>

<LINK title=“Versión sólo-texto”

rel=“alternate”

href=“solo-texto”

media=“aural, braille, tty”

</HEAD>

<BODY><P>..........</BODY>

3 . 4 . - A c c e s o d e s d e e l te c l a d o

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 9 . 2 .

N o t o d o s lo s u s u a r io s t ie n e n u n e n t o r n o g r á f i co con un ra tó n u o t r o d is p o s it iv o p a ra

a p u n t a r . A l g u n o s u s u a r i o s d e p e n d e n d e l t e c l a d o , t e c l a d o a l t e r n a t i v o o e n t r a d a d e v o z

p a r a n a v e g a r e n t r e v í n c u l o s , a c t iv a r lo s c o n t r o le s d e fo r m u la r io , e t c . .. Lo s d e sa r ro l la d o r e s

d e c o n t e n id o d e b e r í a n a s e g u r a rs e s ie m p r e d e q u e e l u s u a r io p u e d a in t e r a c tu a r c o n u n a

p á g in a c o n in s t ru m e n t o s d ife r e n t e s d e lo s d is p o s it iv o s p a ra a p u n t a r. U n a p á g in a d is e ñ a d a

p a r a e l a c c e s o d e s d e e l t e c la d o (a d e m á s d e a c ce s o c o n r ató n ) s e rá n o r m a lm e n t e a c c e s ib le

a l o s u s u a r i o s c o n o t r o s d i s p o s i t i v o s d e a c c e s o . A u n m á s , d i se ñ a r u n a p á g i n a p a r a e l

a c c e s o a t r a vé s d e l t e c la d o m e jo r a rá t a m b ié n u s u a lm e n t e e l c o n ju n t o d e s u d is e ñ o .

• Técnicas • Tem as de Accesibi l idad •

Page 78: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 78/164

80

El a c c e s o d e s d e e l t e c la d o a lo s v í n cu lo s y lo s co n t ro le s d e fo rm u la r io d eb e s e r e s p e c i-

fic a d o d e a lg u n a d e e s t a s m a n e ra s :

Vín c u lo s e n l o s m a p a s d e im a g e n :P ro p o r c io n e t e x t o s e q u iv a le n t e s p a r a ca d a á re a d e lo s m a p a s d e im a g e n q u e e s tá n d e l

la d o d e l c lie n t e , o p r o p o r c io n e v í n c u lo s d e t e x t o re d u n d a n t e s p a ra lo s m a p a s d e im a g e n

d e l lad o d e l s e rv id o r. Consu lt a r lo s e je m p los d e l a s e c c i  ó n d e m a p a s d e im a g e n  .

A t ajo s d e te c l a d o :P ro p o r c io n e a t a jo s d e t e c la d o d e fo r m a q u e l o s u s u a rio s p u e d a n c o m b in a r p u ls a c io n e s

d e t e c la s p a ra n a v e g a r lo s v í n cu lo s o lo s co n t ro le s d e fo rm u la r io e n u n a p á g in a . N o t a  : lo s

a t a jo s d e t e c lad o ( e s p ec i a lm en te l a tec l a u t iliz ad a p a ra ac t iv a r e l a t a jo ) p u e d en s e r m an e -

 ja d o s d e fo rm a d ife re n te p o r lo s d ife re n te s s is te m a s o p e ra t iv o s . En lo s a p a ra to s b a jo

W in d o w s , la s t ec la s “a lt” y “ctr l” s o n la s m á s u t iliz ad as , en t an to q u e b a jo M ac in to s h , e sla te cla “a p p l e ” o “c lo ve r le af  ” . Co n s u lt a r lo s e je m p lo s d e l a s s ecc io n es A c ce s o d e s d e e l  

t e c l a do a lo s v  í  nc u los  y A c c e so d e sd e e l t e c la d o a l o s fo r m u la r io s  .

O rd e n d e ta b u l a c ió n :La o r d e n d e t a b u la c ió n d e s c r ib e u n o r d e n (ló g i co ) p a r a n a v e g a r d e v í n cu lo a v í n cu lo o

d e co n t ro l d e fo rm u la r io a co n t ro l d e fo rm u la r io (u s u a lm e n te p re s io n an d o la t ec la “t a b ” ,

d e a q u í  e l n o m b re ) . Co n s u l t a r e j em p lo s en l a s ecc ió n A c c e s o d e s d e e l t e c l a d o a l o s  

fo rm ular io s  .

3 . 4 . 1 . - Co n t r o l in d e p e n d ie n t e d e l d is p o s it iv o p a ra in t e r fa c e s e m p o t r a d a s

A l g u n o s e l e m e n t o s i m p o r t a n o b j e t o s ( p o r e j e m p l o a p p l e t s o r e p r o d u c t o r e s m u l t i m e -

d i a ) c u y a s in t e r fa c e s n o p u e d e n s e r c o n t r o la d a s a t ra v e s d e l le n g u a je d e m a r c a d o . En

t a l e s ca s o s , l o s d es a r ro l l ad o res d eb e rí an p ro p o rc io n a r eq u iv a l en t e s a l t e rn a t i v o s co n i n -

t e r face s acces ib le s s i lo s p ro p io s o b je to s im p o r t ad o s n o lo s p ro p o rc io n an .

3 . 5 . - N a v e g a c ió n

Punto s d e v e r ificac ió n p a ra e s t a s e c c ió n : 1 4 . 3 , 1 3 . 4 , 1 3 . 5 , 1 3 . 3 , 1 3 . 7 y 1 3 . 2 .

U n e s t ilo d e p r e s e n t a c ió n c o h e r e n t e e n t r e la s p á g in as d e u n s it io p e rm it e a l o s u s u a r io s

lo c a liz a r lo s m e c a n i sm o s d e n a v e g a c ió n m á s f á c ilm e n t e , p e r o t a m b ié n p e rm i t e s a l t a r s e

lo s m e c a n is m o s d e n a v e g a c ió n m á s rá p i d a m e n t e p a r a e n c o n t ra r lo s c o n t e n id o s m á s im -

p o r t an t e s . E s to ay u d a a l a s p e r s o n as co n d i s cap ac id ad p a ra e l ap ren d i za j e y l a l ec tu ra ,

p e r o t am b ié n faci l i ta la navegació n a t o d o s l o s u s u a r io s . P re v is ib le m e n t e , a u m e n t a rá la

p r o b a b ilid a d d e q u e la g e n t e e n c u e n t r e la in fo r m a c ió n e n un s it io o la e v ite s i as í lo d e s e a .

Eje m p l o s d e e s t r u ct u ra s q u e p u e d e n a p a r e c e r e n e l m is m o lu g a r e n la s d i st in t a s p á g i-

n as d e u n s it io :

• Técnicas • Temas de Accesibi l idad •

Page 79: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 79/164

81

1 . Ba rra s d e n av e g ació n .

2 . Co n te nid o b á s ic o d e u n a p á g in a .

3 . Pu blic id ad .U n m e c a n is m o d e n a v e g a c ió n c r e a u n c o n ju n t o d e c a m in o s q u e e l u s u a rio p u e d e u t ili-

z a r e n u n s it io . El h e c h o d e p r o p o r c io n a r b a r ra s d e n a v e g a c ió n , m ap as d e l s it io y ca rac t e -

rí s t ica s d e b ú s q u e d a , a u m e n t ará la p ro b ab ilid ad d e q u e e l u s u a r io co n s ig a la in fo rm ac ió n

q u e b u s ca en u n s i t io . S i u n s i t io e s en s í  m is m o a l t am en te v i s u a l , r e s u l t a rí a m á s d i f  í c il

n a v e g a r p o r la e s t r u c tu r a si e l u s u a rio n o p u e d e h a c e r s e u n m a p a m e n t a l d e h a c ia d ó n d e

s e d ir ig e o d ó n d e h a e s t a d o . P a ra a y u d a r lo , lo s d e s a r ro lla d o r e s d e c o n t e n id o s d e b e r í a n

d e s c rib ir a lg u n o s m e c a n i sm o s d e n a v e g a c ió n . Es c ru c ia l q u e la s d es c r ip c io n es y g u í a s d e

lo s s it io s s e a n a c c e s ib le s , p u e s lo s u s u a r io s q u e s e h a n p e r d id o e n u n s it io d e p e n d e rá n

m u c h o d e e l la s .Cu an d o p ro p o rc io n an fu n c io n a lid ad e n la b ú s q u e d a , lo s d e s a rr o lla d o r e s d e c o n t e n id o s

d e b e rí a n o fr e c e r m e c a n is m o s d e b ú s q u e d a q u e s a t is fa g a n d i fe r e n t e s n iv e le s d e d e s e n -

v o lv im ien to y d is t in t a s p re fe re n c ia s . La m ay o r í a d e a y u d a s e n la b ú s q u e d a p id e n a l u s u a -

rio q u e in t ro d u zca p a lab ra s c lav e p a ra b u s ca r té rm in o s . Lo s u s u a r io s co n d ificu lt ad es p a ra

d e l e t r ea r o lo s n o fam ilia r izad o s co n e l id io m a d e l s it io , t e n d rá n d ificu lt ad es p a ra en co n -

t ra r lo que neces i tan s i l a b ú s q u e d a r e q u ie r e u n d e le t r e o p e r fe c t o . Lo s m e c a n is m o s d e

b ú s q u e d a d e b e rí an in c lu ir u n r ev is o r d e d e l e t r eo , o fr ece r a lt e rn a t iv as d e “la m e jo r o p -

c ió n ” , b ú s q u e d a s m e d ia n t e e je m p lo s d e p r e g u n t a , b ú s q u ed as p o r s im ilit u d , e t c .

3 . 6 . - C o m p r e n s i ó n

Punto s de ve r ificac ió n e n e s t a s e c ció n : 1 4 . 1 , 1 3 . 8 y 1 4 . 2 .

La s s e c c io n e s s ig u ie n t e s e x p o n e n l a s té cn icas p ara fac i lit a r la co m p ren s ió n d e u n a p á g i-

na o s it io .

3 .6 .1 . - Est ilo d e e scr itu ra

Las s ig u ien t e s s u g e re n c ia s s o b re e s t i lo s d e e s c rit u ra p o d rí a n a y u d a r a h a c e r e l c o n t e n i-

d o d e u n s it io m á s f á c il d e le e r p a r a t o d o s , y e s p e c ia lm e n t e p a ra la s p e r s o n a s c o n d i sc a -

p ac id ad es p a ra la le c tu ra y /o co g n it iv as . M u ch a s g u í as ( inc luyen d o [HA CKER]) exp on e n

é s to s y o t ro s a s p ec to s d e l e s t i lo d e e s c rit u ra co n m á s d e t a l le .

1 . Es fu é r c e s e p a r a q u e l a s d e s c r i p c i o n e s d e l o s v í n c u l o s y l o s e n c a b e z a m i e n t o s s e a n

claras y p re cisas . Ello incluye ut i lizar co m o v í n cu lo s fr a s e s co n c is a s q u e t e n g an s e n t id o

c u a n d o s e le a n fu e r a d e l co n t e x t o o c o m o p a rt e d e u n a s e r ie d e v í n cu lo s ( a lg u n o s

u s u a r io s n a v e g a n s a lt a n d o d e v í n cu lo a v í n c u lo y le y e n d o s ó lo e l t e x t o d e e s t o s v í n c u -

lo s ) . U t ilice e n cab e zam ien to s in fo rm a t iv o s , d e fo rm a q u e lo s u s u a r io s p u e d an r ev i s a r

• Técnicas • Tem as de Accesibi l idad •

Page 80: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 80/164

82

rá p id a m e n t e u n a p á g ina p ara ha lla r la in fo rm ació n , e n lu g a r d e t e n e r q u e l e e r la c o n

d e t a l l e .

2 . Sitú e e l c o n t e n id o b á s ico d e la fra s e o p á r ra fo a l p r in c ip io d e e llo s ( e s to e s d en o m in a -d o “co lo cac ió n inicial”) . El lo ayudará t a n to a la g e n t e q u e e s tá m irand o sup e rfic ia l -

m e n t e , c o m o a lo s q u e u s a n s in t e t iz a d o r e s d e v o z . “H o j e a r” , ap licad o a la vo z , s ig n i -

fic a h a b it u a lm e n t e q u e e l u s u a r io s a lt a d e e n c a b e z a m ie n t o a e n c a b e z a m ie n t o , o d e

p á rrafo a p á r ra fo , y escucha s ó lo la s p a lab ra s s u fic ie n t e s co m o p a ra e s t ab lece r s i e l

t r o z o d e i n f o r m a c ió n ( e n c a b e z a m i e n t o , p á rrafo, v í ncu lo , e tc . ) l e in te resa . S i l a idea

p r inc ipa l de l p á r ra fo e s tá en m ed io o a l fin a l d e l m is m o , lo s u s u a r io s d e s i n t e t izad o re s

d e v o z te n d rá n q u e e s c u c h a r c a s i t o d o e l d o c u m e n t o p a r a e n c o n t r a r l o q u e b u s c a n .

D e p e n d ie n d o d e lo q u e e l u s u a rio e s té b u s c a n d o , y d e c u á n t o s e p a s o b r e e l t e m a , la s

ca rac t e rí s t ica s d e b ú s q u e d a p u e d e n t a m b ié n ayu d ar a los u sua r ios a loca lizar e l con te -n id o m á s rá p i d a m e n t e .

3 . Lim í t e s e a u n a id e a p o r p á rrafo.

4 . Ev it e e l u s o d e a r g o t , je r g a s y s ig n ific a d o s p a r t ic u la r e s d e p a l a b ra s c o m u n e s , a n o s e r

q u e la s d e fin a e n e l p r o p i o d o c u m e n t o .

5 . Pr e fie r a la s p a la b ra s d e u s o c o m ú n . Por e je m p lo , u t ilice “e m p e z a r” m e j o r q u e “co -

m e n z a r” o “ i n t en t a r” m e jo r q u e “p r o c u r a r” .

6 . Ev it e fra s e s d e e s t ru c t u ra c o m p l ic a d a .

P a ra a y u d a r a d e t e r m in a r si s u d o c u m e n t o e s f  á c il d e lee r, co n t e m p le la p o s ib ilid ad d e

u s a r e l m ed id o r d e lec tu ra G u n n in g -Fo g (d es c r it o e n [SPO O L] co n e je m p lo s y la co n ex ió n

a l g o rí tm ica d e [TECH H EA D ]). Es t e a lg o r itm o g en e ra lm en te p ro d u ce u n a p u n tu a c ió n m e -

n o r c u a n d o e l c o n t e n i d o e s m á s f á c il d e lee r. Co m o d em u e s t ra e l e j em p lo , l a Bib lia ,

Sh ak es p ea re , M ark Tw a in y l a G u í a d e Te le v is ió n t ie n e n t o d o s u n í n d ic e Fo g d e a lr e d e d o r

d e 6 . E l í n d i c e F o g m e d i o d e l o s p e r ió d ico s Tim e , N e w s w ee k y Wall S t . Jo u rn a l e s d e

a lr e d e d o r d e 1 1 .

N O TA DE TRA DUCCIÓ N : e s t e e je m p l o n o e s b ie n e n t e n d id o p o r lo s t ra d u c t o re s p e r o s e  

m a n t ie n e p o r re spe to a l o r ig ina l e n ing l  é s ).

3 . 6 . 2 . - Eq u iv a le n t e s m u lt im e d ia

P a r a l a s p e r s o n a s q u e n o l e e n b i e n o q u e n o l e e n e n a b s o l u t o , l o s e q u i v a l e n t e s n o

t ex tu a l e s m u l t im ed ia p u ed en ay u d a r a f ac i l i t a r l a co m p ren s ió n . N o o b s t a n t e , te n g a e n

c u e n t a q u e la s p r e s e n t a c io n e s m u lt im e d ia n o s ie m p r e h a c e n e l t e x t o m á s c o m p r e n s ib le y

e n o c a s io n e s p u e d e n h a c e r lo m á s co n fu s o .

Eje m p lo s d e m u lt im e d ia q u e c o m p le m e n t a n a l te x t o :

1 . U n e s q u e m a d e lo s d a t o s c o m p le jo s , ta le s c o m o la s c ifra s d e v e n t a d e u n n e g o c io d e l

a ñ o fiscal anterior.

• Técnicas • Temas de Accesibi l idad •

Page 81: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 81/164

83

2 . Un a t ra d uc ció n d e l te x t o a u n a p r e s e n t a ció n a n im a d a e n le n g u a je d e s e ñ as . El le ng ua-

 je d e s e ñ a s e s m u y d i fe r e n t e d e l o s id i o m a s v e r b a le s . P o r e je m p l o , a lg u n a s p e r s o n a s

q u e p u e d e n c o m u n ic a rs e a t ra vé s d e l le n g u a je d e s e ñ a s a m e r ic a n o , n o s o n c a p a c e s d eleer ing lé s a m e r ic a n o .

3 . So n id o s m u s ic a le s p r e g r a b a d o s , d is c u rs o s h a b la d o s o e fe c t o s s o n o r o s p u e d e n t a m -

b ié n a y u d a r a lo s n o l e c t o r e s q u e p u e d e n p e r c ib ir p r e s e n t a c io n e s a u d it iv a s . Si b ie n e l

t e x t o p u e d e c o n v e rt irs e e n d is c u rs o a t r a vé s d e l s in t e t izad o r d e v o z , lo s cam b io s d e l a

v o z d e l d is c u rs o g ra b a d o p r o p o r c io n a n in fo r m a c ió n q u e c o n e l s in t e t iz a d o r d e v o z s e

p i e r d e .

3 . 7 . - N e g o c ia c ió n d e l c o n te n id o

Punto s de ve r ificac ió n e n e s t a s e c ció n : 1 1 . 3 .

1 . En lu g a r d e in c lu ir v í n c u lo s t a le s c o m o “A q u í  e s tá la v e rs ió n f r a n c e s a d e e s t e d o c u -

m e n t o ” , u s e l a n eg o c i ac ió n d e l c o n t e n i d o , d e f o r m a q u e s e p r o p o r c i o n e l a v e r s ió n

france sa a los c lie n te s q ue so l ic ite n la vers ió n fra n c e s a d e lo s d o c u m e n t o s .

2 . Si n o e s p o s ib le u s a r la n e g o c ia c ió n d e l c o n t e n id o , in d iq u e e l t ip o d e c o n t e n id o o e l

id io m a a t r avé s d e e t i q u e t a s (p o r e jem p lo , e n H TM L , u t ilic e “ t y p e ” y “hreflang ”).

3 . 8 . - Re fre s c o a u to m á tic o d e la p á g i n a

Punto s de ve r ificac ió n e n e s t a s e c ció n : 7 . 4 y 7 . 5 .

A v e c e s , lo s d e s a r ro lla d o r e s d e c o n t e n id o s c re a n p á g in a s q u e s e r e n u e v a n o c a m b ia n

s in q u e l o p id a e l u s u a r io . E s t e r e f r e s co au to m á t i c o p u e d e r e s u l t a r m u y d e s o r i e n t a d o r

p a ra a lg u n o s u s u a r io s . En lu g a r d e e llo , lo s au to re s d eb e rí a n (e n o r d e n d e p r e fe r e n c ia ):

1 . Co n fig u ra r e l s e rv id o r p a ra q u e u t ilic e e l có d ig o d e e s t a tu s H TTP ap ro p iad o (3 0 1 ) . Es

p refer ib le u t ilizar enca be zam ie n tos HTTP po rqu e red uce e l t rá fico d e In te rne t y e l t iem p o

d e d e s c arg a , e llo p u e d e s e r a p lic a d o a d o c u m e n t o s q u e n o s e a n H TM L y p u e d e s e r

u t iliz ad o p o r ap licac io n es q u e só lo so lic itan u na p e t ic ió n d e H EA D (p o r e je m p l o , lo s

r e v is o r e s d e v í n c u lo s ). D e l m is m o m o d o , lo s c ó d ig o s d e e s t a tu s d e l t ip o 3 0 x p r o p o r -

c io n an i n fo rm ac ió n d e l t ip o “t ra s la d o p e r m a n e n t e ” (“m o v e d p e r m a n e n t ly”) o “ t ras la-

d o t e m p o r al” (“m o v e d t e m p o r a ly”), lo cu a l n o p u e d e s e r d ad o co n u n r e fr e s co M ETA .

2 . S u s tit u ir la p á g i n a q u e h a s id o r e fr e s c a d a p o r u n a p á g in a fija q u e co n t e n g a u n v í ncu lo

a la n u e v a p á g in a .

N o t a : Tan to e l p u n to d e r e v is ió n 7 . 4 c o m o e n e l 7 .5 c o n lle v a n p r o b le m a s b a s a d o s e n e l

leg ad o d e l a s ap l icac io n es d e u s u a r io . Las m á s m o d e r n a s a p lic a c io n e s d e u s u a r io p u e d e n

inva lid ar e l re f re sco y sus t i tu ir lo p or u n v í n cu lo h ac ia la n u ev a in fo rm ac ió n a l p r inc ip io d e

la p á g in a .

• Técnicas • Tem as de Accesibi l idad •

Page 82: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 82/164

84

Lo s q u e s i g u e n , s o n e jem p lo s d es a co n s e j ad o s en H TM L. El p r im ero cam b ia a l u s u a r io

d e p á g in a a p á g i n a a in t e r v a lo s r e g u la r e s . Lo s d e s a r r o lla d o r e s d e c o n t e n id o s n o d e b e rí a n

u s a r e s t a té cn ica p a ra s im u la r t ecn o lo g í a “a v a n z a d a” . L o s d e s a r r o l l a d o r e s n o p u e d e np r e d e c ir c u a n t o t ie m p o n e c e s it a rá e l u s u a r io p a ra lee r u n a p á g i n a . Un r e fr e s c o p r e m a t u r o

d e s o r i e n t a a l u s u a r i o . L o s d e s a r r o l l a d o r e s d e c o n t e n i d o s d e b e rí an ev i ta r los re f rescos

p e r ió d icos y p e rm it ir a los u sua r ios e le g ir cu á n d o q u ie re n la s ig u ien t e in fo rm ac ió n .

Eje m p lo d e s a c o n s e ja d o :<META http-equiv=“refresh” content=“60”>

<BODY>

<P>... Información ...

</BODY>

El s ig u ien t e e j em p lo H TM L (u s an d o e l e l em e n to M ETA ) en v í a a l u s u a r io d e u n a p á g in a

a o t ra d e s p u é s d e u n d e s c a n s o . D e c u a l q u i e r m a n e r a , l o s d e s a r r o l l a d o r e s n o d e b e r í a n

r e d irig i r a lo s u s u a r io s c o n e s t a e t iq u e t a , p u e s t o q u e n o e s u n e s t á n d a r, lo s d es o r ien t a y

p u e d e in t e r ru m p i r la h is t o ria d e n a v e g a c ió n d e l a s p á ginas v i s i t adas .

Eje m p lo d e s a c o n s e ja d o :<HEAD>

<TITLE>¡No use esto!</TITLE>

<META http-equiv=”refresh” content=”5;http://www.acme.com/newpage”>

</HEAD>

<BODY>

<P>Si su navegador soporta el refresco, usted será transportado a

nuestro<A href=”http://www.acme.com/newpage”> nuevo sitio</A> en 5

segundos, de otro modo, seleccione el vínculo manualmente.

</BODY>

3 . 9 . - Pa rp a d e o d e la p a n t a lla

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 7 . 1 .

U n a p a n t a l l a p a r p a d e a n t e o c o n d e s t e l l o s p u e d e p r o v o c a r a t a q u e s e n u s u a r i o s c o n

ep ilep s ia fo to s en s it iv a , p o r lo q u e l o s d e s a r ro l lad o re s d e co n t en id o s d eb en e v it a r c r ea r -

la s . Lo s a t a q u e s p u e d e n s e r p r o v o c a d o s p o r p a rp a d e o s o d e s t e l lo s d e fr e c u e n c ia e n t r e 4

y 5 9 d e s t e llo s p o r s e g u n d o ( h e r tz io s ), c o n u n a c u m b r e d e s e n s ib ilid a d e n 2 0 d e s t e llo s

p o r s e g u n d o , a s í c o m o c a m b io s rá p id o s d e l a o s cu r id ad a la lu z (co m o la s lu ce s e s t ro b o s -có picas) .

• Técnicas • Temas de Accesibi l idad •

Page 83: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 83/164

85

3 . 1 0 . - D o c u m e n to s e m p a q u e ta d o s

Punto s de ve r ificac ió n e n e s t a s e c ció n : 1 3 . 9 .Lo s p a q u e t e s d e d o c u m e n t o s p u e d e n fa c ilit a r la le c t u r a fu e r a d e lí n ea . Pa ra c rea r u n

b lo q u e c o h e r e n t e :

• Utilice m e tad ato s p ara de scr ib i r la re lac ió n e n t r e lo s c o m p o n e n t e s d e l p a q u e t e (c o n -

su l ta r m e t a d a t o s d e l v  í  nculo  p ara H TM L).

• U t ilice h e r ram ien t a s d e a rch iv o t a l e s co m o z ip , t a r y g z ip , y s t u ffit p a ra c rea r e l p aq u e -

te .

3 . 1 1 . - Va lid a c ió n

Esta secc ió n c o m e n t a e s t ra t e g ia s y té c n ic a s p a r a r e v is a r lo s d o c u m e n t o s W e b y d e t e r-

m i n a r q u é t e m a s d e a c c e s i b i l i d a d h a n s i d o r e s u e l t o s y c u á l e s n o . E s t o s t e s t d e b e rí a n

res a l ta r la m ay o r í a d e l o s t em as d e acces ib i l i d ad y s o n v a l i o s o s p a ra r ed u c i r u n g ran

n ú m e r o d e b a r r e r a s d e a c c e s i b i l i d a d . N o o b s t a n t e , a l g u n a s d e e s t a s p o s i b i l i d a d e s d e

c o m p r o b a c ió n só lo r e p r o d u c e n c o n d ic io n e s c a u s a d a s p o r u n a d is c a p a c id a d ; n o s im u la n

la e x p e rie n c ia in t e g ra l q u e u n u s u a r io c o n d i sc a p a c id a d p o d r í a t e n e r. En s it u ac io n es r ea -

le s , sus p á g in a s p u e d e n s e r m e n o s m a n e ja b le s d e lo q u e e s p e r a b a . A s í p u e s , u n a d e la s

e s t ra t e g ia s r e c o m ie n d a q u e e l d e s a rr o lla d o r d e c o n t e n id o s o b s e rv e a p e r s o n a s c o n d ife -

r e n t e s d is c a p a c id a d e s m ie n t ra s in t e n t a n u s a r u n a p á g ina o s it io . S i d e sp u é s d e c o m p le t a r

e l t e s t y rea jus ta r su d ise ñ o c o n fo r m e a é l, t o d av í a e n c u e n t ra q u e s u p á g i n a n o e s a c c e s i-

b le , p r o b a b le m e n t e d e b e rí a c r e a r u n a  p á  g in a a lt e rn a t iv a  q u e s e a a c c e s ib le .

N o t a : Su p e ra r e s to s t e s t s n o g a ran t iza la a d e c u a c i  ó n  a las “Pau ta s d e A cce s ib ilid ad a l

c o n t e n id o d e la W e b 1 . 0 ” .

3 .1 1 .1 . - Va l id ad o res au to m á t icos

Un val id ad or p ue d e v e r ificar la s in tax is d e su s p á g ina s (po r e jem p lo , H TM L, CSS, XM L).

U n a s in t ax is co r rec t a ay u d a rá a e lim in a r p a r t e d e lo s p r o b le m a s d e a c c e s ib ilid a d , p u e s t o

q u e e l p r o g ra m a p r o c e s a rá m á s f á c ilm e n t e l o s d o c u m e n t o s b ie n fo r m a d o s . Ig u a lm e n t e ,

a lg u n o s v a lid a d o r e s p u e d e n a d v e r t irle d e a lg u n o s p r o b le m a s d e a c c e s ib ilid a d b a s a d o s

só lo e n la s in t a x is (p o r e je m p l o , u n d o c u m e n t o q u e h a y a p e r d id o u n a t rib u t o o p r o p ie d a d

im p o r t an t e p a ra la acce s ib ilid ad ). Ten g a e n cu e n t a , n o o b s t an t e , q u e u n a co rrec t a s in t ax is

n o g a ra n t iz a q u e e l d o c u m e n t o s e rá a c c e s ib le . P o r e je m p l o , u s t e d p u e d e p r o p o r c io n a r u n

t e x t o e q u iv a le n t e p a r a u n a im a g e n d e a c u e r d o c o n l a s e s p e c ific a c io n e s lin g ü í s t ica s , p e ro

e l t e x t o p u e d e s e r in e x a c t o o in s u fic ie n t e . P o r ta n t o , a lg u n o s v a lid a d o r e s p u e d e n h a c e r le

p r e g u n t a s y co n d u c irle a a s p e c t o s m á s s u b j e t iv o s d e l an á lis is . A lg u n o s e jem p lo s d e v a li-d a d o r e s a u t o m á t ico s inc luye n :

• Técnicas • Tem as de Accesibi l idad •

Page 84: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 84/164

86

1 . U na h e r ra m ie n t a d e v a lid a c ió n d e l a acces ib ilid ad au to m a t izad a , t a l co m o Bo b b y (co n -

su ltar [BO BBY]).

2 . U n s e rv ic io d e v a lid a c ió n H TM L, com o e l Serv ic io d e Val id ac ió n W 3C HTM L (con su l ta r[H TM LVA L]).

3 . U n s e rv ic io d e v a lid a c ió n d e h o ja s d e e s t i lo , co m o e l Se rv ic io d e Va lid ac ió n W 3 C CSS

(consultar [CSSVAL]).

3 . 1 1 . 2 . - H e rra m ie n t a s d e r e p a ra c ió n

N o r m a l m e n t e , l o s v a l i d a d o r e s i n d i c a n q u é a s p e c t o s h a y q u e r e s o l v e r y , a m e n u d o ,

o fr e c e n e je m p lo s d e c ó m o r e s o l v e rlo s . N o r m a lm e n t e n o a y u d a n a l a u t o r a a fr o n t a r e l

p ro b l em a y re s o lv e r lo m o d ifican d o e l d o cu m en to d e fo rm a in t e rac t iv a . El G ru p o d e Tra -b a jo d e Ev a lu ac ió n y Rep a rac ió n de WAI ([WAI-ER]) está t rab a j an d o p a ra d e s a r ro l la r u n a

b a t e rí a d e h e r ra m ie n t a s q u e a y u d e n a lo s a u t o r e s n o s ó lo a id e n t i ficar los p rob le m as , s ino

a r e s o lv e r lo s i n t e rac t iv am en te .

3 .1 1 .3 . - Po s ib ilid ad e s d e l u su a r io

Te n g a e n c u e n t a q u e la m a y o rí a d e la s ap l icac io n e s d e u s u a r io (n av eg ad o re s ) y s is t em as

o p e r a t iv o s p e r m it e n a l o s u s u a rio s c o n fig u ra r c o m p o s ic io n e s q u e c a m b ia n e l m o d o e n e l

q u e e l p r o g ra m a s e m u e s t ra , s u e n a y fu n c io n a . C o n la v a r ie d a d d e a p l ic a c io n e s d e u s u a r io

q u e e x is t e n , d ife r e n t e s u s u a r io s t e n d rá n e x p e r ien c ia s m u y d is t in t a s co n la We b . Po r t an -

to :

1 . Re v is e su s p á g in a s c o n u n n a v e g a d o r só lo - te x to com o Lynx ( [LYNX]) o un s im ulado r

d e Lynx co m o e l Lynx Vie w e r ([LYNXVIEW ]) o Lynx-m e ([LYNXM E]).

2 . U tilic e v a rio s n a v e g a d o r e s g rá ficos con :

• So n id o s e im á g e n e s c arg a d a s .

• Im á g e n e s n o c a rg a d a s .

• S o n id o s n o c a rg a d o s .

• Sin rató n .

• M arco s , s c rip t s , h o ja s d e e s t i lo y ap p le t s n o ca rg ad o s .

3 . U t ilic e v a rio s n a v e g a d o r e s a n tig u o s y n u e v o s . N o t a  : A lg u n o s s is t e m a s o p e ra t iv o s o

n a v e g a d o r e s n o p e r m it e n la in s t a la c ió n m ú lt ip l e d e n a v e g a d o r e s e n la m is m a m á q u i -

n a . Tam b ié n p u e d e s e r d if  í c il e n c o n t ra r p r o g r a m a s a n t ig u o s d e n a v e g a c ió n .

4 . U t ilic e o t ra s h e r ra m ie n t a s , t a le s c o m o u n n a v e g a d o r p o r v o z (p o r e j e m p l o [P W W E BS -

PEAK] y [HO M EPAGEREADER]), un le cto r d e p an tal la (po r e je m p lo [JAW S] y [W INVI-

SIO N ]), p ro g ram as d e m ag n ificac ió n , u n d is p o s it iv o p e q u e ñ o , u n t e c la d o d e p a n t a lla ,

u n t e c lad o a l te rn a t iv o , e t c .

• Técnicas • Temas de Accesibi l idad •

Page 85: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 85/164

87

3 .1 1 .4 . - Rev is ió n o r to g rá fica y g ram at ica l

U n a p e r s o n a q u e le a u n a p á g i n a c o n u n s i n t e t i z a d o r d e v o z , p u e d e n o s e r c a p a z d ed e sc ifra r la in te rp re tac ió n d e l s in t e t izad o r p a ra u n a p a lab ra co n e r ro re s o r t o g rá ficos. Los

r e v is o r e s g ra m a t ic a le s p u e d e n a y u d a r a a s e g u r a r q u e e l c o n t e n id o d e l t e x t o d e la p á g in a

es co r rec to . E llo ay u d a rá a lo s le c t o r e s p a ra lo s q u e e l d o c u m e n t o n o e s tá e n s u le n g u a

n a t iv a o l o s q u e e s t á n a p r e n d ie n d o e l id io m a d e l d o c u m e n t o . A s í a y u d a rá a in c r e m e n t a r

la c o m p r e n s ió n d e l a p á g in a .

3 . 1 2 . - S o p o rte d e l n a ve g a d o r

Punto s de ve r ificac ió n e n e s t a s e c ció n : 1 1 . 1 .N o t a  : En e l m o m e n t o d e e s c r ib ir e s t e t e x t o , n o t o d a s la s a p lic a c io n e s d e u s u a r io s o p o r-

t a n a lg u n o s d e lo s (n u e v o s ) a t rib u t o s y e le m e n t o s d e H TM L 4 . 0 q u e p u e d e n in c r e m e n t a r

s ig n i fica t ivam e nte la acc e s ib i lid ad d e las p á g i n a s W e b .

Por favo r, co nsu lte e l s it io We b d e W 3C ([WAI-UA-SUPO RT]) para in fo rm ació n s o b r e

n a v e g a d o r e s y o t r a s a p lic a c io n e s d e u s u a r io q u e s o p o r ta n p r e s e n t a c io n e s a c c e s ib le s .

En g e n e ra l, t en g a e n cu e n t a q u e la s ap licac io n es d e u s u a r io H TM L ig n o ran lo s a t r ib u to s

q u e e lla s m is m a s n o s o p o rt a n e in t e r p r e t a n e l c o n t e n id o d e lo s e le m e n t o s q u e n o s o p o r -

t a n .

• Técnicas • Tem as de Accesibi l idad •

Page 86: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 86/164

88

4.- TÉCNICAS HTML

Las s ig u ien t e s s e cc io n e s h acen u n a r e lac ió n d e a lg u n a s t é cn icas p a ra d is e ñ a r d o c u m e n -tos HTML acces ib les . Las secc iones es t á n o rg an i zad as p o r t em as (y r e fle j an la o rg an iza -

c ió n d e la e s p ec i ficac ió n HTM L 4 .0 [HTM L4 0 ]).

4 . 1 . - Es t ru c t u ra d e l d o c u m e n t o y m e ta d a t o s

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 3 . 2 .

L o s d e s a r r o l l a d o r e s d e c o n t e n i d o s d e b e r í a n u s a r m a r ca c ió n estructural y ut i l izarla se-

g ú n la e sp e c ificac ió n . Lo s e le m en to s y a t r ib u to s e s t ru c tu ra le s (co n s u lt a r e l í  n d ic e d e e le -  

m e n tos y a t ribu to s H TM L  p a ra id en t ifica r lo s ) fo m en tan la co h e re n c ia e n lo s d o cu m en to sy p r o v e e n d e in fo r m a c ió n a o t ra s h e rra m ie n t a s ( p o r e je m p l o , h e r ra m ie n t a s d e in d e x a -

c ió n , m o t o r e s d e b ú s q u e d a , p r o g ra m a s q u e e x t ra e n t a b la s d e b a s e s d e d a t o s , h e rra m ie n -

t a s d e n a v e g a c ió n q u e u s a n e le m e n t o s d e e n c a b e z a m ie n t o y p r o g r a m a s d e t ra d u c c ió n

a u t o m á t ic a q u e t ra d u c e n e l t e x t o d e u n id i o m a a o t r o ).

4 . 1 . 1 .- M e t a d a t o s

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 3 . 2 .

A lg u n o s e le m e n t o s e s t ru c t u ra le s p r o p o r c io n a n in fo r m a c ió n s o b r e e l p r o p io d o c u m e n -

t o . Es to e s d e n o m in a d o “m e t a d a t o ” s o b r e e l d o c u m e n t o ( M e t a d a t o e s in fo r m a c ió n s o b r e

d a t o s ). Lo s m e t a d a t o s b ie n c o n s t ru id o s p u e d e n p r o p o r c io n a r a lo s u s u a r io s im p o rt a n t e

in fo rm ac ió n o r i en t a t i v a . L o s e l em en to s H T M L q u e p ro p o rc io n an i n fo rm ac ió n ú t i l sobre

u n d o c u m e n t o in c lu y e n :

• TITLE: El t í t u lo d e l d o c u m e n t o . O b s e r v e q u e e l (p r e c e p t iv o ) e le m e n t o TITLE, q u e só lo

a p a r e c e u n a v e z e n u n d o c u m e n t o , e s d ife r e n t e d e l a t rib u t o “ title ” , q u e s e ap lica a ca s i

t o d o s l o s e l e m e n t o s H T M L 4 . 0 . L o s d e s a r r o l l a d o r e s d e c o n t e n i d o d e b e rí a n u s a r e l

a t r ibu to “title ” d e acu e rd o co n l a s e s p ec i f i cac io n es H T M L 4 . 0 . Po r e j em p lo , “ title ”d e b e rí a s e r u sa d o c o n v í n cu lo s p a ra p ro p o rc io n a r i n fo rm ac ió n s o b r e e l o b je t iv o d e l

v í n cu lo .

• ADDRESS: Pu e d e u s a rs e p a r a p r o p o r c io n a r in fo r m a c ió n s o b r e e l cr e a d o r d e la p á g in a .

• LINK: Pu ed e s e r u s ad o p a ra i n d i ca r d o cu m en to s a l t e rn a t i v o s (d i f e ren t e e s t ru c tu ra ,

d ife re n t e i d io m a , d i fe re n t e m e can is m o d e l leg a r a l o b je t i v o ).

• E l e l em en to META p u e d e e s p e c i f i c a r m e t a d a t o s s u b j e t i v o s p a r a u n d o c u m e n t o . P o r

favor , consu l te en la secc ió n d e re fre sc o a u to m á t ic o d e la p  á  g in a  p a ra o b t en e r in fo r -

m a c ió n s o b r e p o r q u é M ETA n o d e b e u s a r s e p a ra r em it ir a p á g in as .

• Técni cas H TM L •

Page 87: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 87/164

89

4 . 1 . 2 .- En c a b e z a m ie n t o s d e s e c c ió n

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 3 . 5 .L a s s e c c i o n e s d e b e rí a n i n i c i a r s e c o n l o s e l e m e n t o s d e e n c a b e z a m i e n t o H T M L ( H 1 -

H 6 ). O t r o m a r ca d o r p u e d e c o m p le m e n t a r e s to s e le m e n t o s p a ra m e jo r ar la p re s e n t a c ió n

(p o r e je m p l o , e l e le m e n t o H R p a r a c r e a r u n a lí n e a d iv is o r ia h o r izo n t a l), p e ro la p re s e n t a -

c ió n v is u a l n o e s s u fic ien t e p a ra id en t ifica r la s s ecc io n e s d e u n d o cu m en to . Pu es to q u e

a lg u n o s u s u a rio s h o je a n u n d o c u m e n t o n a v e g a n d o s u s e n c a b e z a m ie n t o s , e s im p o rt a n te

u s a rlo s a p r o p i a d a m e n t e p a r a e x p r e s a r la e s t r u c tu r a d e l d o c u m e n t o . Lo s d e s a r ro lla d o r e s

d e b e rí a n o r d e n a r lo s e le m e n t o s d e e n c a b e z a m ie n t o d e fo r m a a p r o p ia d a . Po r e je m p lo , e n

H TM L , lo s e le m e n t o s H 2 d e b e rí a n s e g u ir a lo s e l e m e n t o s H 1 , lo s H 3 d e b e rí an s e g u ir a lo s

e le m e n t o s H 2 , e t c . Lo s d e s a rr o lla d o r e s d e c o n t e n id o n o d e b e r í a n “sal tarse ” n iv e l e s (p o re je m p l o , p a s a r d i re c t a m e n t e d e H 1 a H 3 ) . N o u t ilic e e n c a b e z a m ie n t o s p a r a c re a r e fe c t o s

d e fu e n t e s . U s e ho ja s d e e s t ilo p a r a c a m b ia r lo s e s t ilo s d e fue n te s  , p o r e je m p l o .

O b s e r v e q u e e n H TM L , lo s e l e m e n t o s d e e n c a b e z a m ie n t o ( H 1 - H 6 ) só lo in ician se ccio-

n e s y n o l a s in c lu y e n c o m o e le m e n t o d e l c o n t e n id o . El s ig u ie n t e m a r c a d o r H TM L m u e s -

tra có m o d e b e n u s a r s e la s h o j a s d e e s t ilo p a r a c o n t ro la r la p r e s e n t a c ió n d e u n e n c a b e za -

m ie n t o y e l c o n t e n id o , t a l y c o m o s ig u e :

E j e m p l o :<HEAD>

<TITLE>Técnicas de cocina</TITLE>

<STYLE type=“text/css”>

/* Sangra el encabezamiento y el contenido siguiente */

DIV.section2 { margin-left: 5% }

</STYLE>

</HEAD>

<H1>Técnicas de cocina</H1>

....... algún texto aquí .....

<DIV class=“section2”>

<H2>Cocinar con aceite</H2>

...... texto para esta sección .....

</DIV>

<DIV class=“section2”>

<H2>Cocinar con mantequilla</H2>

...... texto para esta sección .....

</DIV>

• Técn i cas H TM L •

Page 88: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 88/164

90

4 . 1 . 3 .- M e t a d a t o s d e v í n c u lo s y h e r ra m ie n t a s d e n a v e g a c ió n

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 3 . 2 .Lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e r í an u s a r e l e lem en to L IN K y lo s t ip o s d e v í n c u -

los (co nsu lta r [HTM L40 ], se cc ió n 6 . 1 2 ) p a r a d e s c rib ir lo s m e c a n i sm o s d e n a v e g a c ió n y la

o rg an i zac ió n d e l d o c u m e n t o . A lg u n a s a p lic a c io n e s d e u s u a r io p u e d e n s in t e t iz a r h e rra -

m i e n t a s d e n a v e g a c ió n o p e rm i t i r l a im p res ió n o r d e n a d a d e u n g ru p o d e d o c u m e n t o s

b a s a d o s e n e s t e m a r ca d o r.

E j e m p l o :Lo s s ig u ien t e s e lem e n to s LIN K p o d rí a n s e r in c lu id o s e n e l e n c a b e z a m ie n t o d e l

ca p í t u lo 2 d e u n lib ro :

<LINK rel=“Siguiente” href=“capitulo2”>

<LINK rel=“Anterior” href=“capitulo1”>

<LINK rel=“Inicio” href=“cubierta”>

<LINK rel=“Glosario” href=“glosario”>

Co n s u lt e t a m b ié n la s e c c i  ó n d e v  í  nc u los  .

4 . 1 . 4 . - A g r u p a c ió n e s t ru c tu r a l

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 2 . 3 .

Lo s s ig u ien t e s m eca n is m o s H TM L 4 . 0 ag ru p an e l co n t e n id o y fac ilit an s u co m p ren s ió n :

• Ut ilice FIELDSET p a ra a g r u p a r c o n t ro le s d e fo r m u la rio e n u n id a d e s s e m  á nt icas  y d e s -

c r ib a e l g ru p o co n e l e lem en to L EG EN D

• Utilice O PTGRO UP p ara or ga n iz a r la s lis t a s la r ga s d e o p c ion e s d e m e n  ú  e n g ru p o s m  á s 

 p e q u e ñ o s .

• Utilice ta b la s pa ra da to s tabu la res  y d e scr iba la t ab la co n CAPTIO N.

• Ag rup e las f ilas y c o lum na s d e las t ab las c o n THEAD, TBOD Y, TFO O T y CO LGRO UP.• An id e lis ta  co n UL, O L y DL.

• U s e lo s e n c a b e z a m ie n t o s d e s e c c i  ó n  (H 1 - H 6 ) p a r a c r e a r d o c u m e n t o s e s t ru c t u ra d o s y

s e p a r a r t ra m o s la rg o s d e t e x t o .

• Sep a re la s lí n e a s d e t e x to e n p á r ra fo s (co n e l e l em en to P ).

To d o s e s t o s m e c a n is m o s d e a g r u p a c ió n d e b e rí a n s e r u sa d o s c u a n d o s e a n a p r o p ia d o s y

n a tu ra le s , p o r e j em p lo , cu an d o la in fo rm ac ió n s e d é e n g ru p o s ló g ico s . L o s d es a r ro l lad o -

r e s d e c o n t e n id o n o d e b e rí a n c r e a r g r u p o s d e fo r m a a le a t o r ia , p u e s t o q u e p u e d e n c o n -

fun d ir a lo s us uar ios .

• Técni cas H TM L •

Page 89: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 89/164

91

4 . 2 . - In f o rm a c ió n s o b re e l id i o m a

Punto s de ve r ificac ió n e n e s t a s e c ció n : 4 . 1 y 4 . 3 .S i u t i liza va r ios id iom as e n u na p á g i n a , a s e g u r e q u e c u a lq u ie r c a m b io d e id i o m a e s t é

c la ram en te i d e n t ificad o , m e d ian t e e l u s o d e l a t rib u to “lang ”:

E j e m p l o :<P>y con un cierto<SPAN lang=”fr”>je ne sais quoi</SPAN>, ella

entró tanto en la habitación como en su vida para siempre.

<Q>Mi nombre es Natasha</Q> dijo ella. <Q lang=”it”>Piacere,</

Q> respondió él en impecable italiano, cerrando la puerta.

Id e n t ific a r lo s c a m b io s d e id i o m a e s im p o rt a n t e p o r u n a s e r ie d e ra z o n e s :

1 . Lo s u su a rio s q u e e s té n le y e n d o e l d o c u m e n t o e n b r a ille p o d rá n sust i tu ir los có d i g o s

d e c o n t r o l a d e c u a d o s (m a r c a d o r e s ) c u a n d o t e n g a n lu g a r lo s c a m b io s d e id i o m a , p a ra

a s e g u r a r q u e e l p r o g ra m a d e t ra d u c c ió n b ra ille g en e ra rá lo s ca rac t e re s co r re c to s (p o r

e j em p lo , ca rac t e re s acen tu a d o s ) . Es to s có d ig o s d e c o n t ro l p r e v ie n e n t a m b ié n q u e s e

g en e re n co n t r acc io n e s b ra ille , q u e co n fu n d irá n m á s a l usuar io . Las con t racc ion e s b ra i -

lle c o m b in a n g ru p o s d e c a r a c te r e s c o m ú n m e n t e u t iliz a d o s , q u e u s u a lm e n t e a p a r e c e n

e n c e ld a s m ú lt ip le s , en u n a s o la ce ld a . Po r e jem p lo , “in g ” , q u e h a b it u a lm e n t e o c u p a

t r e s c e ld a s (u n a p a r a c a d a le t r a ) p u e d e c o n t r a e rs e e n u n a s o la c e l d a .

2 . D e fo r m a s im ila r, lo s s in t e t iz a d o r e s d e v o z q u e “h ab l an” v a r io s i d io m as , s e rá n c a p a c e s

d e g e n e r a r e l t e x t o c o n e l a c e n t o y l a p r o n u n c i a c ió n a d e c u a d o s . S i lo s c a m b io s n o

e s tá n se ñ a lad os , e l s in te t izad or t ra ta rá d e p ro n u n c ia r lo s e n e l id io m a o r ig in a l d e l p ro -

g r a m a . A s í , la p a lab ra fr an ces a p a ra co ch e , “voi tu re ” , s e rá p r o n u n c i a d a “voi tu re ” , y no

“vuat i i” .

3 . Lo s u s u a rio s in c a p a c e s d e t ra d u c ir id i o m a s , o b t e n d rá n l a t rad u cc ió n d e lo s t e x t o s d e

id i o m a s n o c o n o c id o s m e d ia n t e lo s p r o g ra m a s d e t ra d u c c ió n .

Es, a s í m is m o , u na b u e n a p rá c t ica id en t ifica r e l id io m a o r ig in a l d e u n d o cu m en to , b i en

c o n u n m a r c a d o r (c o m o s e m u e s t r a a b a jo ) o b ie n a t ra v é s d e en cab e zam ie n to s H TTP.

E j e m p l o :<HTML lang=”es”>

.... resto de un documento HTML escrito en español ....

</HTML>

• Técn i cas H TM L •

Page 90: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 90/164

92

4 .3 . - M a rc a d o re s d e te x to

La s s e c c io n e s s ig u ie n t e s t ra t a n lo s m o d o s d e a g r e g a r e s t ru c t u ra a t r o z o s d e t e x t o .

4 . 3 . 1 . - Énfasis

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 3 . 3 .

D e b e rí an s e r u t iliz ad o s lo s e lem en to s H TM L ap ro p iad o s p a ra r em arca r e l é nfasis: EM y

STRONG.

N o d e b e rí an u t iliz a r s e lo s e lem en to s B e I, y a q u e s e u s an p a ra c rea r u n e fec to v is u a l d e

p r e s e n t a c ió n . Lo s e l em e n to s EM y STRO N G fu e ro n d is e ñ ad o s p a ra i n d i ca r u n é nfasis

e s t r u ct u ra l, q u e p u e d e s e r p l a sm a d o e n v a r io s m o d o s (c a m b io s d e e s t ilo d e fu e n t e , c a m -b ios d e in fle x ió n d e l d i s cu rs o , e t c . ).

4 . 3 . 2 . - A c ró n im o s y ab rev ia tu ra s

Punto s d e v e r ificac ió n p a ra e s t a s e c c ió n : 4 . 2 .

M arq u e l a s ab rev i a tu ra s y ac ró nim o s co n A BBR y ACRO NYM y ut i lice “ title ” p a ra in d ica r

la e x p a n s ió n :

E j e m p l o :<P>¡Bienvenido a la <ACRONYM title=”World Wide Web”>WWW</ACRONYM>!

4 .3 .3 . - C i tas

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 3 . 7 .

Lo s e lem e n to s Q y BLO CKQ U O TE m arcan lí n e a s y b lo q u e s d e c it a s , r e s p e c t iv a m e n t e .

E j e m p l o :Es te e jem p lo m arca u n a c it a la rg a co n BLO CKQ U O TE:

<BLOCKQUOTE cite=”http://www.shakespeare.com/loveslabourlost”>

<P>¡Recompensa! ¡Oh! Esa es la palabra latina para tres peniques.

— William Shakespeare (“Trabajos perdidos de amor”)

</P>

</BLOCKQUOTE>

• Técni cas H TM L •

Page 91: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 91/164

93

4 . 3 . 4 . - M a r c a d o r e s y h o j a s d e e s t ilo m e jo r q u e im á g e n e s : e l e je m p lo d e la s m a t e m á t icas

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 3 . 1 .El u s o d e m a r c a d o r e s ( y h o ja s d e e s t ilo ) d o n d e s e a p o s ib le , m e jo r q u e im á g e n e s (p o r

e je m p lo , e n u n a e c u a c ió n m a te m á t ic a ), p ro m u e v e la acce s ib ilid ad p o r la s s i g u ien t e s r a -

z o n e s :

• El t e x t o p u e d e s e r a m p l ia d o o i n t e rp r e t a d o c o m o d is c u rs o o b r a ille .

• Lo s m e c a n is m o s d e b ú s q u e d a p u e d e n u s a r la in fo r m a c ió n d e l t e x t o .

Co m o e je m p lo , c o n s id e r e e s t a s té cn icas p a ra in t ro d u c ir m a t em á t ic a s en la We b :

• A s e g ú r e s e d e q u e e l u s u a r io s a b e lo q u e r e p r e s e n t a n l a s v a ria b le s , p o r e je m p l o , e n la

e c u a c ió n “F = m * a ” , in d iq u e q u e F = fu e r z a , m = m a s a y a = a c e le r a c ió n .

• Para ecu ac io n es m á s s im p les u t ilic e ca rac t e re s , co m o e n “x + y = z” .• Para ecu ac io n es m á s c o m p l e ja s , m á rquelas con MathML ([MATHML]) o TeX. N o t a  :

M a t h M L p u e d e s e r u sa d o p a r a c re a r d o c u m e n t o s m u y a c ce s ib le s , p e r o c o m ú n m e n t e

n o e s t a n a m p lia m e n t e s o p o r ta d o y u s a d o c o m o Te X.

• P ro p o r c io n e u n a d e s c rip c ió n d e t e x t o d e la e c u a c ió n y , d o n d e s e a p o s ib le , u s e r e fe -

r e n c ia s c o n e n t id a d d e c a ra c t e r e s p a ra c r e a r s í m b o lo s m a te m á t ic o s . D e b e p r o p o r c io -

n a r s e u n t e x to e q u iv a le n t e s i la ecu ac ió n e s tá re p r e s e n t a d a p o r u n a o m á s im á g e n e s .

Te X s e u s a h a b it u a lm e n t e p a r a c re a r d o c u m e n t a c ió n té c n ic a q u e e n t o n c e s s e c o n v ie r t e

a HTM L p ara su p ub licac ió n e n la W e b . Pu e s t o q u e lo s c o n v e rt id o r e s t ie n d e n a g e n e r a r

im á g en es , u t i l i z an m arcad o res d es aco n s e j ad o s y u t i l i z an t ab l a s p a ra m aq u e t a r , l o s r e s -

p o n s a b le s d e l c o n t e n id o d e b e r í a n e n c o n s e c u e n c ia :

1 . H a c e r q u e e l d o c u m e n t o o r ig i n a l Te X (o L a Te X ) e s té d i s p o n ib l e en l a Web . H ay u n

s is te m a d e n o m in a d o “AsTeR” ([A STER]) q u e p u e d e c rea r u n a r ep re s e n t ac ió n au d it iva

d e d o cu m en to s TeX y LaTeX . Tam b ié n IBM t ie n e u n p lu g - in p a ra N e s t c a p e e In t e r n e t

Exp lo rer q ue le e d oc um e nto s Te X/ LaTe X y a lg un os M athM L (co nsu lta r [HYPERM E-

DIA]).

2 . A se g u ra r q u e e l có d i g o H TM L cr e a d o e n e l p r o c e s o d e c o n v e r s ió n e s acce s ib le . P ro -

p o r c io n e u n a s o la d e s c r ip c ió n d e la e c u a c ió n (m e jo r q u e t e x t o “a lt” d e c a d a im a g e n

g e n e r a d a , p u e s t o q u e p u e d e h a b e r p e q u e ñ as im á g e n e s p a r a p a r t e s y t r o z o s d e l a

e c u a c ió n ).

4 . 3 . 5 . - D iv e r s o s m a r c a d o r e s e s t ru c t u ra le s

La especif icació n H TM L 4 . 0 d e fin e lo s s i g u ien t e s e lem e n to s e s t ru c tu ra le s p a ra la s n e ce -

s id a d e s d e d iv e rs o s m a r ca d o r e s :

CITE: Co n t ien e u n a c i t a o r e fe ren c i a a o t r a s fu e n t e s .

DFN: Ind ica q ue e s la d e fin ic ió n d e l té r m in o a d ju n t o .

• Técn i cas H TM L •

Page 92: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 92/164

94

CODE: D e s ig n a u n fra g m e n t o d e c ó d ig o in fo rm á t i co .

S A M P : D e s ig n a u n a m u e s t r a d e l fic h e r o d e s a lid a d e u n p r o g r a m a , s c rip t , e t c .

KBD: In d ica e l t ex to q u e d eb e i n t ro d u c ir e l u s u a r io .VAR: In d ic a u n e je m p lo d e u n a v a ria b le o a r g u m e n t o d e u n p r o g r am a .

INS: In d ic a u n t e x t o in s e r t a d o e n u n d o c u m e n t o .

DEL: In d ic a u n t e x t o s u p r im id o d e u n d o c u m e n t o .

4 . 4 . - Li s t a s

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 3 . 6 .

Lo s e lem en to s d e lis t ad o H TM L D L, U L y O L d eb e rí a n s e r u sa d o s ú n ic a m e n t e p a r a c re a r

lis t a s , n o p a ra fo r m a t e a r e fe c t o s t a le s c o m o s a n g r í a .Las lis t a s o rd e n ad as ay u d an a n av e g a r a lo s u s u a r io s n o v id en t e s . Lo s u s u a r io s n o v i-

d e n t e s p u e d e n “s e n t irs e p e r d id o s” en la s lis t a s , e s p ec i a lm e n te e n la s an id ad as y aq u e l la s

q u e n o e s p ec i f i can e l n iv e l d e an id am ien to p a ra cad a i t em d e l a l i s t a . H as t a q u e l a s

ap l i cac io n es d e u s u a r io p ro p o rc io n en u n m ed io p a ra i d en t i f i ca r c l a ram en te e l co n t ex to

d e la lis t a (p o r e je m p l o , in c lu y e n d o e l p s e u d o - e le m e n t o “ :befo re ” e n CSS2 ) , lo s d es a r ro -

lla d o r e s d e c o n t e n id o d e b e r í an inc lu i r p is tas co n te x tua le s e n su s lis tas .

Pa ra l is t a s n u m erad as , lo s n ú m e r o s co m p u e s t o s so n m á s in fo rm a t iv o s q u e lo s s im p le s .

A s í , u n a lis t a n u m erad a “1 , 1 . 1 , 1 . 2 , 1 . 2 . 1 , 1 . 3 , 2 , 2 . 1 , . ..” p r o p o r c io n a m á s c o n t e x to q u e

la m ism a l is ta s in n ú m e r o s c o m p u e s t o s , la c u a l s e fo r m a t e a r í a a s í :1 .

1 .

2 .

1 .

3 .

2 .

1 .

y s e rí a n a rra d a c o m o “1 , 1 , 2 , 1 , 3 , 2 , 1 ” , s in ap or ta r in fo rm ació n s o b r e l a p r o fu n d id a d

de la l is ta .

[CSS1] y [CSS2] pe rm ite n a los usu ar ios c on t ro lar los e s t ilos d e n ú m ero s (p a ra to d a lis t a ,

n o só lo l a s o rd e n ad as ) a t r avé s d e la s h o ja s d e e s t ilo d e l u s u a r io .

• Técni cas H TM L •

Page 93: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 93/164

95

E j e m p l o :La s ig u ien t e h o j a d e e s t i lo CSS2 m u e s t ra c ó m o es p e c ifica r nú m e r o s c o m p u e s -

t o s p a ra lis t a s a n id a d a s c r e a d a s t a n t o c o n e le m e n t o s U L c o m o O L. Lo s í t e m s

e s tá n n u m e ra d o s co m o “1 ” , “1 .1 ” , , “1 . 1 . 1 ” , e t c .

<STYLE type=”text/css”>

UL, OL { counter-reset: item }

LI { display: block }

LI:before { content: counters (item, “.”);

counter-increment: item }

</STYLE>

H as t a q u e CSS2 s ea am p l i am en te u t i l i z ad a o l a s ap l i cac io n es d e u s u a r io p e rm i t an a l

usu ar io co n t ro lar la in te rp re tac ió n d e las l is tas a t ravé s d e o t r o s m e d io s , lo s a u t o r e s d e b e -

rí an co n s id e ra r e l p ro p o rc io n a r p is t a s co n t e x tu a le s en la s lis t a s an id ad as n o n u m erad as .

Lo s u s u a r io s n o v id e n t e s p u e d e n t en e r d ificu lt ad es p a ra sab e r d ó n d e e s tá e l c o m ie n z o y

e l fin d e un a l is ta y d ó n d e c o m ie n z a c ad a í t e m d e la m is m a . Po r e je m p l o , s i u n a p a r ta d o

d e la lis t a e n v u e lv e a la s ig u ien t e lí n e a e n la p a n t a lla , p u e d e p a r e c e r se r d o s í t e m s s e p a -

ra d o s e n la lis t a . Es t o p u e d e s u p o n e r u n p r o b le m a p a ra lo s le c t o r e s d e p a n t a lla d e a n t e -

rio r e s g e n e ra c io n e s .

4 . 4 . 1 . - U s o d e h o j a s d e e s t ilo p a ra c a m b ia r la s v iñ e t a s d e u n a lis t a

Para cam b ia r e l e s t i lo d e u n a v iñ e t a d e u n a lis t a d e í t e m s in o r d e n c r e a d a c o n e l e le m e n -

to LI , u t i l i ce ho jas de es t i lo . En CSS, es pos ib le espec i f icar un es t i lo de v i ñ e t a fu e ra d e

p á r ra fo (p o r e jem p lo , ‘disc ’) s i un a viñ e t a d e im a g e n n o p u e d e s e r c o lo c a d a .

E j e m p l o :<HEAD>

<TITLE>Uso de hojas de estilo para cambiar viñetas</TITLE>

<STYLE type=”text/css”>

UL { list-style: url (estrella.gif) disc }

</STYLE>

</HEAD>

<BODY>

<UL>

<LI>Audrey

<LI>Laura

<LI>Alicia

</UL>

• Técn i cas H TM L •

Page 94: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 94/164

96

Para a s e g u ra r m á s a ú n q u e lo s u s u a rio s c o m p r e n d e n la s d ife r e n c ia s e n t r e lo s í t e m s d e

l a l i s t a i n d i cad o s v i s u a lm en te , l o s d es a r ro l l ad o res d e co n t en id o d eb e r í a n p r o p o r c i o n a r

u n a e t iq u e t a d e t e x t o a n te s o d e s p u é s d e la fra s e d e l í t em d e l a lis t a :

E j e m p l o :En e s t e e je m p l o , la n u e v a in fo r m a c ió n e s c o m u n ic a d a a t r a vé s d e l t e x t o (“N u e v o ”),

e s t ilo d e fue n te (ne g r ita ) y e l co lo r (v iñ e t a am ar illa , t e x to ro jo s o b re fo n d o am ar illo ) .

<HEAD>

<TITLE>Ejemplo de estilo de viñetas</TITLE>

<STYLE type=”text/css”>

.newtext { font-weight: bold;

color: red;background-color: yellow }

.newbullet { list-style : url(amarillo.gif) disc }

</STYLE>

</HEAD>

<BODY>

<UL>

<LI class=”newbullet”>Roth IRA

<SPAN class=”newtext”>Nuevo</SPAN></LI>

<LI> 401(k)</LI>

</UL>

</BODY>

Evite e l uso d e im á g e n e s c o m o v iñ e tas p ara d e fin i r lis tas c re ad as co n DL, DT y DD. No

o b s t a n t e s i u s a e s t e m é t o d o , a s e g ú r e s e d e p r o p o r c io n a r u n t e x t o e q u iv a le n t e   p a ra la s

im á g e n e s .

Eje m p lo d e s a c o n s e ja d o :<HEAD>

<TITLE>Ejemplo desaconsejado que usa imágenes en listas DL</TITLE>

</HEAD>

<BODY>

<DL>

<DD><IMG scr=”estrella.gif” alt=”* “>Audrey

<DD><IMG scr=”estrella.gif” alt=”* “>Laura

<DD><IMG scr=”estrella.gif” alt=”* “>Alicia

</DL>

• Técni cas H TM L •

Page 95: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 95/164

97

Lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e r í an ev i t a r lo s e s t i lo s d e lis t a d o n d e la s v iñ e t a s

p r o p o r c io n e n in fo r m a c ió n (v is u a l) ad ic io n a l. N o o b s t an t e , s i s e h ace , a s eg ú re s e d e p r o -

p o rc io n a r u n t e x t o e q u iv a le n t e   q u e d e s c rib a e l s ig n ificad o d e la v iñ e t a :

Eje m p lo d e s a c o n s e ja d o :<DL>

<DD><IMG scr=”rojo.gif” alt=”Nueva”>Roth IRA</DD>

<DD><IMG scr=”amarillo.gif” alt=”Viejo”>401(k)</DD>

</DL>

4 . 5 . - Ta b la s

Esta se cc ió n t ra t a la a c c e s ib ilid a d d e la s t a b la s y e le m e n t o s q u e s e p u e d e n p o n e r e n u n

e l em en to TA BLE. Se t r a t an d o s t i p o s d e t ab la s : t ab la s u s ad as p a ra o rg a n iza r d a to s y t ab la s

u s a d a s p a r a c r e a r u n a d is p o s ic ió n v i sua l de la p á g in a .

4 .5 .1 . - Tab la s d e d a to s

Punto s de ve r ificac ió n e n e s t a s e c ció n : 5 . 5 , 5 . 1 , 5 . 2 y 5 . 6 .

L o s d e s a r r o l l a d o r e s d e c o n t e n i d o p u e d e n h a c e r l a s t a b l a s d e d a t o s H T M L 4 . 0 m á sacces ib le s d e v a r ia s m an e ras :

• Id en t ifiq u e g ru p o s e s t ru c tu ra le s d e fila s (TH EA D p a ra en cab e zam ien to s d e t ab la r ep e -

t id o s , TFO O T p a ra p ie s d e t ab la r ep e t id o s y TBO D Y p a ra o t ro s g ru p o s d e fila ) y g ru p o s

d e co lu m n as (CO LG RO U P y CO L ). Et iq u e t e l o s e l em en to s d e t ab la co n lo s a t r ib u to s

“s c o p e ” , “h e a d e r s” y “axis” , d e fo r m a q u e lo s fu t u r o s n a v e g a d o r e s y a y u d a s té cn icas

s e a n c a p a c e s d e s e le c c io n a r d a t o s d e u n a t a b la filt ra n d o p o r c a t e g o rí a s . Es t e m a r c a d o r

a y u d a rá t a m b ié n a l o s n av eg ad o res a a l i n ea r t ab l a s ( t am b ié n d e n o m in a d o “serializa-

c ió n ” d e t a b la s ). Pu e d e c r e a rs e u n a v e rs ió n l in e a l b as ad a e n l a s fila s l ey en d o e l en ca -

b e z a m ie n t o d e la fila y a n t e p o n ie n d o a c a d a c e ld a e l e n c a b e z a m ie n t o d e la c o lu m n a

de la ce lda . La a l ineac ió n p o d rí a e s t a r b a s a d a e n c o lu m n a s . Te n g a e n c u e n t a q u e la

d i r ecc ió n n a tu ra l d e e s c rit u ra d e l id io m a p u e d e a fe c t a r a la d is p o s ic ió n d e la c o lu m n a

(y p o r t a n to l a o r d e n a c ió n). En HTM L, e l at r ibu to “d ir” es p ec i fica e l o rd en d e d is p o s i-

c ió n d e la c o lu m n a ( p o r e je m p l o , d ir= “rt l” es p e c ifica u n a d is p o s i ció n d e d e r e c h a a

izq u ie rd a - «r ig ht to le ft»).

• No u t i lice PRE p ara c re ar una d isp os ic ió n t a b u l a r d e t e x t o — ut ilice e l e le m e nto TABLE

d e fo r m a q u e la s a y u d a s té c n ic a s p u e d a n r e c o n o c e r q u e e s u n a t a b la .

• P ro p o r c io n e u n t í tu lo a t rav é s d e l e l em e n to CA PTIO N .

• Técn i cas H TM L •

Page 96: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 96/164

98

• P ro p o r c io n e u n r e s u m e n a t ra vé s de l a t r ibu to “s u m m a r y” . Los re sú m e n e s so n e s p e -

c i a lm en te ú t ile s p a ra lo s l ec to re s n o v id e n t e s .

• Pro p o rc io n e s u s t i t u to s c l a ro s p a ra l a s e t i q u e t a s d e en cab ezam ien to co n e l a t r i b u to“a b b r” e n TH. Es tas será n p a r t i cu l a rm en te ú t ile s p ara las fu tu ras t ecn o log í a s h a b la d a s

q u e p u ed an l ee r l a s e t i q u e t a s d e f i l a y co lu m n a p a ra cad a ce ld a . L as ab rev i a tu ra s

r e d u c e n la s r e p e t ic io n e s y e l tie m p o d e le c t u r a .

• L o s f u t u r o s n a v e g a d o r e s y a y u d a s t é cn i cas s e rá n c a p a c e s d e t r a s l a d a r a u t o m á t ica-

m e n t e l a s ta b la s a s e c u e n c ia s lin e a le s o n a v e g a r u n a t a b la d e c e ld a e n c e ld a s i e l d a t o

e s tá a d e c u a d a m e n t e e t iq u e t a d o . El G ru p o d e Tra b a jo d e Ev a lu a c ió n y Rep a rac ió n d e

WAI e s tá s ig u ie n d o e l p r o g r e s o d e l a s h e rra m ie n t a s , a s í c o m o d e s a rr o lla n d o la s s u y a s

p r o p ia s , q u e p e r m it a n a l o s u s u a rio s n a v e g a r la s t a b la s d e c e ld a e n c e ld a . C o n s u lt e

[WAI-ER].Es t e m a r c a d o r p e r m it irá a lo s n a v eg ad o re s acces ib le s y a o t r a s ap licac io n es d e u s u a r io

r e e s t r u c tu r a r o n a v e g a r la s t a b la s d e u n m o d o n o v is u a l.

Para in fo rm ació n s o b r e lo s e n c a b e z a m ie n t o s d e t a b la , c o n s u lt e e l a lg o rit m o y e l d e b a t e

s o b r e e n c a b e z a m i e n t o d e t a b l a s e n l a R e c o m e n d a c ió n HTML 4.0 ([HTML40], secció n

1 1 . 4 . 3 ) .

• Técni cas H TM L •

Page 97: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 97/164

99

E j e m p l o :Es t e e j e m p l o m u e s t r a có m o a s o c ia r c e ld a s d e d a t o s (c r e a d a s c o n TD ) c o n s u s

c o r r e s p o n d i e n t e s e n c a b e z a m i e n t o s a t r a v é s de l a t r ibu to “h e a d e r s ” . El atributo

“h e a d e r s ” e s p e c ifica u n a l is t a d e ce ld as d e e n cab e zam ien to ( e t iq u e t a s d e fila y

co lu m n a) a s o c i ad as co n l o s d a to s ac tu a l e s d e l a ce ld a . E l l o r eq u i e re q u e cad a

e n c a b e z a m ie n t o d e c e ld a t e n g a u n a t rib u t o “ id ” .

<TABLE border=”1"

summary=”Esta tabla esquematiza el número de tazas de

café consumidas por cada senador, el tipo de café

(descafeinado o normal) y si es tomado con azúcar”>

<CAPTION>Tazas de café consumidas por cada

senador</CAPTION>

<TR>

<TH id=”header1">Nombre</TH>

<TH id=”header2">Tazas</TH>

<TH id=”header3"abbr=”Tipo”>Tipo de café</TH>

<TH id=”header4">¿Azúcar?</TH>

<TR>

<TD headers=”header1">T. Sexton</TD>

<TD headers=”header2">10</TD>

<TD headers=”header3">Expreso</TD><TD headers=”header4">No</TD>

<TR>

<TD headers=”header1">J. Dinnen</TD>

<TD headers=”header2">5</TD>

<TD headers=”header3">Descafeinado</TD>

<TD headers=”header4">Sí</TD>

</TABLE>

U n s in t e t iz a d o r d e v o z p o d rí a in t e r p r e t a r e s t a t a b la c o m o s ig u e :

Tí tu lo : Taza s d e caf  é c o n s u m id a s p o r c a d a s e n a d o r.

R e s u m e n : E s t a t a b l a e s q u e m a t i z a e l n ú m e r o d e t a z a s d e c a f  é c o n s u m i d a s p o r c a d a

s e n a d o r, e l tip o d e c a f  é (d e s c a fe in a d o o n o r m a l) y s i e s t o m a d o c o n a zú car.

No m bre : T. Sex to n ; Taza s : 10 ; Tip o : Exp re so ; Azú ca r : N o .

No m bre : J. D inn e n ; Tazas : 5 ; Tip o : De scafe ina d o ; Azú car: Sí .

• Técn i cas H TM L •

Page 98: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 98/164

100

Una ap licac ió n d e u s u a r io v is u a l m o s t r a rí a e s t a t ab la a s í :

TA Z A S D E C A FÉ C O N S U M ID A S P O R C A D A S EN A D O R

N O M BRE TA ZA S TIPO D E CA FÉ A ZÚ C A R?

T. Se x to n 1 0 Ex p re so N o

J. Din n e n 5 De sca fe in a d o Sí 

El s ig u ien t e e jem p lo a s o c ia la s m is m as ce ld as d e e n cab eza m ien to (TH ) y d a to s (TD )

co m o an t e s , p e ro e s t a v e z u t iliz a e l a t rib u to «s c o p e » e n l u g a r d e «h e a d e r s». «S c o p e » d e b e

t e n e r u n o d e lo s s ig u ie n t e s v a lo r e s : «ro w », «co l», «r o w g r o u p » o «c o l g r o u p ». «S c o p e » e s -

p e c ifica la ba te rí a d e c e ld a s d e d a t o s q u e h a n d e a s o c ia rs e c o n la c e ld a d e e n c a b e z a m ie n -

t o c o r r e s p o n d i e n t e . E s t e m é t o d o e s p a r t i c u l a r m e n t e ú t il p a ra t ab la s s im p les . D e b e rí at e n e rs e e n c u e n t a q u e la v e r s ió n h a b la d a d e e s ta t a b la p o d rí a se r id é n t ica a la d e l e jem p lo

anterior . La elecció n e n t r e l o s a t r ib u to s «h e a d e r s» y «s c o p e » d e p e n d e d e la c o m p le jid a d

d e la t a b la . N o a fe c t a a l r e s u lt a d o e n l a m e d id a e n q u e e n e l m a r c a d o r h a y a q u e d a d o c la ra

la relació n e n t r e e l e n c a b e z a m ie n t o y la s c e ld a s d e d a t o s .

E j e m p l o :<TABLE border=“1”

summary=“Esta es una tabla gráfica...”>

<CAPTION>Tazas de café consumidas por cada senador</CAPTION><TR>

<TH scope=“col”>Nombre</TH>

<TH scope=“col”>Tazas</TH>

<TH scope=“col” abbr=”Tipo”>Tipo de café</TH>

<TH scope=“col”>¿Azúcar?</TH>

<TR>

<TD>T. Sexton</TD>

<TD>10</TD>

<TD>Expreso</TD>

<TD>No</TD>

<TR>

<TD>J. Dinnen</TD>

<TD>5</TD>

<TD>Descafeinado</TD>

<TD>Sí</TD>

</TABLE>

• Técni cas H TM L •

Page 99: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 99/164

101

E l s i g u i en t e e j em p lo m u es t r a có m o c r e a r c a t e g o rí as en u n a t ab l a u s an d o e l a t r i b u to

“axis” .

E j e m p l o :<TABLE border=“1”>

<CAPTION>Informe de gastos de viaje</CAPTION>

<TR>

<TH></TH>

<TH id=“header2” axis=“gastos”>Comidas

<TH id=“header3” axis=“gastos”>Hoteles

<TH id=“header4” axis=“gastos”>Transporte

<TD>subtotales</TD>

<TR>

<TH id=”header6” axis=”lugar”>San José

<TH> <TH> <TH> <TD>

<TR>

<TD id=”header7” axis=”fecha”>25 de agosto de 1997

<TD headers=”header6 header7 header2”>37.34

<TD headers=”header6 header7 header3”>112.00

<TD headers=”header6 header7 header4”>45.00

<TR>

<TD id=”header7” axis=”fecha”>26 de agosto de 1997<TD headers=”header6 header8 header2”>27.28

<TD headers=”header6 header8 header3”>112.00

<TD headers=”header6 header8 header4”>45.00

<TR>

<TD>subtotales

<TD>65.02

<TD>224.00

<TD>90.00

<TD>379.02

<TR>

<TH id=”header10” axis=”lugar”>Seattle

<TH> <TH> <TH> <TD>

<TR>

<TD id=”header11” axis=”fecha”>27 de agosto de 1997

<TD headers=”header10 header11 header2”>96.25

<TD headers=”header10 header11 header3”>109.00

<TD headers=”header10 header11 header4”>36.00

• Técn i cas H TM L •

Page 100: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 100/164

102

<TR>

<TD id=”header12” axis=”fecha”>26 de agosto de 1997

<TD headers=”header10 header12 header2”>35.00

<TD headers=”header10 header12 header3”>109.00

<TD headers=”header10 header12 header4”>36.00

<TR>

<TD>subtotales

<TD>131.25

<TD>218.00

<TD>72.00

<TD>421.25

<TR><TH>Totales

<TD>196.27

<TD>442.00

<TD>162.00

<TD>800.27

</TABLE>

Es ta t ab l a lis t a lo s g as to s d e v ia je en d o s lu g a re s , San Jo s é y Sea t t le , p o r fech a y ca t eg o -rí a ( c o m id a s , h o t e le s y t ra n s p o r te ) . La s ig u ie n t e im a g e n m u e s t r a có m o la m o s t ra rí a u n a

ap l icac ió n d e u s u a r io v is u a l.

INFORME DE GASTOS DE VIAJE

CO M ID A S HO TELES TRA N SPO RTE SU BTO TA LES

S a n Jo s e2 5 -0 8 -9 7 3 7 .7 4 1 1 2 .0 0 4 5 .0 0

2 6 -0 8 -9 7 2 7 .2 8 1 1 2 .0 0 4 5 .0 0

su b to ta le s 6 5 .0 2 2 2 4 .0 0 9 0 .0 0 3 7 9 .0 2

S e a t t l e2 7 -0 8 -9 7 9 6 .2 5 1 0 9 .0 0 3 6 .0 0

2 8 -0 8 -9 7 3 5 .0 0 1 0 9 .0 0 3 6 .0 0

su b to ta le s 1 3 1 .2 5 2 1 8 .0 0 7 2 .0 0 4 2 1 .2 5

To ta le s 1 9 6 .2 7 4 4 2 .0 0 1 6 2 .0 0 8 0 0 .2 7

• Técni cas H TM L •

Page 101: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 101/164

103

4 . 5 . 2 . - Ev it e la s t a b l a s p a r a m a q u e t a r

Punto s de ve r ificac ió n e n e s t a s e c ció n : 5 . 3 y 5 . 4 .Lo s a u t o r e s d e b e r í an u t i lizar ho jas d e e s t ilo p ara m a q u e t a r y u b ic a r  . De c u a lq u ie r m o d o ,

c u a n d o e s n e c e s a r io u s a r ta b la p a ra m a q u e t a r, la t a b la d e b e a lin e a rs e e n u n o r d e n le g ib le .

Cu a n d o s e a l in e a u n a t a b l a , lo s c o n t e n id o s d e la s c e ld a s s e c o n v ie r t e n e n s e rie s d e p á rra-

fo s (p o r e jem p lo , p á g i n a a b a jo ) u n o t r a s o t ro . La s c e ld a s d e b e n t e n e r se n t id o c u a n d o s e

le e n e n o r d e n (e n m o d o v e rt ic a l u h o riz o n t a l) y d e b e rí an in c lu ir e le m en to s e s t ru c tu ra le s

(q u e c re e n p á r ra fo s , en cab e zam ien to s , lis t a s , e t c . ) d e m o d o q u e l a p á g i n a te n g a s e n t id o

al se r a line ad a .

Ig u a lm en te , cu an d o s e u t ilic en t ab la s p a ra m aq u e t a r, n o u t ilic e m arcad o re s e s t ru c tu ra -

le s p a ra c r e a r fo r m a t o s v is u a le s . P o r e je m p l o , e l e le m e n t o TH ( t a b le h e a d e r = e n c a b e z a -m i e n t o d e t a b l a ) s e d e s p l i e g a v i s u a l m e n t e c e n t r a d o y e n n e g r i t a . S i u n a c e l d a n o e s

r e a lm e n t e e l e n c a b e z a m ie n t o d e u n a fila o c o lu m n a d e d a t o s , u t ilic e h o ja s d e e s t ilo o

a t rib u t o s d e fo r m a t e o d e l e l e m e n t o .

4 .5 .3 . - Te x to in se rt ad o e n t ab la s

Punto s de ve r ificac ió n e n e s t a s e c ció n : 1 0 . 3 .

Las t ab la s u t i liz ad as p a ra m aq u e t a r p á g in as y a lg u n as t a b l a s d e d a t o s  d o n d e la c e ld a

t ie n e in s e r t a d o t e x t o , p la n t e a n p r o b l e m a s p a ra lo s le c t o r e s d e p a n t a lla a n t ig u o s , q u e n o

in t e rp re t an e l có d i g o fu e n t e H TM L o p a ra lo s n a v e g a d o r e s q u e n o p e r m it e n la n a v e g a -

c ió n p o r ce ld as in d iv id u a l e s d e t ab la s . Es to s lec to re s d e p an t a l la le e rá n la p á g i n a , le y e n d o

la s fr a s e s d e u n a m is m a fila p e ro d ife re n t e co lu m n a co m o s i fu e ran u n a s o la fr a s e .

P o r e je m p l o , s i u n a t a b la a p a r e c e a s í en la p an t a l la :

H ay u n 30 % d e p o s ib ilid a d d e q u e La s c la se s d e la Un iv e rs id a d d e W isco n s in

llu e v a e s t a m a ñ a n a , p e ro e llo s s e re a n u d a rá n e l 3 d e s e p t ie m b r e .

d e b e rí a n p a r a r a n t e s d e l fin d e s e m a n a .

El le c to r d e p an ta lla l a le e rí a co m o :

H a y u n 3 0 % d e p o s ib ilid a d d e q u e la s c la s e s d e la U n iv e r s id a d d e W is c o n s in

llu e v a e s t a m a ñ a n a , p e r o e llo s s e r e a n u d a rá n e l 3 d e s e p t ie m b r e .

d e b e rí a n p a r a r a n t e s d e l fin d e s e m a n a .

Lo s lec to re s d e p an t a l la q u e l ee n e l có d i g o fu e n t e H TM L r e c o n o c e rá n l a e s t ru c tu ra d e

c a d a c e ld a , p e r o p a r a lo s le c t o r e s d e p a n t a lla a n t ig u o s , lo s d e s a r ro lla d o r e s d e c o n t e n id o

• Técn i cas H TM L •

Page 102: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 102/164

104

p u e d e n m in im iz a r e l rie s g o d e e n m a ra ñ a r la s p a lab ra s lim it an d o l a can t id ad d e t e x to d e

cad a ce ld a . Tam b ié n , l o s t ro zo s m á s la rg o s d e t e x t o d e b e rí a n e s t a r t o d o s e n l a ú lt im a

co lu m n a ( en la m á s c e r c a n a a la d e r e c h a e n la s t a b la s q u e s e le a n d e iz q u i e r d a a d e r e c h a ) .D e e s t a fo r m a t o d a v í a se p o d rá n l e e r c o n c o h e r e n c ia . Lo s d e s a r ro lla d o r e s d e c o n t e n i d o

d e b e rí a n c o m p r o b a r la in s e r c ió n d e t e x t o e n la s t a b la s c o n u n a v e n t a n a d e n a v e g a d o r d e

d i m e n s i o n e s “6 4 0 x 4 8 0 ” .

P u e s t o q u e e l m a r c a d o r d e t a b la e s e s t r u c tu r a l, y n o s o t r o s s u g e r im o s s e p a r a r la e s t ru c -

t u ra d e l a p r e s e n t a c ió n , r e c o m e n d a m o s u s a r h o ja s d e e s t ilo p a ra m a q u e t a r, a lin e a r y c re a r

e fe c t o s d e p r e s e n t a c ió n . A s í p u e s , la s d o s c o lu m n a s d e l e j e m p l o a n t e r io r p o d rí a n h a b e r

s id o c re ad as u s an d o h o j a s d e e s t i lo . Po r fav o r, co n s u l t e la s e cc ió n d e h o j a s d e e s t ilo p a ra

m á s in fo rm ac ió n .

¡ T e s t r á p i d o ! P a ra e n t e n d e r m e jo r có m o u n le c t o r d e p a n t a lla le e rí a u n a t ab la , co lo q u eu n t r o z o d e p a p e l s o b r e la p á g ina y le a la t ab la lí n e a a lí n e a .

4 . 5 . 4 . - Cu e s t io n e s d e c o m p a t ib ilid a d r e t r o s p e c t iv a p a ra t a b la s

En lo s n av e g ad o re s H TM L 3 . 2 , la s fila s d e u n e lem e n to TFO O T ap a rece rá n a n te s q u e e l

c u e r p o d e la t a b la .

4 . 6 . - Vín c u lo s

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 3 . 1 y 1 3 . 6 .

U n b u e n v í n c u lo d e t e x t o n o d e b e rí a s e r d e m a s ia d o g e n é rico; no util ice “p u ls e a q u í” .

Es ta f rase no só lo e s d e p e n d i e n t e d e u n d is p o s it iv o ( im p l ic a u n d i sp o s it iv o a p u n t a d o r )

s in o q u e n o in d ic a n a d a a c e r c a d e lo q u e s e e n c o n t ra rá s i s e s ig u e e l v í ncu lo . En lug ar de

“p u ls e a q u í” , e l t ex to d e l v í n c u lo d e b e rí a ind icar l a na tu ra leza de l ob je t ivo de l v í n cu lo ,

c om o e n “m á s in fo rm ac ió n s o b r e lo s le o n e s m a rin o s ” o “v e r s ió n só lo - t e x t o d e e s t a p á g i-

n a ” .

Te n g a e n c u e n t a q u e , p a ra e s t e ú lt im o c a s o ( y d o c u m e n t o s e s p e c í fico s co n o t ro fo rm a-

to o i d io m a), s e in s t a a lo s d es a r ro l lad o re s d e co n t en id o a u s a r la n e g o c i a c i  ó n d e l co n t e -  

n ido  c o m o a lt e r n a t iv a , d e fo r m a q u e lo s u s u a rio s q u e p r e fie r a n la s v e rs io n e s d e t e x t o la s

o b t e n g a n a u t o m á t i c a m e n t e .

A d e m á s d e t e x t o s c la r o s e n lo s v í n c u lo s , lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e n e s p e -

cificar un va lo r de l at r ibu to “ title ” q u e c la ra y co n c is am e n te d e s c rib a e l o b je t i v o d e l v í n c u -

lo .

Si ha y m á s d e u n v í n c u lo e n u n a p á g i n a co n e l m is m o t e x t o , t o d o s e s t o s v í n c u lo s d e b e n

rem it ir a l m is m o re cu r s o . Es t a co h e ren c ia ay u d a rá al d ise ñ o d e la p á g i n a t a n to c o m o a la

acces ib i l idad .

• Técni cas H TM L •

Page 103: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 103/164

105

Si d o s o m á s v í n c u lo s c o m p a r t e n e l m is m o t e x t o p e r o v a n r e fe r id o s a o b je t iv o s d ife r e n -

te s , d i s t ing a los v í n cu lo s e s p ec i fican d o u n v a lo r d ife re n t e p a ra e l a t rib u to “title ” d e c a d a

e le m e n t o A .Lo s “usuar ios aud i t ivos” (p e r so n as c ieg as , co n d ificu lt ad es d e v is ió n o q u e u t iliz a n m e -

c a n is m o s c o n d is p o s it iv o s d e e x p o s ic ió n p e q u e ñ o s o s in e llo s ) s o n in cap ace s d e r ev is a r

rá p id a m e n t e u n a p á g in a co n s u s o jo s . Pa ra t e n e r u n a v is ió n rá p i d a d e la p á g in a o e n c o n -

trar rá p id a m e n t e u n v í n c u l o , e s t o s u s u a r i o s a m e n u d o s a l t a rá n d e u n v í n cu lo a o t ro o

rev isará n u n a lis t a d e v í n cu lo s d is p o n ib le s e n u n a p á g in a .

A s í p u e s , p a r a u n a s e rie d e v í n cu lo s r e lac io n ad o s , in c lu y a in fo rm ac ió n in t ro d u c to r ia e n

e l p r im er v í n cu lo e i n fo rm ac ió n d i s t in t iva en los v í n cu lo s s ig u ie n t e s . Ello p ro p o rc io n a ráin fo rm ac ió n c o n t e x t u a l p a r a lo s u s u a rio s q u e lo s l e e n e n o r d e n s e c u e n c ia l.

E j e m p l o :<A href=”my-doc.html”>Mi documento está disponible en HTML</A>

<A href=”my-doc.pdf” title=”Mi documento en PDF”>PDF</A>

<A href=”my-doc.txt” title=”Mi documento en texto”>Texto plano</A>

Cu a n d o s e u s e u n a im a g e n c o m o c o n t e n id o d e u n v í n cu lo , e s p e c ifiq u e u n t e x t o e q u iv a -  

len te   p a ra la im a g e n .

E j e m p l o :<A href=”routes.html”>

<IMG src=”topo.gif”

alt=”Rutas actuales del Gimnasio Boulders Climbing”

</A>

4 . 6 . 1 . - Ví n c u lo s d e a g ru p a c ió n y d e s v ia c ió n

C u a n d o l o s v í n c u l o s s e a g r u p a n e n c o n j u n t o s ló g i c o s ( p o r e j e m p l o , e n u n a b a r r a d e

n a v e g a c ió n q u e a p a r e z c a e n t o d a s l a s p á g i n a s d e u n s i t i o ) , d e b e r í a n e s t a r m a r c a d o s

c o m o u n a u n i d a d . L a s b a r r a s d e n a v e g a c ió n s o n n o r m a lm e n t e lo p rim e r o q u e u n o e n -

c u e n t ra e n u n a p á g in a . Pa ra lo s u s u a r io s co n s in t e t izad o r d e v o z , e llo im p lica t e n e r q u e

e s c u c h a r u n a s e r i e d e v í n c u l o s e n t o d a s l a s p á g i n a s a n t e s d e l l e g a r a l o s c o n t e n i d o s

in t e r e s a n t e s d e u n a p á g in a . H ay v a r io s cam in o s p a ra p e rm it ir a lo s u s u a r io s o b v ia r g ru p o s

d e v í n c u lo s (t a l y c o m o h a c e n lo s u s u a r io s v id e n t e s c u a n d o v e n e l m is m o c o m ie n z o e n

c a d a p á gina) :

• Técn i cas H TM L •

Page 104: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 104/164

Page 105: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 105/164

107

c ie r t a s acc io n es . H TM L 4 . 0 p e rm it e t am b ié n a lo s d e s a r ro l lad o re s d e co n t en id o e s p e c ifi-

c a r a t a jo s d e t e c la d o e n lo s d o c u m e n t o s a t ra v é s d e l a t r ibu to “t a b i n d e x ” .

E j e m p l o :En e s te e je m p lo , s i e l usu ar io a c t iva la t ec la “C” , act ivará e l v í n cu lo .

<A accesskey=”C” href=”doc.html” hreflang=”en”

title=”Página principal de la compañía XYZ”>

Página principal de la compañía XYZ</A>

4 . 7 . - Im á g e n e s y m a p a s d e im a g e n

Las s i g u i en t e s s e cc io n es t ra t an la a cces ib ilid ad d e im á g e n e s (in c lu y e n d o a n im a c io n e s

s im p l e s , t a le s c o m o la s a n im a c io n e s G IF) y m a p a s d e im a g e n .

Para in fo rm ació n s o b r e la s m a t e m á t ic a s p r e s e n t a d a s c o m o im á g e n e s , c o n s u lt e la s e c -

c ió n u s a r e t iq u e t a s d e t e x t o  y ho ja s de e s t i lo m e jo r q ue im  á  g e n e s .

4 .7 .1 . - Te x to s e q u iv a le n te s p a r a im á g e n e s

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 1 . 1 .

Cuand o u t i lice IM G, esp e c ifiq ue un t e x t o e q u iv a le n t e  b re v e co n e l a t r ib u to “a lt” . N o t a :El v a lo r d e e s t e a t rib u t o e s d e n o m in a d o “a l t - t ex t ” .

E j e m p l o :<IMG src=”lupa.gif” alt=”Búsqueda”>

Cuan d o ut i lice O BJECT, e sp e cifiq ue un t e x t o e q u iv a le n t e   e n e l c u e r p o d e l e l e m e n t o

O BJECT:

E j e m p l o :<OBJECT data=”lupa.gif” type=”image/gif”>

Búsqueda

</OBJECT>

Cu a n d o u n b r e v e t e x t o e q u iv a le n t e n o e s s u fic ie n t e p a ra t r a n s m i tir a d e c u a d a m e n t e la

funció n o p a p e l d e u n a im a g e n , p r o p o r cio n e in fo r m a c ió n ad ic io n a l en u n a rch iv o d e s ig -

n ad o p o r e l a t r ib u to “ l o n g d e s c”:

• Técn i cas H TM L •

Page 106: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 106/164

108

E j e m p l o :<IMG src=”ventas97.gif” alt=”Ventas en 1997”

longdesc=”ventas97.html”>

En e l a r ch iv o v e n t a s 9 7 . h tm l:

U n g rá fico m u e s t ra c ó m o p r o g r e s a ro n la s ve n t a s e n 1 9 9 7 .

El g rá fico e s u n g rá fic o d e b a r ra s q u e m u e s t r a lo s in c r e m e n t o s p o r c e n t u a le s d e

l a s v e n t a s p o r m e s e s . L a s v e n t a s e n e n e r o s e i n c r e m e n t a r o n u n 1 0 % s o b r e

d i cie m b r e d e 1 9 9 6 , la s v e n t a s e n fe b r e r o c a y e r o n u n 3 % ,. ..

Pa ra ap licac io n es d e u s u a r io q u e n o e jecu t an “ l o n g d e s c” , p r o p o r c io n e u n v í  n c u lo d e s -  

criptivo  t a m b ié n a l la d o d e l g rá fico:

E j e m p l o :<IMG src=”ventas.gif” alt=”Ventas en 1997" longdesc=”ventas.html”>

<A href=”ventas.html”

title=”Descripción de la ilustración de las ventas de 1997”>

[D]</A>

Cuand o u t i lice O BJECT, e sp e c ifiq ue e l t e x to e q u iva le n te m á s e x t e n s o e n e l c o n t e n id o

d e l e le m e n t o :

E j e m p l o :<OBJECT data=”ventas97.gif” type=”image/gif”>

Las ventas en 1997 bajaron como consecuencia de nuestra

<A href=”anticipado.html”>adquisición anticipada</A>

</OBJECT>

O b s e rv e q u e e l co n t e n id o d e O BJECT, a d ife re n c ia d e l t ex to en “a lt” , p u ed e i n c lu i rm a r ca d o r e s . A sí p u e s , lo s d e s a rr o lla d o r e s d e c o n t e n id o p u e d e n p r o p o r c io n a r u n ví ncu lo

h ac ia in fo rm ac ió n a d ic io n a l d e s d e e l e l em en to O BJECT:

E j e m p l o :<OBJECT data=”ventas97.gif” type=”image/gif”>

Gráfico de nuestras ventas en 1997.

Una <A href=”desc.html”>descripción textual</A> está disponible.

</OBJECT>

• Técni cas H TM L •

Page 107: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 107/164

109

4 . 7 . 2 . - Ví ncu lo s-d inv is ib les

N o ta : lo s v í ncu los -d inv is ib les e s tá n d es a co n s e j ad o s , p re fir ien d o e l a t rib u to “l o n g d e s c” .Un v í  nculo-d   in v is ib le e s u n a im a g e n p e q u e ñ a (1 p ix e l) o t r an s p a ren t e cu y o v a lo r d e l

atr ibuto “a lt” e s “v í n cu lo -d ” o “D” y e s u n a p a r te d e l c o n t e n id o d e u n e le m e n t o A . A l

ig u a l q u e o t r o s v í n c u lo s - d , s e r e fie r e a u n t e x t o e q u iv a le n t e d e la im a g e n a s o c ia d a . A l

ig u a l q u e o t r o s v í n cu lo s , lo s u s u a r io s p u e d en t ec l ea r lo . A s í p u e s , lo s v í ncu los -d inv is ib les

p r o p o r c io n a n u n a s o lu c ió n ( t em p o ra l) p a ra lo s d is e ñ a d o r e s q u e d e s e a n e v it a r lo s v í n c u -

lo s -d v is ib le s p o r r azo n e s d e e s t ilo .

4 .7 .3 . - A sc ii a r t

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 1 3 . 1 0 .

Evite el ascii art (i lustració n m ed ian t e ca rac t e re s ) y u t ilic e en s u lu g a r im á g e n e s r e a le s ,

p u e s t o q u e e s m á s f á c il p ro p o rc io n a r t e x t o e q u iv a le n t e   p ara im á g e n e s . D e t o d a s m a n e -

ra s , s i d eb e u t iliz a r a s c ii a r t , d e b e p ro p o rc io n a r s e u n v í n cu lo p a ra s a lt a r s o b re é l , tal y

c o m o s e m u e s t ra a c o n t in u a c ió n :

E j e m p l o :<P>

<A href=”#post-art”>Saltar el ascii art</A><!— Aquí el ASCII art —>

<A name=”post-art”>Título del ASCII art</A>

El ASCII a r t pu e d e ta m bié n s e r m a r c a d o d e la s ig u ie n t e m a n e ra :

E j e m p l o :

• Técn i cas H TM L •

Page 108: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 108/164

110

O t r a o p c ió n para asc i i a r t m á s p e q u e ñ o s , e s u s a r e l e lem en to A BBR co n e l a t r ib u to

“ title ” .

E j e m p l o :<P><ABBR title=”sonrisa en ascii art”></ABBR>

Si e l ASCII a r t e s co m p le jo , a se g ú r e s e d e q u e e l t e x t o e q u iv a le n t e l o d e s c rib e a d e c u a -

d a m e n t e .

O t ra m an e ra d e s u s t it u ir e l a s c ii a r t e s u s a r s u s t it u t iv o s d e l len g u a j e h u m an o . Po r e j em -

p l o , < g u iñ o > p o d rí a s u s t i t u i r a u n a s o n r i s a co n g u iñ o: ; - ) . O las pa labras “p o r t a n t o ”p u e d en s u s t it u ir a la s fle ch as r e a lizad as co n g u io n es y e l s ig n o “m a yo r q u e ” (p o r e je m p l o :

— >) y la p a lab ra “d a d o s ” p a ra la p o c o c o m ú n a b re v ia tu ra “d a 2 ” .

4 . 7 .4 . - M a p a s d e im a g e n

U n m a p a d e im a g e n e s u n a im a g e n q u e t ie n e “zo n as ac t iv as ” . Cu an d o u n u s u a r io s e lec -

c io n a u n a d e l a s zo n as , t ien e l u g a r a lg u n a a cc ió n (s e s ig u e u n v í n c u lo , s e e n v í a in fo rm a-

c ió n a l s e rv id o r , e t c . ) . Pa ra h ace r acces ib l e u n m ap a d e im ag en , l o s d es a r ro l l ad o res d e

c o n t e n id o d e b e n a s e g u ra rs e d e q u e c a d a a c ció n a s o c ia d a c o n u n a z o n a v i su a l p u e d a s e r

ac t iv ad a s in u n d is p o s i tiv o a p u n t ad o r.

Lo s m a p a s d e im a g e n s e c re a n c o n e l e le m e n t o M A P. H TM L p e r m it e d o s t ip o s d e

m a p a s d e im a g e n : lo s d e l la d o d e l c lie n t e ( e l n a v e g a d o r d e l u s u a r io p r o c e s a u n a U RI) y

lo s d e l l ad o d e l s e rv id o r ( e l s e rv id o r p ro ces a l a s co o rd en ad as p u l s ad as ) . Pa ra t o d o s l o s

m a p a s d e im a g e n , lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e n p r o p o r c io n a r u n t e x t o e q u i-  

va l e n t e  .

Lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e r í a n c r e a r m a p a s d e im a g e n d e l la d o d e l c lie n t e

(con “u s e m a p ”) m e jo r q u e d e l l ad o d e l s e rv id o r ( co n “i s m a p ”) , y a q u e l o s m a p a s d e

im a g e n d e l la d o d e l s e r v id o r p r e c is a n d e u n d is p o s it iv o d e e n t ra d a e s p e c í f ico . Si se de-

b e n u s a r m a p a s d e im a g e n d e l la d o d e l s e rv id o r (p o r e je m p lo , p o r q u e la g e o m e t rí a d e l az o n a n o p u e d e s e r r e p r e s e n t a d a c o n v a l o r e s d e l a t r i b u t o “s h a p e ”) l o s a u t o r e s d e b e n

p ro p o rc io n a r l a m i s m a fu n c ió n o i n fo rm ac ió n en u n fo rm a to a l t e rn a t i v o acces ib l e . U n a

fo r m a d e c o n s e g u ir e s t o , e s p r o p o r c io n a r u n v í n c u lo d e t e x t o p a ra c a d a z o n a a c t iv a , d e

fo r m a q u e c a d a v í n c u lo p u e d a s e r n a ve g a d o c o n e l t e c l a do  . Si s e d e b e u t iliz a r u n m ap a

d e im ag en d e l lad o d e l s e rv id o r, p o r fav o r co n s u lt e la s ecc ió n m a p a s d e im a g e n d e l la d o  

d e l s e r v id o r  .

• Técni cas H TM L •

Page 109: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 109/164

111

4 . 7 . 5 .- M a p a s d e im a g e n d e l la d o d e l c lie n t e

Punto s de ve r ificac ió n e n e s t a s e c ció n : 1 . 5 , 9 .1 y 1 0 . 5 .P r o p o r c i o n e s t e x t o s e q u iv a le n t e s  p a r a l o s m a p a s d e i m a g e n q u e t r a n s m i t a n i n f o r m a -

c ió n visual .

S i se u t i liza A REA p ara c re ar e l m ap a , u t ilice e l a t ribu to “a lt” :

E j e m p l o :<IMG src=”bienvenido.gif” alt=”Mapa de imagen de las zonas de la

biblioteca” usemap=”#mapa1”>

<MAP name=”mapa1”>

<AREA shape=”rect” coords=”0,0,30,30”href=”consulta.html” alt=”Zona de Consulta”>

<AREA shape=”rect” coords=”34,34,100,100”

href=”media.html” alt=”Laboratorio Audiovisual”

</MAP>

El e je m p lo s igu ie n te ilus t ra la m ism a ide a , p e ro u t iliza O BJECT e n luga r de IM G p ara

in s e r ta r la im ag en , co n e l fin d e p ro p o rc io n a r m á s in fo rm ac ió n s o b r e la m is m a :

E j e m p l o :<OBJECT data=”bienvenido.gif” type=”image/gif” usemap=”#mapa1”>

Hay muchas zonas en la biblioteca que incluyen la

<A href=”consulta.html”>Zona de Consulta</A> y la del

<A href=”media.html”>Laboratorio Audiovisual</A>.

</OBJECT>

<MAP name=”mapa1”>

<AREA shape=”rect” coords=”0,0,30,30”

href=”consulta.html” alt=”Zona de Consulta”>

<AREA shape=”rect” coords=”34,34,100,100”

href=”media.html” alt=”Laboratorio Audiovisual”

</MAP>

A d e m á s d e p r o p o r c io n a r u n t e x t o e q u iv a le n t e , p r o p o r c io n e v í n c u lo s d e t e x t o r e d u n -

d a n t e s . Si s e u s a e l e le m e n t o A e n lu g a r d e A REA , e l d e s a rr o lla d o r d e c o n t e n i d o p u e d e

d es c r ib ir la s zo n as ac t iv as y p ro p o rc io n a r v í n c u lo s r e d u n d a n t e s a l m is m o t ie m p o :

• Técn i cas H TM L •

Page 110: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 110/164

Page 111: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 111/164

113

E j e m p l o :<A href=”http://miservidor.com/cgi-bin/mapaimagen/mi-mapa ”>

<IMG src=”bienvenido.gif” alt=”¡Bienvenido! (Siga los vínculos

de texto” ismap>

</A>

<P>[<A href=”consulta.html”>Consulta</A>]

[<A href=”media.html”>Laboratorio Audiovisual</A>]

• S i n o h a y o t r a s p o s ib ilid a d e s p a ra h a c e r e l m a p a d e im a g e n a c c e s ib le , c r e e u n a  p á  g in a 

a l te rnat iva   q u e s í s ea a cces ib le .

Lo s m a p a s d e im a g e n d e l la d o d e l s e r v id o r y d e l la d o d e l c lie n t e , p u e d e n s e r u s a d o s

c o m o b o t o n e s d e a c c e s o e n fo r m u la rio s . Pa ra m á s in fo rm ac ió n , co n s u lt e l a s ecc ió n b o t o -  

n e s g r  á ficos .

4 . 8 . - A p p l e ts y o tro s o b je to s d e p ro g ra m a c ió n

A u n q u e l o s a p p le t s p u e d e n i n c lu irs e e n u n d o c u m e n t o t a n t o c o n e l e le m e n t o A P PLET

co m o co n O BJECT, e l m é to d o p re fe rid o e s O BJECT.

4 . 8 . 1 . - Te x t o s e q u iv a le n t e s p a ra a p p le t s y o t r o s o b je t o s d e p r o g r a m a c ió n

Si ut iliza O BJECT, p ro p o rcio ne un t e x t o e q u iv a le n t e  e n e l c o n t e n id o d e l e le m e n t o :

E j e m p l o :<OBJECT classid=”java:Press.class” width=”500” height=”500”>

A medida que la temperatura aumenta, las moléculas del globo...

</OBJECT>

U n e je m p lo m á s c o m p l e jo s e b e n e fic ia d e l h e c h o d e q u e lo s e le m e n t o s O BJECT p u e d e n

s e r in c ru s t ad o s p a ra r ep re s e n t ac io n es a l te rn a t iv as d e in fo rm ac ió n :

• Técn i cas H TM L •

Page 112: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 112/164

114

E j e m p l o :<OBJECT classid=”java:Press.class” width=”500” height=”500”>

<OBJECT data=”Presion.mpeg” type=”video/mpeg”>

<OBJECT data=”Presion.gif” type=”image/gif”>

A medida que la temperatura aumenta, las moléculas del globo...

</OBJECT>

</OBJECT>

</OBJECT>

Si ut i liza APPLET, p ro p o rcion e un t e x t o e q u iv a le n t e  con e l a t r ibu to “a lt” y en e l co n t en i-

d o d e l e l em e n to A PPLET. Ello p e rm it e q u e e l co n t e n id o s e t ran s fo rm e s a t is fac to r iam en te

p a ra aq u e l l a s ap l i cac io n es d e u s u a r io q u e só l o s o p o r t a n u n o d e l o s d o s m e c a n i s m o s

(“a lt” o c o n t e n id o ).

Eje m p lo d e s a c o n s e ja d o :<APPLET code=”Press.class” width=”500” heigth=”500”

alt=”Java applet: como afecta la temperatura a la presión”>

A medida que la temperatura aumenta, las moléculas del globo...

</APPLET>

4 . 8 . 2 . - A p p le t s d ir e c t a m e n t e a c c e s ib le s

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 8 . 1 .

S i un ap p le t (c re ad o co n O BJECT o con APPLET) re q u iere in te racc ió n d e l u s u a r io (p o r

e j e m p l o , la c a p a c id a d d e m a n ip u la r u n e x p e r im e n t o f  í s ic o ) q u e n o p u e d e s e r d u p l ic a d o

e n u n fo r m a t o a lt e r n a t iv o , h a g a e l a p p l e t d ir e c t a m e n t e a c c e s ib le .

Pa ra m ay o r i n fo rm ac ió n s o b re e l d e s a r ro l l o d e ap p l e t s acces ib l e s . p o r f av o r co n s u l t e

[JAVA A CCESS] o [IBM JAVA ]. Est a s c o m p añ í a s h a n e s t a d o d e s a r ro lla n d o u n A P I d e A c c e -

s ibilid ad , as í co m o h ac ien d o acces ib le lo s d e t ip o JAVA SW IN G .

4 . 8 . 3 .- So n id o e im a g e n p r o d u c id o s p o r o b je t o s d in á m i c o s

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 8 . 1 y 1 . 4 .

P ro p o r c io n e u n t e x t o e q u iv a le n t e c o m o lo h a r  í  a p a r a u n a im a g e n  y d e s c r ip c io n e s s o n o -

ra s d e la in fo rm ac ió n v i sua l y sub t í t u lo s d o n d e s e a n e c e s a r io . S i u n a p p l e t c re a u n a s e -

cu e n c ia d e im á g e n e s , lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e rí a n p r o p o r c io n a r u n m e c a -n is m o p a ra co n g e l a r e s t a s e cu e n c ia (p a ra o b t e n e r u n e j em p lo , co n s u lt e [TRA CE].

• Técni cas H TM L •

Page 113: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 113/164

115

Ig u a lm en te , p o r fav o r, co n s u lt e l a s ig u ien t e s e cc ió n p a ra in fo rm ac ió n s o b r e la m a n e ra

d e h ace r acces ib le s la s p re s e n t ac io n es s o n o ras y v is u a l e s .

4 . 9 . - S o n id o e im a g e n

4 .9 .1 . - In fo rm ac ió n s o n o ra

La s p r e s e n t a c io n e s s o n o r a s d e b e n ir a c o m p a ñ ad as p o r t ran s c r ip c io n es d e l t ex to , eq u i-

v a le n t e s t e x t u a le s d e lo s s o n id o s q u e t ie n e n l u g a r. Cu a n d o e s t a s t r a n s crip c io n e s s e p r e -

s e n t a n d e fo r m a s in c r o n iz a d a c o n la p r e s e n t a c ió n v is u a l, s e d e n o m in a n s u b t í t u lo s y s o n

u t iliz a d o s p o r la s p e r s o n a s q u e n o p u e d e n e s c u c h a r la b a n d a s o n o ra d e l m a t e r ia l v is u a l.

A lg u n o s fo r m a t o s d e m e d io s ( p o r e j e m p l o , Q u i ck Tim e 3 . 0 y S M IL) p e r m it e n añ ad i rs u b t í t u lo s y d es c r ip c io n es d e la s im á g e n e s a lo s c lip s m u lt im e d ia . SA M I p e r m it e q u e s e

a ñ a d a n s u b t í t u lo s . El e je m p l o s ig u ie n t e d e m u e s t ra q u e lo s s u b t í t u lo s d e b e rí an incluir los

d iá lo g o s y o t r o s s o n id o s a m b ie n t a le s q u e a y u d e n a lo s e s p e c t a d o r e s a e n t e n d e r lo q u e

e s tá o cu r r i en d o .

E j e m p l o :Lo s s u b t í t u lo s p a ra u n a e s c e n a d e «E T». El te lé fo n o s u e n a t r e s v e c e s y e n t o n c e s

e s re s p o n d id o .

[e l t e lé fo n o s u e n a ]

[ring]

[ring]

“¿ D í g a m e ? ”

H a s t a q u e e l f o r m a t o q u e e s t á u s a n d o s o p o r t e v í as a l t e rn a t i v as , p o d rí a o f r e c e r d o s

v e r s io n e s d e la p e lí c u la , u n a c o n s u b t í t u lo s y d es c r ip c io n e s d e la s im á g en es , y o t r a s i n

e l l o . A lg u n as t ecn o lo g í as , co m o SM IL y SA M I , p e rm i t en a rch iv o s s o n o ro s y v i s u a l e s

s e p a r a d o s p a ra c o m b in a r lo s c o n lo s a r c h iv o s d e t e x t o a t ra vé s d e l a r ch iv o d e s in c ro n iza -c ió n p a ra c r e a r b a n d a s s o n o r a s y p e lí cu las sub t i tu ladas .

A lg u n a s t e c n o lo g í a s ta m b ié n p e rm i t en a l u s u a r io e l eg i r d i f e ren t e s t i p o s d e s u b t í tu los

p a ra ad e cu a r lo s a s u s cap ac id ad es lec to ra s . Pa ra m á s in fo rm ac ió n , ve a las esp e c ificac io -

nes SMIL 1.0 ([SMIL]).

P u e d e n p r o p o r c io n a r s e e q u iv a le n t e s p a r a lo s s o n id o s e n fo r m a d e u n a fra s e d e t e x t o e n

la p á g in a , q u e v in cu l a a u n a t ra s c r ip c ió n d e t e x t o o u n a d e s c rip c ió n d e l a rc h iv o d e s o n i-

d o . El v í ncu lo hac ia l a t rascrip c ió n d e b e rí a a p a r e c e r e n u n l u g a r c la ra m e n t e v is ib le , c o m o

e l p r inc ip io d e la p á g in a . D e t o d as m an e ras , s i u n s c r i p t i n co rp o ra au to m á t ic a m e n t e u n

s o n id o , d e b e r í a t am b ié n d is p o n e r d e u n a in d ic a c ió n v is u a l d e q u e e l s o n id o e s t á t e n i e n d o

lu g a r y p ro p o rc io n a r u n a d es c r ip c ió n o t rascr ip c ió n d e l s o n id o .

• Técn i cas H TM L •

Page 114: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 114/164

116

N o t a : Esta té cn ica e s tá r o d e a d a d e a lg u n a c o n t r o v e rs ia , p o r q u e e l n a v e g a d o r d e b e rí ainco rpo rar la fo rm a v isua l d e la in fo rm ació n e n l u g a r d e l a f o r m a s o n o r a s i a s í  l o h an

d e t e r m in a d o la s p r e fe r e n c ia s d e l u s u a rio . N o o b s t a n t e , la s e s t ra t e g ia s d e t ra b a jo d e b e nt a m b ié n t e n e r e n c u e n t a lo s n a v e g a d o r e s e x is te n t e s h o y e n d í a .

Para m á s in fo rm ac ió n , p o r fav o r co n s u l te [N CA M ].

4 .9 .2 . - In fo rm ac ió n v i s u a l y m o v im ie n t o

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 . 3 y 7 . 3 .

L as d es c r i p c io n es s o n o ras d e l a b an d a v i s u a l p ro p o rc io n an u n a n a r rac ió n d e l o s e l e -

m en to s v i s u a le s c lav e s in i n t e r fe r ir co n e l s o n id o o e l d iá lo g o d e u n a p e lí cu la . Los e le -

m en to s v is u a le s c l av e in c lu y e n acc io n es , e s cen a r io s , len g u a j e co rp o ra l, g rá fico s y e l te xtom o s t r ad o . Las d es c r ip c io n es au d it iv as s o n u t iliz ad as , p r im o rd ia lm en te , p o r la s p e r s o n as

c ieg as p a ra s eg u ir la acc ió n y la in fo r m ació n no aud it iva d e l m ate r ia l v isua l.

E j e m p l o :H e a q u í  u n e je m p lo d e u n a c i ta de tex to t r a sc r i to   d e u n a e s ce n a d e “El Rey

Le ó n ” , (d isp o nible e n [DVS]).

O b s e r v e q u e e l n a r ra d o r p r o p o r c io n a u n a d e s c rip c ió n au d it iv a d e l a b an d a v i-

s u a l y q u e l a d e s c rip c ió n h a s id o i n t eg rad a e n la t r a s c rip c ió n .

S imba  : ¡Eh !

N a r r a do r  : S im b a s a le co r rien d o , s eg u id o p o r s u s p ad re s . Sa rab i s o n rí e y

e m p u ja s u a v e m e n t e a S im b a h a c ia s u p a d r e . A m b o s , u n o a l la d o d e l

o t r o , o b s e rv a n e l a m a n e c e r d o r a d o .

Mufasa  : M ira , S im b a , t o d o l o q u e t o ca l a lu z e s n u e s t ro r e in o .

S imba  : ¡G u a u !

N o t a : Si n o h ay i n fo rm ac ió n v is u a l im p o rt a n t e , p o r e j e m p l o , u n a c a b e z a p a rla n t e a n i-

m a d a q u e d e s c rib e ( a tra v é s d e d is cu r s o p re g rab ad o ) co m o u t i liz a r e l s it io , n o e s n e ces a -r ia u n a d es c r ip c ió n s o n o r a .

P a ra p e lí c u la s , p r o p o r c io n e d e s c rip c io n e s s o n o ra s q u e e s t é n s in c ro n izad as co n e l s o n i-

d o o r ig ina l . Consu lte l a secc ió n in form ac i  ó n s o n o ra  p a r a m á s in fo rm ac ió n s o b r e fo r m a t o s

m u l t i m e d i a .

4 .9 .3 . - Cit a d e t ex to s t r a sc rito s

La s c it a s d e t e x t o s t r a n s crit o s p e r m it e n e l a c ce s o d e la s p e r s o n a s c o n d i sc a p a c id a d e s

t an to v is u a le s co m o au d it iv as . Tam b ié n p ro p o rc io n an a cu a lq u ie r p e r s o n a la p o s ib ilid ad

d e i n d e x a r y b u s ca r in fo rm ac ió n co n t e n id a en m a te ria le s au d io v i s u a le s .

• Técni cas H TM L •

Page 115: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 115/164

117

Las c i ta s d e t ex to s t r an s c rit o s i n c lu y e n d iá lo g o s h a b la d o s , a s í c o m o c u a lq u ie r o t r o s o n i-

d o s ig n ifica t iv o , ap a rezca o n o en p an t a l la : m ú s ica , r isas , ap lau sos . e tc . En o t ras p a labras ,

t o d o e l t e x t o q u e a p a r e c e e n s u b t í tu los , as í c o m o la s d e s c rip c io n e s q u e s e p r o p o r cio n a ne n la na r rac ió n s o n o r a .

4 . 9 . 4 . - Te x t o s e q u iv a le n t e s p a ra m u lt im e d ia

Cu a n d o s e a n e c e s a rio , s e d e b e rí a p r o p o r c io n a r u n t e x t o e q u iv a le n t e s o b r e la in fo r m a -

c ió n v is u a l, p a ra p e rm it ir la co m p ren s ió n d e l a p á g i n a . P o r e je m p l o , p i e n s e e n u n a a n i m a -

c ió n p e rió d i ca q u e m u e s t ra n u b e s y llu v ia s c o m o p a r te d e u n in fo r m e s o b r e e l e s t a d o d e l

t ie m p o . P u e s t o q u e la a n im a c ió n c o m p le m e n t a e l re s t o d e l in fo r m e d e l tie m p o (q u e e s tá

p res en t ad o en i d io m a o r ig in a l - t ex to ) , e s i n n eces a r i a u n a d es c r i p c ió n m u y l a r g a d e l aa n i m a c ió n . N o o b s t an t e , s i la an im ac ió n a p a r e ce e n u n m a rc o p e d a g ó g i co e n e l q u e l o s

e s t u d i a n t e s e s tá n a p r e n d i e n d o s o b r e l a s f o r m a c i o n e s n u b o s a s e n r e l a c ió n c o n l a m a s a

t e r r e s t r e , la an im ac ió n d e b e s e r d e s c rit a p a r a a q u e l lo s q u e n o p u e d a n v e rla s , p e r o t a m -

b ié n p a r a a q u e llo s q u e q u ie r e n a p r e n d e r la le c c ió n .

Ve a t a m b ié n l a s ecc ió n s o b r e e s t i lo d e t e x to  p a ra c o n t ro la r lo s p a rp a d e o s .

4 . 9 . 5 .- O b je t o s m u lt im e d ia e m p a q u e t a d o s

O t r o s o b j e t o s , c o m o a q u e l l o s q u e p r e c i s a n u n p l u g - i n , d e b e rí a n ta m b ié n u s a r e l e l e -

m en to O BJECT. N o o b s t an t e , p a ra u n a co m p a t ib ilid ad r e t ro s p ec t i v a co n lo s n av e g ad o re s

N e t s cap e , u t i lic e e l e lem en to p a t e n t ad o EM BED co n e l e lem en to O BJECT, t a l y co m o s e

ex p lica a co n t i n u ac ió n :

E j e m p l o :<OBJECT classid=”clsid:A12BCD3F-GH4I-56JK-xyz”

codebase=”http://site.com/content.cab” width=100 height=80>

<PARAM name=”Pelicula” value=”nombrepelicula.swf”>

<EMBED src=”nombrepelicula.swf” width=100 height=80

pluginpage=”http://www.macromedia.com/shockwave/download/”>

</EMBED>

<NOEMBED>

<IMG alt=”Fotogramas de la película”

scr=”nombrepelicula.gif” width=100 height=80>

</NOEMBED>

</OBJECT>

Para m á s in fo rm ac ió n , co nsu lte [M ACRO M EDIA].

• Técn i cas H TM L •

Page 116: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 116/164

118

4 .1 0 . - M a rc o s

Para lo s u s u a r io s v id e n t e s , lo s m arco s p u ed en o rg an i za r u n a p á g i n a e n z o n a s d ife r e n -t e s . Pa ra l o s u s u a r io s n o v id en t e s , l a r e l ac ió n e n t r e l o s c o n t e n i d o s d e l o s m a r c o s ( p o r

e j e m p l o , u n m a r c o t ie n e u n a t a b la d e c o n t e n id o s ; o t r o , lo s c o n t e n id o s p r o p ia m e n t e d i -

c h o s ) d e b e s e r t ra n s m it id a p o r o t r o s m e d io s .

Lo s m arco s , t a l y co m o s e im p lem e n tan ac tu a lm en te ( co n lo s e lem e n to s FRA M ESET,

FRAM E e IFRAM E) resu ltan p ro blem á t ico s p o r m ú l t ip les razones :

• Sin u n g u ió n , t ie n d e n a r o m p e r la fu n c io n a lid a d d e “p á g in a a n t e r io r” q u e o fr e c e n l o s

n a v e g a d o r e s .

• Es im p os ib le re fe r irse a l “e s t a d o a c tu a l” d e u n m a r c o c o n u n a U RI; u n a v e z c a m b ia n lo s

co n t en id o s d e u n m arco , n o s e p u e d e v o lv e r a ap l ica r la U RI o r ig in a l .• A b r i r u n m a r c o e n u n a n u e v a v e n t a n a d e l n a v e g a d o r p u e d e d e s o r i e n t a r o s e n c i l l a -

m e n t e in c o m o d a r a lo s u s u a r io s .

En la s s ig u ien t e s s e cc io n es , t r a t am o s c ó m o h a c e r lo s m a r co s m á s acce s ib les . Tam bié n

p r o p o r c i o n a m o s u n a a lt e r na t iva a lo s m a r c os  que u t i l i zan HTML 4 .0 y CSS, y es tud ian

m u c h a s d e la s lim it a c io n e s d e la s im p l e m e n t a c io n e s a c t u a le s d e lo s m a r c o s .

4 .1 0 .1 . - Titu le lo s m arco s p a r a f  á cil or ientació n

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 2 . 1 .

E j e m p l o :Utilice e l at r ibu to “title ” p a r a n o m b r a r lo s m a r c o s .

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN”>

<HTML>

<HEAD>

<TITLE>Un documento sencillo con marcos</TITLE>

</HEAD>

<FRAMESET cols=”10%,90%”title=”Nuestra biblioteca de documentos electrónicos”>

<FRAME src=”nav.html” title=”Barra de navegación”>

<FRAME src=”doc.html” title=”Documentos”>

<NOFRAMES>

<A href=”lib.html” title=”Vínculo a la biblicoteca”>

Seleccione para ir a la biblioteca electrónica</A>

</NOFRAMES>

</FRAMESET>

• Técni cas H TM L •

Page 117: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 117/164

119

4 . 1 0 . 2 . - Te x t o s e q u iv a le n t e s p a ra m a r c o s

Punto s de ve r ificac ió n e n e s t a s e c ció n : 1 2 . 2 .

E j e m p l o :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN”>

<HTML>

<HEAD>

<TITLE>Noticias de hoy</TITLE>

</HEAD>

<FRAMESET cols=”10%,*,10%”

<FRAMESET rows=”20%,*”>

<FRAME src=”promo.html” name=”promo” title=”Promociones”

<FRAME src=”sitenavbar.html” name=”navbar” title=”Barra de

navegación del sitio”

longdesc=”frameset-desc.html#navbar”>

</FRAMESET>

<FRAME src=”noticia.html” name=”noticia”

title=”Noticia seleccionada - contenido principal”

longdesc=”frame-desc.html#noticia”>

<FRAMESET rows=”*,20%”>

<FRAME src=”titulares.html” name=”indice”title=”Índice de otros titulares nacionales”

longdesc=”frameset-desc.html#titulares”>

<FRAME src=”ad.html” name=”adspace” title=”Anuncio”>

</FRAMESET>

<NOFRAMES>

<p><a href=”noframes.html”>Versión sin marcos</a></p>

<p><a href=”frameset-desc.html”>Descripción de los marcos</a></p>

</NOFRAMES>

</FRAMESET></HTML>

E l a rch iv o f r am es e t -d es c . h tm l d eb e rí a d e c ir a lg o c o m o :

Navbar - Este marco proporciona vínculos a las secciones princi-

pales del sitio: noticias del mundo, noticias nacionales, noti-

cias locales, noticias tecnológicas y noticias de ocio.

Noticia - Este marco muestra la noticia seleccionada en ese

momento.

Titulares - Este marco proporciona vínculos a los titulares de

las noticias de hoy en esta sección.

• Técn i cas H TM L •

Page 118: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 118/164

120

O b s e rv e q u e , s i e l co n t e n id o d e l m a r co c a m b ia , n o s e p o d rá ap licar m á s e l te x t o e q u i-

v a len t e . Ig u a lm en te , lo s v í n c u lo s a la s d e s c rip c io n e s d e u n m a r c o d e b e r í an e s t a r p ro v is -

t o s d e o t ro co n t e n id o a lt e rn a t iv o e n e l e l em en to N O FRA M ES d e u n FRA M ESET.

4 . 1 0 . 3 . - A s e g ú re s e d e q u e lo s d o c u m e n t o s p u e d e n le e r se s in m a rc o s

E j e m p l o :En e s t e e jem p lo , s i e l u s u a r io lee en e l a r ch iv o “t o p . h t m l” :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN”>

<HTML>

<HEAD>

<TITLE>Este es el archivo top.html</TITLE></HEAD>

<FRAMESET cols=”50%,50%” title=”Nuestro gran documento”>

<FRAME src=”principal.html” title=”Donde se muestra el contenido”>

<FRAME src=”tabla_de_contenidos.html” title=”Tabla de contenidos”>

<NOFRAMES>

<A href=”tabla_de_contenidos.html”>Tabla de contenidos.</A>

<!— Otros vínculos de navegación que están disponibles en el archivo

principal.html, también están disponibles aquí. —>

</NOFRAMES>

</FRAMESET>

</HTML>

y la a p licac ió n d e u s u a r io n o e je c u t a m a r c o s , e l u s u a r io t e n d rá acces o (a t r avé s d e

u n v í n cu lo ) a u n a v e r sió n s in m a r c o s d e la m is m a in fo r m a c ió n .

4 . 1 0 . 4 . - H a g a q u e e l a r c h i v o d e o r i g e n d e u n m a r c o s e a s i e m p r e u n d o c u m e n t o

HTML

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 6 . 2 .

Lo s d e s a r ro lla d o r e s d e c o n t e n id o d e b e n p r o p o r c io n a r t e x t o s e q u iv a le n t e s d e lo s m a r-

c o s , d e fo r m a q u e s u s c o n t e n id o s y la s r e la c io n e s e n t r e m a r c o s t e n g a n s e n t id o . Te n g a e n

c u e n t a q u e c u a n d o c a m b i a n l o s c o n t e n i d o s d e u n m a r c o , c u a l q u i e r d e s c r i p c ió n d e b e

t a m b ié n cam b ia r. Es to n o e s p o s ib le s i s e i n s e r t a d ir ec t am en te u n a IM G (im ag en ) en u n

m a r co . A sí p u e s , lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e rí an h a ce r e l o r ig en (“s rc”) d e u n

m arco e n u n a rch iv o H TM L. Las im ag en es p u e d en s e r in s e r tad as en e l fich e ro H TM L y s u s

t ex to s a lt e rn a t iv o s s e d es a r ro l la rá n c o rr e c ta m e n t e .

• Técni cas H TM L •

Page 119: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 119/164

121

E j e m p l o :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN”>

<HTML>

<HEAD>

<TITLE>Un documento con marcos correcto</TITLE>

</HEAD>

<FRAMESET cols=”100%” title=”Marco evolutivo”>

<FRAME name=”buenmarco” src=”manzanas.html” title=”Manzanas”>

</FRAMESET>

</HTML>

<!— En el archivo manzanas.html —>

<P><IMG src=”manzanas.gif” alt=”Manzanas”>

E l s i g u i e n t e e j e m p l o d e s a c o n s e j a d o d e b e rí a s e r e v i t a d o e n l a m e d i d a q u e s e i n s e r t a

IM G d ir e c ta m e n t e e n u n m a r co :

Eje m p lo d e s a c o n s e ja d o :<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Frameset//EN”>

<HTML>

<HEAD><TITLE>Un mal documento con marcos</TITLE>

</HEAD>

<FRAMESET cols=”100%” title=”Marco estático”>

<FRAME name=”malmarco” src=”manzanas.gif” title=”Manzanas”>

</FRAMESET>

</HTML>

O b s e r v e q u e s i, p o r e je m p l o , u n v í n c u lo g e n e ra u n a n u e v a im a g e n q u e s e in s e rt a

e n e l m a r co :

<P>Visite una preciosa arboleda de<A target=”malmarco” href=”naranjos.gif” title=”Naranjos”>naranjos</A>

e l t í tu lo in ic ia l de l m arco (“M a n z a n a s”) n o en ca j a rá c o n e l c o n t e n i d o a c t u a l d e l

m is m o (“N aran jo s”).

• Técn i cas H TM L •

Page 120: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 120/164

122

4 . 1 0 . 5 . - Ev it e q u e a b r ir u n a n u e v a v e n t a n a s e a e l o b je t iv o d e u n m a r c o

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 0 . 1 .Lo s d e s a rr o lla d o r e s d e c o n t e n i d o d e b e rí a n e v it a r q u e e l o b je t iv o d e u n m a r c o s e a a b rir

u n a n u e v a v e n t a n a c o n : ta r g e t = ”_blank” .

4 . 1 0 . 6 . - A lt e r n a t iv a s a lo s m a r c o s

U n o d e lo s u s o s m á s c o m u n e s d e lo s m a r c o s e s d iv id i r la v e n t a n a d e n a v e g a c ió n d e l

u s u a rio e n d o s p a r te s : u n a v e n t a n a d e n a v e g a c ió n y u n a v e n t a n a d e c o n t e n id o . Co m o

a lt e rn a t iv a a lo s m arco s , le an im am o s a p ro b a r lo s ig u ie n t e :

1 . Cr e e u n d o c u m e n t o p a ra e l m e c an is m o d e n a ve g a c ió n (llá m e l o “n a v . h t m l”). U n d o cu -m e n t o s e p a ra d o im p lic a q u e e l m e c a n is m o d e n a v e g a c ió n p u e d e s e r c o m p a rt id o p o r

m á s d e u n d o c u m e n t o .

2 . Pa ra c ad a d o c u m e n t o q u e p r e c is e e l m e c a n is m o d e n a v e g a c ió n, incluya é s te al fina l

d e l d o cu m en to co n e l s ig u ien t e m arcad o r O BJECT (u o t ro s im ila r ):

E j e m p l o :<P>

<OBJECT data=”nav.html”>

Ir a <A href=”nav.html”>tabla de contenidos</A></OBJECT>

Co lo c a r e l m e c a n i sm o d e n a v e g a c ió n a l fin a l d e l d o c u m e n t o im p l ic a q u e , c u a n d o s e

d e s c o n e c t a n l a s h o j a s d e e s t i l o , l o s u s u a r i o s p u e d e n a c c e d e r e n p r i m e r l u g a r a l a

in fo rm ac ió n im p o rt a n te d e l d o c u m e n t o .

3 . U t ilic e h o j a s d e e s t ilo p a ra c o lo c a r e l m e c a n is m o d e n a v e g a c ió n e n e l lu g a r q u e q u ie r a

d e la p an t a l la . Po r e je m p lo , la s ig u ien t e r e g la CSS co lo ca la b a r ra d e n av e g ac ió n a la

izq u ie rd a d e l a p á g in a y la h ace o cu p a r e l 2 5 % d e l e s p ac io h o r izo n t a l d is p o n ib le :

OBJECT { float: left; width: 25% }

La s ig u ie n t e r e g l a CS S a d ju n t a e l m e c a n is m o d e n a v e g a c ió n a la esquina inferior iz-

q u ie r d a d e la p á g i n a y la m a n t ie n e a h í  inc luso s i e l usuar io desp laza la p á gina hac ia

ab a jo :

OBJECT { position: fixed; left: 0; bottom: 0 }

• Técni cas H TM L •

Page 121: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 121/164

123

N o t a : Lo s m e c a n is m o s d e n a v e g a c ió n u o t ro c o n t e n id o p u e d e n s e r in s e rt a d o s e n u n

d o c u m e n t o m e d ia n t e s u in c lu s ió n d e s d e e l la d o d e l s e rv id o r.

4 . 1 1 . - Fo rm u l a ri o s

Esta secc ió n t r a t a d e la acce s ib ilid ad d e lo s fo rm u la r io s y lo s co n t ro le s d e lo s fo rm u la -

rio s q u e s e p u e d e n c o lo c a r e n e l e le m e n t o FO RM .

4 . 1 1 . 1 . - H a g a a c c e s ib le s lo s c o n t r o le s d e l t e c la d o

Punto s de ve r ificac ió n e n e s t a s e c ció n : 9 . 4 y 9 . 5 .

Co n s u lt e la s e cc ió n a c ce s o d e s d e e l te c la d o  p a r a m á s in fo rm ac ió n .

4 . 1 1 . 2 . - Gru p o d e c o n t r o le s d e fo r m u la rio

Lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e r í a ag rupa r la in form ac i  ó n  c u a n d o s e a n a t u r a l y

a p r o p i a d o . Cu a n d o lo s c o n t r o le s d e fo r m u la r io p u e d a n s e r a g r u p a d o s e n u n id a d e s ló g i-

cas , u t ilice e l e le m e nto FIELDSET y e t ique te e sas un id ad e s con e l e le m e nto LEGEND:

E j e m p l o :<FORM action=

<FIELDSET>

<LEGEND>Información personal</LEGEND>

<LABEL for=”nombre”>Nombre:</LABEL>

<INPUT type=”text” id=”nombre” tabindex=”1”>

<LABEL for=”apellidos”>Apellidos:</LABEL>

<INPUT type=”text” id=”apellidos” tabindex=”2”>

... más información personal ...

</FIELDSET>

<LEGEND>Historia médica.</LEGEND>... información de la historia médica ...

</FIELDSET>

</FORM>

• Técn i cas H TM L •

Page 122: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 122/164

124

4 . 1 1 . 3 . - Et iq u e t e e x p lí c it am e n te lo s co n t ro le s d e l fo rm u la r io

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 2 . 4 y 1 0 . 2 .En la se cció n a n t e rio r s e p r o p o r c io n a u n e je m p lo d e L A BEL u sa d o c o n «fo r» en HTM L 4 .0 .

4 . 1 1 . 4 . - A g r u p e la s o p c io n e s d e m e n ú

Lo s d e s a rr o lla d o r e s d e c o n t e n i d o d e b e rí a n ag rupa r la in form ac i  ó n  c u a n d o s e a n a t u r a l y

a p r o p i a d o . P a ra lis t a d o s l a rg o s d e s e le c c io n e s d e m e n ú (q u e p u e d e n r e s u lt a r d i f  í c ile s d e

ra s t re a r ), lo s d e s a rr o lla d o r e s d e c o n t e n id o d e b e rí an ag ru p a r lo s í te m s SELECT (de finid o s

a t ravé s d e O PTIO N ) en u n a je ra rq u í a , u t i lizand o e l e le m e nto O PTGRO UP. Esp e c ifiq ue un a

e t iq u e t a p a ra e l g r u p o d e o p c io n e s c o n e l a t rib u t o «l ab e l» e n O PTGRO UP.

E j e m p l o :<FORM action=”http://unsitio/prog/unprograma” method=”post”>

<P>

<SELECT name=”ComOS”>

<OPTGROUP label=”PortMaster 3”>

<OPTION label=”3.7.1” value=”pm3_3.7.1”>PortMaster 3 con ComOS

3.7.1

<OPTION label=”3.7” value=”pm3_3.7”>PortMaster 3 con ComOS 3.7<OPTION label=”3.5” value=”pm3_3.5”>PortMaster 3 con ComOS 3.5

</OPTGROUP>

<OPTGROUP label=”PortMaster 2”>

<OPTION label=”3.7” value=”pm2_3.7”>PortMaster 2 con ComOS 3.7

<OPTION label=”3.5” value=”pm2_3.5”>PortMaster 2 con ComOS 3.5

</OPTGROUP>

<OPTGROUP label=”IRX”>

<OPTION label=”3.7R” value=”IRX_3.7R”>IRX con ComOS 3.7R

<OPTION label=”3.5R” value=”IRX_3.5R”>IRX con ComOS 3.5R

</OPTGROUP>

</SELECT>

</FORM>

4 . 1 1 . 5 . - A c ce s o d e s d e e l te c la d o a l o s fo r m u la rio s

En e l sig u ie n t e e je m p l o , e s p e c ific a m o s u n o r d e n d e e t iq u e t a d o e n t r e lo s e le m e n t o s (e n

o r d e n «field2 », «field1 », «s u b m i t») con «t a b i n d e x».

• Técni cas H TM L •

Page 123: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 123/164

125

E j e m p l o :<FORM action=”submit” method=”post”>

<P>

<INPUT tabindex=”2” type=”text” name=”field1”>

<INPUT tabindex=”1” type=”text” name=”field2”>

<INPUT tabindex=”3” type=”submit” name=”submit”>

</FORM>

Es t e e je m p l o a s ig n a “U” c o m o t e c la d e a c c e s o (a t ra v é s d e “a c c e s s k e y”) . Te clean d o “U”s e d i r i g e a l a e t i q u e t a , l a cu a l , a s u v ez , d i r i g e a l co n t ro l d e en t r ad a , d e fo rm a q u e e l

u s u a r io p u e d a e n t ra r e n e l t e x t o .

E j e m p l o :<FORM action=”submit” method=”post”>

<P>

<LABEL for=”usuraio” accesskey=”U”>nombre</LABEL>

<INPUT type=”text” id=”usuario”>

</FORM>

4 . 1 1 . 6 . - Bo t o n e s g rá ficos

La ut iliza ció n d e im á g e n e s p a r a d e c o r a r lo s b o t o n e s p e r m it e a lo s d e s a r ro lla d o r e s h a c e r

sus fo r m ularios ú nicos y m á s f á c ile s d e e n t e n d e r. U tiliza r u n a im ag en p a ra u n b o tó n (p o r

e j em p lo , co n e l e lem en to IN PU T o BU TTO N ) n o e s p o r sí m is m o in a c c e s ib le (a s u m ie n d o

q u e s e p r o p o r c io n a rá u n t e x t o e q u iv a le n t e p a ra la im a g e n ).

S in em b arg o , u n a fo rm u la r i o g rá fico co n b o to n e s c read o s co n IN PU T, t y p e = ” i m a g e ” ,

c re a u n t ip o d e m a p a d e im a g e n d e l la d o d e l s e rv id o r. En e l m o m e n t o e n q u e s e p u ls e e l

b o tó n co n e l r a tó n , la s c o o r d e n a d a s “x” e “y” d e l lu g a r p u ls ad o s o n e n v iad as a l s e rv id o r

c o m o p a rt e d e la p r e s e n t a c ió n d e l fo rm u la r io .

En la se cc ió n im á  g e n e s y m a p a s d e im a g e n  t ra t a m o s e l p o r q u é las im á g e n e s d e l la d o

d e l s e r v id o r d e b e n s e r e v it a d a s y s e s u g ie r e e l u s o , e n s u lu g a r, d e l m a p a d e im á g e n e s d e l

lad o d e l u s u a r io . En H TM L 4 . 0 , lo s b o to n e s g rá fic o s p u e d e n s e r a h o ra m a p a s d e im á g e -

n e s d e l lad o d e l u s u a r io . Pa ra p re s e rv a r la fu n c io n a lid ad p ro p o rc io n ad a p o r e l s e rv id o r,

lo s a u t o r e s t ie n e n la s s ig u ie n t e s o p c io n e s , t a l y c o m o s e e s t a b le c e e n la Re c o m e n d a c ió n

HTM L 4 .0 ([HTM L4 0 ], se cció n 1 7 . 4 . 1 ):

S i e l s e rv id o r r ea l i za acc io n es d i f e ren t e s d ep en d i en d o d e l l u g a r d o n d e s e p u l s e , l o su s u a rio s c o n n a v e g a d o r e s n o g rá ficos e s ta rá n e n in fe r io r id ad d e co n d ic io n es .

• Técn i cas H TM L •

Page 124: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 124/164

126

Po r e s t a r azó n , lo s a u t o r e s d e b e rí an co n s id e ra r a l t e rn a t i v as d e ap ro x im ac ió n :

• Utilice m ú lt ip l e s b o t o n e s d e e n v í o (c a d a u n o c o n s u p r o p ia im a g e n ) e n l u g a r d e u n

s o lo b o tó n g rá fico d e e n v í o . Lo s au to re s d eb en u t iliz a r h o j a s d e e s t ilo p a ra co n t ro la r lap o s i c ió n d e e s to s b o t o n e s .

• U t ilice u n m ap a d e im ag e n d e l lad o d e l u s u a rio ju n to co n e l s u b p ro g ram a (s c rip t in g ).

4 . 1 1 . 7 . - Té c n ic a s p a r a c o n t r o le s e s p e c í ficos

Punto d e ve r ificac ió n e n e s t a s e c ció n : 1 0 . 4 .

E j e m p l o :

A lg u n a s a y u d a s t é cn icas an t ig u as r eq u ie re n t e x to in ic ia l en l o s co n t ro le s d e l fo r -m ulario , t a le s co m o TEXTAREA, p ara fun cio nar co rre c tam e nte .

<FORM action=”http://algunsitio.com/prog/text-read”

method=”post”>

<P>

<TEXTAREA name=tunombre rows=”20" cols=”80"

Por favor, introduzca su nombre aquí.

</TEXTAREA>

<INPUT type=”submit” value=”Send”><INPUT type=”reset”>

</P></FORM>

P ro p o r c io n e u n t e x t o e q u iv a le n t e   para las im á g e n e s u t i l i z a d a s c o m o b o t o n e s d e “e n -

viar”:

E j e m p l o :<FORM action=”http://algunsitio.com/prog/text-read”

method=”post”><P>

<INPUT type=”image” name=enviar scr=”boton.gif” alt=”Enviar”>

</FORM>

Re m í t a s e t a m b ié n a l a s ecc ió n a c c e s o d e s d e e l t e c l a d o  , p u e s t o q u e s e a p l i c a a l o s

co n t ro le s d e fo rm u la r io .

• Técni cas H TM L •

Page 125: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 125/164

127

4 . 1 1 . 8 . - Pr o b le m a s d e c o m p a t ib ilid a d r e t r o s p e c t iv a p a ra fo r m u la rio s

En a lg u n o s n a v e g a d o r e s H TM L 3 . 2 ,• El e l em en to BU TTO N n o ap a rece .

• INPUT con typ e = ”b u t t o n ” > a p a re c e rá c o m o u n c am p o d e e n t ra d a d e t e x t o .

4 . 1 2 . - S c rip t s

Esta secc ió n t r a t a s o b re la acce s ib ilid ad d e lo s s c r ip t s (N o ta d e t rad u cc ió n : p r o g ra m a s

in d e p e n d ie n t e s q u e s e e je c u t a n d e n t r o d e u n a p á g i n a W e b ) in c lu id o s e n u n d o c u m e n t o

a t ravé s d e l e le m e nto SCRIPT.

4 .1 2 .1 . - Tran s fo rm ac ió n e le g a n t e d e lo s s c r ip t s

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 6 . 3 .

Lo s d e s a r ro lla d o r e s d e c o n t e n id o d e b e n a s e g u ra r se d e q u e la s p á g in as s o n acce s ib le s

cu an d o lo s s c r ip t s e s t é n d e s c o n e c t a d o s o e n lo s n a v e g a d o r e s q u e n o s o p o rt a n s crip t s .

• Ev it e c rea r co n t e n id o flo t an t e p a ra e l c lien t e . S i e l n av e g ad o r d e l u s u a r io n o e jecu t a

s c rip t s , n o s e g e n e r a rá o d e s p le g a rá ning ú n c o n t e n id o . N o o b s t a n t e , e s t o e s d ife r e n t e

q u e d e s p le g a r u o c u lt a r u n c o n t e n id o y a e x i st e n t e m e d ia n t e la u t iliz a c ió n c o m b in a d a

d e h o j a s d e e s t ilo y s c r ip t s ; s i n o s e e jecu t a e l s c rip t , ig u a lm en te s e m o s t r a rá e l co n t e -

n id o . Es to t a m p o c o e x c lu y e q u e s e g e n e r e n p á g in as flo t an t e s d e l lad o d e l s e rv id o r y

s e e n v í e n a l c lie n te .

• Evite c re ar v í n cu lo s q u e u t ilic en “ ja v a s crip t” , com o URI. Si un u sua r io n o e s tá utilizan-

d o s c rip t s , n o s e rá c a p a z d e s e g u ir lo s e n la c e s , p u e s t o q u e e l n a v e g a d o r n o p u e d e

c r e a r e l c o n t e n id o d e l v í n cu lo .

Eje m p lo d e s a c o n s e ja d o :Este v í n cu lo e s u n ca lle jó n s in sa l id a p ara una ap licac ió n d e u s u a r io e n q u e lo s

s c rip t s n o s e s o p o r t a n o n o e s tá n c a rg a d o s .

<A href=”javascript:”>...</A>

4 . 1 2 . 2 . - M a n e ja d o r e s d e e v e n t o s in d e p e n d i e n t e s d e l d is p o s it iv o

Punto s de ve r ificac ió n e n e s t a s e c ció n : 9 . 3 y 9 . 4 .

U n m a n e j a d o r d e e v e n t o s e s u n s c r ip t a l q u e s e r e c u rr e c u a n d o o c u rr e n c ie r t o s e v e n t o s

(p o r e je m p l o , s e m u e v e e l ra tó n , s e p r e s io n a u n a t e c la , s e c a r g a u n d o c u m e n t o , e t c .). En

H TM L 4 . 0 , lo s m a n e ja d o r e s d e e v e n t o s s o n a d ju n t a d o s a lo s e l e m e n t o s a t ra vé s d e lo sa t rib u t o s d e l m a n e ja d o r d e e v e n t o s  (lo s a t r ib u to s co m ie n zan p o r “o n ” o p o r “o n k e y u p ”).

• Técn i cas H TM L •

Page 126: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 126/164

128

A lg u n o s m a n e ja d o r e s d e e v e n t o s , c u a n d o s o n r e q u e rid o s , p r o d u c e n e fe c t o s p u r a m e n -

t e d e c o r a t iv o s , ta le s c o m o ilu m in a r u n a im a g e n o c a m b ia r d e c o lo r u n e le m e n t o d e t e x t o .

O t ro s p r o d u c e n e fe c t o s m u c h o m á s s u s t an c ia le s , co m o l lev a r a cab o u n c á lcu lo , p ro p o r -c ion ar a l usu ar io in fo rm ació n im p o r t an t e o e n v ia r u n fo rm u la r io . Pa ra lo s m an e jad o re s d e

e v e n t o s q u e h a c e n a lg o m á s q u e c a m b ia r la p r e s e n t a c ió n d e u n e le m e n t o , lo s d e s a r ro lla -

d o r e s d e c o n te n id o d e b e rí an h a ce r lo s ig u ien t e :

1 . U t ilic e d is p a r a d o r e s d e e v e n t o s a n iv e l d e a p l ic a c ió n m e jo r q u e a n iv e l d e in t e r a c c ió n

co n e l u s u a r io . En H TM L 4 . 0 , l o s a t r ib u to s d e lo s ev e n to s a n iv e l d e ap licac ió n s o n

“o n fo cu s” , “o n b lu r” (lo o p u e s t o a “o n fo cu s ”) y “o n s e l e c t” . O b s e rv e q u e e s t o s a t rib u -

t o s e s tá n d is e ñ a d o s p a r a se r in d e p e n d ie n t e s d e l m e c a n is m o , p e r o e s tá n im p le m e n t a -

d o s c o m o e v e n t o s e s p e c í fic o s d e l t e c la d o e n lo s n a v e g a d o r e s a c t u a le s .

2 . P o r o t r a p a rt e , s i d e b e u s a r a t rib u t o s d e p e n d ie n t e s d e l d i sp o s it iv o , p r o p o r c io n e r e it e -ra d o s s is t e m a s d e e n t ra d a ( p o r e je m p l o , e s p e c ifiq u e d o s m a n e ja d o r e s p a r a u n m is m o

e l e m e n t o ) :

• Utilice “o n m o u s e d o w n” co n “o n k e y d o w n ” .

• Utilice “o n m o u s e u p ” co n “o n k e y u p ” .

• Utilice “oncl ik” co n “o n k e y p r e s s ” .

O b s e r v e q u e n o h a y e q u iv a le n t e e n e l t e c la d o p a r a la d o b le p u ls a c ió n (“ondblc l ick”)

e n H TM L 4 . 0 .

3 . N o in t ro d u z c a m a n e ja d o r e s d e e v e n t o s q u e d e p e n d a n d e la c o o rd in a ció n d e l ra tó n ,

p u e s t o q u e e llo im p i d e e n t ra d a s in d e p e n d i e n t e s d e l d i sp o s it iv o .

4 . 1 2 . 3 . - P re s e n t a c ió n a l t e rn a t iv a d e sc r ip t s

U n a m an e ra d e lle v a r lo a ca b o e s co n e l e l em en to N O SCRIPT. El co n t e n id o d e e s t e

e l e m e n t o s e m u e s t r a c u a n d o lo s s c rip t s n o e s tá n d is p o n ib le s .

E j e m p l o :<SCRIPT type=”text/tcl”>

...algún script Tcl para mostrar la tabla de resultados deportivos...</SCRIPT>

</NOSCRIPT>

<P>Resultados de los partidos de ayer:</P>

<DL>

<DT>Bulls 91, Sonics 80.

<DD><A href=”bullsonic.html”>Momentos estelares del partido

Bulls contra Sonics</A>

...más resultados...

</DL>

</NOSCRIPT>

• Técni cas H TM L •

Page 127: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 127/164

129

5 . - TÉCNICAS PA RA C SS

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 3 . 3 .La s s e c c io n e s s ig u ie n t e s e n u m e r a n a lg u n a s t é cn icas p ara u t ilizar CSS con e l fin d e d ise -

ñ a r d o c u m e n t o s a c c e s ib le s y a lg u n a s t é cn icas para escr ib i r ho jas de es t i lo e f icaces . En

H T M L , l a s h o j a s d e e s t i l o d eb en s e r e s p ec i f i cad as ex t e rn am en te a t r av é s d e l e le m e n t o

LIN K, e n e l e n c a b e z a m ie n t o d e l d o c u m e n t o a t r a vé s d e l e lem en to STYLE o , p a ra u n e l e -

m e n to e s p e c í fico, a travé s d e l a t r ibu to “style ” .

CSS1 ( [CSS1]) y CSS2 ([CSS2]) p e rm ite n a los d e sar ro l lad ore s d e c on te n ido s d up licar la

m a y o rí a d e la s c a p a c id a d e s d e p r e s e n t a ció n d e H TM L 4 . 0 , y o fr ece n m á s p o t e n c ia c o n

m e n o r c o s te . N o o b s t a n te , h a s ta q u e la m a y o rí a d e lo s u s u a rio s t e n g a n n a v e g a d o re s q u e

s o p o r t e n la s h o ja s d e e s t ilo , n o t o d o id i o m a d e p r e s e n t a c ió n p u e d e e x p r e s ars e d e fo r m asa t i s fac to r ia co n h o jas d e e s t ilo . Tam bié n p r o p o r c io n a m o s e je m p l o s d e c o m o u t iliz a r la s

r e p r e s e n t a c io n e s H TM L 4 . 0 (p o r e je m p l o , ta b la s , te x t o p a r a m a p a s d e b it s ) d e fo r m a m á s

a c c e s ib le c u a n d o t e n g a n q u e s e r u s a d a s .

Ve a t a m b ié n l a s ecc ió n m a rc a d o re s d e t e x to .

5 . 1 . - Pa u t a s p a ra c re a r h o ja s d e e s til o

Punto s de ve r ificac ió n e n e s t a s e c ció n : 6 . 1 y 3 . 4 .

H e a q u í p a u t a s p a r a c r e a r h o ja s d e e s t ilo q u e p r o m u e v e n la a c c e s ib ilid a d :

• Utilice un n ú m e ro m í n im o d e h o j a s d e e s t ilo e n s u s it io .

• Si t ie ne m á s d e u n a , u t ilic e e l m is m o n o m b r e “class” p a r a e l m is m o c o n c e p t o e n t o d a s

las h o jas .

• U t ilice h o ja s d e e s t ilo v in cu l ad as m e jo r q u e e n v u e lt a s , y ev i t e la s h o ja s d e e s t i lo “ inli-

n e ” .

• L o s d e s a r r o l l a d o r e s d e c o n t e n i d o n o d e b e r í an e s c r i b i r n o rm as “ i m p o r t a n t” . D e b e n

h a c e r lo lo s u s u a rio s d o n d e s e a n e c e s a rio .

• Utilice la u nid ad “e m ” p a ra lo s t a m a ñ o s d e le t r a .

• U t ilice u n id ad es d e m e d id a r e l a t iv as y p o rce n t a je s . CSS le p e rm it e u t iliz a r u n id ad es

re l a t i v as i n c lu s o en p o s i c io n es ab s o lu t a s . Po r t an to , p u ed e co lo ca r u n a im ag en q u e

se rá c o m p e n sa d a p o r “3 e m ” d e s d e e l co m ie n z o d e l e le m e n t o q u e la c o n t e n g a . Es u n a

d is tan c ia fija , p e ro re la t iva a l t am a ñ o d e la s le t r a s , co n l o cu a l s e e s ca la rá a d e c u a d a -

m e n t e .

• U t ilice m ed id as ab s o lu t a s d e l o n g it u d só lo cu a n d o l a s ca rac t e rí s t icas f  í s ic a s d e l m e d io

d e s a lid a s e a n c o n o c id a s .

• Es p e c ifiq u e s ie m p r e u n a fu e n t e g e n é r ica p o r d e fe c to .

• Utilice n ú m e r o s , n o n o m b r e s , p a r a lo s c o lo r e s .

• Técnicas CSS •

Page 128: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 128/164

130

• P ro p o r c io n e u n t e x t o e q u iv a le n t e p a r a c u a lq u ie r im a g e n o t e x t o im p o rt a n t e s , g e n e r a -

d o s c o n h o ja s d e e s t ilo ( p o r e j e m p l o , a t ra vé s d e la s p r o p ie d a d e s “im a g e n d e fo n d o ” ,

“e s t ilo d e lis ta ” o “c o n t e n i d o ”).N o t a : El t e x t o g e n e r a d o c o n h o ja s d e e s t ilo e s p a r te d e l d o c u m e n t o d e o r ig e n y p u e d e

n o e s t a r d i s p o n ib l e p a ra l a s ay u d as t é c n i c a s q u e a c c e d e n a l c o n t e n i d o a t r a v é s d e

D O M , n iv e l 1 ([D O M 1 ]).

• A s e g ú re s e d e verificar q u e s u s h o ja s s o n l eg ib le s au n s in h o ja s d e e s t i lo .

A co n t i n u ac ió n , a lg u n o s e je m p l o s :

E j e m p l o :Utilice “e m ” p a r a e s t a b le c e r lo s t a m a ñ o s d e le t ra , co m o e n :

H1 { font-size: 2em }m e jo r q u e :

H1 { font-size: 12pt }

E j e m p l o :U t ilice u n id ad e s d e lo n g it u d r e la t iv as y p o rce n t a je s .

BODY { margin-left: 15%; margin-right: 10% }

E j e m p l o :

U t ilice u n id ad es a b s o lu t a s d e lo n g it u d só lo c u a n d o s e a n c o n o c id a s la s c a r a ct e -rí s t icas f  í s ic a s d e l m e d io d e s a lid a .

.businesscard { font-size: 8pt }

E j e m p l o :Es p e c ifiq u e s ie m p r e u n t ip o d e le t r a g e n é r ico p o r d e fec to :

BODY { font-family: “Gill Sans”, sans-serif }

E j e m p l o :

Utilice n ú m e r o s , n o n o m b r e s , p a r a lo s c o lo r e s :H1 { color: #808000 }

H1 { color: rgb (50%,50%,0%) }

5 . 2 . - Tip o s d e le tra

E n lu g a r d e u t i l i z a r e l em en to s y a t r i b u to s d e p re s en t ac ió n d e s aco n s e j ad o s , u t ilic e la s

m ú lt ip le s p ro p ied ad es CSS p a ra co n t ro la r la s ca rac t e r í s t ica s d e lo s t ip o s d e le t r a : “fon t -

• Técnicas CSS •

Page 129: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 129/164

131

fam ily” , “font-s ize ” , “fon t -s ize-ad jus t ” , fon t -s t re tch ” , “font-s tyle ” , “fon t -var ian t” y “fon t -

w e i g h t” .

Las s ig u ien t e s p ro p ied ad e s CSS2 p u e d e n s e r u t iliz ad as p a ra co n t ro la r la in fo rm ac ió n d ela fuen te : “font” , “fo nt- fam ily” , “font-s ize ” , “fon t -s ize-ad jus t ” , fon t -s t re tc h ” , “font-s tyle ” ,

“fon t -var ian t” y “f o n t - w e i g h t” . Utilí ce l a s en lu g a r d e l o s s ig u ien t e s e le m en to s y a t rib u to s

d e t ip o d e le t ra de saco nse jad os e n H TM L: FO NT, BASEFO NT, “face ” y “size ” .

S i t ien e q u e u s a r e l em en to s H TM L p a ra co n t ro l a r la in fo rm ac ió n d e l t ip o d e le t ra , u t ilice

BIG y SMA LL, qu e no e s tá n d e s a c o n s e ja d o s .

E j e m p l o :<STYLE type=”text/css”>

P.important {font-weight: bold}P.less-important {font-weight: lighter; font-size: smaller}

H2.subsection {font-family: Helvetica, sans-serif}

</STYLE>

5 . 3 . - Es til o d e l te x t o

Punto s de ve r ificac ió n e n e s t a s e c c ió n : 7 . 2 .

La s ig u ie n t e s p r o p ie d a d e s CS S2 p u e d e n s e r u s a d a s p a ra e l e s t ilo d e l te x t o :• Tipo: ‘t ex t - t rans fo rm ’ (p a r a m a yú scu las , m in ú scu las y le t ras ca p ita le s ) .

• S o m b r e a d o : ‘t e x t - s h a d o w ’.• S u b ra y a d o s , re s a lt a d o d e v í n c u lo s , p a rp a d e o : ‘t ex t -d eco ra t i o n ’. N o t a  : Si se ut i liza co n-

t e n i d o p a r p a d e a n t e ( p o r e j e m p l o , u n e n c a b e z a m i e n t o q u e a p a r e c e y d e s a p a r e c e a

in t e r v a lo s r e g u la r e s ), p r o p o r c io n e u n m e c a n i sm o p a r a d e t e n e r e l p a rp a d e o . En C SS ,

‘t ex t -d eco ra t io n : b lin k ’ p r o v o c a rá q u e e l co n t e n id o p a r p a d e e y p e r m i tirá a lo s u s u a -

rio s d e t e n e r e l e fe c t o d e s c o n e c t a n d o l a s h o ja s d e e s t ilo o a n u la n d o l a re g la e n u n a

h o ja d e e s t ilo d e u s u a r io . N o u t ilic e lo s e l em en to s BLIN K y M A RQ U EE. Es to s e lem en -

t o s n o s o n p a r t e d e n i n g u n a e s p e c i f i c a c ió n W 3 C p a r a H T M L ( p o r e j e m p l o , n o s o n

e le m e n t o s e s tá ndar) .

5 .3 .1 . - Te x to e n lu g a r d e im á g e n e s

L o s d e s a r r o l l a d o r e s d e c o n t e n i d o d e b e rí an u t i l i zar ho jas de es t i lo para dar es t i lo a un

t e x t o , m e jo r q u e p a r a r e p r e s e n t a r e l t e x t o c o n i m á g e n e s . U s a r t e x t o e n lu g a r d e i m á g e -

ne s s ig n i fica q ue la in fo rm ació n e s ta rá d i sp o n ib le p a r a u n m a y o r nú m e r o d e u s u a r io s (c o n

s in t e t izad o re s d e v o z , d is p o s i tiv o s b ra ille , d is p o s it iv o s g rá ficos, etc.). La util izació n d e

• Técnicas CSS •

Page 130: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 130/164

132

h o j a s d e e s t ilo t a m b ié n p e r m it irá a los u sua r ios a nu lar los e s t ilos d e l au to r y cam biar los

c o lo r e s o lo s t a m a ñ o s d e l e t ra m á s f á c i l m e n t e .

S i e s n eces a r i o u t i l i z a r u n m ap a d e b i t p a ra c rea r u n e fec to d e t ex to ( l e t r a e s p ec i a l ,t r an s fo rm ac ió n , s o m b r a s, e t c . ) e l m a p a d e b it d e b e s e r a c c e s ib le (v e a la s s e c c io n e s s o b r e

t e x t o s e q u iv a le n t e s  y  p á  g in a s a lt e rn a t iv a s ).

E j e m p l o :En e s t e e je m p l o , la im a g e n in s e r t a d a m u e s t r a e n c a r a c te r e s r o j o s o s c u r o “Ejem -

p lo ” , y e s c a p t a d a a t ra v é s d e l va lo r de l a t r ibu to “a lt” .

<P>Esto es un

<IMG src=”EjemploRojoOscuro.gif” alt=”ejemplo”>

de lo que queremos decir.</P>

5 . 4 . - Fo rm a te o d e l te x to

La s s ig u ie n t e s p r o p ie d a d e s C SS 2 p u e d e n s e r u s a d a s p a ra c o n t ro la r e l fo r m a t e o y p o s i-

c ió n d e l t e x t o :

• S a n g rí a : ‘t e x t - i n d e n t’. N o u t ilic e BLO CKQ U O TE o cu a lq u ie r o t ro e lem en to e s t ru c tu ra l

p a ra h a c e r s a n g rí a s e n e l t e x t o .• Es p a c iad o d e l e t r a s o p a lab ra s : ‘l e t t e r -spac ing ’, ‘w o r d - s p a c i n g ’. Po r e je m p l o , e n l u g a r

d e e s c r i b i r «H O L A » ( q u e l o s u s u a r i o s g e n e r a l m e n t e r e c o n o c e n c o m o l a p a l a b r a

«hola », p e r o q u e u n le c t o r d e p a n t a lla le e rí a c o m o le t r a s in d e p e n d ie n t e s ) lo s a u t o r e s

p u e d e n c r e a r e l m is m o e fe c t o v i su a l a p lic a n d o a «hola » la p r o p ie d a d ‘w o r d - s p a c i n g ’.Lo s t e x to s s in e s p ac io s s e rá n t r a n s fo r m a d o s e n d is c u rs o m á s f á c i l m e n t e .

• Es p a c io e n b l an co : ‘w h i t e - s p a c e ’. Es t a p ro p ied ad co n t ro la la in t e rp re t ac ió n d e l e s p a -

c io e n b la n c o d e l c o n t e n id o d e u n e le m e n t o .

• Direcc ió n d e l t e x t o : ‘di rec t ion ’, ‘u n i c o d e - b i d i’.

• Lo s p s eu d o e le m en to s : fir s t- le t t e r y :fir st - lin e p e rm it en a l o s au to re s r em it ir a la p r im e-

ra le t ra o lí n e a d e u n p á rr a fo d e l t ex to .

El s ig u ien t e e jem p lo m u e s t ra có m o u t iliz a r h o ja s d e e s t i lo p a ra c rea r u n e fec to d e le t r a

cap i ta l .

• Técnicas CSS •

Page 131: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 131/164

133

E j e m p l o :<HEAD>

<TITLE>Letra capital</TITLE>

<STYLE type=“text/css”>

.dropcap { font-size : 120%; font-family : Helvetica }

</STYLE>

</HEAD>

<BODY>

<P><SPAN class=“dropcap”>E</SPAN>rase una vez...

</BODY>

N o t a : El p s eu d o e lem en to CSS: fir st - le t t e r, q u e p e rm it e a l o s d es a r ro l lad o re s d ec o n t e n id o r e m it ir a la p rim e r a le t r a d e u n a p a r te d e l t e x t o , n o e s t á s o p o r t a d o

a m p l i a m e n t e .

5 . 5 . - C o lo re s

Punto s de ve r ificac ió n e n e s t a s e c ció n : 2 . 1 y 2 . 2 .

Ut i l i ce l as p rop iedades CSS para espec i f icar co lo res :

• ‘co lo r’, p a ra e l co lo r d e l t ex to e n p r im er p l an o .

• ‘b a c k g r o u n d - c o l o r’, p a ra lo s co lo re s d e l fo n d o .

• ‘b o r d e r - c o l o r’, ‘out l ine-co lo r ’, p a r a lo s c o l o r e s d e lo s b o r d e s .

• Para lo s co lo re s d e lo s v í ncu los , re m ita a l as pse ud o-c lase s : link , :v is it e d y :ac t ive .

A s e g ú r e s e d e q u e l a in fo r m a c ió n n o s e a p o rt a só lo a t rav é s d e lo s c o lo r e s . P o r e je m p l o ,

c u a n d o p i d a i n t e r v e n c ió n d e l o s u s u a r io s , n o e s c r i b a «p o r f av o r , s e l ecc io n e u n o d e l o s

í t e m s e t iq u e t a d o s e n v e r d e ». En s u lug ar, ase g ú r e s e d e q u e l a in fo r m a c ió n e s tá d i s p o n i -

b le a t ravé s d e o t r o s e fe c t o s d e e s t ilo ( p o r e je m p l o u n e fe c t o d e fu e n t e ) y a t ra vé s d e l

c o n t e x t o ( p o r e je m p l o , ví n c u lo s d e t e x t o d e a m p l io a l ca n c e ) .

P o r e j e m p l o , e n e l d o c u m e n t o o r i g i n a l e n i n g lé s d e e s t a s Pau t a s s e d io e s t i l o a l o s

e je m p l o s p o r d e fe c t o (a t ra v é s d e h o j a s d e e s t ilo ) d e la s ig u ie n t e m a n e r a :

• Es tá n r o d e a d o s p o r un b o r d e .

• U t ilizan u n co lo r d e fo n d o d ife re n t e .

• Co m ien zan p o r la p a lab ra «Eje m p lo » (o «Eje m p l o d e s a c o n s e ja d o »).

• Tam bié n t e rm in an co n la fr a s e «fin d e l e j em p lo », p e r o e s t a fra s e e s tá e s c o n d i d a p o r

d e fe c t o c o n ‘d is p lay : n o n e ’. Pa ra la s ap licac io n es d e u s u a r io q u e n o s o p o r t an h o ja s d e

es t i lo o cu an d o s e d es co n e c t an la s h o ja s d e e s t ilo , e s t e t ex to ay u d a a d e l im it a r e l fin

d e u n e je m p lo a lo s le c t o re s q u e n o s e a n c a p a c e s d e v e r e l b o r d e q u e r o d e a e l e je m -p lo .

• Técnicas CSS •

Page 132: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 132/164

134

Te s t rá p i d o : Para ve r ificar s i su d oc um e nto fun cion a a ú n s in co lo re s , e x am í n e l o c o n u n

m o n i to r e n b la n c o y n e g r o o c o n lo s c o lo r e s d e l n a v e g a d o r d e s c o n e c t a d o s . Ig u a lm e n t e ,

in t e n t e c o lo c a r e n s u n a v e g a d o r u n e s q u e m a d e c o lo r q u e só lo u t ilice b lanco , ne g ro y lo sc u a t r o t o n o s d e g ris b á s ic o d e lo s n a v e g a d o r e s y v e a có m o s e m u e s tra s u p á g in a .

Te s t rá p i d o : Para ve r ificar s i e l con t ras te d e co lo r es su fic ie n te p ara se r d i s t ing u ido p or

p e rs o n a s c o n d e fic ie n c ia s e n l a p e r c e p c ió n d e l c o lo r, o p o r a q u e llo s c o n m o n i to r e s d e

b a j a r e s o lu c ió n , im p r im a la s p á g i n a s e n u n a im p r e s o r a e n b la n c o y n e g r o ( c o n lo s fo n d o s

y co lo re s en e s ca l a d e g r i s e s ) . In t en t e t am b ié n f o t o c o p i a r l o i m p r e s o d o s o t r e s v e c e s

p a ra v e r có m o s e d e t e r io ra . Ello l e m o s t r a rá d ó n d e n e c e s it a añ ad ir se ñ a le s r e d u n d a n t e s

(e j em p lo : lo s h ip e rv í n cu lo s e s tá n n o r m a lm e n t e s u b ra y a d o s e n la s p á g ina s We b) , o s i las

s e ñ a le s s o n d e m a s ia d o p e q u e ñ a s o c o n fu s a s p a r a m o s t ra r se b ie n .

Pa ra m ay o r in fo rm ac ió n so bre co lo re s y con t ras tes , cons u l te [LIGHTHO USE].

5 . 6 . - M a q u e ta c ió n , u b ic a c i ó n , c o lo c a c i ó n y a lin e a c ió n

M a q u e t a c ió n , u b icac ió n , co lo cac ió n y a l ine ac ió n d e b e rí an h ace r se a t r avé s d e h o ja s d e

es t i lo ( e s p ec i a lm en te u t iliz an d o h o j a s d e e s t ilo d e u b i cac ió n flo t an t e o ab s o lu to ) :

• Ca d a u n a d e la s p r o p ie d a d e s ‘t e x t - i n d e n t’, ‘t ex t -a l ing ’, ‘w o r d - s p a c i n g ’ y ‘fon t -s t re t -

ch ’, p e rm it e a l o s u s u a r io s co n t ro l a r e l e s p ac iad o s i n añ ad ir e sp ac ios ad ic ion ale s . U t i-

lice ‘t ex t - a l i n g : cen t e r’ e n lu g a r d e l e l em en to d es a co n s e j ad o CEN TER.

• C o n l a s p r o p i e d a d e s ‘m a r g i n ’, ‘m a r g i n - t o p ’, ‘m arg in - r i g h t ’, ‘m a r g i n - b o t t o m ’ y ‘m a r -

gin-left’, lo s a u t o r e s p u e d e n c r e a r e s p a c io s e n lo s c u a t r o la d o s d e l c o n t e n id o d e u n

e le m e n t o , e n lu g a r d e a ñ ad ir e s p a c io s «n o n -b reak in g » (& n b s p ;), q u e s o n e t iq u e t a s n o

e s t a n d a riz a d a s , p a r a c re a r e s p a c io a lr e d e d o r d e u n e le m e n t o .

• Co n la s p r o p ie d a d e s ‘float’, ‘pos i t ion ’, ‘to p ’, ‘r igh t’, ‘b o t t o m ’ y ‘left ’, e l u s u a rio p u e d e

con t ro lar l a pos ic ió n v i s u a l d e c a s i c u a l q u i e r e l e m e n t o d e m a n e r a i n d e p e n d i e n t e a

có m o a p a r e z ca e l e le m e n t o e n e l d o c u m e n t o .

• Lo s a u t o r e s d e b e r í an d i s e ñ a r s ie m p r e d o c u m e n t o s q u e t e n g a n s e n t id o s in h o ja s d e

e s t ilo (p o r e je m p l o , e l d o c u m e n t o d e b e rí a e s c r ib ir se e n u n o rd e n «ló gico ») y e n t o n c e s

ap lica r h o ja s d e e s t ilo p a ra lo g ra r e fec to s v is u a l e s . Las p ro p ied ad es d e u b i cac ió n p u e -

d e n s e r u s a d a s p a r a c r e a r n o t a s m a r g i n a l e s ( q u e s e n u m e r a rá n a u t o m á t i c a m e n t e ) ,

b a r ra s la t e ra le s , e fec to s s im ila re s a l o s m arco s , en cab e zam ien to s y p i e s s im p les y o t r a s

m á s .

• La p r o p ie d a d ‘e m p t y - c e l l s’ p e rm it e a lo s u s u a r io s d e j a r v ac í a s c e ld a s d e t a b la s y p o -

d e r p r o p o r c io n a r le s b o r d e s e n la p a n t a lla o e n e l p a p e l. Un a c e ld a d e d a t o s q u e d e b e

e s t a r v ac í a , n o d e b e rí a s e r lle n a d a c o n u n e s p a c io e n b la n c o o u n e s p a c io «n o n - b r e a -

king » só lo p ara log rar un e fe c to v i sua l .

• Técnicas CSS •

Page 133: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 133/164

135

5 .6 .1 . - Si d e be u t i lizar im á g e n e s c o m o e s p a c ia d o r e s

P ro p o r c io n e t e x t o s e q u iv a le n t e s p a r a t o d a s la s im á g en es , in c lu y en d o l a s im á g e n e s in -v is ib le s o t r an s p a ren t e s .

S i l o s d e s a r r o l l a d o r e s d e c o n t e n i d o n o p u e d e n u s a r h o j a s d e e s t i l o y d e b e n u t i l i z a r

im á g en es i n v is ib le s o t ran s p a ren t e s (p o r e j em p lo , co n IM G ) p a ra d is e ñ ar con im á g e n e s

en la s p á g in a s , d e b e rí an e sp e c ificar a l t=“  ” p ara e llas .

E j e m p l o d e s a c o n s e j a d o :Lo s a u t o r e s n o d e b e rí an u t ilizar esp ac ios p ara e l va lo r de “a lt” , co n e l fin d e p rev e -

n ir q u e la s p a l a b ra s s e d e s p la c e n ju n t a s c u a n d o la im a g e n n o e s t á c a r g a d a :

mi poema necesita un gran espacio <IMG src=“10pttab.gif”alt=”&nbsp;&nbsp;&nbsp;”>

En e l s ig u ien t e e jem p lo , s e u t iliz a u n a im ag en p a ra fo rza r q u e u n g rá f ico aparezca

en c ie r t a p o s i c ió n :

<IMG src=”espaciador.gif” alt=”espaciador”>

<IMG src=”ruedacoloreada.gif” alt=”La Rueda de la Fortuna”>

5 . 7 . - Lín e a s y b o rd e s

Las lí n e a s y b o r d e s p u e d e n t r a n s m i t i r l a n o c ió n d e «s e p a r a c ió n » a l o s u s u a r io s q u ep u e d e n v e r, p e r o e s t e s e n t id o n o p u e d e s e r d e d u c id o fu e r a d e u n c o n t e x t o v is u a l.

U t ilice la s p ro p ied ad e s CSS p a ra e s p ec i fica r lo s e s t i lo s d e lo s b o rd e s :

• ‘b o r d e r’, ‘b o r d e r - w i d t h ’, ‘b o rd e r - s t y l e ’, ‘b o r d e r - c o l o r’.• Para las tablas , ‘b o r d e r - s p a c i n g ’ y ‘b o rd e r -co l l ap s e ’.• Para co n to rn o s d in á m i c o s , ‘outl ine ’, ‘out l ine-co lo r ’, ‘outl ine-s tyle ’ y ‘o u t l i n e -w id th ’.

Lo s a u t o r e s d e b e r í an u s a r h o ja s d e e s t ilo p a ra c rea r lí n e a s y b o r d e s .

E j e m p l o :

En e s te e je m p lo , e l e le m e n t o H 1 t e n d rá u n b o r d e s u p e r i o r d e d o s p i x e l s d eg ro s o r, co lo r ro jo y e s t a rá s e p a r a d o d e l c o n t e n id o p o r 1 e s p a c io .

<HEAD>

<TITLE>Línea roja con hoja de estilo</TITLE>

<STYLE type=”text/css”>

H1 { padding-top: 1em; border-top: 2px red }

</STYLE>

</HEAD>

<BODY>

<H1>Capítulo 8.- Dispositivos auditivos y táctiles</H1>

</BODY>

• Técnicas CSS •

Page 134: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 134/164

136

Si una lí n e a (p o r e j em p lo , e l e l em en to H R) s e u s a p a ra in d ica r la e s t ru c tu ra , a s eg ú r e s e

d e q u e s e r e fie r e a la e s t r u c tu r a t a m b ié n d e u n a fo rm a n o v is u a l (p o r e j em p lo , u t iliz an d o

u n m arcad o r e s t ru c tu ra l).

E j e m p l o :En e s t e e je m p l o , e l e l e m e n t o D IV s e u s a p a r a c re a r u n a b a r ra d e n a v e g a c ió n q u e

in c lu y e u n s ep a rad o r h o r izo n t a l.

<DIV class=”barra-de-navegacion”>

<HR>

<A rel=”Siguiente” href=”siguiente.htm”>[Página siguiente]</A>

<A rel=”Anterior” href=”anterior.htm”>[Página anterior]</A>

<A rel=”Primera” href=”primera.htm”>[Primera página]</A></DIV>

• Técnicas CSS •

Page 135: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 135/164

137

MAPA DE PUNTOS DE VERIFICACIÓN

Este í n d ice lis t a cad a p u n to d e v e r ificac ió n y la s s e c c io n e s d e e s te d o c u m e n t o e n la sq u e e s t ra t a d o .

Pa u t a 1 :1 . 1 P r o p o r c i o n e u n t e x t o e q u i v a l e n t e p a r a t o d o e l e m e n t o n o t e x t u a l ( p o r e j e m p l o , a

t rav é s d e «a lt», «l o n g d e s c» o en e l co n t e n id o d e l e lem e n to ) . Ello in c lu y e : im á g e n e s ,

r e p r e s e n t a c io n e s g rá f icas de tex tos ( inc lu idos los s í m b o l o s ) , z o n a s d e u n m a p a d e

im a g e n , a n im a c io n e s (p o r e je m p l o , GIFs a n im a d o s ), a p p le t s y o b j e t o s p r o g r a m a d o s ,

asc i i a r t , m arco s , sc r ip t s , im á g e n e s u t iliz a d a s c o m o v iñ e t a s d e l i s t a , e s p a c i a d o r e s ,

b o t o n e s g rá fico s , s o n id o s ( e j ecu t ad o s co n o s in l a in t e rv en c ió n d e l usu ar io ) , a rch ivo s

e x c lu s iv a m e n t e a u d it iv o s , b a n d a s s o n o r a s d e v í d e o y ví d e os . [Prio r id ad 1 ] .Co n s u lt e : 3 . 2 Tex to s e q u iv a len t e s y 4 . 7 . 1 Tex to s e q u iv a len t e s p a ra im á g e n e s .

1 . 2 P r o p o r c i o n e v í n c u l o s d e t e x t o r e d u n d a n t e s p a r a c a d a z o n a a c t i v a d e u n m a p a d e

im ag e n d e l lad o d e l s e rv id o r. [P rio r id ad 1 ] .

Co n s u lt e : 3 . 2 Te x t o s e q u iv a le n t e s y 4 . 7 . 6 M a p a s d e im a g e n d e l la d o d e l s e r v id o r.

1 . 3 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p u e d a n le e r a u t o m á t i c a m e n t e e n v o z a l t a e l

t e x t o e q u i v a l e n t e d e u n a b a n d a v i s u a l , p r o p o r c i o n e u n a d e s c r i p c ió n au d i t i v a d e l a

in fo rm ac ió n im p o rt a n t e d e la b a n d a v is u a l d e u n a p r e s e n t a c ió n m ul t im e d ia . [Prio r id ad

1 ].

Co n s u lt e : 4 . 9 . 2 In fo rm ac ió n v is u a l y m o v im ien to .

1 . 4 Pa ra cu a lq u ie r p re s en t ac ió n m u lt im e d ia b a s a d a e n e l t ie m p o (p o r e je m p lo , u n a p e lí -cu la o an im ac ió n ) , s in c ro n i ce a l te rn a t iv as e q u iv a le n t e s (p o r e j em p lo , s u b t í t u lo s o d e s -

c rip c io n es au d it iv as d e la b a n d a v is u a l ) co n la p re s e n t ac ió n. [Prio rid ad 1 ] .

Co n s u lt e : 4 . 8 .3 S o n id o e i m a g e n p r o d u c id o s p o r o b j e t o s d in á m i c o s .

1 . 5 H a s t a q u e la s a p lic a c io n e s d e u s u a r io e je c u t e n t e x t o s e q u iv a le n t e s p a r a lo s v í n cu lo s

d e l m a p a d e im a g e n d e l la d o d e l c lie n t e , p r o p o r c io n e v í n c u lo s r e d u n d a n t e s d e t e x t o

p a r a ca d a r e g ió n a c t iv a d e u n m a p a d e im a g e n d e l la d o d e l c lie n t e . [P rio r id a d 3 ] .

Co n s u lt e : 3 . 2 Te x t o s e q u iv a le n t e s y 4 . 7 . 5 M a p a s d e im a g e n d e l la d o d e l c lie n t e .

Pa u t a 2 :2 . 1 A s e g ú r e s e d e q u e t o d a l a in fo r m a c ió n c o m u n ic a d a a t r a vé s d e l co lo r e s tá t a m b ié n

d is p o n ib le s in e l co lo r, p o r e jem p lo a t r avé s d e l co n t ex to o u n m arcad o r. [P rio r id ad 1 ] .

Co n s u lt e : 5 . 5 Co lo re s .

2 . 2 A s e g ú r e s e d e q u e la s c o m b in a c io n e s d e c o lo r d e l fo n d o y p rim e r p l a n o t ie n e n s u fi-

c ie n t e co n t r a s t e p a ra s e r v is u a lizad as p o r p e r so n as co n d e fic ien c ia s en la p e rce p c ió n

d e l co lo r , o cu an d o s e v en en u n a p an t a l l a en b l an co y n eg ro . [P r io r i d ad 2 p a ra l a s

im á g e n e s , Pr io r id ad 3 p a ra e l t ex to ].

Co n s u lt e : 5 . 5 Co lo re s .

• Técnicas • M apa de Puntos de Ver i ficación •

Page 136: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 136/164

138

Pa u t a 3 :3 . 1 C u a n d o e x i s t a u n l e n g u a j e d e m a r c a d o a p r o p i a d o , u t i l i c e m e j o r e l m a r c a d o r q u e

im á g e n e s p a r a c o m u n ic a r la in fo r m a c ió n. [Prioridad 2] .Co n s u l t e : 4 . 3 . 4 E t i q u e t a s y h o j a s d e e s t i l o m e jo r q u e im á g e n e s : e l e j e m p l o d e l a s

m a t e m á t icas .

3 . 2 C re e d o c u m e n t o s v a lid a d o s s e g ú n la s r eg la s fo rm a le s d e la g ram á t ica. [Prio rid ad 2 ] .

Co n s u lt e : 4 . 1 Es t ru c t u ra d e l d o c u m e n t o y m e t a d a t o s .

3 . 3 U t ilice h o j a s d e e s t i lo p a ra co n t ro l a r la m aq u e t ac ió n y la p r e s e n t a c ió n. [Prio rid ad 2 ] .

Co n s u lt e :3 . 2 Tex to s e q u iv a le n t e s , 4 . 3 . 1 Énfasis y 5 Té cn icas p ara CSS.

3 . 4 U t i l i ce u n id ad es r e l a t i v as m e jo r q u e ab s o lu t a s en l o s v a lo re s d e l o s a t r i b u to s d e l

len g u a j e d e m arcad o y lo s v a lo re s p ro p io s d e l a s h o ja s d e e s t ilo . [P rio r id ad 2 ] .

Co n s u lt e : 5 . 1 Pau t a s p a ra c rea r h o ja s d e e s t ilo .3 . 5 U t ilic e e le m e n t o s d e e n c a b e z a m ie n t o p a r a c o m u n ic a r la e s t r u ct u ra d e l d o c u m e n t o y

ú s e lo s d e acu e rd o a la e s p e c ificac ió n. [Prio rid ad 2 ] .

Co n s u lt e : 4 . 1 . 2 En c a b e z a m ie n t o s d e s e c c ió n .

3 . 6 M arq u e ap ro p iad am e n te la s lis t a s y lo s p u n to s d e l a s lis t a s . [P rio r id ad 2 ] .

Consu lte : 4 .4 Lis tas .

3 . 7 M a r q u e a p r o p i a d a m e n t e l a s c i t a s . N o u t i l i c e e l m a r c a d o r d e c i t a s p a r a f o r m a t e a r

e fe c t o s t a le s c o m o la s a n g rí a. [Prio rid ad 2 ] .

Consu lte : 4 .3 .3 Citas .

Pa u t a 4 :4 . 1 Id e n t ifiq u e c la ra m e n t e lo s c a m b io s d e l id i o m a o r ig i n a l d e l t e x t o d e u n d o c u m e n t o y

cu a lq u ie r t ex to e q u iv a len t e (p o r e jem p lo , lo s s u b t í tu los ) . [Prio rid ad 1 ] .

Co n s u lt e : 4 . 2 In fo rm ac ió n s o b r e e l id i o m a .

4 . 2 E sp e c ifiq u e e l n o m b r e c o m p l e t o d e c u a lq u ie r a b r e v ia t u ra o a c ró n im o la p rim e r a v e z

q u e a p a r e z c a e n u n d o c u m e n t o . [P rio r id a d 3 ].

Co n s u lt e : 4 . 3 . 2 A cró n im o s y ab re v ia tu ra s .

4 . 3 Id en t ifiq u e e l id io m a o r ig in a l d e u n d o cu m e n to . [Pr io r id ad 3 ] .

Co n s u lt e : 4 . 2 In fo rm ac ió n s o b r e e l id i o m a .

Pa u t a 5 :5 . 1 Pa ra l a s t ab l a s d e d a to s , i d en t i f i q u e l o s en cab ezam ien to s d e l a s f i l a s y co lu m n as .

[Prio rid ad 1 ] .

Co n s u lt e : 4 . 5 . 1 Tab l a s d e d a to s .

5 . 2 P a ra la s t a b la s d e d a t o s q u e t ie n e n d o s o m á s n ive le s ló g ic o s d e e n c a b e z a m ie n t o s d e

fila y co lu m n a , u t ilic e m arcad o re s p a ra a s o c ia r la s ce ld as d e d a to s y la s ce ld as d e

e n cab e zam ien to s . [P rio r id ad 1 ] .

Co n s u lt e : 4 . 5 . 1 Tab l a s d e d a to s .

• Técnicas • M apa de Puntos de Ver i ficación •

Page 137: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 137/164

139

5 . 3 N o u t i l i c e t a b l a s p a r a m a q u e t a r a n o s e r q u e l a t a b l a s t e n g a n s e n t i d o c u a n d o s e

a lin e en . Po r o t r a p a rt e , s i la t ab l a n o t ien e s e n t id o , p ro p o rc io n e u n e q u iv a le n t e a lt e r -

n a t iv o (q u e p u e d e s e r u n a v e rs ió n a l ine ad a) . [Prio r id ad 2 ] .Co n s u lt e : 4 . 5 . 2 E v it e la s t ab l a s p a ra m aq u e t a r.

5 . 4 S i s e u t iliz a u n a t ab la p a ra m aq u e t a r, n o u s e u n m arcad o r e s t ru c tu ra l p a ra e l fo rm a teo

visual . [Prio rid ad 2 ] .

Co n s u lt e : 4 . 5 . 2 E v it e la s t ab l a s p a ra m aq u e t a r.

5 . 5 P r o p o r c io n e r e s ú m e n e s p a ra la s t ab la s . [P rio r id ad 3 ] .

Co n s u lt e : 4 . 5 . 1 Tab l a s d e d a to s .

5 . 6 P ro p o rc io n e ab rev i a tu ra s p a ra la s e t iq u e t a s d e lo s e n cab e zam ien to s . [P rio r id ad 3 ].

Co n s u lt e : 4 . 5 . 1 Tab l a s d e d a to s .

Pa u t a 6 :6 . 1 O rg a n ic e lo s d o c u m e n t o s d e fo r m a q u e p u e d a n le e rs e s in h o ja s d e e s t ilo . Po r e je m -

p l o , cu a n d o s e e je c u t a u n d o c u m e n t o H TM L s in h o ja s d e e s t ilo a s o c ia d a s , tie n e q u e

s e r p o s ib le a ú n a s í le e r e l d o cu m en to . [P rio r id ad 1 ] .

Co n s u lt e : 5 . 1 Pau t a s p a ra c rea r h o j a s d e e s t ilo .

6 . 2 A s e g ú r e s e d e q u e s e a c t u a liz a n lo s e q u iv a le n t e s d e lo s c o n t e n id o s d i ná m ic o s c u a n d o

c a m b i a n é s tos . [Pr io r id ad 1 ] .

Co n s u lt e : 4 .1 0 . 4 H a g a q u e e l ar ch iv o d e o r ig e n d e u n m a r co s e a s ie m p r e u n d o c u -

m e n t o H TM L .

6 . 3 A s e g ú r e s e d e q u e la s p á g i n a s s o n u t iliz a b le s a u n s i se d e s c o n e c t a n o n o s e s o p o rt a n

lo s s c rip t s , a p p le t s u o t r o s o b je t o s d e p r o g ra m a c ió n . S i e l lo n o e s p o s ib le , p ro p o rc io -

n e in fo r m a c ió n e q u iv a le n t e e n u n a p á g ina a l te rna t iva a cce s ib le . [Prio r id ad 1 ] .

Co n s u lt e : 4 . 1 2 . 1 Tran s fo rm ac ió n e le g a n t e d e lo s s c r ip t s .

6 . 4 Pa ra l o s s c rip t s y ap p le t s , a s e g ú r e s e d e q u e lo s m a n e ja d o r e s d e e v e n t o s s o n in t ro d u -

c id o s co m o in d ep e n d ien t e s d e l d is p o s it iv o . [P rio r id ad 2 ].

Co n s u lt e : 4 .1 2 . 2 M a n e ja d o r e s d e e v e n t o s in d e p e n d ie n t e s d e l d i sp o s it iv o .

6 . 5 A s e g ú r e s e d e q u e e l c o n t e n id o d in á m ic o e s a c c e s ib le o p r o p o r c io n e u n a p r e s e n t a -

c ió n o p á g ina a l te rna t iva [Pr io r id ad 2 ] .

Co n s u lt e : 3 . 3 Pá ginas a l te rna t ivas .

Pa u t a 7 :7 . 1 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p e r m it a n a é s te con t ro lar los des te l los , ev i te

hac e r q ue la p an ta lla d e s te lle . [Prio r id ad 1 ] .

Co n s u lt e : 3 . 9 Pa rp ad eo d e la p a n t a lla .

7 . 2 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p e r m it a n a é s t e c o n t r o la r e l p a r p a d e o d e t e x t o ,

e v it e q u e e l co n t e n id o p a r p a d e e (p o r e je m p lo , q u e c a m b ie la p re s e n t a c ió n c o n u n a

p e r io d ic id ad r e g u la r, co m o u n e n ce n d id o y ap a g ad o ) . [P rio r id ad 2 ].

Consu lte : 5 .3 Es t ilo d e l t e x to .

• Técnicas • M apa de Puntos de Ver i ficación •

Page 138: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 138/164

140

7 . 3 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p e r m it a n a é s t e c o n t r o la r e l c o n t e n id o e n m o -

v im ie n t o , e v í t e l o e n la s p á g inas . [Pr io r id ad 2 ] .

Co n s u l te : 4 . 9 . 2 In fo rm ac ió n v is u a l y m o v im ien to .7 . 4 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p r o p o r c io n e n la c a p a c id a d d e d e t e n e r e l r e fr e s -

c o , n o c re e p á g i n a s q u e s e r e f r e s q u e n a u t o m á t ic a m e n t e d e fo r m a p e rió d ica . [Prio ri-

d a d 2 ].

Co n s u l te : 3 . 8 Re fre s co au to m á t ico d e la p á g in a .

7 . 5 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p r o p o r c io n e n la c a p a c id a d d e d e t e n e r la r e d i-

r e c c ió n a u t o m á t ic a , n o u t ilic e m arcad o re s p a ra r ed ir ig ir au to m á t ic am en te la s p á g in as .

En lug ar de e llo , co nfig ure e l se rv id or p ara q ue rea lice las red irecc ion e s . [Prio r id ad 2 ] .

Co n s u lt e : 3 . 8 Re fre s co au to m á t ico d e la p á g in a .

Pa u t a 8 :8 . 1 H a g a l o s e l e m e n t o s d e p r o g r a m a c ió n , t a l e s c o m o s c r i p t s y a p p l e t s , d i r e c t a m e n t e

acces ib l e s o co m p a t ib l e s co n l a s ay u d as t é cn icas . [Prio r id ad 1 s i la func ional id ad e s

im p o rt a n t e y n o s e p r e s e n t a e n o t r a p a r t e ; d e o t ra m a n e ra , Prio r id a d 2 ] .

Co n s u lt e : 4 . 8 . 2 A p p le t s d ir e c t a m e n t e a c c e s ib le s y 4 . 8 . 3 S o n id o e i m a g e n p r o d u c id o s

p o r o b je t o s d i ná m i c o s .

Pa u t a 9 :9 . 1 Pr o p o r c io n e m a p a s d e im a g e n d e l la d o d e l c lie n t e e n lu g a r d e m a p a s d e im a g e n d e l

la d o d e l s e r v id o r, e x c e p t o c u a n d o l a s zo n a s n o p u e d a n s e r d e fin id a s c o n u n a fo r m a

g e o m é t r ica ase q u ib le . [Pr io r id ad 1 ] .

Co n s u lt e : 4 . 7 . 5 M a p a s d e im a g e n d e l la d o d e l c lie n t e .

9 . 2 A s e g ú r e s e d e q u e c u a lq u ie r e le m e n t o q u e t e n g a s u p r o p ia in t e r fa z p u e d a s e r o p e r a -

d o d e m o d o in d e p e n d ie n t e d e l d is p o s it iv o . [P rio r id a d 2 ] .

Co n s u lt e : 3 . 4 A c c e s o d e s d e e l t e c la d o .

9 . 3 Pa ra l o s s c r i p t s , u t i l i c e m an e j ad o res d e ev en to s ló g ic o s m e jo r q u e m a n e ja d o r e s d e

e v en to s d ep en d ien t e s d e l d is p o s i tiv o . [P rio r id ad 2 ].

Co n s u lt e : 4 . 1 2 . 2 M a n e ja d o r e s d e e v e n t o s in d e p e n d ie n t e s d e l d i sp o s it iv o .

9 . 4 Cr e e u n o r d e n ló g ico e n la s e t i q u e t a s a t rav é s d e v í n cu lo s , co n t ro le s d e fo rm u la r io y

o b je to s . [Prio r id ad 3 ] .

Co n s u l te : 4 . 1 1 . 1 H ag a acces ib le s lo s co n t ro le s d e l te c lad o .

9 . 5 P r o p o r c io n e a t a jo s d e t e c la d o p a ra lo s v í n c u lo s i m p o r t a n t e s (in c lu y e n d o lo s q u e e s -

tá n e n lo s m a p a s d e im a g e n d e l la d o d e l c lie n t e ), c o n t ro le s d e fo r m u la r io y g ru p o s d e

co n t ro le s d e fo rm ulario . [Pr io r id ad 3 ] .

Co n s u l te : 4 . 1 1 . 1 H ag a acces ib le s lo s co n t ro le s d e l te c lad o .

Pa u t a 1 0 :1 0 . 1 H a s t a q u e la s a p l ic a c io n e s d e u s u a r io p e r m it a n d e s c o n e c t a r la s v e n t a n a s g e n e ra d a s ,

n o p r o v o q u e a p a r ic io n e s in e s p e r a d a s d e o t ra s v e n t a n a s y n o c a m b ie la v e n t a n a a c t u a ls in inform ar al usu ario . [Prio rid ad 2 ] .

• Técnicas • M apa de Puntos de Ver i ficación •

Page 139: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 139/164

141

Co n s u lt e : 4 . 1 0 . 5 E vit e q u e a b r ir u n a n u e v a v e n t a n a s e a e l o b je t iv o d e u n m a r co .

1 0 . 2 H a s t a q u e l a s a p l i c a c i o n e s d e u s u a r i o s o p o r t e n a s o c i a c i o n e s e x p lí c i tas en t re l as

e t iq u e t a s y lo s c o n t r o le s d e fo r m u la rio , a s e g u r e , p a ra t o d o s l o s c o n t r o le s d e fo r m u la -rio c o n e t iq u e t a s im p lí c it a m e n t e a s o c ia d a s , q u e l a e t iq u e t a e s tá u b ic a d a c o r re c t a m e n -

te. [Prioridad 2] .

Co n s u lt e : 4 . 1 1 . 3 Et iq u e t e e x p lí c it am en te l o s co n t ro l e s d e l fo rm u la r io .

1 0 . 3 H as t a q u e l a s ap l i cac io n es d e u s u a r io ( i n c lu y en d o l a s ay u d as t é cn icas ) in te rp re ten

c o r re c t a m e n t e e l t e x t o d e c a d a c e ld a , p r o p o r c io n e t e x t o l in e a l a lt e r n a t iv o ( e n l a m is -

m a p á g i n a o e n a l g u n a o t r a ) p a r a t o d a s l a s t a b l a s q u e e x p o n g a n t e x t o p a r a l e l o y

co lu m n as co n p a lab ra s in s e r tad as . [P rio r id ad 3 ] .

Co n s u lt e : 4 . 5 . 3 Te x to i n s e r t ad o en t ab la s .

1 0 . 4 H a s t a q u e la s a p lic a c io n e s d e u s u a r io m a n e je n c o r re c t a m e n t e lo s c o n t ro le s v a c í o s ,in c lu y a p o r d e fe c t o c a ra c t e r e s d e m a n t e n i m i e n t o d e l lu g a r e n l a s c a ja s d e e d ic ió n y las

á r ea s d e t ex to . [P rio r id ad 3 ] .

Co n s u lt e : 4 . 1 1 . 7 Té c n ic a s p a ra c o n t r o le s e s p e c í ficos.

1 0 . 5 H as t a q u e l a s ap l i cac io n es d e u s u a r io ( i n c lu y en d o l a s ay u d as t é cn icas ) in te rp re ten

d e fo rm a c la ra v í n cu lo s ad y ace n t e s , in c lu y a ca rac t e re s im p r im ib le s q u e n o s e an p a r t e

d e l v í n c u lo ( ro d e a d o s p o r e s p a c io s ) e n t r e lo s v í n cu lo s ad y acen t e s . [Pr io r id ad 3 ] .

Co n s u lt e : 4 . 7 . 5 M a p a s d e im a g e n d e l la d o d e l c lie n t e .

P a u t a 1 1 :11 .1 Ut ilice t e cno log í a s W 3 C c u an d o e s té n d is p o n ib le s y s e a n a d e c u a d a s p a r a u n a t a re a

y u s e la s ú lt im as v e r s io n es s o p o r t ad a s . [P rio r id ad 2 ] .

Co n s u lt e : 3 . 1 2 S o p o r t e d e l n a v e g a d o r.

1 1 . 2 Ev it e ca rac t e rí s t ica s d e s aco n s e j ad as p o r la s t ecn o lo g í as W 3C. [Prio r id ad 2 ] .

Consu l te : 5 .2 – Tip os d e le t ra , 5 .3 – Es t ilo s d e t ex to y e l í n d ic e d e e le m e n t o s y a trib u -

t o s .

1 1 . 3 P ro p o rc io n e la in fo rm ac ió n d e m a n e ra q u e lo s u s u a r io s p u e d a n r e c ib ir lo s d o c u m e n -

t o s s e g ú n s u s p re fe re n c ia s (p o r e j em p lo , id io m a , t ip o d e co n t e n id o , e t c . ). [P rio r id ad

3 ].

Co n s u l t e : 3 . 7 N eg o c i ac ió n d e l c o n t e n id o .

1 1 . 4 Si d e s p u é s d e lo s m a y o r e s e s fu e rz o s n o c o n s ig u e c r e a r u n a p á g in a acce s ib le , p ro -

p o r cio n e u n v í n c u lo a u n a p á g in a a lt e rn a t iv a q u e u t ilic e t ecn o lo g í as W3 C, s ea a cces i -

b le , t e n g a u n a i n fo r m a c ió n (o u n a fu n c io n a lid ad ) eq u iv a le n t e y e s t é ac tu a l izad a co n

t an t a fr ecu e n c ia co m o la p á gina original inaccesible. [Prioridad 1] .

Co n s u lt e : 3 . 3 Pá ginas a l te rna t ivas .

P a u t a 1 2 :12 .1 Titu le ca d a m arco p ara fac i lit a r la ide n t i ficac ió n y la n a v e g a c ió n. [Prio rid ad 1 ] .

Co n s u lt e : 3 . 2 Te x to s e q u iv a len t e s y 4 . 1 0 . 1 Tit u le lo s m arco s p a ra f  á ci l o rie nta ció n .

• Técnicas • M apa de Puntos de Ver i ficación •

Page 140: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 140/164

142

1 2 . 2 D e s c rib a la fin a l id ad d e lo s m arco s y c ó m o s e r e l ac io n an en t r e e l l o s , s i n o r e s u l t a

o b v io d e l o s p r o p io s t í t u lo s d e lo s m is m o s . [Pr io r id ad 2 ] .

Co n s u l te :3 . 2 Tex to s eq u iv a len t e s y 4 . 1 0 . 2 Te x to s e q u iv a len t e s p a ra m arco s .1 2 . 3 D iv id a lo s b lo q u es la rg o s d e in fo rm ac ió n e n o t r o s g ru p o s m á s m a n e j a b le s c u a n d o

res u l t e n a tu ra l y ap ro p iad o . [Pr io r id ad 2 ] .

Co n s u lt e : 4 . 1 . 4 A g ru p a c ió n es t ruc tu ra l .

1 2 . 4 A s o c ie e x p lí c it am e n te la s e t iq u e t a s co n s u s co n t ro le s . [Pr io r id ad 2 ] .

Co n s u lt e : 4 . 1 1 . 3 Et iq u e t e e x p lí c it am en te l o s co n t ro le s d e l fo rm u la r io .

Pa u t a 1 3 :1 3 . 1 Id en t ifiq u e c la ram en te e l o b je t iv o d e cad a v í nculo. [Prioridad 2] .

Co n s u lt e : 4 . 6 Ví n cu lo s .

1 3 . 2 P ro p o r c io n e m e t a d a t o s p a r a añ ad ir in fo r m ació n s e m á nt ica a l as p á ginas y s i t ios .[Prio rid ad 2 ] .

Co n s u lt e : 3 . 5 N a v e g a c ió n , 4 .1 . 1 M e t a d a t o s y 4 .1 . 3 M e t a d a t o s d e v í n cu lo s y h e r ra -

m ie n t a s d e n a v e g a c ió n .

1 3 . 3 P r o p o r c io n e in fo r m a c ió n s o b r e la m a q u e t a ció n g e n e ra l d e u n s it io ( p o r e j e m p l o , u n

m ap a d e l s it io o u n a t a b la d e co n t e n id o s ) . [P rio r id ad 2 ] .

Co n s u lt e : 3 . 5 N a v e g a c ió n .

1 3 . 4 U t ilic e lo s m e c a n i sm o s d e n a v e g a c ió n d e m a n e r a c o h e r e n t e . [ Prio r id a d 2 ] .

Co n s u lt e : 3 . 5 N a v e g a c ió n .

1 3 . 5 P r o p o r c i o n e b a r r a s d e n a v e g a c ió n p a r a d e s t a c a r y d a r a c c e s o a l m e c a n i s m o d e

n a v e g a c ió n. [Prioridad 3] .

Co n s u lt e : 3 . 5 N a v e g a c ió n .

1 3 . 6 A g r u p e l o s v í n cu lo s r e l ac io n ad o s , i d en t i f i q u e e l g ru p o (p a ra l a s ap l i cac io n es d e

u s u a r io ) y, h a s t a q u e la s a p l ic a c io n e s d e u s u a r io l o h a g a n , p r o p o r c io n e u n m o d o d e

e v ita r e l g rup o . [Pr io r id ad 3 ] .

Co n s u lt e : 4 . 6 Ví n cu lo s .

1 3 . 7 S i s e p r o p o r c io n a n fu n c io n e s d e b ú s q u e d a , fac ilit e d ife re n t e s t ip o s d e b ú s q u e d a s

p a ra lo s d ife re n t e s n iv e l e s d e d es e n v o lv im ien to y p re fe re n c ia s . [P rio r id ad 3 ] .

Co n s u lt e : 3 . 5 N a v e g a c ió n .

1 3 . 8 Co lo q u e la in fo rm ac ió n r e lev an t e a l p r in c ip io d e lo s e n cab e zam ien to s , p á rrafos,

lis ta s , e tc . [Prio rid ad 3 ] .

Co n s u lt e : 3 . 6 Co m p r e n s ió n .

1 3 . 9 P r o p o r c io n e in fo r m a c ió n s o b r e lo s g r u p o s d e d o c u m e n t o s (p o r e je m p lo , d o c u m e n -

t o s q u e a b a r c a n v a r ia s p á ginas) . [Prioridad 3] .

Co n s u lt e : 3 . 1 0 D o c u m e n t o s e m p a q u e t a d o s .

1 3 . 1 0 P ro p o rc io n e u n m o d o d e s a lt a r s o b re lo s A SCII a r t m u lt ilin e a le s . [Pr io r id ad 3 ] .

Consu lte : 3 .2 Te x to s e q u iva le n te s y 4 .7 .3 A SCII a r t .

• Técnicas • M apa de Puntos de Ver i ficación •

Page 141: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 141/164

143

Pa u t a 1 4 :14 .1 Ut ilice e l le ng uaje m á s c la r o y s im p l e q u e r e s u lt e a p r o p ia d o p a r a e l c o n t e n id o d e u n

si t io . [Prio rid ad 1 ] .Co n s u lt e : 3 . 6 C o m p r e n s ió n .

1 4 . 2 S u p le m e n t e e l t e x t o c o n p r e s e n t a cio n e s g rá ficas y au d it ivas cu an d o é sta s fac ilite n la

c o m p r e n s ió n d e la p á gina. [Prioridad 3] .

Co n s u lt e : 3 . 6 C o m p r e n s ió n .

1 4 . 3 Cr e e u n e s t ilo d e p r e s e n t a c ió n q u e m a n t e n g a la c o h e r e n c ia e n t r e t o d a s la s p á g in as .

[Prio rid ad 3 ] .

Co n s u lt e : 3 . 5 N a v e g a c ió n .

• Técnicas • M apa de Puntos de Ver i ficación •

Page 142: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 142/164

144

ÍNDICE DE ELEMENTOS Y ATRIBUTOS HTML

Punto s d e v e r ificac ió n e n e s t a s e c ció n : 1 1 . 2 .

E l e m e n t o s

Versió n l in e a l d e l í n d ic e d e e le m e n t o s H TM L 4 . 0 .

Este í n d ic e lis t a t o d o s l o s e le m e n t o s d e H TM L 4 . 0 . La p rim e r a c o lu m n a d e e s t a t a b la

r e c o g e e l e l e m e n t o d e la e s p e c ific a c ió n H TM L 4 . 0 [H TM L4 0 ]. Lo s e lem en to s q u e e s t á n

d e s a c o n s e j a d o s e n H TM L 4 . 0 v a n s e g u id o s d e u n a s t e r is c o (*). N o a p a r e c e n e n e s t a t a b la

l o s e l e m e n t o s q u e e s tá n o b s o l e to s p a ra H T M L 4 . 0 o n o ex i s t en en u n a e s p ec i f i cac ió n

HTM L (2 .0 , 3 .2 , 4 .0 ).

L a s eg u n d a co lu m n a i n d i ca o t r a s e s p ec i f i cac io n es W3 C d e H T M L q u e i n c lu y en cad a

e l em en to . La t e rce ra co lu m n a i n d ica la fu n c ió n d e l e le m e n t o .

La ú l t i m a c o l u m n a l i s t a l a s s e c c i o n e s d e l p r e s e n t e d o c u m e n t o e n l a s q u e s e t r a t a e l

e l e m e n t o . La e n t r a d a «N / A » s ig n ific a q u e e l e le m e n t o n o s e t r a ta e n e s t e d o c u m e n t o .

N O M BRE D EL D EFIN ID OELEM EN TO TA M BIÉN EN FU N CIÓ N TÉC N IC A

A 2 .0 , 3 .2 Es t ru c tu ra 4 .6 .- Ví n c u l o s ,

4 . 7 . 2 . - Ví ncu los -d inv i s ib l es ,

4 . 7 . 5 . - M a p a s d e i m a g e n d e l la d o d e l c lie n t e .

A BBR Es tru c tu ra 4 .3 .2 .- A cró n im o s y a b r e v i a t u ra s ,

4 .7 .3 . - A sc ii a rt .

A CRO N YM Es tru c tu ra 4 .3 .2 .- A cró n im o s y a b r e v i a t u ra s .

A DDRESS 2 .0 , 3 .2 M e ta d a to s 4 .1 .1 .- M e ta d a to s .

A PPLET* 3 .2 Re e m p la za m ie n to 4 .8 .- A p p le ts y o t ro s o b je to s d e p ro g ra m ac ió n ,

4 . 8 . 1 . - Te x t o s e q u iv a le n t e s p a ra a p p l e t s y

o t r o s o b je t o s p r o g ra m a d o s ,

4 . 8 . 2 . - A p p le t s d i re c t a m e n t e a c c e s ib le s .

A REA 3 .2 Es t ru c tu ra 4 .7 .5 . - M a p a s d e im a g e n d e l la d o d e l c lie n t e .

B 2 .0 , 3 .2 Pre s e n ta c ió n 4 .3 .1 .- Énfasis.

BA SE 2 .0 , 3 .2 Pro c e sa m ie n to N / A

BA SEFO N T* 3 .2 Pre s e n ta c ió n 5 .2 .- Tip o s d e le t ra .

BDO Pro c e sa m ie n to N / A

BIG 3 .2 Pre s e n ta c ió n 5 .2 .- Tip o s d e le t ra .

BLO KQ UO TE 2 .0 , 3 .2 Es t ru c tu ra 3 .1 .- Es t ru c tu ra / p re s e n ta c ió n ,

4 . 3 . 3 . - C it a s , 5 . 4 . - Fo r m a t e o d e l t e x t o .

BO DY 2 .0 , 3 .2 Es t ru c tu ra N / A

BR 2 .0 , 3 .2 Pre s e n ta c ió n N / A

BUTTO N Es tru c tu ra 4 .1 1 .6 .- Bo to n e s g rá f icos,

4 . 1 1 . 8 . - P ro b l e m a s d e c o m p a t ib ilid a d

re t ros p ec t iva p a r a fo rm ula rios .

• Técnicas • Elementos y At r ibutos H TM L •

Page 143: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 143/164

145

CA PTIO N 3 .2 Es t ru c tu ra 4 .1 .4 .- A g ru p a c ió n e s t ruc tu r a l,

4 . 5 . 1 . - Ta b la s d e d a t o s .

CEN TER* 3 .2 Pre se n ta c ió n 5 .6 . - M a q u e ta c ió n , ub icac ió n , c o lo c a c ió n

y a l ine ac ió n .

CITE 2 .0 , 3 .2 Es t ru c tu ra 4 .3 .5 .- Div e rs a s e t iq u e ta s e s t ru c tu ra le s .

CO DE 2 .0 , 3 .2 Es t ru c tu ra 4 .3 .5 .- Div e rs a s e t iq u e ta s e s t ru c tu ra le s .

CO L Es t ru c tu ra 4 .5 .1 .- Ta b la s d e d a to s .

CO LGRO UP Es t ru c tu ra 4 .1 .4 .- A g ru p a c ió n e s t ruc tu r a l,

4 . 5 . 1 . - Ta b la s d e d a t o s .

DD 2 .0 , 3 .2 Es t ru c tu ra 4 .4 .1 .- Us o d e h o ja s d e e s t ilo p a ra ca m b ia r

las v iñ e t a s d e u n a l is t a .

DEL M e ta d a to s 4 .3 .5 .- Div e rs a s e t iq u e ta s e s t ru c tu ra le s .

DFN 3 .2 Es t ru c tu ra 4 .3 .5 .- Div e rs a s e t iq u e ta s e s t ru c tu ra le s .

DIR* 2 .0 , 3 .2 Es t ru c tu ra N / ADIV 3 .2 Es t ru c tu ra 4 .6 .1 .- Ví n c u lo s d e a g ru p a c ió n y d e s v ia c ió n .

DL 2 .0 , 3 .2 Es t ru c tu ra 4 .1 .4 .- A g ru p a c ió n e s t ruc tu r a l,

4 .4 . - Listas ,

4 . 4 . 1 . - U s o d e h o j a s d e e s t ilo p a r a ca m b ia r

las v iñ e t a s d e u n a l is t a .

DT 2 .0 , 3 .2 Es t ru c tu ra 4 .4 .1 .- Us o d e h o ja s d e e s t ilo p a ra ca m b ia r

las v iñ e t a s d e u n a l is t a .

EM 2 .0 , 3 .2 Es t ru c tu ra 4 .3 .1 .- Énfasis.

FIELDSET Es t ru c tu ra 4 .1 .4 .- A g ru p a c ió n e s t ruc tu r a l,

4 . 1 1 . 2 . - G ru p o d e c o n t r o le s d e fo r m u la r io .FO N T* 3 .2 Pre se n ta c ió n 5 .2 . - Tip o s d e le t ra .

FO RM 2 .0 , 3 .2 Es t ru c tu ra 4 .1 1 .- Fo rm u la rio s .

FRA M E Re e m p la za m ie n to 4 .6 .1 .- Ví n c u lo s d e a g ru p a c ió n y d e s v ia c ió n ,

4 . 1 0 . - M a r co s .

FRA M ESET Pre se n ta c ió n 4 .1 0 .- M a rco s ,

4 . 1 0 . 2 . - Te x t o s e q u iv a le n t e s p a r a m a r c o s .

H 1 2 .0 , 3 .2 Es t ru c tu ra 3 .1 .- Es t ru c tu ra / p re s e n ta c ió n ,

4 . 1 . 2 . - En c a b e z a m ie n t o s d e s e c c ió n ,

4 . 1 . 4 . - A g r u p a c ió n e s t ruc tu r a l.

H EA D 2 .0 , 3 .2 Es t ru c tu ra N / AH R 2 .0 , 3 .2 Pre se n ta c ió n 3 .1 . - Es t ru c tu ra / p re s e n ta c ió n ,

4 . 1 . 2 . - En c a b e z a m ie n t o s d e s e c c ió n .

H TM L 2 .0 , 3 .2 Es t ru c tu ra N / A

I 2 .0 , 3 .2 Pre se n ta c ió n 4 .3 .1 .- Énfasis.

IFRA M E Re e m p la za m ie n to 4 .1 0 .- M a rco s .

IM G 2 .0 , 3 .2 Re e m p la za m ie n to 4 .7 .1 .- Te x to s e q u iv a le n te s p a ra im á g e n e s ,

4 . 7 . 6 . - M a p a s d e im a g e n d e l la d o d e l s e r vid o r,

4 . 1 0 . 4 . - H a g a q u e e l a rc h iv o d e o rig e n d e u n

m a r co s e a s ie m p r e u n d o c u m e n t o H TM L ,

5.6 .1 . - S i debe ut i l izar im á g e n e s co m o

e s p a c i a d o r e s .

• Técnicas • Elementos y At r ibutos H TM L •

Page 144: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 144/164

Page 145: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 145/164

147

SM A LL 3 .2 Pre se n ta c ió n 5 .2 . - Tip o s d e le t ra .

SPA N Es t ru c tu ra 4 .6 .1 .- Ví n c u lo s d e a g ru p a c ió n y d e s v ia c ió n .

STRIKE* 3 .2 Pre se n ta c ió n N / A

STRO N G 2 .0 , 3 .2 Es t ru c tu ra 4 .3 .1 .- Énfasis.

STYLE 3 .2 (DTD) Pro ce s a m ie n to 5 .- Té cnicas para CSS.

SUB 3 .2 Pre se n ta c ió n N / A

SUP 3 .2 Pre s e n ta c ió n N / A

TA BLE 3 .2 Es t ru c tu ra 4 .5 Ta b la s .

TBO DY Es t ru c tu ra 4 .1 .4 .- A g ru p a c ió n e s t ruc tu r a l,

4 . 5 . 1 . - Ta b la s d e d a t o s .

TD 3 .2 Es t ru c tu ra 4 .5 .1 .- Ta b la s d e d a to s .

TEXTA REA 2 .0 , 3 .2 Es t ru c tu ra 4 .1 1 .7 .- Té c n ic a s p a r a c o n t r o le s e s p e c í f icos.

TFO O T Es t ru c tu ra 4 .1 .4 .- A g ru p a c ió n e s t ruc tu r a l,

4 . 5 . 1 . - Ta b la s d e d a t o s ,4 . 5 . 4 . - C u e s t io n e s d e c o m p a t i b ilid a d

r e t r o s p e c t iv a p a r a t a b la s .

TH 3 .2 Es t ru c tu ra 4 .5 .1 .- Ta b la s d e d a to s .

TH EA D Es t ru c tu ra 4 .1 .4 .- A g ru p a c ió n e s t ruc tu r a l,

4 . 5 . 1 . - Ta b la s d e d a t o s .

TITLE 2 .0 , 3 .2 M e ta d a to 4 .1 .1 .- M e ta d a to s .

TR 3 .2 Es t ru c tu ra N / A

TT 2 .0 , 3 .2 Pre se n ta c ió n N / A

U* 3 .2 Es t ru c tu ra N / A

UL 2 .0 , 3 .2 Es t ru c tu ra 4 .1 .4 .- A g ru p a c ió n e s t ruc tu r a l,4 .4 . - Listas .

VA R 2 .0 , 3 .2 Es t ru c tu ra 4 .3 .5 .- Div e rs a s e t iq u e ta s e s t ru c tu ra le s .

A t r i b u t o s

Versió n l in e a l d e l í n d ice d e a t r ib u to s d e H TM L 4 . 0 .

Este í n d ice l i s t a a l g u n o s a t r i b u to s d e H T M L 4 . 0 q u e a fec t an a l a acces ib i l i d ad y l o s

e le m e n t o s q u e a p l ic a n . La p rim e r a c o lu m n a d e e s t a t a b la r e c o g e e l a t rib u t o d e l a e s p e c i-

ficació n H TM L 4 . 0 [H TM L4 0 ]. Lo s a t rib u to s y e lem en to s d es a co n s e j ad o s e n H TM L 4 . 0[H TM L 4 0 ] v an s e g u id o s d e u n a s t e r is co (*). Lo s a t r ib u to s y e lem en to s q u e e s t á n o b s o le -

t o s p a ra H TM L 4 . 0 o n o ex is t en e n u n a e s p ec i ficac ió n H TM L (2 . 0 , 3 . 2 , 4 . 0 ) n o ap a rece n

en e s t a t ab la . Lo s a t r ib u to s q u e s e ap lican a l a m ay o r í a d e lo s e le m e n t o s d e H TM L 4 . 0 s e

in d ican d e e s t a m an e ra ; p o r fav o r, co n s u lt e la e s p e c ificac ió n HTML 4 .0 para la re lac ió n

e x a c t a d e e le m e n t o s c o n e s t e a t rib u t o .

La s e g u n d a c o lu m n a in d ic a lo s e le m e n t o s q u e t o m a n e s t e a t rib u t o . La t e r c e r a c o lu m n a

ind ica la fun ció n d e l a t rib u to .

La ú lt im a c o lu m n a lis t a la s s e c c io n e s e n e l p r e s e n t e d o c u m e n t o d o n d e e l a t rib u t o s e

t ra t a . La en t rad a «N / A » s ig n ific a q u e e l e le m e n t o n o s e t r a t a e n e s t e d o c u m e n t o .

• Técnicas • Elementos y At r ibutos H TM L •

Page 146: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 146/164

148

N o m b re d e l A p lic ad o a lo sa trib u to e le m e n to s Fu n c ió n Té c n ic a s

a b b r TD, TH A lte rn a t iv a 4 .5 .1 .- Ta b la s d e d a to s .a cce s ske y A , A REA , In te r fa z d e 4 .1 1 .5 .- A cce so d e sd e e l

BUTTO N, IN PUT, u su a rio te c la d o a lo s fo rm u la rio s .

LABEL, LEGEND ,

TEXTA REA

a lt A PPLET, A REA , A lte rn a t iva 3 .2 .1 .- Re v is ió n d e la s t e c n o l o g í a s ,

IM G, IN PUT 4 .7 .1 .- Te x to s e q u iv a le n te s p a ra

im á g e n e s ,

4 . 7 . 2 . - Ví nculos-d invis ib les ,

4 . 7 . 5 .- M a p a s d e i m a g e n d e l la d o

d e l c lien te ,

4 . 7 . 6 .- M a p a s d e i m a g e n d e l la d o

del servidor ,

4 .8 .1 . - Tex to s eq u iva len te s pa ra

a p p le t s y o t r o s o b j e t o s ,

5 .6 .1 . - Si d e be u t i lizar im á g e n e s

c o m o e s p a c i a d o r e s .

a x is TD, TH Es tru c tu ra 4 .5 .1 .- Ta b la s d e d a to s .

c la s s M a yo rí a d e Es tru c tu ra 4 .6 .1 .- Ví n c u lo s d e a g r u p a c ió n y

e le m e n to s d e sv ia c ió

n .d ir M a yo rí a d e Pro ce sa m ie n to 4 .5 .1 .- Ta b la s d e d a to s .

e l e m e n t o s

fo r LA BEL Es tru c tu ra 4 .1 1 .3 .- Et iq u e te e x p lí c it a m e n t e lo s

con t ro le s de l fo rm ula rio .

h e a d e rs TD, TH Es tru c tu ra 4 .5 .1 .- Ta b la s d e d a to s .

h re fla n g A , LIN K M e ta d a to 3 .7 .- N e g o cia c ió n d e l co n t e n id o .

id M a yo rí a d e Es tru c tu ra 4 .6 .1 .- Ví n c u lo s d e a g r u p a c ió n y

e le m e n to s d e sv ia c ió n .

la b e l O PTIO N A lte rn a t iva 4 . 1 1 . 4 . - A g r u p e l as o p c io n e s d e m e n úla n g M a yo rí a d e M e ta d a to 4 .2 .- In fo rm a c ió n s o b r e e l id io m a .

e l e m e n t o s

lo n g d e sc IM G, FRA M E, A lte rn a t iva 3 .2 .1 .- Re v is ió n d e la s t e c n o l o g í a s ,

IFRA M E 4 .7 .1 .- Te x to s e q u iv a le n te s p a ra

im á g e n e s .

sco p e TD, TH Es tru c tu ra 4 .5 .1 .- Ta b la s d e d a to s .

s ty le M a yo rí a d e Pro ce sa m ie n to 5 .- Té cnicas p ara CSS.

e l e m e n t o s

su m m a ry TA BLE A lte rn a t iv a 4 .5 .1 .- Ta b la s d e d a to s .

• Técnicas • Elementos y At r ibutos H TM L •

Page 147: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 147/164

Page 148: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 148/164

150

AGRADECIMIENTOS

Co - d ir e c t o r e s d e l G ru p o d e Tra b a jo d e la s P a u t a s d e Co n t e n id o e n la W e b :Ch u ck Le to u rn e au , S t a r lin g A cce s s Se rv ices .

G re g g Va n d e r h e id e n , Tra c e Re s e a r c h a n d D e v e lo p m e n t .

Co n t a c t o s c o n e l e q u ip o W 3 C:

Judy Brewer y Daniel Dardai l ler .

N u e s t ro a g ra d e c im ie n t o a la s s ig u ie n t e s p e rs o n a s q u e h a n c o n t r ib u id o c o n s u t ie m p o y

s u s v a lio s o s c o m e n t a rio s a d a r fo r m a a e s t a s p a u t a s :

Ha rvey Bing ha m , Ke v in Care y , Che tz Colw e ll, Ne al Ew e rs , Geo ff Free d , A l Gilm an , Larry

Goldberg , Jon Gunderson , Er ic Hansen , Ph i l l Jenk ins , Leonard Kasday , George Kerscher ,

M ar ja-Riit t a Koivune n , Jos h Krie g e r, Sco t t Lue bk ing , Wi lliam Lou g hb oro ug h , M urray Ma -lo n ey , Ch a r le s M cCa th ie N e v ille , M eg aZ o n e (Liv in g s to n En t e rp r is e s ) , M as a fu m i N ak an e ,

M ark N o v ak , Ch a r l e s O p p e rm an n , M ik e Pac i e l l o , D av id Paw s o n , M ich ae l P i ep e r , G reg

Ro sm aita , Liam Q uinn, Dav e Rag g e t t , T.V. Ram an , Ro be rt Save llis , Jut t a Te viran us , Ste ve

Tyle r, Jaa p va n Lel ie ve ld y Jaso n W hite.

El b o r ra d o r o rig i n a l d e e s t e d o c u m e n t o e s t á b a sa d o e n “The Uni fie d We b Site Acce ss i-

bi lity G uide line s” ([U WSA G ]) co m p ilad o p o r e l Trace R& D d e la U n iv e r s id ad d e Wis co n -

s in . Es e d o c u m e n t o c o n t ie n e u n a l is t a a d i cio n a l d e p e rs o n a s q u e h a n c o n t rib u id o .

• Técnicas • Agradecimientos •

Page 149: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 149/164

151

REFERENCIAS

Para ve r la ú lt im a ve rs ió n d e cu a lq u ie r e s p e c ificac ió n W 3C, p o r favo r, con su l te l a lis ta d eIn fo rm es Té c n ic o s d e W 3 C (h t t p : / / w w w . w 3 . o rg / TR).

[CSS1]“CSS, l ev e l 1 Reco m m en d a t i o n ” . Ed it o re s : B. Bo s y H . W iu m Lie . 1 7 d e d ic iem b re d e

1 9 9 6 , re v is a d a e l 1 1 d e e n e r o d e 1 9 9 9 . Pu e d e e n c o n t ra r la Re c o m e n d a c ió n CSS1 en :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 9 / R E C - C S S 1 - 1 9 9 9 0 1 1 1 .

La ú lt im a ve rs ió n d e C SS 1 e s tá d i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T R/RE C-CSS1 .

[CSS2]

“CSS, le v e l 2 Reco m m en d a t io n ” . Ed ito re s: B. Bo s, H W ium Lie , C. Lille y e I. Jaco bs . 12d e m a yo d e 1 9 9 8 .

P u e d e e n c o n t r a r la Re c o m e n d a c ió n CSS2 e n :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 8 / R E C - C S S 2 - 1 9 9 8 0 5 1 2 .

La ú lt im a ve rs ió n d e C SS 2 e s tá d i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T R/RE C-CSS2 .

[ D O M 1 ]“D o cu m en t O b jec t M o d e l (D O M ). Lev e l 1 Sp ec i fica t io n ” . Ed ito re s: V. Ap p arao , S. Byr-

ne , M . Cham p io n, S. Isaa cs , I. Jaco bs , A. Le Ho rs , G. Nico l, J. Ro bie, R. Suto r, C. W ilso n y

L. W o o d . 1 d e o c t u b re d e 1 9 9 8 . Pu e d e e n c o n t ra r la Re c o m e n d a c ió n D O M n iv e l 1 e n :

h t tp : / / w w w . w 3 . o rg / TR/ 1 9 9 8 / REC- DO M - Le v e l- 1 - 1 9 9 8 1 0 0 1 .

La ú lt im a ve rs ió n d e D O M n iv e l 1 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - D O M - L e v e l - 1 .

[HTML40]“H TM L 4 . 0 Re c o m m e n d a t io n ” . Ed i to res : D . Ragget t , A . Le Hors e I . Jacobs . 17 de d i -

c i e m b r e d e 1 9 9 7 , r e v i s a d a e l 2 4 d e a b r i l d e 1 9 9 8 . P u e d e e n c o n t r a r l a R e c o m e n d a c ió n

H TM L 4 . 0 en :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 8 / R E C - h t m l 4 0 - 1 9 9 8 0 4 2 4 .

La ú lt im a ve rs ió n d e H TM L 4 . 0 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - h t m l 4 0 .

[HTML32]“H T M L 3 . 2 R e c o m m e n d a t i o n ” . E d i t o r : D . R a g g e t t . 1 4 d e e n e r o d e 1 9 9 7 . L a ú lt im a

v e r s ió n d e H TM L 3 . 2 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - h t m l 3 2 .

[MATHML]“M a t h e m a t i c a l M a r k u p L a n g u a g e ” . Ed i to res : P . Ion y R. Miner . 7 de abr i l de 1998 .

P u e d e e n c o n t ra r la Re c o m e n d a c ió n M a t h M L 1 . 0 e n :

• Técnicas • Referencias •

Page 150: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 150/164

152

h t tp : / / w w w . w 3 . o rg / TR/ 1 9 9 8 / REC- M a t h M L- 1 9 9 8 0 4 0 7 .

La ú lt im a ve rs ió n d e M a t h M L 1 . 0 e s tá d i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T RRE C-M ath M L .[PNG]“PNG (Por tab le Ne tw ork Graph ics ) Sp e c ifica t ion ” . Ed ito r: T. Bou te ll. Con trib uy ó a la e d i-

c ió n : T. Lan e . 1 d e o c tu b re d e 1 9 9 6 . La ú lt im a ve rs ió n d e PN G 1 . 0 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - p n g .

[RDF]“Re sou rce De scr ip t ion Fram e w ork (RDF) M od e l and Syn tax Sp e cifica t ion” . Ed ito re s : O .

Las s ila y R. Sw ick . 2 2 d e feb re ro d e 1 9 9 9 . Pu ed e e n co n t ra r la Reco m e n d ac ió n RDF en:

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 9 / R E C - r d f - s y n t a x - 1 9 9 9 0 2 2 2 .

La ú lt im a ve rs ió n d e RD F 1 . 0 e s t á d i sp o n ib le e n :h t t p : / /w w w . w 3 . o rg /T R/RE C-rd f - s y n t ax .

[ R F C 2 0 6 8 ]“HTTP Version 1.1 ” . R. Fie ld ing , J. Ge t tys , J. M o g ul , H. Frystyk Nielse n y T. Bern e rs-Le e .

En e r o d e 1 9 9 7 .

[SMIL]“Synchro n ized M ul t im e d ia In te g ra t ion Lang uag e (SM IL) 1 .0 Sp e cifica t ion ” . Editor: P.

H o s c h k a . 1 5 d e ju n io d e 1 9 9 8 . P u e d e e n c o n t ra r la Re c o m e n d a c ió n SM IL 1 . 0 en :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 8 / R E C - s m i l - 1 9 9 8 0 6 1 5 .

La ú lt im a ve rs ió n d e S M IL 1 . 0 e s tá d i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T R/RE C-s m i l .

[TECHNIQUES]“Techniques fo r Web Conten t Access ib i l i ty Guide l ines 1 .0 ” . Ed ito re s : W. Chisho lm , G .

Va n d e r h e id e n e I. Ja c o b s . Es t e d o c u m e n t o e x p l ic a c o m o i m p le m e n t a r lo s p u n t o s d e v e ri-

ficació n d e fin id o s e n l a s “Pau ta s d e A cce s ib ilid ad a l Co n t en id o e n la We b 1 . 0 ” . La ú lt im a

v e r s ió n d e e s t a s Té cn icas e s tá d i sp o n ib le e n :

h t tp : / /www.w3.org /TR/WAI-WEBCONTENT-TECHS.

[WAI-AUTOOLS]“Au tho r ing To ol A cce ss ib i lity Gu id e line s” . Ed ito re s: J. Tre viranu s, J. Rich ard s, I. Jac o b s y

C. McCath ie Ne vile . El ú lt im o b o r ra d o r d e t ra b a jo d e e s t a s p a u t a s p a ra e l d i se ñ o ac ce s ib le

d e la s h e r ra m ie n t a s d e a u t o r e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / W A I - A U T O O L S / .

[WAI-UA-SUPPORT]Lo s d o c u m e n t o s d e e s ta p á g in a t r a t an s o b re e l s o p o r t e p a ra la s ap licac io n es d e u s u a r io

(inc lu id as las ayud as t é cn icas ) d e a lg u n a s ca rac t e rí s t ica s d e acce s ib ilid ad r e lac io n ad as e n

e s t e d o c u m e n t o . La p á g i n a e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / W A I / R e s o u r c e s / W A I - U A - S u p p o r t .

• Técnicas • Referencias •

Page 151: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 151/164

153

[WAI-USERAGENT]“Use r Age n t A cce ss ib i lity Guid e line s” . Ed ito re s : J. Gun d e rson e I. Jaco bs . E l ú lt im o b o -

rra d o r d e t ra b a jo d e e s t a s p a u t a s p a ra e l d i se ñ o acce s ib le d e ap licac io n e s d e u s u a r io e s tád i sp o n ib le e n :

h t t p : / /w w w . w 3 . o rg /T R/WA I-U SE RA G E N T / .

[ W C A G - I C O N S ]La in fo rm ació n s o b r e l o s i c o n o s d e a d e c u a c ió n a e s te d o c u m e n t o y có m o u t i lizar los

e s tá d i s p o n ib l e en :

h t tp : / / w w w . w 3 . o rg / W A I/ W CA G 1 - Co n fo r m a n c e . h tm l.

[ U W S A G ]“The Unified Web Si te Accessibi l i ty Guidel ines” . Ed ito re s : G . Van d e rhe id e n y W. Chis -

ho lm . Las Pau ta s Unificad as p ara los S it ios W e b fue ron com p ilad as p or e l Trace R & DCen te r d e la U n iv e r s id ad d e Wis co n s in co n l a fin an c i ac ió n d e l Na t ion al Ins t i tu te o n Disa-

b i lity and Re hab ilit a t ion Re se arch (NIDRR) d e l De p ar tam e nto d e Edu cació n d e EE.UU. Este

d o c u m e n t o e stá d i sp o n ib le e n :

h t t p : / / w w w . t r a c e c e n t e r . o r g / d o c s / h t m l _ g u i d e l i n e s / v e r s i o n 8 . h t m .

[XML]“Ex ten s ib le M arku p Lan g u ag e (XM L) 1 . 0 ” . Edi tore s: T. Bray, J. Pao li y C.M . Sp e rbe rg-

M c Q u e e n . 1 0 d e fe b r e r o d e 1 9 9 8 . Pu e d e e n c o n t ra r la Re c o m e n d a c ió n X M L 1 . 0 e n :

h t t p : / / w w w . w 3 . o r g / T R / 1 9 9 8 / R E C - x m l - 1 9 9 8 0 2 1 0 .

La ú lt im a ve rs ió n d e l a s XM L 1 . 0 e s tá d i sp o n ib le e n :

h t t p : / / w w w . w 3 . o r g / T R / R E C - x m l .

• Técnicas • Referencias •

Page 152: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 152/164

Page 153: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 153/164

155

[LYNX]Ly n x (h t t p : / / ly n x .b r o w s e r. o rg / ) e s u n n a v e g a d o r só l o - t ex to .

[LYNXME]Ly n x - m e (h t t p : / / u g w e b . cs . u a lb e r t a .c a / ~ g e r a ld / ly n x - m e . cg i ) e s u n e m u la d o r d e Ly n x .

[LYNXVIEW]Ly n x Vie w e r (h t t p : / / w w w . d e l o rie . c o m / w e b / l yn x v ie w . h t m l ) e s u n e m u la d o r d e L yn x .

[ M A C R O M E D I A ]Flas h O BJECT an d EM BED Tag Sy n t ax (h t t p : / / w w w . m acro m ed ia . co m / s u p p o r t / fla s h / t s /  

d o c u m e n t s / t n 4 1 5 0 . h t m l ) d e M a c r o m e d i a .

[ N C A M ]El s it io d e l N a t io n a l Ce n t e r fo r A c c e s s ib le M e d i a (h t t p : / / w w w . w g b h . o r g / w g b h / p a g e s /  

n cam / ) in c lu y e in fo rm ac ió n s o b r e s u b t it u la d o y d e s c r ip c io n e s d e a u d io e n la W e b ( h t tp : /   / w w w .b o s to n .co m / w g b h / p a g e s / n ca m / cu rr e n tp ro je c t s / ca p t io n e d m o v ie s .h tm l).

[PWWEBSPEAK]The Prod uct iv ity Wo rks ’ p w W e b S p e a k ( h t t p : / / w w w . p r o d w o r k s . c o m / ) .

[SPOOL]Spo ol , J.M. , Sco n long , T. , Schroe d e r, W. , Snyde r, C . y DeA ng e lo , T. (199 7) . We b Site

Usability: “ A D e s ig n e r  ’ s Guide Use r In te r face Enginee r ing  ” . 8 0 0 Tu rn p ik e S t , Su it e 1 0 0 ,

N o r th A n d o v e r, M A 0 1 8 4 5 .

[TECHHEAD]Te c h H e a d ( h t tp : / / t e c h - h e a d . co m / ) p r o p o r c io n a a l g u n a in fo r m a c ió n s o b r e e l í nd ice Fo g

(h t t p : / / t e c h - h e a d . c o m / fo g . h t m ) d e s c r it o e n [ SP O O L].

[TRACE]El Trace Re s ea rch & D ev e lo p e m en t Cen t e r (h t t p : / / t race . w i s c .e d u / ). Co n s u lt e s u s it io

p a ra co n s e g u ir u n a v a r iad a in fo rm ac ió n s o b re la acces ib ilid ad , in c lu y e n d o u n ap p le t d e s -

e n r o lla b le d e Ja v a q u e p u e d e s e r co n g e l a d o p o r e l u s u a r io ( h t tp : / / t ra c e . w is c .e d u / w o r ld /  

 ja v a / Sc ro llTe x t . ja v a ).

[WAI-ER]G ru p o d e Trab a jo s o b re Ev a lu ac ió n y Rep a rac ió n d e W A I (h t t p : / / w w w . w 3 . o rg / W A I/ E R).

[WALSH]W a l s h , N o r m a n . ( 1 9 9 7 ) . “ A G uide to X ML  ”  e n “ XML: Pr inciples , Tools , and Techni-  

q u e s  ” . Dan Conn ol ly , Ed . O ’Rei lly & A s s o c ia t e s , 1 0 1 M o r ris S t , Seb as to p o l , CA 9 5 4 7 2 . p p

9 7 - 1 0 7 .

[WEBREVIEW]w e b r e v i e w . c o m ( h t t p : / / w e b r e v i e w . c o m / w r / p u b / g u i d e s / s t y l e / s t y l e . h t m l ) g rá f icos de

c o m p a t ib ilid a d d e la s h o j a s d e e s t ilo d e lo s n a v e g a d o r e s .

[WINVISION]

Win Vis io n (h t t p : / / w w w . a rt ic t ech . co m / )d e A r t ic .

• Técnicas • Servic ios •

Page 154: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 154/164

156

Page 155: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 155/164

157

T ab la d e Pun to s d e Ve rificac ió n p a ra la s P a u t a s

d e Ac c e s ib ilid a d a l Co n t e n id o e n la W e b 1 . 0

R e s u m e n

Es t e d o c u m e n t o e s u n a p é n d ic e d e l a s «Pau ta s d e A cce s ib ilid ad a l Co n t en id o e n la We b

1 .0 » d e l a W 3 C . P r o p o r c i o n a u n a l i s t a d e t o d o s l o s p u n t o s d e r e v i s ió n d e l a s c i t ad as

p a u t a s , o r g a n i za d o s p o r c o n c e p t o s , co m o u n a lis t a d e r e v is ió n p a ra l o s d es a r ro l l ad o res

d e c o n t e n id o s e n l a W e b . P o r fa v o r c o n s u lt e e l d o c u m e n t o d e P a u t a s p a r a u n a in fo r m a -

c ió n in t ro d ucto r ia , in fo rm ació n s o b r e d o c u m e n t o s r e la c io n a d o s , g lo s a r io d e t é r m in o s y

d e m á s .

Es t a lis t a d eb e s e r u s ad a p a ra r ev is a r la acce s ib ilid ad d e u n a p á g in a o u n s i tio e n la We b .

Pa ra cad a p u n to d e v e r ificac ió n , in d ica q u é p u n to d e v e r ificac ió n h a s id o s a t is fech o , n o loh a s id o o n o e s ap licab le .

Es t a tu s d e l d o c u m e n t o

Es t e d o c u m e n t o e s u n a p é n d ic e d e u n d o c u m e n t o q u e h a s id o re v is a d o p o r lo s M ie m -

b ro s d e l W3 C y o t r a s p a r t e s i n t e re s ad as y h a s i d o s u s c r i t o p o r e l D i rec to r co m o u n a

R e c o m e n d a c ió n W 3 C . Es u n d o c u m e n t o e s ta b le y d e b e s e r u sa d o c o m o m a t e ria l d e re fe -

r e n c ia o c it a d o c o m o r e fe r e n c ia d e s d e o t ro d o c u m e n t o . El r o l d e la W 3 C e n l a e la b o r a c ió n

d e la Re c o m e n d a c ió n es in tens i f icar l a a tenc ió n s o b re l a e s p ec i ficac ió n y p r o m o v e r s u

util izació n g en e ra lizad a . Ello m e jo ra rá la fu n c io n a lid ad y u n iv e r s a lid ad d e la W eb .

U n a l i s t a d e l a s a c t u a l e s R e c o m e n d a c i o n e s d e l a W 3 C y o t r o s d o c u m e n t o s t é cn icos

p u e d e e n c o n t ra rs e e n :

h t t p : / / w w w . w 3 . o r g / T R .

Es t e d o cu m en to h a s i d o r e a lizad o co m o p a r t e d e l a In ic ia t iv a d e A cces ib ilid ad a la We b

(Web Access ib i l i ty In i t i a t ive - WAI) . E l ob je t ivo de l Grupo de Trabajo de las Pau tas de

A cce s ib ilid ad a l Co n t en id o e n la We b e s tá ex p u e s to en la E s c rit u ra Co n s t it u t iv a d e l G ru p o

d e Trabajo .

Ed i to re s d e la ve rs ió n e n i n g lé s :We nd y Chisho lm , Trace R & D Cente r, Unive rs ity o f Wisco ns in - M ad ison .

Greg g Van d e rhe id e n , Trace R & D Cente r, Unive rs ity o f Wiscon s in - M ad ison .

Ian Jaco bs , W 3C

Page 156: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 156/164

158

P o r fa v o r, re m it a c o m e n t a rio s s o b r e e s t e d o c u m e n t o a :

Wai -w cag -ed i t o r@w 3 . o rg .

PRIORIDADES

Cad a p u n to d e v e r ificac ió n t ien e u n n iv e l d e p r io r id ad a s ig n ad o p o r e l Gru p o d e Trab a jo

fu n d a m e n t a d o e n s u im p a c t o s o b r e l a a c ce s ib ilid a d .

[Pr ior idad 1 ]U n d e s a r r o l l a d o r d e c o n t e n i d o s d e p á g i n a s W e b t i e n e q u e s a t i s f a c e r e s t e p u n t o d e

verificació n . D e o t r a fo r m a , u n o o m á s g r u p o s d e u s u a r io s e n c o n t r a rá n im p o s ib le a c c e d e r

a la in fo r m ació n d e l d o cu m en to . Sa t is face r e s t e p u n to d e v e r ificac ió n e s u n r e q u e r im ie n t o

b á s ic o p a r a q u e a lg u n o s g r u p o s p u e d a n u s a r e s to s d o c u m e n t o s W e b .[Pr ior idad 2 ]U n d e s a rr o lla d o r d e c o n t e n id o s d e p á g i n a s W e b d e b e s a t is face r e s t e p u n to d e v e r ifica -

c ió n . D e o t r a fo r m a , u n o o m á s g r u p o s e n c o n t r a rá n d ificu lt ad es en e l acces o a la i n fo rm a-

c ió n d e l d o cu m e n to . Sa t is face r e s t e p u n to d e v e r ificac ió n e lim inará im p o r ta n t e s b a r re r a s

d e a c c e s o a lo s d o c u m e n t o s W e b .

[Pr ior idad 3 ]U n d e s a rr o lla d o r d e c o n t e n id o s d e p á g i n a s W e b p u e d e sa t i s face r e s te p un to d e ve r ifi-

cac ió n . D e o t r a fo r m a , u n o o m á s g r u p o s d e u s u a r io s e n c o n t r a rá n a lgu na d ificu l tad p ara

acce d e r a la in fo rm ac ió n d e l d o cu m en to . Sa t is face r e s t e p u n to d e v e r ificac ió n m e jo r a rá la

a c c e s ib ilid a d d e lo s d o c u m e n t o s W e b .

A lg u n o s p u n to s d e v e r i f i cac ió n t i e n e n e s p e c i f i c a d o u n n i v e l d e p r i o r i d a d q u e p u e d e

var ia r ba jo c ie r tas con d ic ion e s (ind icad as ) .

• Tabla de Veri f icación •

Page 157: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 157/164

Page 158: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 158/164

160

Y SI U TILIZA M A RCO S (« FRA M ES» ) (PRIO RID A D 1 ): SI N O N / A

12 .1 Titu le ca d a m arco p ara faci litar la ide nt i ficació n y n a v e g a c ió n d e lo s

m i s m o s .

Y SI U TILIZA « A PPLETS» Y « SC RIPTS» (PRIO RID A D 1 ): SI N O N / A

6 . 3 A s e g u r e q u e l a s p á g i n a s s i g a n s i e n d o u t i l i z a b l e s c u a n d o s e d e s c o -

n e c t e n o n o s e s o p o rt e n lo s s c rip t s , a p p le t s u o t ro s o b j e t o s d e p r o g ra m a -

c ió n . S i e s t o n o e s p o s i b le , p r o p o r c io n e in fo r m a c ió n e q u iv a le n t e e n u n a

p á g ina a lt e rn a t iva acce s ib l e .

Y SI U TILIZA M U LTIM ED IA (PRIO RID A D 1 ): SI N O N / A

1 . 3 H a s t a q u e l a s a p lic a c io n e s d e u s u a r io p u e d a n l e e r a u t o m á t ic a m e n t e

e l te x t o e q u iv a le n t e d e la b a n d a v is u a l, p r o p o r c io n e u n a d e s c r ip c ió n a u -

d it iva d e l a in fo rm ac ió n im p o rt a n t e d e la b a n d a v is u a l d e u n a p r e s e n t a -

c ió n m u lt im e d ia .

1 . 4 P a r a t o d a p r e s e n t a c ió n m u l t i m e d i a t e m p o d e p e n d i e n t e ( p . e j . u n a

p e lí c u la o a n im a c ió n) s inc ro n ice a l te rn a t ivas e q u iva len tes ( p . e j. sub t í t u -

lo s o d e s c r ip c i o n e s d e l a b a n d a d e v i s u a l) c o n l a p r e s e n t a c ió n .

Y SI TO D O LO D EM Á S FA LLA (PRIO RID A D 1 ): SI N O N / A

1 1 . 4 S i, d e s p u é s d e lo s m a y o r e s e s fu e r z o s , n o p u e d e c r e a r u n a p á g ina

a c c e s ib le , p r o p o r c io n e u n v í n c u l o a u n a p á g i n a a lt e r n a t iv a q u e u s e t e c -

n o l o g í a s W 3 C , s e a a c c e s i b le , t e n g a in fo r m a c ió n e q u iva len te ( o fun c ion a l)y s e a a c t u a liz a d a t a n a m e n u d o c o m o la p á g ina (o r ig ina l) ina cce sible .

• Tabla de Ver i ficación • Pr ior idad 1 •

Page 159: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 159/164

161

PUNTOS DE VERIFICACIÓN PRIORIDAD 2

EN GEN ERA L (PRIO RID A D 2 ): SI N O N / A

2 . 2 A s e g u r e q u e l a s c o m b i n a c i o n e s d e l o s c o l o r e s d e f o n d o y p r i m e r

p l a n o t e n g a n e l s u fic ie n t e c o n t r a s t e p a ra q u e s e a n p e r c ib id a s p o r p e rs o -

n a s c o n d e fic ie n c ia s d e p e r c e p c ió n d e c o lo r o p o r p a n t a l la s e n b la n c o y

ne g ro [Pr io r id ad 2 p a r a la s im á g e n e s . P rio r id a d 3 p a r a lo s t e x t o s ] .

3 . 1 C u a n d o e x i s t a u n m a r c a d o r a p r o p i a d o , u s e m a r c a d o r e s e n v e z d e

im á g en es p a r a t ransm it ir la in fo rm ac ió n .

3 . 2 Cr e e d o c u m e n t o s q u e e s t é n v a l id a d o s p o r la s g ra m á t icas f o rm ales

p u b l i c a d a s .

3 .3 Ut i lice ho jas d e e s t ilo p a ra con t ro la r la m aq ue tac ió n y la p r e s e n t a c ió n .3 .4 Ut ilice un ida d es r e la t ivas e n luga r de abso lu t as a l e s p ec i fica r lo s v a lo -

r e s e n l o s a t rib u t o s d e lo s m a r c a d o r e s d e le n g u a je y e n l o s v a lo r e s d e la s

p r o p ie d a d e s d e la s h o ja s d e e s t ilo .

3 . 5 U t ilic e e le m e n t o s d e e n c a b e z a d o p a ra t r a n s m it ir la e s t r u c t u ra ló g ica

y u t ilí c e l o s d e a c u e r d o c o n la e s p e c i fic a c ió n .

3 . 6 M a r q u e la s lis t a s y lo s p u n t o s d e la s lis t a s c o r re c t a m e n t e .

3 . 7 M a r q u e l a s c i t a s . N o u t i l i c e e l m a r c a d o r d e c i t a s p a r a e f e c t o s d e

fo r m a t o t a le s c o m o s a n g rí a s .

6 . 5 A s e g u r e q u e lo s c o n t e n id o s d in á m ic o s s o n a c c e s ib le s o p r o p o r c io n e

u n a p á g i n a o p r e s e n t a c ió n a l t e rna t iva .

7 . 2 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p e r m it a n c o n t r o la r lo , e v it e e l

p a r p a d e o d e l c o n t e n id o (p o r e je m p l o , c a m b io d e p r e s e n t a c ió n e n p e rio -

d o s r e g u la r e s , a sí c o m o e l e n c e n d id o y a p a g a d o ) .

7 . 4 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p r o p o r c io n e n la p o s i b ilid a d d e

d e t e n e r la s a c t u a liz a c io n e s , n o c r e e p á g i n a s q u e s e a c t u a lic e n a u t o m á t i-

c a m e n t e d e fo r m a p e rió d ica .

7 . 5 H a s t a q u e la s a p lic a c io n e s d e u s u a r io p r o p o r c io n e n la p o s i b ilid a d d e

d e t e n e r e l re d ir e c c io n a m ie n t o a u t o m á t ic o , n o u t ilic e m a r c a d o r e s p a r a

redir igir las p á g i n a s a u t o m á t icam en te . En su lug ar, conf ig u re e l se rv id or

p a ra q u e e je c u t e e s t a p o s i b ilid a d .

1 0 . 1 H a s t a q u e la s a p l ic a c io n e s d e u s u a r io p e r m it a n d e s c o n e c t a r la a p e r-

t u ra d e n u e v a s v e n t a n a s , n o p r o v o q u e a p a r ic io n e s r e p e n t in a s d e n u e v a s

v e n t a n a s y n o c a m b ie la v e n t a n a a c t u a l sin i n fo r m a r a l u s u a r io .

11 .1 Ut ilice t e cno log í a s W 3 C c u a nd o e s té n d is p o n ib le s y s e a n a p r o p i a -

d a s p a r a la t a r e a , y u s e la s ú lt im a s v e r s io n e s c u a n d o s e a n s o p o rt a d a s .

11 .2 Ev i t e ca r ac t e rí s t ic a s d e s a c o n s e ja d a s p o r la s t e c n o lo g í a s W 3 C .

• Tabla de Ver if icación • Pr ior idad 2 •

Page 160: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 160/164

Page 161: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 161/164

163

PUNTOS DE VERIFICACIÓN PRIORIDAD 3

EN GEN ERA L (PRIO RID A D 3 ): SI N O N / A

4 . 2 Es p e c ifiq u e la e x p a n s ió n d e c a d a a b r e v i a t u ra y a c ró n im o e n e l d o c u -

m e n t o c u a n d o a p a r e z c a n p o r p rim e r a v e z .

4 . 3 Id e n t ifiq u e e l id i o m a p r in c ip a l d e u n d o c u m e n t o .

9 . 4 Cr e e u n o r d e n ló g i c o p a r a n a v e g a r c o n e l t a b u la d o r a t ra v é s d e v í n -

c u lo s , c o n t r o le s d e fo r m u la r io y o b je t o s .

9 . 5 P r o p o r c io n e a t a jo s d e t e c la d o p a r a lo s v í n c u lo s m á s i m p o r t a n t e s ( in -

c lu id o s lo s d e l o s m a p a s d e im a g e n d e c l ie n t e ) , lo s c o n t r o le s d e fo r m u la -

r io y l o s g r u p o s d e c o n t r o l e s d e fo r m u la r io .

1 0 . 5 H a s t a q u e la s a p lic a c io n e s d e u s u a r io (in c lu id a s la s a y u d a s t é cn icas )

in t e r p r e t e n c la r a m e n t e lo s v í ncu los co n t iguo s , inc luya ca rac t e r es im p r i-

m i b l e s ( r o d e a d o s d e e s p a c i o s ) , q u e n o s i r v a n c o m o v í n c u l o , e n t r e l o s

v í n c u lo s c o n t ig u o s .

1 1 . 3 P r o p o r c io n e la in fo r m a c ió n d e m o d o q u e lo s u s u a rio s p u e d a n r e c i-

b ir lo s d o c u m e n t o s s e g ú n s u s p r e fe r e n c ia s (p . e j. id i o m a , t ip o d e c o n t e -

n ido , e t c . ).

1 3 . 5 P r o p o r c i o n e b a r r a s d e n a v e g a c ió n p a r a d e s t a c a r y d a r a c c e s o a l

m e c a n is m o d e n a v e g a c ió n .

1 3 . 6 A g ru p e lo s v í ncu los r e lac ionad os , id en t ifiq ue e l g rup o (pa r a la s ap li-

c a c io n e s d e u s u a r io ) y , h a s t a q u e la s a p lic a c io n e s d e u s u a r io l o h a g a n ,

p r o p o r c io n e u n a m a n e r a d e e v it a r e l g ru p o .

1 3 . 7 S i p r o p o r c io n a fu n c io n e s d e b ú s q u e d a , p e r m it a d i fe r e n t e s t ip o s d e

b ú s q u e d a s p a r a d iv e r s o s n i v e le s d e h a b ilid a d y p r e fe r e n c ia s .

13 .8 Loca l ice l a in fo rm ac ió n d e s t a c a d a a l p r in c ip i o d e lo s e n c a b e z a m ie n -

t o s , p á r rafo s, l is tas , e tc .

1 3 . 9 Pr o p o r c io n e in fo r m a c ió n s o b r e la s c o le c c io n e s d e d o c u m e n t o s ( p o r

e je m p lo , lo s d o c u m e n t o s q u e c o m p r e n d a n m ú lt ip le s p á g inas ) .

1 3 . 1 0 P r o p o r c io n e u n m e d io p a r a s a lt a r s o b r e u n A S CII a r t d e v a r ia s lí -n e a s .

1 4 . 2 C o m p le m e n t e e l t e x t o c o n p r e s e n t a c io n e s g rá ficas o a ud it ivas cu and o

e l lo fac i lit e la co m p ren s ió n d e l a p á g i n a .

1 4 . 3 C r e e u n e s t i l o d e p r e s e n t a c ió n q u e s e a c o h e r e n t e p a r a t o d a s l a s

p á g i n a s .

• Tabla de Ver if icación • Pr ior idad 3 •

Page 162: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 162/164

164

Y SI U TILIZA IM Á GEN ES O M A PA S D E IM A GEN (PRIO RID A D 3 ): SI N O N / A

1 . 5 H a s t a q u e l a s a p lic a c io n e s d e u s u a r io i n t e rp r e t e n e l t e x t o e q u iv a le n -

t e p a r a l o s v í n c u l o s d e l o s m a p a s d e i m a g e n d e c l i e n t e , p r o p o r c i o n ev í n c u lo s d e t e x t o r e d u n d a n t e s p a r a c ad a z o n a a c t iv a d e l m a p a d e im a -

g e n d e c lie n t e .

Y SI U TILIZA TA BLA S (PRIO RID A D 3 ): SI N O N / A

5 . 5 P r o p o r c io n e r e sú m e n e s d e la s t a b la s .

5 . 6 P ro p o r c io n e a b r e v ia t u r a s p a r a la s e t iq u e t a s d e e n c a b e z a m ie n t o .

1 0 . 3 H a s t a q u e la s a p lic a c io n e s d e u s u a r io (in c lu id a s la s a y u d a s t é cn icas )

in t e rp r e t e n c o rr e c t am e n t e lo s t e x t o s c o n t ig u o s , p r o p o r c io n e u n t e x t o

l ineal a l ternat ivo (en la p á g i n a a c t u a l o e n a l g u n a o t r a ) p a r a t o d a s   la st a b la s q u e m a q u e t a n t e x t o e n p a ra le lo , e n c o lu m n a s d e p a l ab r as .

Y SI U TILIZA FO RM U LA RIO S (PRIO RID A D 3 ): SI N O N / A

1 0 . 4 H a s t a q u e la s a p l ic a c io n e s d e u s u a r io m a n e je n c o rr e c t a m e n t e lo s

c o n t r o l e s v a c í o s , i n c l u y a c a r a c t e r e s p o r d e f e c t o e n l o s c u a d r o s d e e d i -

c ió n y á r e a s d e t e x t o .

• Tabla de Ver i ficación • Pr ior idad 3 •

Page 163: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 163/164

165

Page 164: Diseño accesible de páginas web

7/31/2019 Diseño accesible de páginas web

http://slidepdf.com/reader/full/diseno-accesible-de-paginas-web 164/164

S ERIE D O C U M EN TO S