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 Computación

Universidad Complutense de Madrid

2 de diciembre de 2008

Luis Fernando Llana Díaz

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

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

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?
... y es que los navegadores no tienen caché

< 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 >

1
2
3
4

Luis Fernando Llana Díaz

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.

Luis Fernando Llana Díaz

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 " ,

" menubar = no , toolbar = 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 >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

1

Luis Fernando Llana Díaz

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 " ,

" menubar = yes , toolbar = 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 = " externo " href = " http :// www . w3 . org "

onClick = " 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 false " >

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

</a >

1
2
3
4
5
6
7
8

1
2
3
4

Luis Fernando Llana Díaz

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 = chkOpBusqueda >
< input type = hidden value = todo name = cmbTipo >
< input type = hidden name = cmbNodos >
< 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 ( ’ C o n s u l t a r ’ , ’ ’ , ’ 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 >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Luis Fernando Llana Díaz

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 = " 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 = " cmbTipo " >
< 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 >

http://antares.sip.ucm.es/~luis/
accesibilidadWEB08-09/ejemplos/scripts/buscar.html

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Scripts accesibles I

Menús desplegables:

Menu NO accesible (sólo con JavaScript)
http://www.mat.ucm.es
Menu usando únicamente CSS (no funciona en el navegador
del monpolio)
http://meyerweb.com/eric/css/edge/menus/demo.html
Menu accesible usando cosas raras de IE. http:
//www.howtocreate.co.uk/tutorials/testMenu.html

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Scripts accesibles II

Ventanas con pestañas

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Ventanas con pestañas I

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

Páginas WEB Accesibles

Ventanas con pestañas, sólo JavaScript I

< div id = " tab " class = " tabbing " >

< div id = " primero " class = " tab activo " >

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

Noticias </ a > </ h1 >
< div class = " wrapper " >

<p > Noticias </ p >

</ div >

</ div >

< div id = " segundo " class = " tab n o A c t i v o "

>

< h1 onClick = " 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 = " wrapper " >

<p > Agenda </ p >

</ div >

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

</ div >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Ventanas con pestañas, sólo JavaScript II

< style type = " text / css " >

. . . . . . . . . . . .
div . activo div . wrapper {
v i s i b i l i t y : visible ;

}

div . n o A c t i v o div . wrapper {

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

}

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

1
2
3
4
5
6
7
8
9
10

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Ventanas con pestañas, sólo JavaScript III

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 . replace ( " 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 " ;

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Ventanas con pestañas, sólo HTML (con PHP) + CSS I

<? php
define ( tab , " tab " );
define ( primero , " primero " );
define ( segundo , " segundo " );
define ( tercero , " tercero " );
define ( cuarto , " cuarto " );
define ( quinto , " quinto " );

if ( ! isset ( $_GET [ tab ]) ) {

$tab = " primero " ;

} else {

$tab = $_GET [ tab ];

}

1
2
3
4
5
6
7
8
9
10
11
12
13

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Ventanas con pestañas, sólo HTML (con PHP) + CSS II

f u n c t i o n clase ( $id ) {

global $tab ;
$clase = " class =\" tab " ;
if ( $tab == $id ) {

$clase .= " activo " ;

} else {

$clase .= " n o A c t i v o " ;

}
$clase .= " \" " ;
$clase .= " id =\" " . $id . " \" " ;
return $clase ;

}
? >

1
2
3
4
5
6
7
8
9
10
11
12
13

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Ventanas con pestañas, sólo HTML (con PHP) + CSS III

< div id = " tab " class = " tabbing " >

< div <?= clase ( primero )? > >

<h1 > < a href = " tabs .2. php ? tab = primero " > Noticias </ a > </ h1 >

<? php if ( $tab == primero ) { ? >
< div class = " wrapper " >

<p > Noticias </ p >

</ div >

<? php }? >

</ div >
< div <?= clase ( " segundo " )? > >

<h1 > < a href = " t