Ajax es accesible y usable?

[elfopower]

Buen dia!

he estado haciendo pruebas con mi sitio para saber si cumple con accesabilidad y usabilidad.

He tratado de hacer que mi sitio se vea "bien" sin tantos efectos y cosas bonitas que nos ofrece AJAX, en una (de las tantas) pruebas que estaba haciendo llegue a este link que es un text-mode web browser, browser en modo texto.

Todo iba de maravilla cuando despues de un tiempo decidi usar un acordeon de pestañas de AJAX, ya no pude navegar en mi sitio (modo texto).

Al no poderse mostrar mi sitio en este browser, deja de ser accesible y usable?

Que tan necesarios puede llegar a ser elementos Ajax en mi sitio? si sin ellos esta bien?

Es AJAX accesible y Usable?

Saludos.

[PatomaS]

Hola

Salvo muy contadas excepciones, AJAX no es necesario nunca.

La base que sustenta AJAX, es justamente lo que lo hace inaccesible y en muchos casos no usable, y es el hecho de sustituir cosas en la página web de forma fluida.

Sobre la accesibilidad y la usabilidad, per se, son cosas que hay que evaluar con cuidado y ver las cosas caso a caso; sin embargo, algunas cosas son básicas y por lo tanto generales, por ejemplo si para poder acceder a un elemento de información se necesita JavaScript, automáticamente se pierde cierto nivel de accesibilidad y dependiendo de la forma en la que la funcionalidad esté aplicada, se pierde usabilidad.

Obviamente, no puedo hablar específicamente de lo que estás diseñando ya que no lo he visto, todo lo que comento es general.

Felicidad

[daPhyre]

Hace tiempo me enfrentaba a un caso similar, pues comencé a usar AJAX para mi página, y la gente que sabía me explicó acerca de lo poco accesible y usable por que usa JS como base, y muchos los desactivan o incluso navegadores no los usan.

Buscando la forma en que fuera lo más accesible posible, encontré esta posible solución:

Forma normal de llamar a AJAX:

Código HTML:

<a href="javascript:loadurl('info1.html')">Página 1</a> 

Forma "Accesible" de llamar a AJAX:

Código HTML:

<a href="pagina1.html'" onclick="loadurl('info1.html'); return false" onkeypress="loadurlkey(e,'info1.html')">Página 1</a> 

De esta última forma, si JS está activado, se carga la página info1.html con AJAX, y en caso contrario, puedes cargar pagina1.html que contenga lo mismo. Si gustas, puedes usar la misma página si tu misión es únicamente mostrar la información como último recurso.

Nota tambien que necesitarás un "loadurkey", que tan solo llamaría al "loadurl" si la tecla presionada es Enter. Espero esto te sirva. Suerte

[PatomaS]

Hola

Bueno debo decir que aunque esa forma tiene sus ventajas, no cubre adecuadamente el problema.

Sintácticamente, el return false es incorrecto, aunque cumple muy bien su función donde lo pones y evita efectos indeseados en algunos navegadores. Además, la versión que usas contempla tanto el ratón como el teclado, cosa que la mayoría olvida.

Desde el punto de vista del creador del sitio, implica mantener actualizadas, al menos, dos copias de las páginas, lo cual puede ser muy razonable para unos pocos casos en un sitio, pero no para un sitio entero.

aquí puedes encontrar una explicación de como usar javascript de forma no obstrusiva de verdad y aquí pueden ver un ejemplo de la apertura de popups de forma accesible. El artículo mencionado estaba antes en otra sección y esa página está en reconstrucción ahora mismo, por lo que puede haber fallos en las direcciones.

En todo caso, la forma de llamar a un script, solo abarca el inicio del problema de la accesibilidad del propio script; puedes llamarlo de la forma correcta, pero aun tienes que hacer el trabajo de tener un contenido accesible o no depender de elementos no accesibles.

Felicidad

[daPhyre]

El artículo que has puesto es en verdad excelente. Noté que lo escribiste tú, por lo que quisiera pedirte permiso de adaptarlo para un AJAX, pues he estado buscando hacerlo lo más accesible desde hace tiempo, y lo mejor que había logrado hasta ahora es el ejemplo que he puesto poco más arriba.

En cuanto a la muestra de información en dos páginas distintas, es una opción que se puede dar, pues bien puede llamar a la misma página, aunque hasta donde tengo entendido, la versión no llamada no tendría incluidos estilos u otros aspectos que podrían verse poco atractivos, aunque la información se despliegue en forma positiva (Para tal caso, en tu ejemplo solo se podrá aplicar todo para una misma página).

Un punto más sobre el que quisiera hacer una observación, es que en el articulo mencionas:

De esta manera se descarga de trabajo el script dado que su funcionamiento está basado en escuchas de eventos, es decir, el script estará pendiente de lo que el usuario haga en la página. Cuanto menor sea el número de aspectos que tenga que vigilar, mejor.

Tengo entendido que al estar "escuchando", esto consume cierta memoria. Es lo mismo que si pongo directo un "onclick" al ancla, ¿Cierto? Dado el caso de que haya muchos links que usan AJAX en una página (Digamos 20), ¿Hay algún aspecto negativo que deba considerar por esto que no he notado?

Muchas gracias por todo, y un excelente artículo el que nos has brindado acerca de los pop-up Accesibles

[PatomaS]

Hola

Respecto al consumo de recursos, en principio es ínfimo, por lo que no hay mayor diferencia entre 20 y 100, la diferencia está en el tiempo de reacción cuando haces clic en el vínculo, a fin de cuentas, de una u otra forma, tiene que recorrer algún tipo de bucle o listado de elementos y es ahí donde se notaría.

Sobre poder usarlo, claro, para eso está. Ya hace años lo publiqué en alguna parte aquí y se comentó el funcionamiento y demás. Como en su momento dije, no es perfecto, pero la verdad es que he hecho poco por mejorarlo desde entonces.

;)

Felicidad

[daPhyre]

Pues aquí lo tengo. En verdad no fue nada complejo, solo modificar unos detalles del código original y agregarle el que ya tenía. Quizá el script sea tres o cuatro veces más grande, pero llamarle con los links es mucho más sencillo y accesible:

Código:

/*Creado a partir del código de Pop-Ups Accesibles por PatomaS*/
document.write("<p>Seleccione un link del menú.</p>");

if (navigator.userAgent.search(/msie/i) > 0) {
	DatosIniciales();
} else {
	document.addEventListener("DOMContentLoaded", DatosIniciales, false);
}

function DatosIniciales() {
	var ListaVinculos = document.links;
	var TotalVinculos = ListaVinculos.length;
	var SubListaVinculos = new Array(); // Subgrupo de los vínculos que nos interesan
	var z = 0;
	for (n = 0; n < TotalVinculos; n++) {
		if ((ListaVinculos[n].attributes.rel != null) && (ListaVinculos[n].attributes.rel.value.search(/ajax/i)>= 0) ) {
			SubListaVinculos[z] = ListaVinculos[n];
			z++;
		}
	}
	AsignarEscuchas(SubListaVinculos);
}

function AsignarEscuchas(x) {
	var SubListaVinculos = x;
	var TotalSubListaVinculos = SubListaVinculos.length;
	for (n = 0; n < TotalSubListaVinculos; n++) {
		if (navigator.userAgent.search(/msie/i) >= 0) {
			SubListaVinculos[n].attachEvent("onclick", Ajax); // Explorer
		} else {
			SubListaVinculos[n].addEventListener("click", Ajax, false); // DOM
		}
	}
}

function Ajax(evento) {
	if (this.getAttribute) {
		var pagina = this.getAttribute('href');
		var propiedades = this.getAttribute('rel').split("-");
		evento.preventDefault();
	} else {
		var uri = evento.srcElement.getAttribute('href');
		var subpagina = evento.srcElement.getAttribute('href').split("/");
		var pagina = subpagina[subpagina.length-1];
		var propiedades = evento.srcElement.getAttribute('rel').split("-");
	}
	if (propiedades[0] == "ajax") {
		loadurl(pagina, propiedades[1]);
		return false;
	}
}

function loadurl(url, id){
	var pagecnx = createXMLHttpRequest();
	pagecnx.onreadystatechange=function()
	{
		if (pagecnx.readyState == 4 && (pagecnx.status==200 || window.location.href.indexOf("http")==-1))
		document.getElementById(id).innerHTML=pagecnx.responseText;
	}
	pagecnx.open('GET', url, true)
	pagecnx.send(null)
}

function createXMLHttpRequest() {
	var xmlHttp=null;
	if (window.ActiveXObject) 
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	else if (window.XMLHttpRequest) 
			xmlHttp = new XMLHttpRequest();
	return xmlHttp;
}

Para usar los links se hace de esta forma:

Código HTML:

<a href="pagina1" rel="ajax-main">Página 1</a> 

Donde "main" sea el id del DIV donde se cargará el contenido.

Opiniones y sugerencias para mejorarlo, son bien recibidas

[ARCHANG3L]

Usa jQuery, es mucho mas rapido y facil de usar.