Accesibilidad web: Principio de mejora progresiva

¿Qué es el principio de mejora progresiva?

La “mejora progresiva” se basa en el principio básico de diseño y programación que hemos visto, la separación del contenido, la presentación y el comportamiento, que implementamos con javascript no intrusivo.
Y asimismo se basa en la mejora de la funcionalidad de nuestra página de forma progresiva.
Es decir, implementaremos las páginas como si no fueran a soportar javascript y sobre ellas añadiremos una capa de programación javascript no intrusivo como mejora.

Principio de mejora progresiva

¿En qué circunstancias o contextos no se van a ejecutar los scripts de mis páginas?

  • Si el navegador no soporta los scripts o su soporte es antiguo, por ejemplo en navegadores antiguos, especialmente de dispositivos móviles o navegadores para televisión, o en navegadores solo texto;
  • Si se ha desactivado por el usuario o, por ejemplo, por el firewall corporativo por motivos de seguridad;
  • Si se ha implementado de forma propietaria y no con funciones DOM, como vimos, y por tanto el navegador no comprende el script.

En todos estos casos, gracias a la “mejora progresiva”, se podrá acceder al contenido o navegar por la página, y un navegador con soporte para el script, además, proporcionará la funcionalidad añadida.

Aplicar el principio de “mejora progresiva” tiene diversos beneficios

  • Mejora la accesibilidad de la página porque el contenido y la funcionalidad estarán disponibles para todos los usuarios, independientemente del agente de usuario o producto de apoyo que utilicen, o de que tengan o no habilitado javascript.
  • Mejora el posicionamiento, como abordaremos con más detalle en lecciones posteriores, puesto que, como hemos adelantado, el contenido siempre está disponible para los buscadores y evita problemas de indexación.
  • Genera un código más limpio, más claro, más ligero y más semántico.

 

¿Cómo se hace?

Ejemplo 1
Para ejemplificar cómo se hace vamos a seguir el ejemplo disponible en la técnica SCR24.
Imaginemos un enlace “Ayuda” que abre un pop-up con una página de ayuda.

Esta sería la manera incorrecta de hacerlo:

<a href=“javascript:;“ onclick=“window.open(‘ayuda.html’)”>
Ayuda
</a>

Los visitantes que utilicen un agente de usuario que no soporte javascript o pop-ups (por ejemplo determinados dispositivos móviles) o que tengan javascript deshabilitado, o algunos robots de buscadores, no podrán acceder a la página de ayuda.

La forma correcta es implementar el enlace para que no dependa de javascript:

<script type="text/javascript" src="popup.js"></script>
…
<a href=“ayuda.html" id="newwin">Ayuda</a>

Tenemos un enlace estándar que puede ser seguido por todos los usuarios (incluidos los robots de los buscadores) en todos los contextos de uso.
Después, como mejora, añadimos una capa de comportamiento, de programación javascript no intrusivo, incluido en el fichero “popup.js”:

window.onload = addHandlers;
function addHandlers(){
var objAnchor = document.getElementById('newwin');
if (objAnchor) {
objAnchor.firstChild.data = objAnchor.firstChild.data + ' (se abre en ventana nueva)';
objAnchor.onclick = function(event){return launchWindow(this, event);}
objAnchor.onkeypress = function(event){return launchWindow(this, event);} }
}
function launchWindow(objAnchor, objEvent){
var iKeyCode, bSuccess=false;
if (objEvent && objEvent.type == 'keypress'){
if (objEvent.keyCode)
iKeyCode = objEvent.keyCode;
else if (objEvent.which)
iKeyCode = objEvent.which;
if (iKeyCode != 13 && iKeyCode != 32)
return true;
}
bSuccess = window.open(objAnchor.href);

if (!bSuccess)

return true;

return false;
}

Mediante javascript no intrusivo y funciones DOM asociamos al enlace los eventos “onclick” y “onkeypress” que abrirán el pop-up, controlando en este último caso qué tecla se ha pulsado.
Además se modifica el texto del enlace para que, en caso de que se soporte javascript, avise de que se abre en ventana nueva. En este caso el texto del enlace será “Ayuda (se abre en ventana nueva)”.

Si se soporta javascript, al pulsar el enlace se abrirá el pop-up anulando la navegación directa a la página, que era la acción por defecto del enlace. Esta anulación se consigue devolviendo “false” con la línea de código “return false”.

En caso contrario, si no se soporta el pop-up o el script, se mantendría la acción por defecto del enlace, abrir la página de ayuda en la misma ventana, gracias a que se devuelve “true” con la línea de código “return true”.

Ejemplo 2

Imaginemos que tenemos un acordeón de preguntas y respuestas que pueden plegarse y desplegarse. Una manera de implementarlo mediante el principio de mejora progresiva sería:

  • Las respuestas estarían en el código de la página.
  • Por defecto estarían todas las preguntas y respuestas desplegadas, y de este modo accesibles para los usuarios que no pueden ejecutar el script y para los robots de los buscadores;
  • Incluimos una capa de mejora, de programación javascript, que si javascript es soportado pliega las respuestas y asocia a cada pregunta, mediante javascript no intrusivo y funciones DOM, los eventos correspondientes para poderlas plegar y desplegar.

Es importante resaltar en este punto que existen diversas maneras de ocultar contenido en una página, y que habrá que seleccionar la correcta para que los usuarios que acceden con un lector de pantalla estén en las mismas condiciones que el resto de los usuarios:

  • Oculto visualmente y para los lectores de pantalla:
    o display:none
    o visibility:hidden
  • Oculto visualmente pero disponible para los lectores de pantalla:
    o text-indent:-999
    o técnica “clip”

“Mejora progresiva” versus “Degradación elegante”

Por último comentar que existe un enfoque alternativo a la “mejora progresiva”: la “degradación elegante”.
Pueden parecer similares o que logran el mismo objetivo, pero tienen diferencias importantes.
La degradación elegante parte de implementar la solución teniendo en cuenta a los usuarios con los dispositivos y navegadores más modernos, y pensar después hacia atrás, en dar una solución alternativa a los usuarios con navegadores más antiguos, para ofrecerles una funcionalidad mínima y suficiente.

El planteamiento del principio de mejora progresiva, como hemos visto, es hacerlo al revés. Se parte del nivel básico de experiencia para todos los navegadores y dispositivos y, sobre él, se construye la funcionalidad más avanzada, que estará disponible automáticamente para los agentes de usuario y dispositivos más modernos.

Ejemplo de aplicación del principio de degradación elegante

En el ejemplo 1 de aplicación del principio de mejora progresiva hemos visto cómo se implementa un enlace que abre un pop-up y que funciona aunque no se soporte o no se tenga activo javascript.

¿Cómo solucionaría el enfoque de “degradación elegante” nuestro enlace para abrir un pop-up en aquellas circunstancias en las cuales no se soporta javascript?

Partiendo de la opción avanzada, propondría una alternativa para el resto de usuarios, por ejemplo con la etiqueta <noscript>.

<a href=“javascript:;“ onclick=“window.open(‘ayuda.html’)”>Ayuda</a>
<noscript>
<p>Su navegador no admite javascript o lo tiene deshabilitado.

Acceda desde aquí a la <a href=“ayuda.html”>página de Ayuda</a></p>
</noscript>

En el caso de que no se soporte javascript, o esté deshabilitado, se mostraría el contenido incluido dentro la etiqueta <noscript>.
La solución que implementamos siguiendo el modelo de “mejora progresiva”, cuesta inicialmente más tiempo, pero:

  • es más elegante, tiene un código más limpio y más ligero
  • es más fácil de mantener
  • proporciona mejor experiencia de usuario
  • no presupone, por ejemplo, que la única razón por la cual no se ejecuta un script es que no se soporta o está deshabilitado.
    • Puede ser que el navegador no entienda parte del código, en cuyo caso no nos serviría la solución propuesta con <noscript> y sí la propuesta en la de “mejora progresiva”. <noscript> tampoco nos serviría si se soporta javascript y se tiene habilitado pero no se soportan los pop-ups.
      Por tanto se recomienda siempre el enfoque de “mejora progresiva”.

 

Podéis ampliar información en el artículo “Graceful degredation versus progressive enhancement” del W3C.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *