Post on 24-Jun-2015
description
Tabele și
Formulare
AccesibileAlexandru Badiu
Pe scurt
Tabele si formulare accesibile - Alexandru Badiu
• 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
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
Implicații legale
Tabele si formulare accesibile - Alexandru Badiu
• 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
“Romania - o țară bananieră”parlamentar român
Implicații legale
Tabele si formulare accesibile - Alexandru Badiu
• 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
Implicații legale
Pe lângă legi este nevoie și de educarea anumitor părți
Tabele si formulare accesibile - Alexandru Badiu
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
Unelte
• Windows
• HAL
• JAWS
• Window-Eyes
• Mac
• VoiceOver
• Proloquo
• *nix
• Gnopernicus
• Emacspeak
• Fire Vox - AxsJAX
• Microsoft Active Accessibility
Tabele si formulare accesibile - Alexandru Badiu
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
• 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
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
Tabele - pentru layout
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
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 - pentru date
• 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
TabeleRezumat
• 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
Formulare
Tagurile INPUT de tip buton și BUTTON
Tabele si formulare accesibile - Alexandru Badiu
• Î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
Formulare
Asocierea implicită
Tabele si formulare accesibile - Alexandru Badiu
Un screen reader va citi “Numele dumneavoastra”, “Control text cu numele nume”
Untitled.html
Date: Sunday, March 16, 2008 Page!1!of!1
<tr><td>Numele dumneavoastra:</td>...
</tr><tr>
<td><input type="text" name="nume" value=""></td>...
</tr>
<p>Numele dumneavoastra: <input type="text" name="nume" value=""></p>
<tr><td>
Numele dumneavoastra:<br />Prenumele dumneavoastra:
</td>...
</tr><tr>
<td><input type="text" name="nume" value=""><br /><input type="text" name="prenume" value="">
</td>...
</tr>
Untitled.html
Date: Sunday, March 16, 2008 Page!1!of!1
<tr><td>Numele dumneavoastra:</td>...
</tr><tr>
<td><input type="text" name="nume" value=""></td>...
</tr>
<p>Numele dumneavoastra: <input type="text" name="nume" value=""></p>
<tr><td>
Numele dumneavoastra:<br />Prenumele dumneavoastra:...
</td></tr><tr>
<td><input type="text" name="nume" value=""><br /><input type="text" name="prenume" value="">...
</td></tr>
Formulare
Asocierea explicită
Tabele si formulare accesibile - Alexandru Badiu
• 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
Untitled.html
Date: Sunday, March 16, 2008 Page!1!of!1
<label for="nume">Numele dumneavoastra</label><input name="nume" id="nume" type="text">
<label>Numele dumneavoastra<input name="nume" id="nume" type="text">
</label>
Untitled.html
Date: Sunday, March 16, 2008 Page!1!of!1
<label for="nume">Numele dumneavoastra</label><input name="nume" id="nume" type="text">
<label>Numele dumneavoastra<input name="nume" id="nume" type="text">
</label>
Formulare
Controale pentru text
Tabele si formulare accesibile - Alexandru Badiu
• În lipsa lui LABEL se poate folosi atributul TITLE
• Acesta este recomandat și în următoarele cazuri
Formulare
Controale radio și checkbox
Tabele si formulare accesibile - Alexandru Badiu
• 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
Formulare
Campuri obligatorii
Tabele si formulare accesibile - Alexandru Badiu
• 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ță
• Marcarea câmpurilor cu * nu este o soluție bună
• Soluții posibileUntitled.html
Date: Monday, March 17, 2008 Page!1!of!1
<label for="nume">Nume (necesar)
</label>
<label for="nume">Nume (necesar)<img src="/img/required.gif" alt="(necesar)">
</label>
Untitled.html
Date: Monday, March 17, 2008 Page!1!of!1
<label for="nume">Nume (necesar)
</label>
<label for="nume">Nume<img src="/img/required.gif" alt="(necesar)">
</label>
Formulare
Semnalarea erorilor
Tabele si formulare accesibile - Alexandru Badiu
• 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
Formulare
Concluzii / Recomandări
Tabele si formulare accesibile - Alexandru Badiu
• 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
Formulare
Ghiseul.ro
Tabele si formulare accesibile - Alexandru Badiu
• 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
Situri din .ro
e-guvernare.ro
Tabele si formulare accesibile - Alexandru Badiu
• 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
Situri din .ro
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
avp.ro
Tabele si formulare accesibile - Alexandru Badiu
Situri din .ro
Unelte folosite
Tabele si formulare accesibile - Alexandru Badiu
• 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/
Situri din .ro
Vă mulțumesc