C29Usar un selector de estilos para proporcionar una versión alternativa conforme

Aplicabilidad

CSS usado con scripts del lado del cliente o del lado del servidor.

Descripción

Cuando algún aspecto de la presentación por defecto de una página web no cumple un criterio de conformidad, es posible satisfacer ese requisito mediante la cláusula de «versión alternativa» de los requisitos de conformidad (requisito de conformidad 1). Para algunos requisitos, invocar un selector de estilos mediante un enlace o un control de la página, capaz de ajustar la presentación de modo que todos los aspectos de la página sean conformes en el nivel declarado, permite a los autores evitar tener que proporcionar varias versiones de la misma información.

El objetivo de esta técnica es mostrar cómo puede usarse CSS en combinación con scripts para proporcionar versiones alternativas conformes de una página web. En esta técnica, el autor ofrece vistas alternativas del contenido mediante controles que ajustan el CSS que se emplea para controlar la presentación visual del contenido. Los controles incluidos en la página web permiten a los usuarios seleccionar o modificar la presentación de una forma que cumple el criterio de conformidad en el nivel declarado. Esto hace posible que los usuarios seleccionen distintas presentaciones visuales en situaciones como las siguientes:

• el usuario puede no ser capaz de ajustar la configuración del navegador o del sistema operativo, por falta de familiaridad o de permisos
• el texto se proporciona de una manera que no responde a la configuración del navegador o del sistema operativo (por ejemplo, texto dentro de una imagen)
• la presentación por defecto del contenido no incluye un contraste suficiente para algunos usuarios

Para que esta técnica se use con éxito, deben cumplirse tres condiciones.

1. El enlace o control de la página original debe cumplir por sí mismo el criterio de conformidad que se pretende satisfacer mediante la presentación alternativa. Por ejemplo, si se usa un selector de estilos para ofrecer tamaños de letra mayores y el control se presenta con una letra pequeña, es posible que los usuarios no puedan activar el control ni ver la presentación alternativa.
2. La nueva página debe contener toda la misma información y funcionalidad que la página original.
3. La nueva página debe cumplir todos los criterios de conformidad del nivel de conformidad deseado. Por ejemplo, no puede usarse una hoja de estilos alternativa para cumplir un requisito si provoca que otro requisito distinto deje de cumplirse.

Al usar un selector de estilos, es importante tener en cuenta los siguientes retos y limitaciones:

• El número y el tipo de cambios que un usuario puede realizar se limitan al alcance de los controles proporcionados por el autor de la página web. Deberían ofrecerse diversas presentaciones y preferencias para atender las necesidades de un público lo más amplio posible. No obstante, también es importante que los autores consideren las interacciones entre preferencias y la complejidad que puede suponer para los usuarios ofrecerles un gran número de opciones.
• Mantener la preferencia del usuario de una página a la siguiente puede lograrse guardando una cookie en el equipo del usuario (consulte la sección de Recursos para más información), incluyendo sus preferencias en un perfil guardado en el servidor web mediante un parámetro de la cadena de consulta, o por otros medios.
• El método técnico empleado para implementar un selector de estilos puede depender de la compatibilidad y disponibilidad de una o varias tecnologías en el equipo del usuario (por ejemplo, muchas soluciones del lado del cliente requieren compatibilidad tanto con JavaScript como con CSS). Salvo que se dependa de estas tecnologías para la conformidad, los autores deberían considerar el uso de tecnologías del lado del servidor cuando no pueda garantizarse la compatibilidad y disponibilidad de las tecnologías del lado del cliente. Como alternativa, el uso de técnicas que garanticen que el contenido se transforma correctamente cuando una o varias de las tecnologías empleadas no están disponibles puede ser una forma eficaz de mejorar las páginas cuando no se depende de la compatibilidad con esas tecnologías para la conformidad.

Ejemplos

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link href="main.css" rel="stylesheet">
    <link id="currentCSS" href="defaultColors.css" rel="stylesheet">
  </head>
  <body>
    <div id="colorswitch">
    <p>Change colors:</p>
    <ul class="inline">
      <li>
        <a href="#" onClick="javascript:changeColors('altColors1.css');return false;" 
	id="altColors1">dark blue on white</a>
      </li>
      <li>
        <a href="#" onClick="javascript:changeColors('altColors2.css');return false;" 
	id="altColors2">yellow on black</a>
      </li>
      <li>
        <a href="#" onClick="javascript:changeColors('altColors3.css');return false;" 
	id="altColors3">black on pale yellow</a>
      </li>
      <li>
        <a href="#" onClick="javascript:changeColors('altColors4.css');return false;" 
	id="altColors4">black on white</a>
      </li>
      <li>
        <a href="#" onClick="javascript:changeColors('defaultColors.css');return false;" 
	id="default">Reset to default</a>
      </li>
    </ul>
  </div>
  <div id="mainbody">
    <h1>Conference report</h1>
      <p>Last week's conference presented an impressive line-up of speakers...</p>
    </div>
  </body>
</html>

body{ font-family: Geneva, Arial, Helvetica, sans-serif; margin: 2em; }
#mainbody { 
  padding: 1em; 
}
#colorswitch {
  float: right; 
  width: 12em; 
  border: 1px #000066 solid; 
  padding:0 1em 1em 1em; margin:0;
}
#colorswitch p { 
  padding-top:.5em; 
  font-weight:bold;
}

body, p { 
  color:#000000; 
  background-color:#FFFFFF; 
}
h1, h2, h3 {
  color:#990000; 
  background-color:#FFFFFF;
}

body, h1, h2, h3, p, a { 
  color:#000066; 
  background-color:#FFFFFF; 
}

body, h1, h2, h3, p, a { 
  color:#FFFF33; 
  background-color:#000000; 
}

body, h1, h2, h3, p, a { 
  color:#000000; 
  background-color:#FFFF99; 
}

body, h1, h2, h3, p, a { 
  color:#000000; 
  background-color:#FFFFFF; 
}

function changeColors (newCSS){
  document.getElementById('currentCSS').href = newCSS; 
}

<h1>Product comparison</h1>
<p>The products you selected to compare are listed below. 
  Any differences between the products are highlighted and italicized.</p>
<p class="inlinePara">Change hightlight color: </p>
<ul class="inline">
  <li>
    <a href="#" onClick="changeColor('hghltLightYellow');return false;" 
     class="hghltLightYellow">light yellow</a>
  </li>
  <li>
    <a href="#" onClick="changeColor('hghltBrightYellow');return false;" 
     class="hghltBrightYellow">bright yellow</a>
  </li>
  <li>
    <a href="#" onClick="changeColor('hghltLightBlue');return false;" 
     class="hghltLightBlue">light blue</a></li>
	<li>
    <a href="#" onClick="changeColor('hghltBrightBlue');return false;" 
     class="hghltBrightBlue">bright blue</a>
  </li>
  <li>
    <a href="#" onClick="changeColor('hghltLightRed');return false;" 
     class="hghltLightRed">light red</a>
  </li>
  <li>
    <a href="#" onClick="changeColor('hghltDrkRed');return false;" 
     class="hghltDrkRed">dark red</a>
  </li>
</ul>
<table>
  <tr>
    <td> </td>
    <th scope="col">Product 1</th>
    <th scope="col">Product 2</th>
  </tr>
  <tr>
    <th scope="row">Aspect 1</th>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
  <tr>
    <th scope="row">Aspect 2</th>
    <td class="hghltLightYellow">Yes</td>
    <td class="hghltLightYellow">No</td>
  </tr>
  <tr>
    <th scope="row">Aspect 3</th>
    <td>Yes</td>
    <td>Yes</td>
  </tr>
</table>

body { color:#000000; background-color:#FFFFFF; }
.hghltLightYellow { color: #000000; background-color: #FFFF99; font-style:oblique; }
.hghltBrightYellow { color: #000000; background-color: #FFFF00; font-style:oblique; }
.hghltLightBlue { color: #000000; background-color: #33FFFF; font-style:oblique; }
.hghltBrightBlue { color: #FFFFFF; background-color: #0000FF; font-style:oblique; }
.hghltLightRed { color: #000000; background-color: #FF6266; font-style:oblique; }
.hghltDrkRed { color: #FFFFFF; background-color: #993300; font-style:oblique; }
.inlinePara { display:inline; }
.inline { display: inline; margin-left:0px; padding-left:0px; line-height:3em; }
.inline li { display:inline; }
.inline li a { padding: 0.5em 1em; border: 2px solid #000000; }

function changeColor(hghltColor) {
  // collects table data cells into an array 
  var els = document.getElementsByTagName('td');
  // for each item in the array, look for a class name starting with "hghlt"
  // if found, change the class value to the current selection
  // note that this script assumes the  'td' class attribute is only used for highlighting
  for (var i=0; i<els.length; i++) {
    if (els[i].className.indexOf("hghlt") == 0) { els[i].className = hghltColor; }
  }
}

<?php
  $thestyle = $_GET['set'];
  if ($thestyle == "style1") {
    $thestyle = "style2";
  }
  else {
    $thestyle = "style1";
  }
?>

<link rel="stylesheet" media="screen" href="<?php echo($thestyle);?>.css">

<?php
  if ($thestyle == "style1") {
    echo "<a href=\"index.php?set=style1\">Switch to Style Sheet Two</a>";
  }
  else {
    echo "<a href=\"index.php?set=style2\">Switch to Style Sheet One</a>";
  }
?>
<div id="mainbody">
  <h1>Conference report</h1>
  <p>Last week's conference presented an impressive line-up of speakers...</p>
</div>

body, p { color:#000000; background-color:#FFFFFF; }
h1, h2, h3 {color:#990000; background-color:#FFFFFF; }

body, h1, h2, h3, p, a { color:#FFFF00; background-color:#000000; }

Está disponible un ejemplo funcional de este código: Usar $_GET de PHP para aplicar un fichero CSS externo distinto.

Pruebas

Técnicas relacionadas

• G140: Separar la información y la estructura de la presentación para permitir distintas presentaciones
• G174: Proporcionar un control con una relación de contraste suficiente que permita a los usuarios cambiar a una presentación con contraste suficiente
• G178: Proporcionar en la página web controles que permitan a los usuarios cambiar de forma progresiva el tamaño de todo el texto de la página hasta el 200 por ciento
• G188: Proporcionar un botón en la página para aumentar el interlineado y el espaciado entre párrafos
• G189: Proporcionar un control cerca del principio de la página web que cambie el texto de los enlaces
• G191: Proporcionar un enlace, un botón u otro mecanismo que recargue la página sin ningún contenido parpadeante
• G206: Proporcionar opciones dentro del contenido para cambiar a una disposición que no requiera desplazamiento horizontal para leer una línea de texto
• C7: Usar CSS para ocultar una parte del texto del enlace
• C22: Usar CSS para controlar la presentación visual del texto
• SCR38: Crear una versión alternativa conforme para una página web diseñada con mejora progresiva

Recursos