Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Prezentare Wurbe

1,713 views

Published on

"Tabele si formulare accesibile" - prezentată la Wurbe 7.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Prezentare Wurbe

  1. 1. Tabele și Formulare Accesibile Alexandru Badiu
  2. 2. Pe scurt • Se referă la a face web-ul accesibil persoanelor cu diverse tipuri de deficiențe • Deficiențe vizuale: persoane cu vederea limitată sau oarbe • Deficiențe motorii: persoane care nu își pot mișca mâinile sau a căror mișcare este afectată de spasme • Accesibilitatea este benefică pentru toți • Cel mai simplu exemplu: atributul ALT al tagului IMG Tabele si formulare accesibile - Alexandru Badiu
  3. 3. Componente • W3C WAI (Web Accessibility Initiative) coordonează dezvoltarea componentelor • Specificații tehnice (XHTML, CSS), ATAG (Authoring Tool Accessbility Guidelines), UAAG (User Agent Accessibility Guidelines), WCAG (Web Content Accessibility Guidelines), ARIA (Accessible Rich Internet Applications) • 3 nivele de prioritate (trebuie, ar trebui, ar fi frumos dacă) Tabele si formulare accesibile - Alexandru Badiu
  4. 4. Implicații legale • Procese: ADA vs City of San Jose, Maguire vs Sydney Organising Committee for the Olympic Games • Section 508 (SUA, Australia, Danemarca) • Țări cu legi legate de accesibilitate: Austria, Canada, Irlanda, Singapore etc Tabele si formulare accesibile - Alexandru Badiu
  5. 5. “Romania - o țară bananieră” parlamentar român Tabele si formulare accesibile - Alexandru Badiu
  6. 6. Implicații legale • Dar nu când vine vorba de accesibilitate • Proiectul eEurope al Comisiei Europene • Acesta urmează WAI • Comunicatul Comisiei Europene catre Consiliul, Parlamentul European, Comitetul Economic si Social si Comitetul Regiunilor din 2001 • România: Legea nr. 161 din 19 Aprilie 2003 • Art. 8: accesul egal, nediscriminatoriu, la informații și servicii publice, inclusiv pentru persoanele cu handicap • Art. 30: accesibilitatea și disponibilitatea informațiilor și serviciilor publice oferite Tabele si formulare accesibile - Alexandru Badiu
  7. 7. Implicații legale Pe lângă legi este nevoie și de educarea anumitor părți Tabele si formulare accesibile - Alexandru Badiu
  8. 8. Unelte • Screen readers • Generale, pentru întreg sistemul de operare • Specializate, pentru web • Mod de prezentare a informațiilor • Sinteză vocală • Braille • În general citirea textului se face de la stânga la dreapta, de sus în jos • Navigarea de la un element activ la altul se face prin taste Tabele si formulare accesibile - Alexandru Badiu
  9. 9. Unelte • Windows • HAL • JAWS • Window-Eyes • Mac • VoiceOver • Proloquo • *nix • Gnopernicus • Emacspeak • Fire Vox - AxsJAX • Microsoft Active Accessibility Tabele si formulare accesibile - Alexandru Badiu
  10. 10. Tabele - pentru layout • Tabelele sunt linearizate • Tabelul de mai sus este citit astfel: R1 C1, R1 C2, R2 C1, R2 C2 • Cum va fi linearizat tabelul de mai sus? Tabele si formulare accesibile - Alexandru Badiu
  11. 11. Tabele - pentru layout • Odată ajuns la o celulă, screen readerul citește tot conținutul ei • Rowspan si colspan fac linearizarea să aibă efecte nedorite • În exemplul precedent pentru a asculta conținutul principal se parcurge toată pagina (mai puțin footer-ul) • Pentru verificarea rapidă a paginilor • Lynx - browser web text disponibil pe Win / Mac / *nix • http://www.delorie.com/web/lynxview.html Tabele si formulare accesibile - Alexandru Badiu
  12. 12. Tabele - pentru layout • WAI spune: Folosiți tabele pentru layout doar dacă au sens linearizate • Soluții posibile • CSS • “Skip to content” • Aranjarea tabelei sub o altă formă Tabele si formulare accesibile - Alexandru Badiu
  13. 13. Tabele - pentru date • Informațiile din tabelele ce prezintă date nu au sens singure, ca în cazul precedent • Sensul lor este dat de antetele tabelului • Acestea sunt prezente, în general, în primul rând și în prima coloană • Un screen reader va încerca să anunțe, atunci când este schimbată celula curentă, cărei parte din antet(e) face parte • Tabele simple • Tabele cu mai multe nivele • Tabele neregulate Tabele si formulare accesibile - Alexandru Badiu
  14. 14. Tabele - pentru date Tabele simple Tabele si formulare accesibile - Alexandru Badiu
  15. 15. Tabele - pentru date Tabele simple Tabele si formulare accesibile - Alexandru Badiu
  16. 16. Tabele - pentru date Tabele cu mai multe nivele Tabele si formulare accesibile - Alexandru Badiu
  17. 17. Tabele - pentru date Tabele neregulate Tabele si formulare accesibile - Alexandru Badiu
  18. 18. Tabele Rezumat • Pentru tabelele simple este necesară identificarea antetelor prin tagul TH și atributul SCOPE • Pentru tabele cu mai multe niveluri sau tabele iregulare este necesară asocierea celulelor cu antetele lor prin cod • Acest lucru se face cu ajutorul atributelor ID si HEADERS • Titlul unui tabel trebuie specificat prin tagul CAPTION • Atributul SUMMARY poate (și este recomandat) fi folosit pentru o descriere succintă a conținutului tabelului Tabele si formulare accesibile - Alexandru Badiu
  19. 19. Formulare • Asocierea controalelor cu numele lor se face mult mai anevoios atunci când utilizatorul are o deficiență de vedere • Pentru utilizatorii orbi este și mai dificil • Section 508: formularele electronice trebuie să fie accesibile persoanelor cu handicap • WCAG • Titlul unui control, atunci când este asociat implicit, trebuie să fie poziționat astfel încât să aibă sens • Asocierea explicită este de preferat • Surprinzător acestea sunt cerințe de prioritate 2 Tabele si formulare accesibile - Alexandru Badiu
  20. 20. Formulare Tagurile INPUT de tip buton și BUTTON • În general folosirea lor nu pune probleme nimănui • De evitat atribut VALUE lipsă sau gol • Alt pentru <input type=”image”> • Alt pentru <button ...><img ...> Controale pentru text • Titlul trebuie sa fie “legat” de control nu numai vizual • Se poate face prin două moduri • Implicit ținând cont de linearizarea unui tabel / paginii web • Explicit folosind tagul LABEL și atributele FOR / ID Tabele si formulare accesibile - Alexandru Badiu
  21. 21. Untitled.html Date: Sunday, March 16, 2008 Formulare <tr> <td>Numele dumneavoastra:</td> Asocierea implicită ... </tr> <tr> <td><input type=quot;textquot; name=quot;numequot; value=quot;quot;></td> ... </tr> Untitled.html <p>Numele dumneavoastra: <input 16, 2008 Date: Sunday, March type=quot;textquot; name=quot;numequot; value=quot;quot;></p> <tr> <td> <tr> <td>Numele dumneavoastra:</td> Numele dumneavoastra:<br /> ... Prenumele dumneavoastra: </tr> </td> <tr> ... <td><input type=quot;textquot; name=quot;numequot; value=quot;quot;></td> </tr> ... </tr> <tr> <td> <p>Numele dumneavoastra: <input type=quot;textquot; name=quot;numequot; value=quot;quot;></p> <input type=quot;textquot; name=quot;numequot; value=quot;quot;><br /> <input <tr> type=quot;textquot; name=quot;prenumequot; value=quot;quot;> <td> Un screen reader va citi “Numele dumneavoastra”, “Control text cu numele nume” </td> Numele dumneavoastra:<br /> ... Prenumele dumneavoastra: </tr> ... </td> </tr> <tr> <td> <input type=quot;textquot; name=quot;numequot; value=quot;quot;><br /> <input type=quot;textquot; name=quot;prenumequot; value=quot;quot;> ... </td> </tr> Tabele si formulare accesibile - Alexandru Badiu
  22. 22. Untitled.html Formulare Sunday, March 16, 2008 Date: Untitled.html Asocierea explicită Sunday, March 16, 2008 Date: <label for=quot;numequot;>Numele dumneavoastra</label> <input name=quot;numequot; id=quot;numequot; type=quot;textquot;> <label for=quot;numequot;>Numele dumneavoastra</label> <input name=quot;numequot; id=quot;numequot; type=quot;textquot;> <label> <label> dumneavoastra Numele Numele dumneavoastra <input name=quot;numequot; id=quot;numequot; type=quot;textquot;> <input name=quot;numequot; id=quot;numequot; type=quot;textquot;> </label> </label> • A doua formă nu este recomandată deoarece în general nu este interpretată / citită corect • Avantajele asocierii explicite sunt că este mai semantică și că, cel puțin în primul caz, titlul poate fi oriunde în cod • De regulă titlul unui control de tip text se poziționează deasupra sau la stânga controlului iar titlul unui control de tip radio sau checkbox la dreapta controlului Tabele si formulare accesibile - Alexandru Badiu
  23. 23. Formulare Controale pentru text • În lipsa lui LABEL se poate folosi atributul TITLE • Acesta este recomandat și în următoarele cazuri Tabele si formulare accesibile - Alexandru Badiu
  24. 24. Formulare Controale radio și checkbox • Atunci când avem grupuri de controale radio sau checkbox e bine ca atributul title să fie cât mai descriptiv și să conțină și titlul grupului • “radio button checked, da” vs “radio button checked, Doriti abonarea la newsletter, da” • Soluția cea mai simplă: FIELDSET și LEGEND Tabele si formulare accesibile - Alexandru Badiu
  25. 25. Formulare Campuri obligatorii • Cea mai uzuala greșeală: “Câmpurile marcate cu roșu sunt obligatorii” • Un utilizator din 20 are probleme cu distingerea culorilor • Pentru un utilizator orb culorile nu au nici o relevanță Untitled.html • Marcarea câmpurilor cu * nu este o soluție bună March 17, 2008 Date: Monday, •Untitled.html Soluții posibile <label for=quot;numequot;> Date: Monday, March 17, 2008 Nume (necesar) </label> <label for=quot;numequot;> <label for=quot;numequot;> Nume Nume (necesar) <img src=quot;/img/required.gifquot; alt=quot;(necesar)quot;> </label> </label> <label for=quot;numequot;> Nume (necesar) <img src=quot;/img/required.gifquot; alt=quot;(necesar)quot;> </label> Tabele si formulare accesibile - Alexandru Badiu
  26. 26. Formulare Semnalarea erorilor • Validare server side • Toate erorile sunt afișate deasupra formularului • Fiecare eroare este un link către controlul la care face referire • Validare client side • Mai problematică • Practica uzuala: focus pe zona unde sunt prezentate erorile • Focus pe un link din zona • Focus pe zona cu tabindex=-1 Tabele si formulare accesibile - Alexandru Badiu
  27. 27. Formulare Concluzii / Recomandări • Titlul controalelor text poziționat la stânga controlului sau deasupra • Titlul controalelor de tip radio / checkbox poziționat la dreapta • Este preferată asocierea explicită • Nu este recomandată folosirea LABEL drept container pentru control • Erorile prezentate grupat • Fiecare eroare este un link către controlul la care face referire • TITLE pentru grupurile de controale cu un singur titlu (de ex. Telefon) • Semnalarea campurilor obligatorii nu doar vizual Tabele si formulare accesibile - Alexandru Badiu
  28. 28. Situri din .ro Ghiseul.ro • Oferă plata online a amenzilor • A avut un start foarte prost • “Login” și “Înregistrare” sunt într-un IFRAME • Formulare fără buton de submit, sunt folosite link-uri tradiționale + js (la căutare și feedback) • Pentru a ajunge la conținut trebuie parcurs tot meniul și știrile din dreapta • Captcha vizual • Nu sunt precizate care câmpuri sunt necesare • Butonul de submit (de tip imagine) nu are alt Tabele si formulare accesibile - Alexandru Badiu
  29. 29. Situri din .ro e-guvernare.ro • Formularul de căutare nu are buton de SUBMIT, se folosește un link cu js • Tot conținutul este într-un IFRAME • Lipsește textul alternativ presidency.ro • În general accesibil • Imagini și link-uri imagine fără text alternativ pentru EN și FR • Lipsește un link pentru a ajunge direct la conținut Tabele si formulare accesibile - Alexandru Badiu
  30. 30. Situri din .ro avp.ro Tabele si formulare accesibile - Alexandru Badiu
  31. 31. Situri din .ro Unelte folosite • Functional Accessibility Evaluator - http://fae.cita.uiuc.edu/ • Cynthia Says - http://www.cynthiasays.com/ • Lynx - http://lynx.isc.org/ • JAWS - http://www.freedomscientific.com/ • Fire Vox - http://firevox.clcworld.net/ Tabele si formulare accesibile - Alexandru Badiu
  32. 32. Vă mulțumesc

×