Foros del web, para los que viven de bits

kahlito · 13-may-2006, 12:07

Hola, estoy haciendo varias pruebas con formularios y algo de javascript y a la vez me gustaria hacerlo accesible.

Por ejemplo aquí cambio o llamo a otras hojas de estilo:

Código HTML:

<ul class="estilos"> 
<li class="estilos"><a href="principal.html" onclick="setActiveStyleSheet('estilo_hoja');return false">Uno</a></li> 
<li class="estilos"><a href="principal.html" onclick="setActiveStyleSheet('estilo2');return false">Dos</a></li> 
<li class="estilos"><a href="principal.html" onclick="setActiveStyleSheet('estilo3');return false">Tres</a></li> 
</ul>

Y aquí un ejemplo de formulario:

Código HTML:

<form id="formulario" action="contacto_final.php" method="post" onsubmit="return ValidarContacto(this)" onkeypress="" >
<p><label for="nombre">Nombre:</label></p>
<div><input type="text" name="nombre" id="nombre" size="20" maxlength="50" accesskey="n" />
</div>
<p><label for="ciudad">Ciudad:</label></p>
<div><input type="text" name="ciudad" id="ciudad" size="20" maxlength="100" accesskey="c" />
</div>
<p><label for="email">Email:</label></p>
<div><input type="text" name="email" id="email" size="20" maxlength="50" accesskey="e" />
</div>
<p><label for="asunto">Asunto:</label></p>
<div><input type="text" name="asunto" id="asunto" size="20&ccedil;" maxlength="30" accesskey="a" />
</div>
<p><label for="mensaje">Mensaje:</label></p>
<div><textarea name="mensaje" id="mensaje" cols="40" rows="5" accesskey="m"></textarea>
</div>
<div><input type="submit" value="  Enviar  "/><input type="reset" value="  Borrar  "  />
</div>
</form>

Y el problema viene a la hora de hacerlos accesibles donde me advierten que me hace falta onkeypress por ejemplo:

Se usan manejadores de eventos que dependen de un dispositivo sin manejadores redundantes (onclick sin onkeypress, por ejemplo).
Los eventos deben poder activarse con cualquier dispositivo porque hay usuarios que no pueden, por ejemplo, usar un ratón. Por tanto se deben especificar manejadores de evento independientes del tipo de dispositivo o definir eventos redundantes.

WCAG 6.4: Para los scripts y applets, asegúrese de que la ejecución de los manejadores de evento sea independiente del tipo de dispositivo. (Este punto incluye el 9.3). (Prioridad 2)

¿Como podria meter onkeypress tanto en uno como en otro?

La verdad es que no entiendo el manejo correcto o función exacta que hace "onkeypress".

alvlin · 13-may-2006, 13:55

Hay que recordar que las pautas de accesibilidad son eso, pautas. onkeypress es como onclick, solo que se activa cuando se presiona una tecla cualquiera sobre el elemento.

En este caso, para que onkeypress sea útil, tenés que definirle un atajo de teclado al enlace (con el atributo acceskey, mirá http://www.discapnet.es/web_accesibl...link-accesskey)

Si no lo hacés, usar onkeypress sería inútil, porque no tendrías nunca el foco en el enlace (bueno, según el navegador en realidad).

Saludos.

kahlito · 14-may-2006, 13:28

Hola alvlin.

El problema es que no se exactamente como introducir onkeypress, por ejemplo en el primer caso si pongo algo así (introduciendo onkeypress) ya no me hace la advertencia y ahora si seria más accesible:

Código HTML:

<ul class="estilos"> 
<li><a href="principal.html" onclick="setActiveStyleSheet('estilo_hoja');return false" onkeypress="...">Uno</a></li>
<li ><a href="principal.html" onclick="setActiveStyleSheet('estilo2');return false" onkeypress="...">Dos</a></li>
<li><a href="principal.html" onclick="setActiveStyleSheet('estilo3');return false" onkeypress="...">Tres</a></li>
</ul>

Sin embargo no se exactamente como funciona con javascript onkeypress, y claro si pongo esto no se si sería correcto:

Código HTML:

onkeypress="setActiveStyleSheet('estilo3');return false"

En el segundo caso menos todavia

¿Algun enlace o ejemplo para ver como funcionaria?

Gracias de antemano

alvlin · 14-may-2006, 19:53

pos todos los eventos, independientemente de cuándo se activen, funcionan igual, son llamadores de funciones. Creo que

onkeypress="setActiveStyleSheet('estilo3');return false"

de hecho es la forma correcta.

Además no olvides usar acceskey si realmente te interesa, ya que de otra forma sería inútil......

Saludos.

kahlito · 16-may-2006, 13:53

Hola de nuevo alvlin

He vuelto a probar y en el segundo ejemplo (del formulario) es suficiente meterle accekey por ejemplo al botón enviar

Sin embargo en el primero he probado por ejemplo metiendo un accekey

Código HTML:

<li class="estilos"><a href="final3b.html" onkeypress="setActiveStyleSheet('estilo_hoja');return false" onclick="setActiveStyleSheet('estilo2');return false" accesskey="c" title="Cargar hoja de estilo dos">CSS</a></li>

y en Hera me advierte: "Se utilizan eventos dependientes del dispositivo."

Se usan manejadores de eventos que dependen de un dispositivo con manejadores redundantes (onclick con onkeypress, por ejemplo).
Los eventos deben poder activarse con cualquier dispositivo porque hay usuarios que no pueden, por ejemplo, usar un ratón. Por tanto se deben especificar manejadores de evento independientes del tipo de dispositivo o definir eventos redundantes.

Bueno voy a seguir probando, al menos he logrado comprender algo más de onkeypress

Gracias alvlin

alvlin · 16-may-2006, 18:53

acordate que son PAUTAS, y que no hay programas que puedan hacerlo todo automáticamente....... a veces aparecen mensajes que no corresponden.....

Leé bien:

Cita:

Se usan manejadores de eventos que dependen de un dispositivo

Acá tenés una lista de los eventos disponibles:
http://www.w3.org/TR/html4/interact/....html#h-18.2.3

Como podrás notar, los eventos independientes del dispositivo no son aplicables o no son necesarios para lo que querés hacer.

Además, en el segundo párrafo dice:

Cita:

se deben especificar manejadores de evento independientes del tipo de dispositivo o definir eventos redundantes.

Y definir eventos redundantes es lo que estás haciendo.

No hay que olvidar que la accesibilidad se basa en que si algo es necesario para la correcta navegación en el sitio, ese algo esté disponible para todos. En tu caso, te aparece un mensaje automático que no se aplica totalmente, y además lo que estás intentando hacer no es un elemento indispensable de navegación que haga que algunos usuarios no puedan navegar en tu sitio.
Vamos, que si nos obligaran a hacer que TODO esté disponible tan estrictamente, la accesibilidad sería imposible: si un usuario es ciego tendrías que describir cada pixel del diseño de tu sitio.
Y probablemente termines describiendo cosas que sean superficiales e irrelevantes.

Pensemos en los usuarios impedidos que uno piensa más frecuentemente: ciegos o personas imposibilitadas de usar las manos (por eso no pueden usar ratón o teclado)
En el primer caso no creo que haya interés en el cambio de diseño visual, y en el segundo caso pos que no hay eventos que puedan activar un enlace sin ratón o teclado.

En resumen, creo que lo que ya hiciste es suficiente para considerar que pasaste esa prueba.

Saludos.

kahlito · 17-may-2006, 02:57

Ok alvlin, entendido, excelente explicación

Muchas gracias, me ha servido de mucho

daPhyre · 16-jun-2008, 22:27

Se que el tema es antiguo, pero he llegado aquí por que tengo el mismo tema exactamente, y quería saber si en este tiempo alguien ha logrado solucionar este problema, pues quiero que si el usuario no tiene JavaScript se ejecute el link, pero que el JS se ejecute tanto con el enter como con el mouse, y esto para muchos links, por lo que no debo usar tantos AccessKeys. ¿Alguien puede ayudarme?

13-may-2006, 12:07	#1 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Evento onkeypress accesible Hola, estoy haciendo varias pruebas con formularios y algo de javascript y a la vez me gustaria hacerlo accesible. Por ejemplo aquí cambio o llamo a otras hojas de estilo: Código HTML: <ul class="estilos"> <li class="estilos"><a href="principal.html" onclick="setActiveStyleSheet('estilo_hoja');return false">Uno</a></li> <li class="estilos"><a href="principal.html" onclick="setActiveStyleSheet('estilo2');return false">Dos</a></li> <li class="estilos"><a href="principal.html" onclick="setActiveStyleSheet('estilo3');return false">Tres</a></li> </ul> Y aquí un ejemplo de formulario: Código HTML: <form id="formulario" action="contacto_final.php" method="post" onsubmit="return ValidarContacto(this)" onkeypress="" > <p><label for="nombre">Nombre:</label></p> <div><input type="text" name="nombre" id="nombre" size="20" maxlength="50" accesskey="n" /> </div> <p><label for="ciudad">Ciudad:</label></p> <div><input type="text" name="ciudad" id="ciudad" size="20" maxlength="100" accesskey="c" /> </div> <p><label for="email">Email:</label></p> <div><input type="text" name="email" id="email" size="20" maxlength="50" accesskey="e" /> </div> <p><label for="asunto">Asunto:</label></p> <div><input type="text" name="asunto" id="asunto" size="20ç" maxlength="30" accesskey="a" /> </div> <p><label for="mensaje">Mensaje:</label></p> <div><textarea name="mensaje" id="mensaje" cols="40" rows="5" accesskey="m"></textarea> </div> <div><input type="submit" value=" Enviar "/><input type="reset" value=" Borrar " /> </div> </form> Y el problema viene a la hora de hacerlos accesibles donde me advierten que me hace falta onkeypress por ejemplo: Se usan manejadores de eventos que dependen de un dispositivo sin manejadores redundantes (onclick sin onkeypress, por ejemplo). Los eventos deben poder activarse con cualquier dispositivo porque hay usuarios que no pueden, por ejemplo, usar un ratón. Por tanto se deben especificar manejadores de evento independientes del tipo de dispositivo o definir eventos redundantes. WCAG 6.4: Para los scripts y applets, asegúrese de que la ejecución de los manejadores de evento sea independiente del tipo de dispositivo. (Este punto incluye el 9.3). (Prioridad 2) ¿Como podria meter onkeypress tanto en uno como en otro? La verdad es que no entiendo el manejo correcto o función exacta que hace "onkeypress". __________________ Portafolio Diseño Web Freelance

13-may-2006, 13:55	#2 (permalink)
alvlin Colaborador Fecha de Ingreso: julio-2005 Ubicación: Rodeado de indios... por suerte son amigos :) Mensajes: 3.663	Hay que recordar que las pautas de accesibilidad son eso, pautas. onkeypress es como onclick, solo que se activa cuando se presiona una tecla cualquiera sobre el elemento. En este caso, para que onkeypress sea útil, tenés que definirle un atajo de teclado al enlace (con el atributo acceskey, mirá http://www.discapnet.es/web_accesibl...link-accesskey) Si no lo hacés, usar onkeypress sería inútil, porque no tendrías nunca el foco en el enlace (bueno, según el navegador en realidad). Saludos. __________________ Mi Blog "Por ahora casi nadie me trata de subnormal sin que a los 4 segundos se arrepienta. Porque yo a mis semejantes quiero a todos por igual: en cubitos de 40x40"

14-may-2006, 13:28	#3 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Hola alvlin. El problema es que no se exactamente como introducir onkeypress, por ejemplo en el primer caso si pongo algo así (introduciendo onkeypress) ya no me hace la advertencia y ahora si seria más accesible: Código HTML: <ul class="estilos"> <li><a href="principal.html" onclick="setActiveStyleSheet('estilo_hoja');return false" onkeypress="...">Uno</a></li> <li ><a href="principal.html" onclick="setActiveStyleSheet('estilo2');return false" onkeypress="...">Dos</a></li> <li><a href="principal.html" onclick="setActiveStyleSheet('estilo3');return false" onkeypress="...">Tres</a></li> </ul> Sin embargo no se exactamente como funciona con javascript onkeypress, y claro si pongo esto no se si sería correcto: Código HTML: onkeypress="setActiveStyleSheet('estilo3');return false" En el segundo caso menos todavia ¿Algun enlace o ejemplo para ver como funcionaria? Gracias de antemano __________________ Portafolio Diseño Web Freelance

14-may-2006, 19:53	#4 (permalink)
alvlin Colaborador Fecha de Ingreso: julio-2005 Ubicación: Rodeado de indios... por suerte son amigos :) Mensajes: 3.663	pos todos los eventos, independientemente de cuándo se activen, funcionan igual, son llamadores de funciones. Creo que onkeypress="setActiveStyleSheet('estilo3');return false" de hecho es la forma correcta. Además no olvides usar acceskey si realmente te interesa, ya que de otra forma sería inútil...... Saludos. __________________ Mi Blog "Por ahora casi nadie me trata de subnormal sin que a los 4 segundos se arrepienta. Porque yo a mis semejantes quiero a todos por igual: en cubitos de 40x40"

16-may-2006, 13:53	#5 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Hola de nuevo alvlin He vuelto a probar y en el segundo ejemplo (del formulario) es suficiente meterle accekey por ejemplo al botón enviar Sin embargo en el primero he probado por ejemplo metiendo un accekey Código HTML: <li class="estilos"><a href="final3b.html" onkeypress="setActiveStyleSheet('estilo_hoja');return false" onclick="setActiveStyleSheet('estilo2');return false" accesskey="c" title="Cargar hoja de estilo dos">CSS</a></li> y en Hera me advierte: "Se utilizan eventos dependientes del dispositivo." Se usan manejadores de eventos que dependen de un dispositivo con manejadores redundantes (onclick con onkeypress, por ejemplo). Los eventos deben poder activarse con cualquier dispositivo porque hay usuarios que no pueden, por ejemplo, usar un ratón. Por tanto se deben especificar manejadores de evento independientes del tipo de dispositivo o definir eventos redundantes. Bueno voy a seguir probando, al menos he logrado comprender algo más de onkeypress Gracias alvlin __________________ Portafolio Diseño Web Freelance

16-may-2006, 18:53	#6 (permalink)
alvlin Colaborador Fecha de Ingreso: julio-2005 Ubicación: Rodeado de indios... por suerte son amigos :) Mensajes: 3.663	acordate que son PAUTAS, y que no hay programas que puedan hacerlo todo automáticamente....... a veces aparecen mensajes que no corresponden..... Leé bien: Cita: Se usan manejadores de eventos que dependen de un dispositivo Acá tenés una lista de los eventos disponibles: http://www.w3.org/TR/html4/interact/....html#h-18.2.3 Como podrás notar, los eventos independientes del dispositivo no son aplicables o no son necesarios para lo que querés hacer. Además, en el segundo párrafo dice: Cita: se deben especificar manejadores de evento independientes del tipo de dispositivo o definir eventos redundantes. Y definir eventos redundantes es lo que estás haciendo. No hay que olvidar que la accesibilidad se basa en que si algo es necesario para la correcta navegación en el sitio, ese algo esté disponible para todos. En tu caso, te aparece un mensaje automático que no se aplica totalmente, y además lo que estás intentando hacer no es un elemento indispensable de navegación que haga que algunos usuarios no puedan navegar en tu sitio. Vamos, que si nos obligaran a hacer que TODO esté disponible tan estrictamente, la accesibilidad sería imposible: si un usuario es ciego tendrías que describir cada pixel del diseño de tu sitio. Y probablemente termines describiendo cosas que sean superficiales e irrelevantes. Pensemos en los usuarios impedidos que uno piensa más frecuentemente: ciegos o personas imposibilitadas de usar las manos (por eso no pueden usar ratón o teclado) En el primer caso no creo que haya interés en el cambio de diseño visual, y en el segundo caso pos que no hay eventos que puedan activar un enlace sin ratón o teclado. En resumen, creo que lo que ya hiciste es suficiente para considerar que pasaste esa prueba. Saludos. __________________ Mi Blog "Por ahora casi nadie me trata de subnormal sin que a los 4 segundos se arrepienta. Porque yo a mis semejantes quiero a todos por igual: en cubitos de 40x40"

17-may-2006, 02:57	#7 (permalink)
kahlito Colaborador Fecha de Ingreso: marzo-2003 Ubicación: En el Estrecho y el mar Mensajes: 2.554	Ok alvlin, entendido, excelente explicación Muchas gracias, me ha servido de mucho __________________ Portafolio Diseño Web Freelance

16-jun-2008, 22:27	#8 (permalink)
daPhyre Fecha de Ingreso: marzo-2008 Ubicación: Idle. Return on 18/08 Mensajes: 734	Respuesta: Evento onkeypress accesible Se que el tema es antiguo, pero he llegado aquí por que tengo el mismo tema exactamente, y quería saber si en este tiempo alguien ha logrado solucionar este problema, pues quiero que si el usuario no tiene JavaScript se ejecute el link, pero que el JS se ejecute tanto con el enter como con el mouse, y esto para muchos links, por lo que no debo usar tantos AccessKeys. ¿Alguien puede ayudarme? __________________ <signs> daPhyre </signs> ¿Por qué dejar se usar tablas?

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado