|
Prima pagină > Servicii Pontes > Ghid de accesibilizare site-uri
Ghid de accesibilizare site-uri
În cele ce urmează sunt prezentate câteva informaţii utile webmaster-ilor care doresc ca site-urile lor să fie accesibile persoanelor cu dizabilităţi vizuale, în special celor care utilizează screen-reader-ul JAWS for Windows.
Menţionăm că acest ghid este realizat şi de către utilizatori nevăzători de internet, iar elementele prezentate ca fiind utile pentru o minimă accesibilitate web sunt alese în aşa fel încât să nu aibă influenţă asupra design-ului site-urilor.
Orice site poate fi accesibil, doar în cazul în care este conceput în întregime în Flash ar fi serioase probleme, în această situaţie, singura soluţie fiind crearea unei alternative text a paginilor, care să conţină cel puţin informaţia esenţială.
Dacă aveţi sugestii, propuneri, exemple de tag-uri utile, discutaţi problema în topic-ul de pe Forumul Pontes.
Dacă doriţi detalii suplimentare, scrieţi la site (a rond) pontes.ro. Puteţi trimite adresa site-ului dumneavoastră, iar un nevăzător sau o persoană care cunoaşte bine problema accesibilităţii vă va putea spune cu ce dificultăţi se confruntă şi ce ar fi necesar pentru o optimă îmbunătăţire.
Mai jos sunt secţiuni pe elemente care sunt sau ar fi necesare pentru ca o persoană care utilizează screen-reader-ul Jaws for Windows să poată naviga cât mai uşor pe un site.
Tag-urile sunt scrise de-a lungul ghidului în caractere italice pentru a fi deosebite de restul textului.
Headingurile
Elementul esenţial este HEADING-ul.
Ar fi recomandată utilizarea a cel puţin un heading în cadrul site-ului, acesta fiind plasat la începutul conţinutului, fie el articol sau secvenţa paginii din care se deschid articolele. De exemplu în cazul unui ziar online care de obicei are multe link-uri, meniuri etc., utilizatorul de Jaws are tendinţa ca după ce a deschis o secţiune sau un articol să apese tasta "h" care îl duce la primul heading întâlnit. Este atunci foarte simplu ca de acolo să îşi aleagă mai departe cea ce ar dori după ce a ales ceva din meniul principal sau să inceapă din acel loc să citească conţinutul unui articol.
Nu contează atât de mult nivelul heading-ului, de la 1 la 6, dar, recomandabil este folosirea celui de nivel 1 în cazul începutului conţinutului, astfel încât, dacă mai sunt alte subcapitole, subsecţiuni în cadrul conţinutului apărut după încărcarea unei secţiuni principale, să se folosească heading-urile de nivel 2, 3 etc..
Codul HTML:
<H1>TITLUL SECŢIUNII SAU AL ARTICOLULUI</H1> - este pentru heading de nivel 1. În loc de 1 se poate folosi 2, 3, 4, 5, 6.
Folosirea acestui tag face ca Jaws să anunţe în timpul plimbării pe pagină: "Heading Level 1 - TITLUL SECŢIUNII SAU AL ARTICOLULUI". În loc de "Level 1" va citi "Level 2", "Level 3" etc., în funcţie de numărul folosit în tag-ul heading.
Marele avantaj al heading-urilor este că Jaws sare direct la ele la apăsarea tastei "h", astfel că nu este nevoie de o deplasare înceată cu săgeţile peste toate link-urile, imaginile şi alte elemente aflate înainte de conţinutul încărcat la apăsarea vreunui link.
Poate fi folosită orice formatare, orice mărime a textului, aliniere etc., Jaws va citi invariabil "Heading Level X - Titlu", unde "x" = 1, 2, 3, 4, 5 sau 6.
Recomandabilă este formatarea heading-urilor în CSS, codul HTML arătând astfel:
<H1 CLASS="titlu">TITLUL SECŢIUNII SAU AL ARTICOLULUI</H1> - "CLASS="titlu"" fiind o clasă stabilită în fişierul CSS al site-ului.
Începutul paginii
ALT-ul pentru imagini
Se impune categoric denumirea imaginilor în cadrul unui site, mai ales dacă aceste imagini conţin text fiind link-uri dintr-un meniu.
Se întâmplă adesea ca unele site-uri să aibă un meniu realizat cu anumite programe de creare design, programe care pentru link-uri pun nişte imagini. Dacă aceste imagini nu conţin în cod atributul ALT, utilizatorul Jaws nu va şti în nici un caz pe ce link se află. De asemenea, dacă este vorba de o siglă sau un banner, utilizatorul nevăzător poate ar fi curios de o mică descriere a imaginii, Jaws citind în cazul existenţei unui ALT: "Graphic - DESCRIERE / DENUMIRE".
Codul HTML:
<IMG SRC="imagine.jpg" ALT="DESCRIERE / DENUMIRE">
Pot fi folosite oricare alte atribute în cadrul tagului <IMG> - BORDER="x", HEIGHT="y", WIDTH="x" etc. - fără să fie influenţat comportamentul Jaws-ului.
Începutul paginii
Text ajutător ascuns
Este util şi foarte important ca anumite informaţii să fie plasate ascuns în paginile unui site, informaţii care nu sunt vizibile, dar pot fi citite de Jaws.
Foarte comune sunt informaţii de genul: "Începutul meniului principal",, "Sfârşitul meniului principal", Aceste secvenţe invizibile, dar citibile cu Jaws, îl pot ajuta pe vizitatorul nevăzător să îşi dea seama din ce loc anume începe meniul principal şi unde se termină, astfel neexistând riscul unei deplasări haotice pe site şi confundarea link-urilor din meniu cu alte link-uri. De asemenea, după tag-ul <BODY>, adică pentru Jaws chiar în cel mai de sus loc al paginii, ar fi excelentă o mică descriere a site-ului, ca de exemplu: "În partea stângă se află meniul principal, în partea de sus se află un banner, iar în centru-dreapta apare conţinutul; puteţi folosi tasta "h" pentru a ajunge direct la conţinutul care are la început un heading de nivel 1".
Codul HTML şi CSS:
<P CLASS="hidden">Informaţia ascunsă</P>
Secvenţa de mai sus trebuie inserată în locul dorit pe pagină, având în acelaşi timp fişierul CSS al site-ului un anume cod, mai precis definirea acelui <P> (paragraf) să fie ascuns.
Fişierul CSS trebuie să conţină următorul cod:
.hidden {
position:absolute;
left:0px;
top:-501px;
width:1px;
height:1px;
overflow:hidden;
}
Având secvenţa de mai sus în fişierul CSS, practic punând atributul CLASS="hidden" unui tag <P> sau <DIV>, va ascunde textul cuprins până la închiderea tag-ului respectiv, fără să afecteze în vreun fel design-ul paginilor WEB.
Începutul paginii
Salt directla o secvenţă
Pentru a ajunge direct la o anume secvenţă din aceeaşi pagină, pot fi folosite Same Page Link-uri. Acestea sunt link-uri care, fiind apăsate, duc cursorul direct la o anumită zonă setată ca ţintă. Seamănă ca utilitate cu heading-urile, dar nu le poate înlocui pe acestea, fiind mult mai uşor de sărit prin apăsarea tastei "h". Aceste Same Page Link-uri pot completa accesibilitatea, putând fi setate să ducă vizitatorul la începutul meniului principal sau de la sfârşitul paginii direct la începutul acesteia, în locurile menţionate nefiind cel mai probabil plasat vreun heading pentru a ajunge uşor cu tasta "h".
Codul HTML:
<A HREF="#menu">Salt la meniu</A>
Secvenţa de mai sus afişează un link cu textul "Salt la meniu", pe care Jaws îl va citi "Same Page Link - Salt la meniu". Acest link ar fi bine să fie plasat undeva la începutul paginii, cât mai aproape de tag-ul <BODY> pentru a se ajunge uşor şi repede la el. Poate fi inclus într-un paragraf sau div ascuns, pentru a nu afecta design-ul site-ului..
Definirea ţintei:
<A NAME="menu"></A>
Rândul de mai sus trebuie plasat în locul în care se doreşte să ajungă cursorul la apăsarea Same Page Link-ului aflat în apropierea tag-ului <BODY>. Acest cod, care marchează ţinta, nu este vizibil în pagină, nici Jaws nu citeşte nimic, el doar aduce cursorul de la un link de tip Same Page.
Aceste link-uri pot fi folosite convenabil şi de persoanele fără dizabilităţi de vedere, în cazul paginilor mari care au un cuprins la început, aşa cum este cea de faţă în care a fost utilizată tehnica.
Începutul paginii
Access Key - scurtături la link-uri
AccessKey este un atribut pentru link-uri, care creează scurtături de taste. De exemplu în pagina de faţă, folosind combinaţia de taste "alt + 0" / "alt + shift + 0", cursorul se plasează pe primul link din meniul principal, numit "Pagina principală".
Codul HTML
<A HREF="fisier.php" ACCESSKEY="x">Clik aici</A>
Scriind acest cod va rezulta un link numit "Click aici", link la care se va putea ajunge folosind combinaţia de taste "alt+ x" / "alt + shift + x". Prima combinaţie de taste se foloseşte în Internet Explorer, iar cea de-a doua, cu "shift" se foloseşte în Mozilla Firefox, în primul caz cursorul este doar plasat pe link-ul "Click aici", în cel de-al doilea chiar şi acţionează link-ul, urmând ca pagina la care duce legătura să se încarce automat, fără a mai fi nevoie de "enter". În oricare dintre browsere, Jaws anunţă combinaţia de taste, în caz că a fost folosit atributul ACCESSKEY="x", unde "x" poate fi orice caracter.
Combinaţiile de taste pot fi utile în cazul unui meniu din care vizitatorul schimbă des secţiunile, ori ca modalitate de-a ajunge la anumite link-uri importante, ca în cazul site-ului de faţă, care are definit la primul link din meniul principal un ACCESSKEY="0", astfel existând încă o metodă practică de a lăsa vizitatorul să ajungă uşor şi rapid la începutul meniului.
Începutul paginii
Landmark-urile - Atributul ROLE
Începând cu Jaws 10, există posibilitatea marcării zonelor standard ale paginilor cu "landmarks".
Există câteva zone standard pe o oarecare pagină a unui site: zona banner-ului sau a logo-ului, zona meniului principal, zona conţinutului central, eventual o zonă cu unealta de căutare în site, eventual o zonă unde există o aplicaţie flash sau php cu butoane, o zonă cu informaţii suplimentare (de exemplu temperatura într-o anume locaţie) şi partea de jos care conţine informaţii generale (de exemplu Webmaster-ul, designer-ul etc.).
Toate aceste zone pot fi marcate după un standard anume, folosind atributul ROLE adăugat la orice tag HTML, avându-l ca parametru pe unul dintre următoarele: ="banner", ="navigation", ="main", ="search", ="complementary", ="application" sau ="contentinfo".
Codul HTML:
<DIV ROLE="navigation">Meniul principal</DIV>
Având secvenţa de cod de mai sus, Jaws va citi în momentul când ajunge la deschiderea DIV-ului: "Navigation Landmark".
Atributul ROLE poate fi folosit în cadrul oricărui tag HTML, <UL>, <TD>, <P> etc.. De menţionat că, pentru a se păstra un standard, doar parametrii menţionaţi mai sus, deasupra codului HTML, pot fi interpretaţi de Jaws. Pot fi marcate toate zonele sau cele considerate folositoare pentru un anume site. Marele avantaj este că în acest fel secţiunile unei pagini web pot fi găsite foarte uşor cu tasta ";" (punct şi virgulă), care mută cursorul pe landmark-uri în ordinea plasării lor în codul sursă al paginii.
În pagina curentă, cea a ghidului de accesibilizare site-uri, au fost folosite în total 5 landmark-uri pe care le menţionăm în continuare pentru a exemplifica întreaga chestiune:
Primul landmark este la câmpul de căutare în site, câmp care se află într-o celulă de tabel, - <TD ROLE="search"> - Jaws ajunge la apăsarea tastei ";" (punct şi virgulă) înaintea edit-box-ului de căutare şi citeşte automat "Search Landmark".
Al doilea landmark este plasat la începutul meniului principal - <DIV ROLE="navigation"> - Jaws ajunge aici la cea de-a doua apăsare a tastei ";" (punct şi virgulă) şi citeşte "Navigation Landmark".
Al treilea landmark este plasat înainte de informaţiile meteo din Cluj-Napoca şi Bucureşti - <TD ROLE="complementary"> - Jaws citeşte "Complementary Landmark" (am considerat că e o zonă cu informaţie complementară, căutată de mulţi vizitatori ai site-ului Pontes).
Al patrulea landmark este la începutul conţinutului central al paginii - <TD ROLE="main"> - Jaws citeşte "Main Landmark"; este echivalentul heading-ului în acest caz, dar am utilizat încă o alternativă pentru a îndeplini un standard.
Ultimul landmark în cazul prezentat este înaintea informaţiilor din footer-ul paginii, unde apare webmaster-ul, designer-ul şi câteva sigle, - <TD ROLE="contentinfo"> - Jaws citeşte "Content Info Landmark".
După cum s-a observat, nu am utilizat "Banner Landmark" şi "Application Landmark".
Atenţie! Atributul ROLE nu este luat în calcul de W3C pentru HTML 4.01 Transitional sau XHTML 1.1, fapt care va duce la afisarea formală a unei erori de validare în cazul folosirii lui. Eroarea este una absolut formală, atributul neavând vreo influenţă negativă, indiferent de browser-ul utilizat.
Dacă este vorba de un site valid, la care afişarea erorilor nu ar da bine, există următoarea tehnică prin care landmark-urile, ROLE rămâne la fel, doar că validatorul nu detectează nici o eroare, atributul fiind inserat în pagini cu ajutorul unui sistem JavaScript, după cum se arată în continuare.
Mai întâi trebuie inclusă următoarea secvenţă în header-ul paginilor:
<SCRIPT TYPE="text/javascript" SRC="landmarks.js"> </SCRIPT>
Secvenţa de mai sus se referă la un fişier .JS care poate fi luat de la link-ul următor:
Fişierul "landmarks.js"
Ca alternativă, fişierul poate fi creat manual cu un editor notepad în care să daţi paste la următoarea secvenţă de cod JavaScript:
(ÎNCEPUT COD JavaScript)
function setRoleAttribute(id, rolevalue) {
if(document.getElementById(id)) {
document.getElementById(id).setAttribute("role", rolevalue);
}
}
function setAriaRoleElementsById() {
setRoleAttribute("navigation", "navigation");
setRoleAttribute("main", "main");
setRoleAttribute("complementary", "complementary");
setRoleAttribute("contentinfo", "contentinfo");
setRoleAttribute("application", "application");
setRoleAttribute("banner", "banner");
setRoleAttribute("search", "search");
}
window.onload=function(){ setAriaRoleElementsById(); }
(SFÂRŞIT COD JavaScript)
Având toate acestea, nu mai trebuie decât folosirea atributului ROLE cu sinonimul ID creat.
Codul HTML:
<DIV ID="navigation">Meniul principal</DIV>
Începutul paginii
Tag-ul LABEL în formulare
Una dintre problemele frecvente care pot apărea este cea a edit-box-urilor din formulare.
Jaws ştie să anunţe textul cel mai apropiat de un <INPUT...> ca fiind indicaţia de completat pentru acesta, însă nu întotdeauna se potriveşte, iar unele screen-readere, precum Nuance Talks, folosit pe telefoanele mobile cu Symbian, nu vor spune decât că acolo se află un câmp de editare, fiind posibil ca nevăzătorul să nu ştie ce trebuie scris în el. Soluţia este eticheta <LABEL>, suficientă pentru a nu mai exista posibile neplăceri.
Codul HTML:
<LABEL FOR="id-câmp">Numele dvs</LABEL>
<INPUT ID="id-câmp" TYPE="text">
Pe primul rând este definită eticheta pentru câmpul de editare cu ID-ul "id-câmp"; având această etichetă, screen-reader-ul va citi cu siguranţă că în acel câmp de editare trebuie scris numele.
Începutul paginii
Detectarea automată a limbii de către Jaws
Screen-reader-ul Jaws reuşeşte să detecteze limba unei pagini sau a unei secţiuni WEB dacă acestea sunt marcate cu atributul LANG="x", unde x poate fi "it", "en-us", "en-uk" etc., în funcţie de limba existentă.
Jaws are câteva limbi mari în sintetizatorul implicit, Eloquence: engleză americană, engleză britanică, germană, italiană, franceză europeană, franceză canadiană, spaniolă castiliană, spaniolă sud-americană, portugheză braziliană şi finlandeză. În mod normal, dacă utilizatorul de Jaws are setat programul pe "Detect language - On", limba se schimba automat când se ajunge pe o pagină sau pe o secvenţă de text marcate.
Codul HTML
<HTML LANG="en-us"> - pentru a marca o anume pagină ca fiind în limba engleză americană;
<SPAN LANG="it">Secvenţă în limba italiană</SPAN> - pentru a marca o bucată de text ca fiind în limba italiană.
Aceste tag-uri sunt utile mai mult pentru cei care navighează pe site-uri în limba română care au şi pagini sau secţiuni în alte limbi. De obicei, neexistând în sintetizatorul Eloquence limba română, nevăzătorii îşi dezactivează opţiunea "Detect language automatically".
Există riscul ca unele programe de realizare HTML să insereze automat astfel de tag-uri, în acest caz fiind necesară o verificare a codului pentru a nu exista riscul să fie paragrafe marcate greşit, aiurea, astfel sintetizatorul tot schimbându-şi limba din loc în loc, fapt care va duce la o enervare a vizitatorului.
Începutul paginii
Ghid realizat de:
Discutaţi, propuneţi, sugeraţi, corectaţi tag-uri de accesibilitate web în topic-ul de pe Forumul Pontes!
|
