Understanding WCAG 2.0

Skip to Content (Press Enter)

C29: Megfelelő alternatív verzió biztosítása stílusváltó segítségével

Alkalmazás

Szerver- vagy kliens-oldali szkriptekkel alkalmazó CSS

Ez a technika az alábbiakra vonatkozik:

Leírás

Abban az esetben, ha egy weboldal alapértelmezett megjelenítése nem felel meg egy teljesítési feltételnek, akkor a megfelelőségi követelmények "Alternatív verzió" című előírásának alkalmazásával lehet teljesíteni a kérdéses feltételt. Bizonyos követelmények esetében a stílusváltó hivatkozáson vagy vezérlőn keresztül történő alkalmazása lehet a megoldás. Ennek segítségével lehet a lap megjelenítését az elvárt szintű megfelelőséghez igazítani, minek révén a szerkesztők elkerülhetik azt, hogy ugyanazt az információt több verzióban kényszerüljenek prezentálni.

A technika célja annak a szemléltetése, hogyan lehet a CSS-est és a szkriptet együtt a weboldal megfelelő alternatív verziójának előállítására felhasználni. A technika alkalmazása során a szerkesztő olyan módon adja meg egy tartalom alternatív megjelenítését, hogy a CSS-t a vezérlők segítségével a megjelenítés szabályozására használja fel. A felhasználó weboldal vezérlőivel kiválaszthatja az adott szint teljesítési feltételének legjobban megfelelő megjelenítést. A felhasználó az alábbi helyzetekben választhat a különböző vizuális megjelenítések között:

  • ismeretek vagy jogok hiányában a felhasználó nem képes a böngésző vagy az operációs rendszer beállítására

  • megjelenítési módja miatt a szöveg nem működik együtt a böngészővel, illetve az operációs rendszerrel (pl. a szöveg egy képben helyezkedik el)

  • a tartalom alapértelmezett megjelenítése nem eléggé éles bizonyos felhasználók számára

A technika sikeres felhasználásához három tényezőnek kell teljesülnie.

  1. Az eredeti oldalon található hivatkozásnak vagy vezérlőnek meg kell felelnie az alternatív változat teljesítési feltételének is. Abban az esetben például, ha a stílusváltó a karakterek méretének növelésére szolgál, de a megjelenített vezérlő kisméretű karaktereket használ elképzelhető, hogy a felhasználók nem lesznek képesek a vezérlő aktiválására és az alternatív megjelenítés megtekintésére.

  2. Az új lapnak az eredetivel megegyező információkkal és funkciókkal kell rendelkeznie.

  3. Az új lapnak meg kell felelnie az előírt megfelelőségi szint összes teljesítési kritériumának. Az alternatív stíluslap például nem felelhet meg olyan követelménynek, amely miatt egy másik követelmény nem teljesül.

Stílusváltó alkalmazásakor fontos megfontolni az alábbi tényezőket és korlátokat:

  • A weboldalon megadott vezérlők szempontjából a felhasználó csak korlátozott számú és típusú változtatást végezhet el. A minél szélesebb közönség igényeinek kiszolgálása érdekében a megjelenítések és beállítási lehetőségek széles skáláját ajánlott biztosítani. Mindazonáltal a szerkesztőknek át kell gondolniuk a beállítások együttműködését, valamint a nagy számban megadott vezérlők kezelésének bonyolultsági fokát.

  • A felhasználó beállításai a számítógépen elhelyezett cookie segítségével is átörökíthető egyik lapról a másikra (további információkért tekintse meg a Források című részt). Ugyanez megoldható a beállítások webszerverre történő elmentésével is, amelyet egy lekérdező string paraméter, vagy más egyéb módszer alkalmazásával lehet elérni.

  • A stílusváltó alkalmazásának technikai módszere fontos a felhasználó számítógépén futó technológia vagy technológiák támogatásának és hozzáférhetőségének (sok kliens-oldali megoldás például megköveteli a JavaScript és CSS támogatást) a szempontjából. Abban az esetben, ha ezek a technológiák nem a megfelelőségre támaszkodnak, a szerkesztőknek meg kell fontolniuk a szerver-oldali technológiák alkalmazását ott, ahol nem biztosított a technológiák kliens-oldali támogatása vagy hozzáférhetősége. Az alkalmazott technikák hozzáférhetetlensége esetén a tartalom problémamentes átváltását biztosító technikák alkalmazása hatékony módot jelenthet az oldalak támogatásának megerősítésére akkor, amikor a technológiák támogatása nem a megfelelőségen alapszik.

Példák

1. példa: Különböző külső CSS fájlok alkalmazása JavaScript vezérlő segítségével

Az alábbi példában szereplő lapon található hivatkozások a lap háttér- és szövegszínét megváltoztató JavaScriptre mutatnak. A hivatkozások csak akkor illeszthetők be, ha a felhasználó számítógépén elérhető és támogatott a JavaScript. Egyébként a hivatkozásra történő kattintás nem a kívánt hatást fogja eredményezni. Az elvárt eredmény akkor érhető el, ha a hivatkozások szkriptek segítségével kerülnek beillesztésre (Ez azt jelenti, hogy a hivatkozások csak akkor fognak megjelenni, ha a szkript elérhető és támogatott.).

Az alábbi kód a JavaScript függő színváltó hivatkozást, valamint a weblap más tartalmi elemének a snippetjét, a társított stíluslapot, valamint a színváltó hivatkozás kiválasztása esetén, az alkalmazott stíluslapot módosító JavaScript-et tartalmazza.

A példa csak az aktuális oldal megjelenítésére vonatkozik. Alkalmazás esetén ajánlatos a beállítást elmenteni egy cookie-ba, vagy egy szerveroldali profilba, mivel így a felhasználónak csak oldalanként egyszer kell választania.

Az XHTML komponens:

Példa kód:


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>

A CSS komponens:

Példa kód:


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

A JavaScript komponens:

Példa kód:


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

Ennek a kódnak egy működő példája elérhető a Using a JavaScript control to apply a different external CSS file, című részben.

2. példa: A CSS tulajdonság megváltoztatása egy kliens oldali JavaScript segítségével

Ez a példa inkább a tartalom kisebb részeinek megváltoztatására felel meg és kevésbé alkalmas összetett honlapok vagy oldalak módosítására. A példában alkalmazott kliens-oldali JavaScript az osztálynév megváltoztatásával vizuálisan megjeleníti a felhasználó színválasztását (egy meghatározott beállítási listából), amely egy specifikus tartalom hátterének a kiemelésére szolgál.

Megjegyzés: Az alábbi kód XHTML-be foglalt JavaScript-et tartalmaz, amely a technika megértését segíti. Mindazonáltal a szerkesztőknek javasolt a jelenlegi JavaScriptet tartalmazó gyakorlat használata (További információkért tekintse meg a forrásokban az Unobtrusive JavaScript and progressive enhancement című részt).

Az XHTML komponens:

Példa kód:


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

A CSS komponens:

Példa kód:


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

A JavaScript komponens:

Példa kód:


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

Ennek a kódnak egy működő példája elérhető a Using a client-side JavaScript to change a CSS property, című részben.

3. példa: Különböző külső CSS fájlok alkalmazása PHP $_GET segítségével

Az alábbi egyszerű példában a PHP $_GET segítségével kerül alkalmazásra a két rendelkezésre álló külső stíluslap egyike. Hasonló funkciók elérhetők számos PHP tulajdonság alkalmazásával. A példa csak a jelenlegi megjelenítésre vonatkozik. Alkalmazás esetén ajánlatos a beállítást elmenteni egy cookie-ba vagy egy szerver-oldali profilba, mivel így a felhasználónak csak oldalanként egyszer kell választania.

Az alábbi kód PHP, de hasonló eredmény érhető el számos szerver-oldali technológia alkalmazásával.

A PHP és XHTML komponens:

Példa kód:


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>

A CSS komponens:

Példa kód:


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

Ennek a kódnak egy működő példája elérhető a Using PHP $_GET to apply a different external CSS file, című részben.

4. példa: Alternatív stíluslap biztosítása JSP segítségével

Az alábbi példa két fájlt használ

  • egy Java Szerver Oldal (JSP) űrlappal és az űrlap szerkesztő kóddal, illetve

  • egy csatoló fájl, amely az előző oldalon is megtalálható, valamint ugyanabban a stílusban a többi oldalon is.

A szerver-oldali kód egy normál hivatkozás elemet eredményez a felhasználó által választható stíluslaphoz és más hivatkozás elemeket, amelyek a többi stílus "alternatív stíluslapjaira" mutatnak. A kód a második példa kliens-oldali kódjának tartalékaként is felhasználható.

A JSP oldal az űrlappal:

Példa kód:


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

A styleswitcher.jsp fájl az előző fájlban található:

Példa kód:


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

Más JSP lapok is alkalmazhatják ezt a kódot az alábbi csatoló és scriptlet kód révén:

Példa kód:


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

Források

A források csak információs célokat szolgálnak, és csak angolul elérhetőek.

Cookie-k használata

A felhasználók állandó jellegű kiválasztásaival kapcsolatos információk a felhasználó számítógépén található cookie-kban tárolható. Ezt a funkciót azonban engedélyezni és támogatni kell a felhasználó számítógépén. A cookie-kat a Javascript-hez hasonló kliens oldali vagy a CGI-hez hasonló szerver oldali szkriptek segítségével lehet létrehozni, olvasni, és módosítani. A kliens oldali technológiák, a cookie-k támogatásán és engedélyezésén kívül, támogatást és hozzáférést igényelnek a felhasználó számítógépén is.

A cookie-k elkészítésével és felhasználásával kapcsolatban számos forrás található a weben. Az alábbiakban néhány ajánlat olvasható:

A szerkesztőknek ajánlott a cookie-k támogatásának tesztelése, vagy egy kiegészítő vezérlő beépítése arra az esetre, ha a cookie-k nem támogatottak. Ez a kiegészítő vezérlő tartalmazhatja a kiválasztás állandó jellegére utaló információt, mint például a "Kiválasztás az összes lapon" feliratú gomb. A kiegészítő vezérlő kiválasztásakor megjelenő üzenet vagy lap tájékoztathatja a felhasználót a cookie-kal kapcsolatos követelményekről és a megoldások lehetséges módjairól. Abban az esetben, ha a felhasználó nem képes a cookie-k támogatását bekapcsolni, akkor tájékoztatni kell a lap további böngészésének következményeiről, illetve a hasonló megjelenítés eléréséhez szükséges felhasználói program beállításokról.

A számítógépen például megjelenhet a következő üzenet: "Az Ön böngészője nem támogatja a cookie-kat. Ezen a weblapon a cookie-k szükségesek a beállítások megőrzéséhez. A cookie-k bekapcsolásának módjáról a How to Enable Cookies című honlapon tájékozódhat. Fontos, hogy a cookie-k kezeléséhez adminisztrátori jogra van szüksége a használt számítógépen. A cookie-k támogatása nélkül honlap más oldalain nem lesznek érvényesek a kiválasztott beállításai. Igyekszünk úgy garantálni ezt a funkciót, hogy közben nem támaszkodunk az Ön számítógépének képességeire. Időközben a beállításokat minden meglátogatott lapon külön meg kell ejtenie."

Rejtett Javascript és Progresszív Képességfejlesztés

A HTML-el és XHTML-el együtt alkalmazott JavaScript elválasztja a tartalom viselkedését, a struktúrától és a megjelenítéstől. A "Progresszív Képességfejlesztés" és a "Rejtett Javascript" gyakran használatosak olyan szkriptek leírására, amelyek a lap funkcionalitásának fejlesztésére szolgálnak, ám megőrzik a tartalom működőképességét a JavaScript támogatásának hiányában is.

Az alábbiakban néhány információforrás került felsorolásra:

Ellenőrzések

Folyamat

  1. Ellenőrizze, hogy a weblapon megtalálhatók az alternatív megjelenítés kiválasztására szolgáló vezérlők.

  2. Ellenőrizze, hogy a vezérlő megváltoztatja-e a tartalmat.

  3. Ellenőrizze, hogy a megjelenített lap az eredeti oldal megfelelő alternatív verziója.

Elvárható eredmények

  • Az összes fenti ellenőrzés igaz.

Teljesítési feltételek:

Ez a weboldal A Technikák és Gyakori Hibák a Web Akadálymentesítési Útmutató 2.0-hoz része. Ez a dokumentum elérhető egy HTML fájlban is. Nézze meg a A WCAG 2.0 dokumentumait ezen dokumentum és a WCAG 2.0 egyéb dokumentumai között fennálló kapcsolatok áttekintéséhez.

Copyright © 2008 W3C® ( MIT, ERCIM, Keio), Minden jog fenntartva. Alkalmazandók a W3C felelősségi, védjegyoltalmi és dokumentumhasználati előírásai.