JavaScript pro použitelnější a přístupnější web

Předmluva k JavaScriptu

Jsou web-designéři, co se JavaScriptu "štítí". Jaký k tomu mají důvod? Zejména jeho neznalost a nepochopení principu správného použití JavaScriptu. Z jejich strany.

Ano, JavaScript si získal své špatné jméno jeho zneužíváním pro desítky otevíraných pop-up oken v Internet Exploreru, pro bezcenné animace, či rolující text ve status baru, který jen znesnadňuje čtení webu.

To ale není problém technologie, tedy, JavaScriptu. Šílené věci se dají udělat i s obyčejným (X)HTML. Je proto špatné? Nebo s animovanými GIFy! Je GIF proto špatný? Rozhodně ne.

Nezatracujme technologii kvůli pár taky-tvůrcům bez grafického cítění (pokud nechceme pod tímto cítěním chápat desítky blikajících neonových světel jako krásnou a užitečnou věc).

Lepší web s JavaScriptem

O tom, že JavaScript může učinit web značně přehlednější, použitelnější (a tudíž i, v tomto případě, přístupnější), jsem psal již v článku Přístupná navigace webu pomocí JavaScriptu. Asi 2 týdny nato publikoval podobný článek i A List Apart, pod podivným názvem Let Them Eat Cake.

JavaScriptem je možno přistupovat k DOM modelu stránky. Dynamicky s ní pracovat. Zajímavý pro nás je zejména přístup k atributům tříd v CSS. Že nevíte, jak na to? Osobně používám dokumentaci na comptechdoc.com, která uvádí, přehledně, jak ke kterým atributům CSS přistupovat z JavaScriptu.

Na tomto webu používám JavaScript pro selektivní zobrazování částí webu. Proč? Na tomto webu je dostupná řada statistik, lokálních hledání, google hledání, blogrollů, a dalších věcí, které, v "rozbalené podobě", by činili web značně nepřehledným. Řešení jsou dvě. Buď vše smazat, a nechat tu jen články, v primitivní podobě, anebo, za pomocí JavaScriptu, zobrazovat jen uživatelem vyžádané věci. Viz Přístupná navigace webu pomocí JavaScriptu.

Konkrétní příklad

Začněme příkladem. V menu, v jeho pravém horním rohu, stiskněte tlačítko . Co se stane? Celé menu vpravo zmizí, a <div> článků se rozbalí na celou šířku obrazovky. Čtení článku se tak stane mnohem přehlednější, tudíž použitelnější. Při čtení článku většinu lidí nezajímá, jaké poslední komentáře byly vloženy, či, jaké bude zítra počasí. Nyní klikněte na tlačítko v levém horním rohu článků. <div> článků se sroluje do původní podoby, a menu se znovu zobrazí.

Jak to souvisí s přístupností? Čtenáři je prezentován jednoduchý web, kterému rozumí. Ihned. Nemusí se jej "učit". Pokud potřebuje více funkcí, stiskem jediného tlačítka si je zapne. Pokud nemá JavaScript povolen, zobrazí se mu web v "rozbalené" podobě. O žádné informace nepřijde.

Má to samozřejmě ještě jednu vadu. Jakou? Zatím jsme menu schovali, zobrazili, nicméně, při přechodu na další článek se nám vrátí výchozí stav. Podobně jako při nedořešeném přepínání alternativních stylů v Mozille. Řešením je samozřejmě doplnit cookie, ve které si pozici menu zapamatujeme.

Vlastní XHTML kód

Řekněme, že máme 2 hlavní <div>y. Jeden z nich je <div id=’items’>, v němž jsou články, a druhý je <div id=’menu’>, v němž je sekundární menu (hlavní menu, nahoře, je, pochopitelně, nutné nechat zobrazené pořád, pro umožnění návratu na titulní stránku..).

<div id='items'>
 ...
</div>
<div id='menu'>
 ...
</div>

Nyní, tento kód doplníme o prvky, které budou menu zavírat, rozbalovat články, a potom je zase otevírat. Dané prvky budeme generovat JavaScriptem. Proč? Vlastní přepínání je realizováno JavaScriptem, je tedy nutné, aby se tyto prvky uživatelům s JavaScriptem vypnutým vůbec nezobrazily.

<div id='items'> 
 ...
 <script type='text/javascript'> 
  doMenu("show");
 </script>
</div>
<div id='menu'>
 ...
 <script type='text/javascript'> 
  doMenu("hide");
 </script>
</div>

Funkce doMenu() je volána se dvěma parametry, v menu s paramterem hide (schovat), v sekci články (kdy je menu schováno), s parametrem show (zobrazit).

Vlastní JavaScript kód

Nejprve si nadefinujeme funkci doMenu() (volání funkce document.write má být, pochopitelně, na jednom řádku, zde je na 4 řádcích jen kvůli přehlednosti):

function doMenu(typ) {
 nucleuscookie=getcookie("nucleusmenu");
 if (typ=="hide") {
   if (nucleuscookie=="hide") 
    _hideMenu();
   else {
    _showMenu();
    document.write(
     '<a title="Hide this menu" 
         href="javascript:hideMenu();">
      <span id="hidemenu"></span></a>'); 
   }
 } else {
   if (nucleuscookie=="hide") 
    document.write(
     '<a title="Display main menu" 
         href="javascript:showMenu();">
     <span id="showmenu"></span></a>');
 }
}

Tato funkce nám, volána z menu, pokud je nastavena cookie "nucleusmenu" na "hide", tedy menu je schováno, zavolá funkci _hideMenu(), která jej schová, jinak vypíše, přes document.write() odkaz na schování tohoto menu. Pokud je tato funkce volána z článku, zobrazí, při schovaném menu, odkaz na jeho opětovné zobrazení.

Implementace funkce _hideMenu() je samozřejmě závislá na Vašem CSS layoutu. V mém případě dělá následující:

function _hideMenu() {
 if (p=document.getElementById("menu")) 
  p.style.display="none";
 if (p=document.getElementById("items")) 
  p.style.width="650px";
}

Následně je nutné si nadefinovat funkce showMenu() a hideMenu(), které (po kliknutí na zobrazený odkaz generovaný funkcí document.write() ), nastavují cookie. A protože je tato cookie k dispozici až při reloadu browseru, je nutné provést rovněž redirect. Jak na to?

function redirect(){
 var thispage = window.location.href;
 window.location.href = thispage;
}
function hideMenu() {
 setcookie("nucleusmenu","hide",365);
 if (nucleuscookie != "hide") redirect();
}
function showMenu() {
 setcookie("nucleusmenu","show",365);
 if (nucleuscookie != "show") redirect();
 _showMenu();
}      

Zbývá nám doplnit "servisní" funkce, pro uložení a načtení cookie. Ty jsou ve standardní podobě, pokud je někdo potřebuje okomentovat, doporučuji hledání na google.com

var nucleuscookie='';
function getexpirydate(nodays){
 var UTCstring;
 Today = new Date();
 nomilli=Date.parse(Today);
 Today.setTime(nomilli+nodays*24*60*60*1000);
 UTCstring = Today.toUTCString();
 return UTCstring;
}
function setcookie(name,value,duration){
 document.cookie = 
  name+"="+escape(value)+
  ";expires="+getexpirydate(duration)+
  ";path=/";
}
function getcookie(name) {
 var cookiestring=""+document.cookie;
 var index1=cookiestring.indexOf(name);
 if (index1==-1) return ""; 
 var index2=cookiestring.indexOf(';',index1);
 if (index2==-1) index2=cookiestring.length; 
 return unescape(
  cookiestring.substring(
   index1+name.length+1,index2 ));
}

Co když nechci používat cookie a redirect?

V tom případě si nadefinujte Vaši vlastní funkci _showMenu(), například takto:

function _showMenu() {
 if (p=document.getElementById("items")) 
  p.style.width="480px";
 if (p=document.getElementById("menu")) 
  p.style.display="";
}

Následně, ve funkci doMenu() nevolejte funkce showMenu() a hideMenu(), ale jejich "nesušenkové" ekvivalenty _showMenu() a _hideMenu(). Na tomto webu si můžete vyzkoušet, toto jednorázové přepínání, za pomocí tlačítek a .

Jak vypadá CSS pro "zavírací a otevírací" tlačítka?

#hidemenu, #showmenu { 
  width: 15px; 
  height: 15px; 
  display: block; } 

Co do toho zapojit ještě PHP?

Uvedený, ryze JavaScriptový, postup má ještě jednu nevýhodu - stránka se vždy natáhne celá, a až pak se menu skryje. Pokud máte povoleno PHP, je tedy vhodné ošetřit skrytí menu již zde. Jak na to?

if ($_COOKIE['nucleusmenu']=='hide'){
 echo "<style type='text/css'>n";
 echo "#menu{display:none}n";
 echo "#items{width:650px}n";
 echo "</style>n";
}