Techniken für WCAG 2.0

Zum Inhalt

-

C29: Benutzung eines Style-Switchers, um eine konforme Alternativversion zur Verfügung zu stellen

Anwendbarkeit

CSS, das mit client-seitigem oder server-seitigem Scirpting benutzt wird.

Die Technik bezieht sich auf:

Beschreibung

Wenn irgendein Aspekt der Standard-Darstellung einer Webseite ein Erfolgskriterium nicht erfüllt, dann ist es möglich, diese Bedingung zu erfüllen, indem die Klausel „Alternativversion“ in den Konformitätsbedingungen (Konformitätsbedingung 1) benutzt wird. Der Aufruf eines Style Switchers über einen Link oder ein Steuerelement auf der Seite, der die Darstellung anpassen kann, so dass alle Aspekte der Seite auf der angegebenen Stufe konform sind, ermöglicht es Autoren bei einigen Bedingungen darauf zu verzichten, mehrfache Versionen der gleichen Informationen bereitzustellen.

Das Ziel dieser Technik ist es zu demonstrieren, wie man CSS in Kombination mit Scripting benutzen kann, um konforme Alternativversionen einer Webseite bereitzustellen. Bei dieser Technik stellt der Autor alternative Ansichten des Inhalts bereit, indem er Steuerelemente zur Verfügung stellt, die das CSS anpassen, das dazu benutzt wird, um die visuelle Darstellung des Inhalts zu steuern. Steuerelemente, die innerhalb der Webseite zur Verfügung gestellt werden, erlauben es den Benutzern, die Darstellung auf eine Art und Weise auszuwählen oder zu verändern, so dass das Erfolgskriterium auf der angegebenen Stufe erfüllt wird. Dadurch können vom Benutzer unterschiedliche visuelle Darstellungen ausgewählt werden in Situationen wie beispielsweise den Folgenden:

Damit diese Technik erfolgreich benutzt wird, müssen drei Dinge wahr sein.

  1. Der Link oder das Steuerelement auf der Originalseite muss selber das Erfolgskriterium, das über die alternative Darstellung erfüllt werden soll, erfüllen. Wenn zum Beispiel ein Style-Switcher benutzt wird, um eine vergrößerte Schriftgröße zur Verfügung zu stellen und das Steuerelement selber wird in kleiner Schrift dargestellt, dann kann es sein, dass Benutzer nicht in der Lage sind, das Steuerelement zu aktivieren und die alternative Darstellung anzusehen.

  2. Die neue Seite muss all die gleichen Informationen und Funktionalitäten wie die Originalseite enthalten.

  3. Die neue Seite muss konform zu allen Erfolgskriterien für die gewünschte Stufe der Konformität sein. Ein alternatives Stylesheet kann zum Beispiel nicht benutzt werden, um eine Bedingung zu erfüllen, wenn dies dazu führt. dass eine andere Bedingung dann nicht länger konform ist.

Wenn man einen Style-Switcher benutzt ist es wichtig, die folgenden Herausforderungen und Einschränkungen in Betracht zu ziehen:

Beispiele

Beispiel 1: Benutzung eines JavaScript-Steuerelements, um eine andere externe CSS-Datei anzuwenden

Dies ist das Beispiel einer Seite, die Links bereitstellt, um Text- und Hintergrundfarben für die Seite per JavaScript zu ändern. Die Links sollten nur eingefügt werden, wenn JavaScript von dem System des Benutzers unterstützt wird und darauf zur Verfügung steht. Andernfalls führt die Auswahl der Links nicht zu den gewünschten Änderungen. Dies kann erreicht werden, indem man Script benutzt, um die Links selber einzufügen (was bedeutet, dass die Links nur dann präsent wären, wenn Scripting unterstützt wird und verfügbar ist).

Der folgende Code zeigt die vom JavaScript abhängigen Farbänderungs-Links und einen Code-Ausschnitt von anderen Inhalten auf der Webseite, die damit verbundenen Stylesheet-Regeln und das JavaScript, welches das benutzte Stylesheet ändert, wenn ein Farbänderungs-Link ausgewählt wird.

Das Beispiel gilt nur für die aktuelle Seitenansicht. In einer Produktionsumgebung wäre es ratsam, diese Einstellung in einem Cookie oder einem server-seitigen Profil zu speichern, so dass Benutzer diese Auswahl nur einmal pro Site treffen müssten.

Die XHTML-Komponenten:

Code-Beispiel:

			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>
			

Die CSS-Komponenten:

Code-Beispiel:

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

Die JavaScript-Komponenten:

Code-Beispiel:

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

Beispiel 2: Benutzung von client-seitigem JavaScript, um eine CSS-Eigenschaft zu ändern

Dieses Beispiel kann für einfache Änderungen in einem Inhaltsabschnitt benutzt werden und ist möglicherweise für komplexe Sites oder Seiten weniger praktikabel. Das Beispiel benutzt ein client-seitiges JavaScript, um den Namen der Klasse zu ändern, um die Farbwahl des Benutzers (aus einer definierten Reihe von Optionen) als Hintergrund zur Hervorhebung von bestimmten Inhalten visuell darzustellen.

Anmerkung: Der folgende Code beinhaltet JavaScript-Aufrufe innerhalb des XHTML-Codes, um bei dem Verständnis dieser Technik zu helfen. Der Autor wird allerdings dazu ermutigt, aktuelle Best Practice zum Einfügen von JavaScript zu benutzen (lesen Sie dazu die Ressourcen für weitere Informationen zu „Unobtrusive JavaScript and progressive enhancement“).

Die XHTML-Komponenten:

Code-Beispiel:

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

Die CSS-Komponenten:

Code-Beispiel:

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

Die JavaScript-Komponenten:

Code-Beispiel:

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

Beispiel 3: Benutzung von PHP $_GET, um eine andere externe CSS-Datei anzuwenden

Dieses einfache Beispiel benutzt PHP $_GET, um eines von zwei verfügbaren externen Stylesheets zuzuweisen. Eine ähnliche Funktionalität könnte erreicht werden, indem man eine Auswahl an PHP-Funktionen benutzt. Das Beispiel gilt nur für die aktuelle Seitenansicht. In einer Produktionsumgebung wäre es ratsam, diese Einstellung in einem Cookie oder einem server-seitigen Profil zu speichern, so dass Benutzer diese Auswahl nur einmal pro Site treffen müssten.

Bei dem folgenden Code handelt es sich um PHP, aber eine ähnliche Vorgehensweise würde mit einer Vielzahl von server-seitigen Techniken funktionieren.

Die PHP- und XHTML-Komponenten:

Code-Beispiel:

			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>
			

Die CSS-Komponenten:

Code-Beispiel:

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

Beispiel 4: Benutzung von JSP, um ein alternatives Stylesheet zur Verfügung zu stellen

Das unten stehende Beispiel benutzt zwei Dateien

  • eine Java Server Page (JSP) mit dem Formular und dem Code, der das Formular verarbeitet und

  • eine include-Datei mit Funktionen, die von der vorhergehenden Seite und auf anderen Seiten, die den gleichen Style benutzen, angewendet werden.

Der server-seitige Code gibt ein normales Link-Element aus für das Stylesheet, das der Benutzer auswählt, und Link-Elemente mit „alternatives Stylesheet“ für die anderen Styles. Der Code kann daher als Alternativprozess für den client-seitigen Code im zweiten Beispiel benutzt werden.

Die JSP-Seite mit dem Formular:

Code-Beispiel:

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

Die styleswitcher.jsp-Datei, die in der vorhergehenden Datei enthalten ist:

Code-Beispiel:

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

Andere JSP-Seiten können diesen Code anhand des folgenden Include- und Scriptlet-Codes benutzen:

Code-Beispiel:

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

Ressourcen

Ressourcen sind nur zu Informationszwecken und keine offizielle Empfehlung.

Benutzung von Cookies

Die Auswahl eines Benutzers kann über die Seiten hinweg und von einem Besuch zum anderen bestehen bleiben, indem die Informationen über einen Cookie auf dem Computer des Benutzers gespeichert werden. Diese Funktionalität setzt voraus, dass Cookies unterstützt werden und auf dem Computer des Benutzers erlaubt sind. Cookies können erstellt, gelesen, verändert und gelöscht werden, indem man client-seitige Scripts, wie zum Beispiel Javascript, oder server-seitige Scripts, wie zum Beispiel CGI-Scripts, benutzt. Wenn man auf client-seitige Techniken setzt, dann ist die Unterstützung und die Verfügbarkeit der Technik auf dem Computer des Benutzers erforderlich, zusätzlich zur Unterstützung und dem Erlauben von Cookies.

Informationen über das Erstellen und die Benutzung von Cookies kann man im Web finden. Hier sind einige Vorschläge:

Es wird empfohlen, dass Autoren auf die Unterstützung von Cookies hin testen und ein zusätzliches Steuerelement zur Verfügung stellen, wenn Cookies nicht unterstützt werden. Dieses zusätzliche Steuerelement sollte Informationen über das Fortbestehen der Auswahl, wie beispielsweise „Auswahl auf alle Seiten anwenden“, enthalten. Die Nachricht oder die Seite, die dem Benutzer angezeigt wird als Antwort auf die Auswahl des zusätzlichen Steuerelementes, gibt Informationen über die Erfordernis von Cookies und die Möglichkeiten, dieses Problem zu lösen. Für den Fall, dass der Benutzer nicht in der Lage ist, die Unterstützung von Cookies zu aktivieren, fügen Sie eine Erklärung hinzu, was es für ihn bedeutet, wenn er sich dazu entscheiden, weiterhin auf der Site zu surfen und geben Sie Informationen dazu, wie er seinen Benutzeragenten anpassen kann, um ähnliche Ergebnisse zu erzielen.

Zum Beispiel: „Ihr Browser ist nicht so konfiguriert, dass er Cookies annimmt. Auf dieser Site sind Cookies erforderlich, um Ihre ausgewählten Änderungen über alle Seiten der Site hinweg anzuwenden. Um herauszufinden, wie man Cookies auf Ihrem Computer aktiviert, besuchen Sie How to Enable Cookies. Beachten Sie, dass dies voraussetzen könnte, dass Sie administrative Rechte für den von Ihnen benutzen Computer haben. Ohne die Unterstützung von Cookies können Ihre Einstellungen nicht bestehen bleiben, um andere Seiten auf dieser Site einzuschließen. Wir bemühen uns, diese Funktionalität zur Verfügung zu stellen, ohne dass wir auf die Fähigkeiten Ihres Computers angewiesen sind. In der Zwischenzeit können Sie die Änderung für jede Seite, die Sie besuchen, auswählen.“

Progressive Verstärkung und Unauffälliges Javascript (Progressive Enhancement and Unobtrusive Javascript)

Die aktuelle Best Practice zur Implementierung von JavaScript in einer HTML- oder XHTML-Seite ist es, dies auf eine Art zu benutzen, die das Verhalten des Inhalts von seiner Struktur und Darstellung trennt. Die Begriffe ‚Progressive Verstärkung‘ und 'Unauffälliges JavaScript' werden oft benutzt, um Skripte zu beschreiben, welche die Funktionalität der Seite verstärken oder verbessern, dies aber dennoch so elegant umsetzen, dass der Inhalt weiterhin funktioniert, auch wenn JavaScript nicht unterstützt wird.

Hier sind einige empfohlene Ansatzpunkte für weitere Informationen:

Tests

Vorgehensweise

  1. Prüfen Sie, ob die Webseite Steuerelemente enthält, die es den Benutzern erlauben, alternative Darstellungen auszuwählen.

  2. Prüfen Sie, ob das Steuerelement die Darstellung verändert.

  3. Verifizieren Sie, dass die daraus entstehende Seite eine konforme Alternativversion der Originalseite ist.

Erwartete Ergebnisse

Wenn dies eine ausreichende Technik für ein Erfolgskriterium ist, dann bedeutet das Scheitern an diesem Testverfahren nicht zwangsläufig, dass das Erfolgskriterium nicht auf irgendeine andere Art und Weise erfüllt wurde, sondern nur, diese Technik nicht erfolgreich implementiert wurde und nicht benutzt werden kann, um die Konformität zu erklären.