Técnicas para as WCAG 2.0

Ir para o conteúdo (Pressione a tecla Enter)

-

C29: Utilizar um comutador de estilo para fornecer uma versão alternativa em conformidade

Aplicabilidade

CSS utilizado com scripting do lado do cliente ou do lado do servidor.

Esta técnica está relacionada com:

Descrição

Quando algum aspecto da apresentação predefinida de uma página Web não cumpre um Critério de Sucesso, é possível cumprir esse requisito utilizando a cláusula "Versão Alternativa" nos requisitos de conformidade (Requisito de Conformidade 1). Para alguns requisitos, invocar um comutador de estilo, através de um link ou controlo na página que pode ajustar a apresentação de modo a que todos os aspectos da página estejam em conformidade com o nível reivindicado, permite aos autores não terem de fornecer várias versões da mesma informação.

O objectivo desta técnica é demonstrar como o CSS pode ser utilizado em conjunto com scripting para fornecer versões alternativas em conformidade de uma página Web. Nesta técnica, o autor fornece visualizações alternativas do conteúdo, disponibilizando controlos que ajustam o CSS utilizado para controlar a apresentação visual do conteúdo. Os controlos fornecidos na página Web permitem aos utilizadores seleccionar ou modificar a apresentação de uma forma que cumpra o critério de sucesso no nível reivindicado. Isto faz com que diferentes apresentações visuais possam ser seleccionadas pelos utilizadores nas seguintes situações:

Para que esta técnica seja utilizada com êxito, três aspectos têm de ser verdadeiros.

  1. O link ou controlo na página original tem de cumprir o critério de sucesso correspondente através da apresentação alternativa. Por exemplo, se um comutador de estilo for utilizado para fornecer tamanhos de tipos de letra ampliados e o controlo for apresentado utilizando um tipo de letra pequeno, os utilizadores não são capazes de activar o controlo e visualizar a apresentação alternativa.

  2. A nova página tem de incluir a mesma informação e funcionalidade que a página original.

  3. A nova página tem de estar em conformidade com todos os Critérios de Sucesso para o nível de conformidade pretendido. Por exemplo, uma folha de estilo alternativa não pode ser utilizada para cumprir um requisito se fizer com que um requisito diferente deixe de estar em conformidade.

Quando se utiliza um comutador de estilo, é importante ter em consideração os seguintes desafios e limitações:

Exemplos

Exemplo 1: Utilizar um controlo JavaScript para aplicar um ficheiro CSS externo diferente

Este exemplo apresenta uma página que fornece links para alterar o texto e as cores de fundo da página através de JavaScript. Os links só devem ser introduzidos se o JavaScript for suportado e estiver disponível no sistema do utilizador. Caso contrário, seleccionar os links não resulta nas alterações pretendidas. Isto pode ser obtido utilizando o script para introduzir os links (o que significa que os links só estão presentes quando o scripting é suportado e está disponível).

O código seguinte apresenta links para mudança de cor dependentes de JavaScript e um fragmento de outro conteúdo na página Web, as regras de folhas de estilo associadas e o JavaScript que altera a folha de estilo em utilização quando o link para mudança de cor é seleccionado.

Este exemplo aplica-se apenas à visualização actual da página. Num ambiente de produção, recomendamos guardar esta preferência num cookie ou num perfil de utilizador do lado do servidor, para que os utilizadores só tenham de efectuar a selecção uma vez em cada sítio da Web.

Os componentes XHTML:

Código Exemplo:

In <head> section:

  <link href="main.css" rel="stylesheet" type="text/css" />
  <link id="currentCSS" href="defaultColors.css" rel="stylesheet" type="text/css" />

In <body> section:

<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>

Os componentes CSS:

Código Exemplo:

In main.css:

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;
}

In defaultColors.css:

body, p { 
    color:#000000; 
    background-color:#FFFFFF; 
}

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

In altColors1.css:

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

In altColors2.css:

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

In altColors3.css:

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

In altColors4.css:

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

Os componentes JavaScript:

Código Exemplo:

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

Está disponível um exemplo prático deste código, Utilizar um controlo JavaScript para aplicar um ficheiro CSS externo diferente.

Exemplo 2: Utilizar JavaScript do lado do cliente para alterar uma propriedade CSS

Este exemplo pode ser utilizado para alterações simples numa secção de conteúdo, podendo ser menos prático em sítios da Web ou páginas complexos. O exemplo utiliza um JavaScript do lado do cliente para alterar o nome da classe e apresentar visualmente a selecção de cores do utilizador (de um conjunto de opções definido) como fundo para realçar conteúdo específico.

Nota: O código seguinte inclui chamadas JavaScript no código XHTML para ajudar a compreender a técnica. Contudo, o autor é encorajado a utilizar a melhor prática actual para incluir JavaScript (para mais informações sobre JavaScript Discreto e optimização progressiva, consulte Recursos).

Os componentes XHTML:

Código Exemplo:

<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 width="400" border="1">
  <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>

Os componentes CSS:

Código Exemplo:

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; }

Os componentes JavaScript:

Código Exemplo:

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; }
  }
}

Está disponível um exemplo prático deste código, Utilizar JavaScript do lado do cliente para alterar uma propriedade CSS.

Exemplo 3: Utilizar PHP $_GET para aplicar um ficheiro CSS externo diferente

Este exemplo simples utiliza PHP $_GET para atribuir uma de duas folhas de estilo externas disponíveis. Podem obter-se funcionalidades semelhantes utilizando várias funcionalidades PHP. Este exemplo aplica-se apenas à visualização actual da página. Num ambiente de produção, recomendamos guardar esta preferência num cookie ou num perfil de utilizador do lado do servidor, para que os utilizadores só tenham de efectuar a selecção uma vez em cada sítio da Web.

O código seguinte é PHP, mas uma abordagem semelhante funciona com várias tecnologias do lado do servidor.

Os componentes PHP e XHTML:

Código Exemplo:

At the beginning of the PHP page:

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

In the <head> section:

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

In <body> section:

<?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>

Os componentes CSS:

Código Exemplo:

In style1.css:

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

In style2.css:

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

Está disponível um exemplo prático deste código, Utilizar PHP $_GET para aplicar um ficheiro CSS externo diferente.

Exemplo 4: Utilizar JSP para fornecer uma folha de estilo alternativa

O exemplo seguinte utiliza dois ficheiros,

O código do lado do servidor fornece um elemento link normal para a folha de estilo que o utilizador escolher, e elementos link com "folha de estilo alternativa" para os restantes estilos. Deste modo, o código pode ser utilizado como alternativa para o código do lado do cliente no segundo exemplo.

A página JSP com o formulário:

Código Exemplo:

                                   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"
 %><%@include file="_jsp/styleswitch.jsp"%><?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
   <title>Change Style</title>
   <%
     String fStyle = "";
     String styleName = "style";
     String defaultStyle = "default";
     Cookie[] cookies = request.getCookies();
 
     // get style from post request parameters
     if (request.getMethod().equals("POST") && request.getParameter("styleSelect") != null) {
       fStyle = request.getParameter("styleSelect");
       // code that validates user input (security) not shown
       
       if (fStyle.equals("nostyle")) { // user prefers no author style
       } else { // user requests author style
         out.println(createStyleLinks(fStyle).toString());
       }
       
       storeStylePreferenceCookie(request, response, fStyle);
     } else if (request.getMethod().equals("GET")) { 
     // GET request; get style from cookie; else default style links
       // get style from cookie
       if (cookies != null) {
         // get style from cookies
         fStyle = getStyleFromCookies(cookies);
 
         if ( !fStyle.equals("NULL_STYLE") ) { // user requests author style
             out.println(createStyleLinks(fStyle).toString());
         } else { // no cookie for style; process request for style preference
           // default style links
           out.println(createStyleLinks(defaultStyle).toString());
         }
       } else { // GET request without cookies: default styles
         out.println(createStyleLinks(defaultStyle).toString());
       }//end else cookies
     }
   %>
 </head>
 <body id="home">
   <form action="_styleSwitch.jsp" method="post" id="styleswitchform" name="styleswitchform">
     <p><label for="styleSelect">Select style: </label>
       <select id="styleSelect" name="styleSelect">
         <option value="default">Default (shades of green)</option>
         <option value="wonb">White on black</option>
         <option value="bonw">Black on white</option>
       </select>
       <input type="submit" value="Change Style" />
     </p>
   </form>
 </body>
 </html> 

O ficheiro styleswitcher.jsp incluído no ficheiro anterior:

Código Exemplo:

                                   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <%!
   /**
    * Get the links (link elements) to the CSS files based on cookies, ...
   */
   private String getStyleLinks(HttpServletRequest request) {
     String styleLinks = "";
     Cookie[] cookies = request.getCookies();
     String defaultStyle = "default";
     String tempStyle = "";
     // GET request; get style from cookie; else default style links
     // get style from cookie
     if (cookies != null) {
       // get style from cookies
       tempStyle = getStyleFromCookies(cookies);
 
       if ( tempStyle.equals("NULL_STYLE") ) { 
         // no cookie for style; process request for style preference
         // default style links
         styleLinks = createStyleLinks(defaultStyle).toString();
       } else { // user requests author style
         styleLinks = createStyleLinks(tempStyle).toString();
       }
     } else { // GET request without cookies: default styles
       styleLinks = createStyleLinks(defaultStyle).toString();
     }//end else cookies
     
     return styleLinks;
   }
 
   /**
    * Get style cookie from request
   */
   private String getStyleFromCookies( Cookie[] cookies ) {
     String fStyle = "NULL_STYLE";
     for (int i = 0; i < cookies.length; i++) {
       Cookie cookie = cookies[i];
       String name = cookie.getName();
       
       if ( name.equals("style") ) {
         fStyle = cookie.getValue();
         // code that validates cookie value (security) not shown
       }
     }
     return fStyle;
   }
 
   /**
    * Store the style preference in a persistent cookie
   */
   private void storeStylePreferenceCookie(HttpServletRequest request, 
     HttpServletResponse response, String theStyle) {
     final int ONE_YEAR = 60 * 60 * 24 * 365;
     Cookie styleCookie = new Cookie("style", theStyle);
     styleCookie.setMaxAge(ONE_YEAR);
     response.addCookie(styleCookie);
   }
 
   /**
    * Create the link elements for the stylesheets
   */
   private StringBuffer createStyleLinks(String prefStyle) {
     StringBuffer theStyleLinks = new StringBuffer();
     //two-dimensional array with identifiers (adding '.css' gives the name of the CSS file) 
     // and strings for the title attribute of the link element
    // the identifiers must correspond to the in the "value" attributes in the "option"
    // elements in the style switcher form
     String [] [] styles = {
       { "default", "Default style"},
       { "wonb", "White on black"},
       { "bonw", "Black on white"}
     };
 
     // loop over 2dim array: if styles[i][1] matches prefStyle, 
     // output as normal, else as alternate stylesheet
     for (int i = 0; i < styles.length; i++) {
       if ( styles[i][0].equals(prefStyle) ) { // output pref stylesheet as normal stylesheet
         theStyleLinks.append("<link rel=\"stylesheet\" href=\"_css/").append(styles[i][0])
           .append(".css\" title=\"").append(styles[i][1]).append("\" type=\"text/css\" />").append("\n");
       } else { // output other stylesheets as alternate stylesheets
         theStyleLinks.append("<link rel=\"alternate stylesheet\" href=\"_css/")
           .append(styles[i][0]).append(".css\" title=\"").append(styles[i][1])
           .append("\" type=\"text/css\" />").append("\n");
       }
     } // end for loop
 
     return theStyleLinks;
   }
 %> 

As outras páginas JSP podem utilizar este código através da seguinte inclusão e código scriptlet:

Código Exemplo:

                                   <%@include file="_jsp/styleswitch.jsp"%><% out.println(getStyleLinks(request)); %> 

Recursos

Os recursos são indicados apenas a título informativo, não implica que tenham sido aprovados.

Utilizar cookies

A selecção de um utilizador pode ser preservada em várias páginas, e em várias visitas, guardando a informação no computador do utilizador através de um cookie. Esta funcionalidade requer que os cookies sejam suportados e permitidos no computador. Os cookies podem ser criados, lidos, modificados e apagados utilizando scripts do lado do cliente, tais como Javascript, ou utilizando scripts do lado do servidor, tais como scripts CGI. A dependência de tecnologias do lado do cliente requer o suporte e a disponibilidade da tecnologia no computador do utilizador, além de suportar e permitir os cookies.

Está disponível na Web informação sobre como criar e utilizar cookies. Estas são algumas sugestões:

Recomendamos que os autores testem o suporte de cookies e forneçam um controlo adicional caso os cookies não sejam suportados. Este controlo adicional deve incluir informação sobre a persistência da selecção como, por exemplo: "Aplicar a selecção a todas as páginas". A mensagem ou página apresentada ao utilizador em resposta à selecção do controlo adicional fornece informação sobre os requisitos do cookie e as opções para os resolver. Caso o utilizador não seja capaz de activar o suporte de cookies, inclua uma declaração sobre o que isto significa para o utilizador se optar por continuar a navegar no sítio da Web, e forneça informação sobre como pode ajustar o seu agente de utilizador para obter resultados semelhantes.

Por exemplo, "O seu browser não está configurado para aceitar cookies. Neste sítio da Web, os cookies são necessários para aplicar as suas alterações seleccionadas em todas as páginas do sítio. Para mais informações sobre como activar cookies no seu computador, consulte Como Activar Cookies. É de salientar que isto pode requerer direitos administrativos para o computador que está a utilizar. Sem o suporte de cookies, as suas definições não incluirão outras páginas neste sítio da Web. Estamos a tentar fornecer esta funcionalidade sem depender da capacidade do seu computador. Entretanto, pode seleccionar a alteração para cada página que visita."

Optimização Progressiva e Javascript Discreto

A melhor prática actual para implementar JavaScript numa página HTML ou XHTML é utilizá-lo de uma forma que separe o comportamento do conteúdo da sua estrutura e apresentação. Os termos 'Optimização Progressiva' e 'JavaScript Discreto' são frequentemente utilizados para descrever scripts que realçam ou melhoram a funcionalidade de uma página, contudo transformam habilmente para que o conteúdo continue a funcionar mesmo quando o JavaScript não é suportado.

Estas são algumas sugestões para obter mais informações:

Testes

Procedimento

  1. Verifique se a página Web inclui controlos que permitem aos utilizadores seleccionar apresentações alternativas.

  2. Verifique se o controlo altera a apresentação.

  3. Verifique se a página resultante é uma versão alternativa em conformidade para a página original.

Resultados Esperados