Curs “Testare si Evaluare Aplicatii Web”
Yüklə 174,95 Kb.
|
- Bu səhifədəki naviqasiya:
- Pasul nr. 2 – Demonstrarea accesibilității
- Conținutul demonstrației
- Utilizarea demonstrației
- Barierele de accesibilitate
- Despre paginile web ale demonstrației
- 26 pași pentru a crește accesibilitatea unui site
- Text “alt” și conținut alternativ
- Transcrierea (transcript-ul) unui conținut video
- "Click aici!" sau link cu text descriptiv
- Spațiul dintre link-uri
- Fără linkuri realizate folosind JavaScript
- Utilizați atributul lang
- Nu animați ceva dacă nu e necesar
- Nu creați conținut dependent de o anumită culoare
- Etichetele câmpurilor formularelor
- Adresa ta de e-mail
- Structura paginii: folosiți tag-uri semnificative
- Structura paginii: împărțiți conținutul în blocuri de informație
- Marcați corect textul (abbr, cite, p, li, etc.)
- Evitați refresh-ul prin utilizarea tag-ului “meta”
- Dimensiunea textului trebuie să fie relativă
- Dimensiuni de font mai mari!
- Foi de stil alternative (CSS)
- Adaugă un sitemap (HTML, nu XML)
- Testarea folosind utilizatori și feedback
- Declarație de accesibilitate
Exerciții:
Pasul nr. 2 – Demonstrarea accesibilitățiiAcest pas presupune:
Demonstrația “înainte și după” reprezintă un set de pagini web ale unui site (demo), care au ca scop să evidențieze diferitele probleme de accesibilitate, folosind un exemplu practic. Demonstrația conține un site inaccesibil, o versiune accesibilă, precum și informații asupra problemelor site-ului inaccesibil. Această demonstrație nu este menită să acopere toate problemele detaliate în WCAG, nici să dea o listă completă de exemple, ci să demonstreze doar câteva aspecte importante ale accesibilității online.
Demonstrația servește o varietate de scopuri, cum ar fi creșterea gradului de conștientizare cu privire la problema accesibilizării paginilor web sau pentru furnizarea de exemple practice pentru dezvoltatorii web. Unele dintre metode comune de demonstrare sunt descrise mai jos:
În cele ce urmează, vom discuta despre principalele obstacole de accesibilitate în demonstrația "Înainte și după". Pentru o introducere în demonstrație, vezi punctul anterior din acest capitol. Pentru detalii cu privire la barierele de accesibilitate la demonstrație, consultați raportul de accesibilitate web: http://www.w3.org/WAI/EO/2005/Demo/report/. Despre paginile web ale demonstrațieiPaginile demonstrației au fost dezvoltate folosind șabloane pentru a defini structura generală și designul vizual. Barierele de accesibilitate în șabloanele paginii sunt, prin urmare, în mod automat prezente în toate celelalte pagini ale site-ului Web. Paginile web ale demonstrației conțin și alte bariere de accesibilitate în afara celor provenite din șabloane. Pagina principală
Bariere
Pagina știri
Bariere
Pagina Bilete
Bariere
Pagina formular
Bariere
Pagina șablon
Bariere
O mulțime de site-uri au astăzi probleme de accesibilitate. Programatorii tind să realizeze cod pentru site-uri fără a se gândi la impactul pe care codul rezultat l-ar putea avea asupra utilizatorilor cărora le este mai dificil să acceseze și să utilizeze conținutul web. Totuși, majoritatea problemelor sunt minore, și pot fi ușor rezolvate, prin luarea unor măsuri care să crească accesibilitatea site-ului, fără să afecteze designul sau funcționalitatea. În continuare vom discuta despre 26 de lucruri care pot ajuta la creșterea accesibilității unui site. Următoarele idei nu sunt prezentate în ordine a importanței iar lista nu acoperă toate lucrurile care pot fi făcute pentru a crește accesibilitatea. Dar, dacă veți pune în aplicare măcar o parte din aceste modificări, pe lângă o accesibilitate mai bună, site-ul va ajunge să fie mai popular și în cadrul rezultatelor returnate de motoarele de căutare.
Primul pas este ușor. Fiecare imagine și obiect de pe site-ul tău ar trebui să ofere un text alternativ, care descrie imaginea. Asigurați-vă că textul “alt” este informativ, rolul său fiind acela de a oferii o descriere a conținutului imaginii. Câteva exemple foarte simple: 
Dacă imaginea sau obiectul conține informații care nu sunt detaliate în altă parte pe pagină, atunci trebuie să vă asigurați că aceasta va transmite informațiile și într-un mod non-vizual.
Există tot mai mult conținut video pe web. Dar acest lucru poate fi o barieră pentru mulți utilizatori. Dacă nu există nici o sursă alternativă pentru conținutul video, acesta devine complet inaccesibil. Nu vom intra în probleme de subtitrare sau de codec-uri. Dacă adăugați o transcriere text unui conținut video, sau măcar un rezumat al punctelor importante, acest fapt va ajuta nu doar utilizatorii care nu pot accesa filmul ci și pe utilizatorii care doresc să vadă rapid doar unele informații. În plus aceasta va permite și indexarea textului de către motoarele de căutare. Toată lumea câștigă!
Un caracteristică folosită de către programele de interpretare (readere), este aceea de a citi link-urile de pe pagină sub forma unei liste. Utilizatorul cu dizabilități poate astfel naviga rapid la informațiile de care are nevoie. Din dorința de a rezolva rapid problema link-urilor acestea sunt însă scoase din context așa că trebuie să luați măsuri pentru a vă asigura că fiecare legătură are sens și în afara contextului. Greșit: Click aici pentru a citi mai multe despre Taj Mahal. Corect: The Taj Mahal: Istorie și Arhitectura. Folosirea textului ancoră descriptiv face link-urile mai valoroase pentru motoarele de căutare.
Este foarte greu pentru readere să citească conținutul paginii atunci când nu există nici un spațiu între link-urile aflate unele lângă altele. Problema devine clară în cazul în care un link se termină și începe altul. Acest lucru se poate întâmpla într-un meniu greșit conceput. Soluția este de a vă asigura că există întotdeauna cel puțin un spațiu sau un delimitator între link-urile consecutive. Aceasta se poate face cu un separator vizibil (o cratimă sau o liniuță), ori prin plasarea link-urilor într-o listă și folosirea CSS pentru a realiza un design cât mai bun. Greșit: Pagina 1 Pagina 2 Pagina 3 Pagina 4 Corect:
Nu e nimic greșit în a folosi JavaScript pentru a îmbogății experiența web dar asigurați-vă că link-urile nu sunt dependente de aceste script uri. De exemplu, dacă doriți să afișați unele informații despre produs într-o fereastră popup, utilizați un link simplu și apoi suprascrie-l cu cod JS pentru a realiza un popup. Greșit: Temperatura în următoarele zile Corect: Temperatura în următoarele zile
Un sfat foarte simplu: asigurați-vă că limba pe care o utilizați este definită în conținutul paginii. Dacă toată pagina este într-o singură limbă, trebii declarată doar pentru elementul HTML: Dacă aveți o parte din pagină într-o altă limbă, utilizați atributul lang pentru a identifica în secțiunea: Ceci est en français
În 1998, se utilizau GIF-uri animate care reprezentau globuri care se roteau sau copilași care dansau. În 2008, există animații Flash. De ce este acest paragraf un sfat de accesibilitate și nu un sfat de design? Distragerea atenției este un lucru negativ, deoarece face ca înțelegerea conținutului paginii să fie mult mai grea pentru mulți utilizatori, ca să nu mai vorbim de tehnologia Flash care este „inamicul nr. 1” al accesibilității.
Una dintre cele mai frecvente probleme de accesibilitate este cea legată de utilizarea inadecvată a culorilor. Una dintre cele mai frecvente deficiențe de vedere este discromatopsia, adică imposibilitatea de a distinge culorile. Combinația roșu/verde este foarte utilizată în realizarea site-urilor și problematică din acest punct de vedere. Dacă aveți o diagramă radială-cu segmente roșii și verzi pe pagina dvs. întrebați vă dacă aceasta va fi utilizabilă (se va putea face distincție între culori) în tonuri de gri. Asigurați-vă că alăturați culori cu un contrast puternic între ele chiar și în tonuri de gri.
Tot mai multe formulare online folosesc un sistem de reducere a spam-ul (Captcha) dar acest lucru îi poate împiedica pe utilizatorii cu deficiențe de vedere, să trimită formularul. Trebuie deci să înlocuiți sistemul sau să oferiți o alternativă la un Captcha vizual. Sistemele "Logice" care pun o întrebare la care doar un om ar putea să răspundă devin tot mai populare, însă și acestea pot reduce accesibilitatea, de această dată însă, pentru persoanele cu dizabilități cognitive.
Folosiți tagul “label” în cadrul formularelor: Label asociază un text cu câmpul editabil corespunzător din formularul online, astfel încât un screenreader poate înțelege ce informație trebuie introdusă în respectivul câmp. Label este deosebit de util pentru butoanele radio, pentru că în cele mai multe browsere moderne aveți posibilitatea să faceți clic textul etichetei dar și pe butonul radio fiind astfel mai ușor de utilizat pentru cei cu deficiențe motorii.
Consultați următorul ghid: Tabele accesibile - Ce trebuie făcut și ce nu. Dacă utilizați tabele cu un design simplu, atunci nu este o mare problemă, dar încercați să evitați utilizarea de tabele imbricate (unele în altele), pentru că acest aspect face foarte dificil pentru utilizatorii de screenreadere să asculte datele introduse în fiecare celulă din tabel, sau să citească o linie la un moment dat.
Aceste două sfaturi fac interpretarea textului, cu ajutorul unui cititor de ecran, mult mai ușoară, și poate ajuta motoarele de căutare. În primul rând, asigurați-vă că folosiți corect tag-urile HTML pentru a separa pagini și titluri de secțiuni: Greșit: Titlul paginii mele Corect: Puteți folosi H1, H2, H3, H4, H5 și H6 pentru a arăta ierarhia în cadrul paginii. Folosiți apoi CSS pentru a realiza un design cât mai bun.
Imaginați-vă cum ar fi fost dacă acest conținut ar fi fost pus într-un singur bloc de text - nimeni n-ar citi mai mult decât prima frază. Asigurați-vă că faceți conținutul dumneavoastră ușor de citit, ușor și rapid de înțeles, prin folosirea de spații între paragrafe.
Nu încercați să impresionați audiența cu cantitatea de informații afișate. Folosiți cuvinte simple. Evitați cuvinte pompoase, tehnice sau mai puțin cunoscute pentru marea majoritate a vizitatorilor.
Utilizați elemente HTML pentru a da sens textului. Ar trebui să utilizați pentru paragrafe, UL / li pentru liste, pentru acronime. Pentru mai multe detalii despre tag-uri consultați lista organizațională HTML la http://htmlhelp.com/reference/html40/olist.html
Nu utilizați refresh-ul folosind tag-ul meta. Nu folosiți niciodată un refresh pentru a reîncărca pagina, deoarece screenreaderul va relua citirea paginii, de la începutul acesteia, indiferent unde s-ar afla.
Utilizați un <noscript> pentru fiecare tag <script>. Secțiunea <noscript> va fi utilă celor cu JavaScript dezactivat dar și roboților motoarelor de căutare.
Evitați setarea dimensiunii textului utilizând unități de măsură absolute gen „px” sau „pt”. În schimb puteți folosi unitățile de măsură relative de tipul „%” sau „em” (trebuie specificate în codul CSS), pentru a specifica dimensiunea relativă a textului dar și a altor elemente ale paginii.
Problema dimensiuni prea mici a fonturilor utilizate în paginile web este chiar mai frecvent întâlnită decât cea contrastelor slabe dintre culori. Mulți utilizatori de peste o anumită vârstă nu pot citi textul de mici dimensiuni, fără să întâmpine dificultăți. Ați putea utiliza în practică și fonturi mai mici de 10 pixeli, dar utilizatorii vor abandona site-ul repede și în masă, chiar dacă ați implementat dimensiuni relative pentru fonturi, așa cum a fost sugerat mai sus. Asigurați-vă că aveți corpul de text mai mare, și folosiți fonturi mai lizibile, cum ar fi Arial sau Verdana, fonturi cu aspect mai mare la aceeași dimensiune cu restul texului.
În CSS, există modele alternative pentru utilizatorii cu anumite probleme. Foile de stil alternative pot fi apelate de către o funcție JavaScript simplă, care folosește un cookie pentru a păstra preferințele utilizatorului. Puteți oferi pagina de text cu diferite dimensiuni sau poate chiar o versiune de înalt contrast.
După ce ați împărțit în secțiuni pagina, puteți folosi link-uri "Sari la…". De exemplu, în cazul în care meniul este pe primul loc în pagină, puteți plasa un link pentru a trece la conținutul principal – și/sau vice-versa. Aceste link-uri trebuie să fie vizibile, în mod special pentru cei care navighează prin intermediul tastaturii.
Încercați să reduceți greutatea paginii (dimensiunea fișierului), cât de mult posibil. Acesta se va descărca mai repede, acesta va fi mai ușor de analizat (pentru că v-ați curățat HTML-ul), și va fi mai ușor de înțeles.
Sitemap-urile în format XML sunt utile pentru accesul automat al roboților motoarelor de căutare, dar e bine să aveți și harta în format HTML pentru vizitatorii frecvenți. Un sitemap bine-organizat poate fi folosit ca un punct de plecare pentru accesarea de conținut.
Doriți să obțineți o impresie despre modul în care site-ul dumneavoastră funcționează într-un mediu non vizual? Descărcați browserul cu afișare în format text, numit Lynx, și vedeți cum funcționează site-ul.
Dacă aveți un site, care este interactiv (e-commerce etc.), efectuarea testelor de către utilizatori, chiar dacă pe o bază informală, vă poate ajuta să identificați problemele întâmpinate de către utilizatori reali. În cel mai simplu mod, cereți familiei sau prietenilor din diferite grupuri de vârstă și cu aptitudini tehnice, să realizeze sarcini simple pe site-ul tău. Urmăriți-i cu atenție, fără să interveniți, și luați notițe. Când sarcina este finalizată/abandonată, ascultați observațiile lor cu privire la experiența avută pe site-ul dvs.
Odată ce ați pus în aplicare modificările pe site-ul dvs., este momentul pentru a redacta o declarație de accesibilitate pe care utilizatorii să o poată consulta. Puteți include o listă cu toate accesskeys pe care le ați definit, pașii care trebuie adoptați pentru îmbunătățirea accesibilității, gradul în care site-ul respectă standardele de accesibilitate publicate și puteți solicita chiar și un feedback din partea utilizatorilor cu privire la modul în care consideră ei că ar putea fi îmbunătățit site-ul. Yüklə 174,95 Kb. Dostları ilə paylaş:
|