Tabele și
Formulare
Accesibile
Alexandru Badiu
Pe scurt
• Se referă la a face web-ul accesibil persoanelor cu diverse tipuri de deficiențe
• Deficiențe vizuale: persoa...
Componente
• W3C WAI (Web Accessibility Initiative) coordonează dezvoltarea
componentelor
• Specificații tehnice (XHTM...
Implicații legale
• Procese: ADA vs City of San Jose, Maguire vs Sydney Organising Committee
for the Olympic Games
• S...
“Romania - o țară bananieră”
parlamentar român
Tabele si formulare ...
Implicații legale
• Dar nu când vine vorba de accesibilitate
• Proiectul eEurope al Comisiei Europene
• Acesta urmea...
Implicații legale
Pe lângă legi este nevoie și de educarea anumitor părți
Tabele si formulare accesibile - Alexandru ...
Unelte
• Screen readers
• Generale, pentru întreg sistemul de operare
• Specializate, pentru web
• Mod de prezentare a...
Unelte
• Windows
• HAL
• JAWS
• Window-Eyes
• Mac
• VoiceOver
• Proloquo
• *nix
• Gnopernicus
• Em...
Tabele - pentru layout
• Tabelele sunt linearizate
• Tabelul de mai sus este citit astfel: R1 C1, R1 C2, R2 C1, R2 C...
Tabele - pentru layout
• Odată ajuns la o celulă, screen readerul citește tot conținutul ei
• Rowspan si colspan fac lin...
Tabele - pentru layout
• WAI spune: Folosiți tabele pentru layout doar dacă au sens linearizate
• Soluții posibile
...
Tabele - pentru date
• Informațiile din tabelele ce prezintă date nu au sens singure, ca în cazul
precedent
• Sensul l...
Tabele - pentru date
Tabele simple
Tabele si formulare accesibile - Alexandru Badiu
Tabele - pentru date
Tabele simple
Tabele si formulare accesibile - Alexandru Badiu
Tabele - pentru date
Tabele cu mai multe nivele
Tabele si formulare accesibile - Alexandru Badiu
Tabele - pentru date
Tabele neregulate
Tabele si formulare accesibile - Alexandru Badiu
Tabele
Rezumat
• Pentru tabelele simple este necesară identificarea antetelor prin tagul TH și
atributul SCOPE
• Pent...
Formulare
• Asocierea controalelor cu numele lor se face mult mai anevoios atunci când
utilizatorul are o deficiență de ...
Formulare
Tagurile INPUT de tip buton și BUTTON
• În general folosirea lor nu pune probleme nimănui
• De evitat atribut ...
Untitled.html
Date: Sunday, March 16, 2008
Formulare <tr>
...
Untitled.html
Formulare Sunday, March 16, 2008
Date:
Untitled.html
Asocierea explicită Sunday, March ...
Formulare
Controale pentru text
• În lipsa lui LABEL se poate folosi atributul TITLE
• Acesta este recomandat și în urm...
Formulare
Controale radio și checkbox
• Atunci când avem grupuri de controale radio sau checkbox e bine ca atributul
ti...
Formulare
Campuri obligatorii
• Cea mai uzuala greșeală: “Câmpurile marcate cu roșu sunt obligatorii”
• Un utilizator d...
Formulare
Semnalarea erorilor
• Validare server side
• Toate erorile sunt afișate deasupra formularului
• Fiec...
Formulare
Concluzii / Recomandări
• Titlul controalelor text poziționat la stânga controlului sau deasupra
• Titlul cont...
Situri din .ro
Ghiseul.ro
• Oferă plata online a amenzilor
• A avut un start foarte prost
• “Login” și “Înregistrare” ...
Situri din .ro
e-guvernare.ro
• Formularul de căutare nu are buton de SUBMIT, se folosește un link cu js
• Tot conținut...
Situri din .ro
avp.ro
Tabele si formulare accesibile - Alexandru Badiu
Situri din .ro
Unelte folosite
• Functional Accessibility Evaluator - http://fae.cita.uiuc.edu/
• Cynthia Says - http:/...
Vă mulțumesc
of 32

Prezentare Wurbe

"Tabele si formulare accesibile" - prezentată la Wurbe 7.
Published on: Mar 4, 2016
Published in: Technology      Business      
Source: www.slideshare.net


Transcripts - Prezentare Wurbe

  • 1. Tabele și Formulare Accesibile Alexandru Badiu
  • 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. 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. 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. “Romania - o țară bananieră” parlamentar român Tabele si formulare accesibile - Alexandru Badiu
  • 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. Implicații legale Pe lângă legi este nevoie și de educarea anumitor părți Tabele si formulare accesibile - Alexandru Badiu
  • 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. 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. 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. 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. 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. 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. Tabele - pentru date Tabele simple Tabele si formulare accesibile - Alexandru Badiu
  • 15. Tabele - pentru date Tabele simple Tabele si formulare accesibile - Alexandru Badiu
  • 16. Tabele - pentru date Tabele cu mai multe nivele Tabele si formulare accesibile - Alexandru Badiu
  • 17. Tabele - pentru date Tabele neregulate Tabele si formulare accesibile - Alexandru Badiu
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Situri din .ro avp.ro Tabele si formulare accesibile - Alexandru Badiu
  • 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. Vă mulțumesc

Related Documents