Accordion accesible?

[lanas]

Hola:

Estoy planteandome usar este tipo de menú que no sé si conoceis (http://www.stickmanlabs.com/accordion/) pero la página web para la que lo usaría debería ser accesible y cumplir las últimas leyes al respecto en España. La verdad es que soporta todos los navegadores pero no tiene navegación mediante teclado con lo que no sé si servirá...
Opiniones??

Desde ya Gracias¡ Salud¡

[frijolerou]

Lo primero que debieras preguntarte es que pasaría si accedes sin JavaScript a una página que tenga ese "acordeón".

Luego tendrías que preguntarte si puedes navegar por medio del teclado (por ejemplo la tecla TAB o alguna tecla de acceso directo) entre los ítems principales del "acordeón". En este caso esos ítems están hechos como encabezados H1. Una opción sería que a esos H1 le dieras un orden de tabulación con el atributo TABINDEX, y ver si recorrerlos mediante la tecla TAB funciona en todos los browsers.

[LoBo2024]

El accordion ese es ajax, por lo tanto no resultaría accesible y encima si lo usas para el menú principal pues sería aún menos accesible ya que si alguien no tiene javascript no podría ver nada de la página a menos q controles q tenga javascript y hagas otro menú a cambio de ese.

Y por cierto si usa h1's decirte q solo está permitido un h1 por página ;)

[frijolerou]

El accordion ese es ajax, por lo tanto no resultaría accesible y encima si lo usas para el menú principal pues sería aún menos accesible ya que si alguien no tiene javascript no podría ver nada de la página a menos q controles q tenga javascript y hagas otro menú a cambio de ese.

El acordeón que dió lanas como ejemplo no utiliza Ajax, y es perfectamente visualizable sin JavaScript (partece que no lo analizaste muy bien :P).

[lanas]

Gracias por las respuestas¡

No te enfades señor Lobo pero creo que frijolerou tiene razón, el menú está programado en javascript y cuando lo deshabilitas los menús aparecen desplegados al completo con lo que serían accesibles.

Lo que no tengo claro Frijolerou es lo del sistema de navegación por TABINDEX, vamos entiendo lo que me quieres decir pero he estado en páginas que se suponen 100% accesibles y que no disponen de este tipo de navegación por ejemplo www.xunta.es que la página oficial del gobierno de Galicia en España, no disponen de navegación por teclado. Hasta que punto es obligatorio para que la página se considere accesible??

Salud¡

[frijolerou]

Te pongo un ejemplo:

Imaginate que en tu página tienes una lista de 10 links que se dirigen a una determinada página. Imagínate que por X motivos no puedo usar el mouse. ¿Qué hago?. Puedo recorrer la lista de links mediante la tecla TAB y presionar ENTER cuando haya seleccionado el que me interesa; esto lo puedo hacer porque el elemento <A> tiene el atributo TABINDEX por defecto (aunque no lo hayas definido).

Ahora volvamos al menú. Imagínate que ahora tampoco puedo utilizar el mouse. ¿Como hago click en cada uno de los items que despliegan un contenido?. Los elementos <h1> no tienen un TABINDEX por defecto (a diferencia de los links o los controles de formulario), por lo tanto la tecla TAB no me sirve... y ¿ahora que hago?.

Nota: no estoy seguro si aplicar TABINDEX en los elementos H1 pueda funcionar en todos los browsers. Por lo menos en Opera no me funcionó cuando intenté hacerlo sobre una imagen.

[demiurgo_daemon]

Hola,

con respecto a los <h1>, no creo que haya problema: al parecer este código se vale de que marques las cosas con las clases "accordion_toggle" para los títulos del menú y "accordion_content" para los contenidos. Entonces, simplemente en lugar de que tus "accordion_toggle" sean <h1> los haces <h2> y listo (de hecho está en la documentación )

Por cierto, usar tabindex dudo que funcione porque en realidad, como no es una liga ni nada con interactividad (botón, entrada, etc.) no puede tener foco. En otras palabras, es sólo texto. Además, el código usa el evento onclick. Tal vez serviría usar anclas internas, pero es cosa de ver el código con mayor detenimiento. Otra cosa que tal vez sí se pueda hacer es definir los atributos id y accesskey para cada "accordion_toggle", a ver qué resulta.

saludos

[lanas]

Hola:

Gracias a todos otra vez, probaré todo le que me proponeis y os cuento.
Demiurgo no entendí lo último que me dices:

"Otra cosa que tal vez sí se pueda hacer es definir los atributos id y accesskey para cada "accordion_toggle", a ver qué resulta."

Para qué quieres que defina los atributos id y acceskey para cada "accordion_togle??

Salud¡

[frijolerou]

El atributo ACCESSKEY te permite asignar una tecla de acceso rápido a los elementos A o LINK. De esa manera puedes ejecutar el hipervínculo mediante una combinación de teclas, que puede variar de browser en browser. En Firefox me parece que era CONTROL + ALT + TECLA (donde TECLA es el valor que asignaste a ACCESSKEY).

No creo que se pueda utilizar en cualquier elemento. Habría que probar.

[LoBo2024]

Ah tranquilos no me enfado ni na xP y lo del h1 ya pense q la solución era esa, basicamente lo comentaba para que lo tuviera en cuenta, no q fuese en plan uaaa es un problema sin solución jeje

Pero sinceramente si es ajax :) lo unico q está bien solucionado para que si quitas javascript funcione ese es un punto grande a su favor ;)

[frijolerou]

jajaja no te preocupes, todo esto es sin ánimo de armar poléica XD

Pero sinceramente si es ajax :) lo unico q está bien solucionado para que si quitas javascript funcione ese es un punto grande a su favor ;)

La pregunta del millón... ¿qué es para ti Ajax?

[LoBo2024]

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML) ale ahi queda contestado xP

Solo tienes q ver q usa el prototype.js y creo q el script.aculo.us q son herramientas de ajax, incluso por ahi hay comentarios sobre lightwindow q es una aplicación en ajax para mostrar imagenes o webs :)

¿Qué más quieres saber para ver que es ajax? :P

[frijolerou]

No respondiste mi pregunta, sólo me señalaste el significado del acrónimo... por lo que quisiera insistir... ¿qué es para ti Ajax?, ¿cómo distingues cuando hay ajax y cuando no? (tarea para la casa).

:sonrisa:

No respondiste mi pregunta, sólo me señalaste el significado del acrónimo... por lo que quisiera insistir... ¿qué es para ti Ajax?, ¿cómo distingues cuando hay ajax y cuando no? (tarea para la casa).

:sonrisa:

pd: te recomiendo darte una vuelta por el artículo "AJAX un nuevo acercamiento a Aplicaciones Web". Incluye una traducción de un completo artículo sobre Ajax de Jesse James Garret.

[LoBo2024]

Ajax es basicamente eso que te he dicho osea javascript junto con xml y eso es lo q tiene accordion si no quieres verlo me la pela xD pero es lo q hay... xP y pa ti q es ajax? q sean ventanitas volando? XD o efectos paranoicos? XD

ale ya tienes tareas para casa tu tb

[frijolerou]

El concepto de Ajax es básicamente:

1º Se ejecuta una determinada acción en el cliente (por ejemplo presionar el botón de un formulario).

2º Mediante JavaScript el cliente realiza una petición al servidor (generalmente por medio del objeto XMLHttpRequest) en segundo plano.

3º El servidor recibe la petición y procesa la información recibida mediante ASP, PHP o el lenguaje de lado del servidor correspondiente (por ejemplo, extraer información d ela base de datos).

4º El servidor envía de vuelta al cliente la información solicitada (comúnmente en formato XML, pero puede ser texto plano, html, JSON, etc.).

5º El cliente recibe la información enviada por el servidor y ejecuta una determinada acción (ocultar contenido, ostrar un nuevo contenido, etc.).

Y todo lo anterior sin necesidad de que el usuario deba salir de la página en la que está. Es algo similar a lo que se hace en Flash para conectarse con PHP mediante el objeto LoadVars.

¿Protoype es Ajax?, la verdad no lo he estudiado profundamente para saber si en algún momento utiliza ajax o no.

¿Lightbox o sus clones son Ajax?... algunos sí, algunos no, depende si para obtener el contenido necesitan hacer una petición al servidor.

¿Accordion es Ajax?... no, todas las acciones son ejecutadas en el cliente mediante JavaScript (DOM, ocultar, mostrar, mover); pero en ningún momento requiere hacer una petición al servidor. ¿Se le puede meter Ajax?, por supuesto, es cosa de experimentar.

Saludos :sonrisa:

[LoBo2024]

A ver.... a ver... desde cuando ajax es para hacer petición con el servidor? 0_o ajax basicamente es para usar javascript + xml no tiene porque devolver datos del servidor vamos...

Osea si yo hago algo con javascript y tal que solicita datos pero no del servidor sino de una página estatica y otra q si lo pilla de servidor una es ajax y la otra no? 0_o pos va a ser q no.... basicamente ajax es el implemento del xml que llevan algunos navegadores y que se ha usado bastante tarde, no es ningun standard y el dia en que los navegadores decidan no ponerlo todo se irá a la mierda :)

Y prototype se definen a ellos mismo como aplicación en ajax y solo es para efecto s y tal, no sale nada de servidor... como explicas eso entonces? :P

[Shade]

Entonces de donde vas a hacer la peticion Lobo? de... la tostadora? si es de una pagina estatica.. esta tambien debe estar en el servidor no crees?

Ajax hace una peticion al servidor (que devuelve en forma de xml) y esta se incorpora a nuestro DOM con lo que podemos cambiar el contenido sin refrescar.

P.D.: Perdon por la ironia de la tostadora pero fue de lo primero que me acorde.

[LoBo2024]

Si si me he explicado como el culo queria decir que cualquier cosa que use el xmlhttprequest es ajax y cuando decia servidor me referia a q no hacia falta q fueran los datos de un php (osea de pagina dinamica) que de una estatica tb sigue siendo ajax :) a eso me referia ;)

[frijolerou]

Interesantísima discusión (por lo menos para mi). Perdón lana por desviar el tema del post

cuando decia servidor me referia a q no hacia falta q fueran los datos de un php (osea de pagina dinamica) que de una estatica tb sigue siendo ajax :) a eso me referia ;)

Que bueno que aclaraste eso, porque yo tampoco me había explicado muy bien. Cuando mencioné que Ajax se usaba para hacer peticiones al servidor no me refería exclusivamente a archivos dinámicos. Por ejemplo, si utilizo el objeto XMLHTTPRequest para cargar el contenido de un documento estático (como un TXT) dentro de un div, también estoy haciendo una petición al servidor ¿se entiende?. A eso me refería, lo de PHP fue sólo a modo de ejemplo

ajax basicamente es para usar javascript + xml no tiene porque devolver datos del servidor vamos...

Ajax no es sólo JavaScript + XML. El acrónimo del nombre se creó a partir de Asynchronous Javascript + XML porque resultaba más sencillo que hacerlo a partir de Asynchronous JavaScript+CSS+DOM+XMLHttpRequest. Y eso no lo digo yo, lo dice el propi Jesse James Garret, presidente y fundador de Adaptative Path, quienes crearon el concepto de Ajax:

Iniciado por Jesse James Garret

Q. Why did you feel the need to give this a name?

A. I needed something shorter than “Asynchronous JavaScript+CSS+DOM+XMLHttpRequest” to use when discussing this approach with clients.

No sé si habrás leído un artículo que mencioné algunos comentarios atrás, traducción de un artículo en inglés de J.J. Garret. Yo creo que no haya mejor fuente que esa

Finalmente, Protoype sí hace peticiones HTTP al servidor mediante el objeto XMLHttpRequest. no sé para qué funcionalidades específicamente, pero es cosa de buscar en el código.

[ssthormess]

Creo que nos desviamos, déja al Lobo quieto. Que va de medio loco. :)

Lararaaii.. sigan con el Acordeón que cumple las normas de Accesibilidad Web.

[frijolerou]

Coincido con uno de los comentarios anteriores en que los elementos que ocultan y muestran los contenidos debieran ser links (direccionados a un ancla). Esto permitiría insertarlos en el flujo de tabulación y podrían ser activados usando el teclado (TAB para acceder a ellos y ENTER para activar el efecto).

[moregum]

Hola, casualmente me encuentro desarrollando una web en la que estoy usando este accordion basado en scriptaculous, se pueden emplear ACCESSKEYs mediante la sintaxis:
<h1 class="accordion_toggle">
<a accesskey="[Tecla acceso]">[Opcion menu]</a>
</h1>

Para activarlas en Firefox, por cierto, es SHIFT+Alt+[Tecla acceso]