SCR38Crear una versión alternativa conforme para una página web diseñada con mejora progresiva

Aplicabilidad

HTML con scripts.

Descripción

El objetivo de esta técnica es ofrecer una versión alternativa conforme para una página web diseñada con mejora progresiva. La técnica muestra cómo lograrlo mediante una técnica de scripts que consiste en:

1. Almacenar la versión inicial, sin mejoras, de la página web, de modo que pueda actuar como «versión alternativa conforme» de cualquier versión mejorada posterior del contenido; y
2. Insertar en todas las versiones mejoradas de la página web un mecanismo que permita al usuario volver a la versión alternativa sin mejoras que se ha almacenado.

Las páginas web diseñadas con mejora progresiva detectan las características del dispositivo de acceso a la web (tamaño, capacidades y software) para permitir que las tecnologías web compatibles se apliquen por capas sobre una base de HTML. El contenido y la funcionalidad básicos de este tipo de página web están disponibles a través de la base HTML para cualquier persona que use un dispositivo de acceso a la web más sencillo, mientras que se crean versiones mejoradas de la página adaptadas a las distintas características de los dispositivos de acceso más avanzados.

La guía actual para las páginas web que se entregan en versiones alternativas dice: «Nota 4: Pueden proporcionarse versiones alternativas para adaptarse a distintos entornos tecnológicos o grupos de usuarios. Cada versión debería ser lo más conforme posible. Una de las versiones tendría que ser plenamente conforme para cumplir el requisito de conformidad 1». En el caso de las páginas web diseñadas con mejora progresiva, esto plantea el problema de qué versión elegir como la versión plenamente conforme, procurando al mismo tiempo que ningún grupo de usuarios se vea perjudicado por esa elección.

Una solución a este reto consiste en elegir como «versión plenamente conforme» la versión sin mejoras de la página web (por ejemplo, el estado del DOM creado únicamente a partir del HTML del código fuente, sin soporte de scripts, estilos ni complementos no HTML), por su amplio alcance, en cuanto a compatibilidad, en todos los dispositivos de acceso a la web que puedan consultar el contenido.

Aunque esta técnica ofrece una forma de basar las declaraciones de conformidad en una única versión, los autores deben seguir trabajando para garantizar que cada versión mejorada de la página web sea lo más conforme posible.

Ejemplos

window.onload = function(event) {
// store pre-enhanced element content
var initialHead = document.head.innerHTML;
var initialBody = document.body.innerHTML;
var initialURL = location.href;
var runOnce = function() {
  // payload you want to run per page call - e.g. analytics code
}
var setup = function() {
  // create conforming alternate version link
  var toggleEnhanced = document.querySelector("#toggle_enhanced");
  if (toggleEnhanced) {
    toggleEnhanced.outerHTML = "";
  }
  var nel = document.createElement("a");
  nel.id = "acctoggle";
  nel.setAttribute("href", "#accessible");
  nel.innerHTML = "WCAG 2 conforming alternate version";
  document.body.insertBefore(nel, document.body.firstChild);
  // payload
  var s = document.createElement("SCRIPT");
  s.setAttribute("src", "sayhello.js");
  document.querySelector("HEAD").appendChild(s);   
}
setup();
runOnce();
window.onpopstate = function(event) {
  if (location.href.indexOf("#accessible") != -1) {
  // revert element contents to pre-enhanced version
  document.head.innerHTML = initialHead;
  document.body.innerHTML = initialBody;
  // create enhanced version link
  var el = document.createElement("a");
  el.id = "toggle_enhanced";
  el.setAttribute("href", "");
  el.innerHTML = "Enhanced version";
  var back = function(e) {
    e.preventDefault();
    window.history.back();
  }
  el.addEventListener("click", back, false);
  document.body.insertBefore(el, document.body.firstChild);
}
if (location.href == initialURL) {
  setup();
}
};
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Evaluera Ltd</title>
    <meta charset="UTF-8">
    <script src="accSwitch.js"></script>
  </head>
  <body> 
    <h1>Test Page</h1>
    <p>Say: <span id="change">Goodbye</span></p>
  </body>
</html>

var change = document.querySelector("#change");
change.innerText = "Hello";

Pruebas

Técnicas relacionadas

• G136: Proporcionar al principio de una página web no conforme un enlace que apunte a una versión alternativa conforme
• C29: Usar un selector de estilos para proporcionar una versión alternativa conforme
• SVR4: Permitir que los usuarios indiquen sus preferencias para la presentación de versiones alternativas conformes

Recursos

• Uso de cookies
• Mejora progresiva y JavaScript no intrusivo