Kako poskrbeti za ustrezno strukturo strani

Ena prvih kontrol, ki se jo lotim ob hitrem pregledu ali tudi le ob bežni kontroli spletnih strani je, kako imajo urejeno strukturo. Struktura je namreč ključnega pomena za preglednost stani za uporabnike, ki uporabljajo bralnike zaslona, zelo pomembna je pa za vse.

Kako torej naredimo res dobro pregledno stran? Sodelovati morajo oblikovalci, programerji in skrbniki vsebin. Struktura mora biti razmišljena iz vseh treh pogledov in seveda dodatno tudi iz pogleda uporabniške izkušnje (UX).

V nadaljevanju predstavljam naloge treh ključnih deležnikov pri zagotavljanju ustrezne strukture strani s ciljem lažje berljivosti in preglednosti za vse. Seveda gre samo za naloge in s tem premisleke vezane na strukturo.

Naloga oblikovalcev

Oblikovalci morajo poskrbeti, da se posamezni mejniki na strani med seboj dobro ločijo. To lahko storijo tako z uporabo barv, kot tudi z uporabo drugačnih oblikovalskih pristopov. Važno je, da so te ločitve popolnoma jasne tudi ob morebitnih uporabah vtičnikov za dostopnost, mi njihovo uporabo sicer resno odsvetujemo.

Na primeru ene od slovenskih strani lahko vidimo, kako nepregledna za vse, ne le osebe z oviranostmi, je stran, če oblikovalci ne poskrbijo za navedeno.

Pogled na stran dvk-rs.si
Stran dvk-rs.si ob izbiri svetle teme v vtičniku popolnoma izgubi preglednost, ne loči se več med elementi glave, glavne vsebine in noge, teksti se med seboj ponekod celo prelivajo.

Poleg jasne ločitve mejnikov je potrebno poskrbeti tudi za ustrezno oblikovanje oziroma nastavitev naslovov (H1…H6). Kar 67,6% uporabnikov se pri navigaciji po spletnih straneh zanaša na naslove in kar 85,7% uporabnikov meni, da je postavitev naslovov uporabna (raziskava WebAIM: Screen Reader User Survey #9).

Naslovi ne smejo biti element oblikovanja oziroma izgleda – so namreč element, ki določa strukturo in v Sloveniji opažamo, da je to ena najpogostejših napak. Kot element oblikovanja se potem uporabljajo za razne fraze, ki nimajo nobenega pomena v strukturi.

Ključno je torej:

  • da je jasna ločnica med glavo in glavno vsebino,
  • da je jasna ločnica med glavno vsebino in nogo,
  • da je jasna ločnica med glavno in stransko vsebino, če je le ta na strani,
  • da so naslovi (H1…H6) kjer se le da jasno razločni na strani,
  • kjer se zaradi strukture strani, pogosto so take le vstopne strani, ne da zagotoviti jasnega prikaza naslovov, morajo biti struktura jasno razvidna iz samega oblikovanja, za uporabnike bralnikov zaslonov, pa morajo biti v ozadju naslovi vseeno ustrezno nastavljeni.

Priporočamo uporabo principov univerzalnega oblikovanja.

Naloga programerjev

Če oblikovalec / načrtovalec spletne strani dobro opravi svojo nalogo, je naloga programerja potem lažja, saj mu že jasno začrtana oblika narekuje kako naj v ozadju pripravi strukturo spletnega mesta.

Pomembno je, da se programerji držijo pravil uporabe semantičnega html in za postavitev strukture uporabljajo za to predvidene HTML5 elemente. Ti mejniki so: <header>, <nav>, <main>, <aside>, <footer>. Vsi našteti elementi so namenjeni opredelitvi osnovne strukture strani za uporabnike podpornih tehnologij (AT), ki jih sicer videči vidmo glede na oblikovno strukturo o kateri smo govorili v prejšnjem poglavju. Dodatni pomožni mejniki so še: <article>, <figure>, <form>, ki dodatno opredeljujejo vrste vsebin na strani. Pri uporabi so konec koncev pomembni tudi sami odstavki <p>, saj napredni uporabniki bralnikov zaslonov preskakujejo med odstavki in tako natančneje pregledujejo vsebino.

Shema, kot jo vidijo videči.
Shema prikazuje mejnike, ki strukturo ustrezno predstavijo bralnikom zaslona, z ustreznimi značkami, ob uporabi semantičnega html. <header> na vrhu, <contentinfo> na dnu, <aside> na desnem robu, zasede cca 25% širine ter <main> na levem robu, zasede cca 75% širine. Znotraj main sta prikazana dva <article> mejnika, eden od njih vsebuje še <p> za odlomek in <form> za obrazec na strani.

Naloga skrbnikov vsebin

Če sta nalogi oblikovalcev in programerjev projektni – torej nekaj izvedejo od začetka do konca same izvedbe, je naloga skrbnikov vsebin kontinuirana skozi celotno življenjsko dobo nekega spletnega mesta. In s tem tudi pomembnejša, saj mora biti pri skrbnikih vsebin vedno zavedanje, da se vsakokratna objava, vsakokratna vsebina, pripravi na dostopen način.

Skrbnik vsebin ima z oblikovanjem in programiranjem določenih kar nekaj omejitev, mimo katerih ne more. Njegova naloga je redna priprava novih vsebin, naj si bodo to spremembe vstopnih ali ostalih strani ali priprava člankov, novic ali drugačnih vsebin, ki sledijo vnaprej pripravljenim predlogam in izgledu.

Vseeno pa mora pri svoji pripravi skrbeti, da znotraj vsebin, ki jih objavlja določa ustrezne naslove H1-H6 ter, da vsebino ustrezno strukturira tudi po odstavkih.

Zakaj skrbeti za dobro strukturo strani

Ustrezna struktura strani je pomembna za uporabnike spletnega mesta, ki nimajo oviranosti, saj lažje identificirajo vsebine in na strani hitreje najdejo, kar jih zanima – še posebej, če je stran obsežnejša in vsebinsko široka. Ustrezna struktura strani je istočasno nepogrešljiva za osebe z oviranostmi, saj preko nje veliko lažje dobijo vpogled v vsebine, ki so na strani in sama področja strani.

Ustrezna struktura je eno najpomembnejših področij, vsekakor vredno preučevanja in načrtovanja, pri zagotavljanju dostopnosti spletnega mesta.

Več od oblikovanja, programiranja in priprave vsebin

Pri kompleksnejših ali obsežnejših spletnih mestih, pri spletnih aplikacijah, pri aktivnostih, ki trajajo dlje ali zahtevajo več korakov in več razmisleka, je potrebno ustrezno načrtovati tudi uporabniško izkušnjo (UX).

Tudi pri načrtovanju uporabniške izkušnje moramo poseči po principih univerzalnosti in poskrbeti, da je uporabniška izkušnja načrtovana glede na različne vrste uporabnikov in da ni prilagojena neki specifični ciljni skupini ter s tem morda popolnoma nedostopna ostalim.

To žal ni nikjer na trdno zapisano v smernicah dostopnosti, je pa lahko dostopna vsebina, za primer vzemimo kompleksen meni, kjer je s pritiskom na tipko TAB dostopen prav vsak element menija in bi ga tehnično gledano lahko smatrali za dostopnega, popolnoma neuporaben, če mora uporabnik, da pride do neke postavke v meniju TAB pritisniti 70x. In take primere najdemo v Sloveniji.