prezentare wurbe

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


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



http://www.delorie.com/web/lynxview.html

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



• 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


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


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

Formulare

Asocierea implicită


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


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


• 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


<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


<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


• Î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ță

• 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


• 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

Formulare

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

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


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/

Situri din .ro

http://fae.cita.uiuc.edu

http://fae.cita.uiuc.edu

http://www.cynthiasays.com

http://www.cynthiasays.com

http://lynx.isc.org

http://lynx.isc.org

http://livepage.apple.com/

http://livepage.apple.com/

http://firevox.clcworld.net

http://firevox.clcworld.net

Vă mulțumesc

prezentare wurbe

Technology