PDF de programación - Páginas WEB Accesibles - Guideline 6. Ensure that pages featuring new technologies transform gracefully

Páginas WEB Accesibles

Guideline 6. Ensure that pages featuring new technologies

transform gracefully

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Programación

Universidad Complutense de Madrid

2 de diciembre de 2005

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Checkpoints

6.1 Organize documents so they may be read without style sheets.

For example, when an HTML document is rendered without
associated style sheets, it must still be possible to read the
document. [Prioridad 1]

6.2 Ensure that equivalents for dynamic content are updated

when the dynamic content changes. [Prioridad 1]

6.3 Ensure that pages are usable when scripts, applets, or other
programmatic objects are turned off or not supported. If this
is not possible, provide equivalent information on an
alternative accessible page. [Prioridad 1]

6.4 For scripts and applets, ensure that event handlers are input

device-independent. [Prioridad 2]

6.5 Ensure that dynamic content is accessible or provide an

alternative presentation or page. [Prioridad 2]

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Scripts accesibles

Las páginas deben funcionar con programas (JavaScript,
applets y flash desactivados). Se pueden incorporar, pero
deben tener alternativa.

Applets y Flash deben ser accesibles en sí, pero según las
normas WAI deben tener alternativa. No siempre se puede
conseguir: juegos, applets que hacen cosas....

Casi siempre se puede conseguir una alternativa a los
JavaScript.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

¿Para qué se usan los JavaScript?

Para hacer las páginas más dinámicas:

Abrir nuevas ventanas (con o sin avisar al usuario).

Comprobar si los datos de un formulario son correctos.

Menús desplegables.

Ventanas con pestañas.
Chorradas inimaginables.......

Precargado de imágenes:
Why not cache all the images and pages a user will require to
move through your site when they first arrive?

< script >

d o c u m e n t . write ( ’ < img src = " img / b t n _ b u s c a r . gif " alt = " ’ +

b t n _ c o n s u l t a r + ’" name = " C o n s u l t a r " > ’)

</ script >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Abrir nuevas ventanas I

Es de mala educación: inundamos el escritorio del usuario con
nuevas ventanas.............

Hay que avisar.

Dar la oportunidad al usuario de usar su navegador: en los
navegadores modernos el usuario puede abrir la ventana en la
misma del enlace, en una pestaña nueva o en otra ventana.

La web del día

Vamos a descubir las mentiras en la web del ministerio de defensa:
http://www.mde.es/Home

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Abrir nuevas ventanas II

< script type = " text / j a v a s c r i p t " >
f u n c t i o n a b r e V e n t a n a ( url , alto , ancho ) {

var x = (800 - ancho )/2;
var y = (600 - alto )/2;
if ( screen ) {

y = ( screen . a v a i l H e i g h t - alto )/2;
x = ( screen . a v a i l W i d t h - ancho )/2;

}
win1 = window . open ( url , " EVA " ,

" m e n u b a r = no , t o o l b a r = no " +
" , height = " + alto + " , width = " + ancho +
" , top = " + y + " , left = " + x +
" , s c r o l l b a r s = yes , resize = yes , r e s i z a b l e = yes " );

}
</ script >

<a href = " j a v a s c r i p t : a b r e V e n t a n a ( ’ http :// www . s o l d a d o s . com ’ , 600 ,800) " > malo </ a >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Abrir nuevas ventanas III

< script type = " text / j a v a s c r i p t " >
f u n c t i o n a b r e V e n t a n a B u e n o (a , alto , ancho ) {

win1 = window . open ( a . href , " EVA " ,

" m e n u b a r = yes , t o o l b a r = yes , s c r o l l b a r s = yes " +
" , resize = yes , r e s i z a b l e = yes " +
" , height = " + alto + " , width = " + ancho );

}
</ script >

<a class = " e x t e r n o " href = " http :// www . w3 . org "

o n C l i c k = " j a v a s c r i p t : a b r e V e n t a n a B u e n o ( this ,600 ,800); return f alse " >

bueno < img src = " n u e v a V e n t a n a . png " alt = " ( nueva venana ) " >

</ a >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Más barbaridades, mandando un formulario

< form method = post action = b u s c a d o r . jsp name = " b u s c a d o r " >

< input type = hidden value = ’4144 ’# name = ’ id_nodo ’ >
< input type = hidden value = user name = flag >
< input type = hidden value = T name = c h k O p B u s q u e d a >
< input type = hidden value = todo name = c m b T i p o >
< input type = hidden name = c m b N o d o s >
< td height = " 16 " align = " right " valign = " top " >

<a href = " j a v a s c r i p t : d o c u m e n t . b u s c a d o r . submit () "

o n M o u s e O u t = " M M _ s w a p I m g R e s t o r e () "
o n M o u s e O v e r = " M M _ s w a p I m a g e ( ’ Consultar ’ , ’ ’ , ’ img / b t n _ b u s c a r _ o . gif ’ ,1) " >
< script >

d o c u m e n t . write ( ’ < img src = " img / b t n _ b u s c a r . gif " alt = " ’ +

</ script >

</ a >& nbsp ;& nbsp ; < input type = " text " name = " Texto " size = " 22 " > </ td >

b t n _ c o n s u l t a r + ’" name = " C o n s u l t a r " ’+
’ border = " 0 "

align = " a b s b o t t o m " > ’)

</ form >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Cambiar el fondo: hover

< style type = " text / css " >
button {

background - image : url ( " buscar . png " );
border : 2 px outset #44 DCFF ;

}
button : hover {

background - image : url ( " b u s c a r _ o . png " );

}
button : active {

border : 2 px inset #44 DCFF ;

}
</ style >

< form method = " post " action = " b u s c a d o r . jsp " name = " b u s c a d o r " >

< input type = " hidden " value = " 4144 " name = " i d _ n o d o " >
< input type = " hidden " value = " user " name = " flag " >
< input type = " hidden " value = " T " name = " c h k O p B u s q u e d a " >
< input type = " hidden " value = " todo " name = " c m b T i p o " >
< input type = " hidden " name = " c m b N o d o s " >
< button type = " submit " > Buscar </ button >
< input type = " text " name = " Texto " size = " 22 " >

</ form >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Scripts accesibles I

Menús desplegables:

Menu NO accesible
http://www.opencube.com/index.html

Menu accesible
http://www.sidedev.net/jsoop/dropdowns/

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Scripts accesibles II

Ventanas con pestañas

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Scripts accesibles III

Ventanas con pestañas

JavaScript puro – tabs.1.php
Se carga todo el código, programación JavaScript.

Programación en servidor puro (PHP,...) – tabs.2.php
Se carga sólo lo necesario, cada click es llamada servidor.

Mezclando los dos. – tabs.3.php

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Scripts accesibles IV

< div id = " tab " class = " t a b b i n g " >

< div id = " p r i m e r o " class = " tab activo " >

< h1 o n C l i c k = " j a v a s c r i p t : p o n A c t i v o ( this ) " >

N o t i c i a s </ a > </ h1 >
< div class = " w r a p p e r " >

<p > N o t i c i a s </ p >

</ div >

</ div >

< div id = " s e g u n d o " class = " tab n o A c t i v o "

>

< h1 o n C l i c k = " j a v a s c r i p t : p o n A c t i v o ( this ) " > Agenda </ a > </ h1 >
< div class = " w r a p p e r " >

<p > Agenda </ p >

</ div >

</ div >
. . . . . . .
. . . . . . .

</ div >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Scripts accesibles V

< style type = " text / css " >

. . . . . . . . . . . .
div . activo div . w r a p p e r {
v i s i b i l i t y : v i s i b l e ;

}

div . n o A c t i v o div . w r a p p e r {

v i s i b i l i t y : hidden ;

}

. . . . . . . . . . . .
</ style >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Scripts accesibles VI

f u n c t i o n d e s a c t i v a T o d o s () {

tab = d o c u m e n t . g e t E l e m e n t B y I d ( " tab " );
divs = tab . g e t E l e m e n t s B y T a g N a m e ( " div " );
for ( i =0; i < divs . length ; i ++) {

clase = divs [ i ]. c l a s s N a m e . t o L o w e r C a s e ();
if ( clase . search ( " (^| ) activo " ) >0) {

clase = clase . r e p l a c e ( " activo " ," n o A c t i v o " );
divs [ i ]. c l a s s N a m e = clase ;

}

}

}
f u n c t i o n p o n A c t i v o ( e l e m e n t o ) {

d e s a c t i v a T o d o s ();
div = e l e m e n t o . p a r e n t N o d e ;
div . c l a s s N a m e = " tab activo " ;

}

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Scripts accesibles VII

<? php
define ( tab , " tab " );
define ( primero , " p r i m e r o " );
define ( segundo , " s e g u n d o " );
define ( tercero , " t e r c e r o " );
define ( cuarto , " cuarto " );
define (