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

MyEgo.cz

home foto blogy mywindows.cz kontakt

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

Technologie 05.05.04

Předmluva k JavaScriptu

JavaScript

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 hide menu. 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 show menu 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 show menu one time a hide menu one time.

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

Komentáře

  1. 1 Ondřej Kokeš 05.05.04, 07:05:24
    FB

    Taky je dobra ref. prirucka na DOM zde: http://www.mozilla.org/docs...

  2. 2 radek 06.05.04, 09:05:59
    FB

    http://www.webproducer.at/f...

    Tohle je dle meho nazoru podobny a velmi povedeny priklad

  3. 3 Shaman 06.05.04, 10:05:02
    FB

    "Jak to souvisí s přístupností? Čtenáři je prezentován jednoduchý web, kterému rozumí. Ihned. Nemusí se jej učit."

    Domnívám se, že toto je právě špatná úvaha. Nemusím se nic učit na webu, který je snadno k pochopení, který se nemění - v popisovaném případu je tomu naopak, tzn. musím se naučit, jak tyto fce používat, strávit nějaký čas přemýšlením. Za lepší řešení bych považoval okleštěnou stránku, z níž by vedly odkazy na jednotlivá podtémata (pro zájemce). Technologie zde tudíž nahrazuje špatnou práci informačního archtekta/copywritera, což není nejlepší řešení...

  4. 4 Radek Hulán 06.05.04, 11:05:19
    FB

    [3] okleštěná stránka není řešení ;) Okleštěná stránka je dokument v Notepadu. Rozsáhlejší weby si formu "deníčku" nemohou dovolit. A taky to nedělají.

    Když si koupíte nový telefon, tak jej umíte používat. Základy. Ale na to, aby jste pochopil všechno, tak tomu musíte věnovat dalších X minut.

    Ano, základ webu musí být triviální a pochopitelný pro masy. Musí to být taková jednoduchá Nokia. Ale to neznamená, že by neměl nabízet i pokročilé funkce pro pokročilé čtenáře.