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 p Yüklə 174,95 Kb. Dostları ilə paylaş:
|