Prezentare Wurbe

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: 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

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ă)


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


“Romania - o țară bananieră”
parlamentar român


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


Implicații legale
Pe lângă legi este nevoie și de educarea anumitor părți


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


Unelte
• Windows
• HAL
• JAWS
• Window-Eyes
• Mac
• VoiceOver
• Proloquo
• *nix
• Gnopernicus
• Emacspeak
• Fire Vox - AxsJAX
• Microsoft Active Accessibility


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?


• 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


• 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 - 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 simple


Tabele cu mai multe nivele


Tabele neregulate


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


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


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 ﬁe “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


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>


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>
<label>
<label> dumneavoastra
Numele
Numele dumneavoastra
</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


Formulare
Controale pentru text

• În lipsa lui LABEL se poate folosi atributul TITLE
• Acesta este recomandat și în următoarele cazuri


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


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;> Nume
Nume (necesar) <img src=quot;/img/required.gifquot; alt=quot;(necesar)quot;>
</label> </label>

Nume (necesar)
<img src=quot;/img/required.gifquot; alt=quot;(necesar)quot;>
</label>

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


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


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


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


Situri din .ro
avp.ro


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/


Prezentare Wurbe

Recomendados

Recomendados

Más contenido relacionado

Más de Alexandru Badiu

Más de Alexandru Badiu (14)

Prezentare Wurbe