Ghidul Designerului pentru Bazele Designului de Accesibilitate Web

Web-ul ar trebui să fie un loc în care toată lumea poate accesa același conținut de oriunde din lume. Tehnicile receptive au avansat mult dispozitiv-agnostic desene sau modele. Dar ce zici accesibilitate-designuri agnostice?

Accesibilitatea pe Internet a fost de ani de zile, dar punerea sa în aplicare necesită progrese noi în domeniul tehnologiei și dezvoltării web. Mulți dezvoltatori doresc să ajute, dar este o înțelegere dificilă a modului de proiectare pentru accesibilitate, deoarece există atât de multe părți în mișcare. Aceasta include textul cu contrast ridicat, paginile audio pentru orb, suporturile optimizate și remediile pentru browserele non-JS / CSS.

În acest post, voi acoperi elementele de bază ale designului accesibilității, ce este, ce intenționează să rezolve și pașii pe care îi puteți lua pentru a începe. Rețineți, acesta este un subiect incredibil de detaliat și va dura luni sau ani de practică pentru a înțelege pe deplin. Dar beneficiile merită efortul și toate proiectele dvs. web vor lăsa fiecărui vizitator o impresie de durată de conținut accesibil.

Introducere la accesibilitate

În general, accesibilitatea este ideea de a construi un astfel de conținut poate fi consumat de oricine. Acestea pot include persoane nevăzătoare care nu pot citi, și pot include persoane cu dizabilități fizice care nu pot utiliza mouse sau tastatură (sau una).

Dar poate include și oameni ușoare deficiențe în viziune. Poate include persoane cu dislexie sau probleme de citire a înțelegerii. De fapt, ideea de a “accesibilitatea web” include orice posibilă depreciere care ar putea afecta modul în care cineva interacționează sau consumă un site web.

Poate cel mai important este ceea ce poate oferi accesibilitatea web, așa cum este descris aici într-o definiție Wikipedia:

Cu toate acestea, Anne Gibson argumentează în postul său List Apart că definiția Wikipedia este prea vagă și nu este doar despre persoanele cu dizabilități. Este vorba despre toata lumea pe internet din toată lumea asta poate să nu aibă acces optim la Internet.

Mulți oameni cred că accesibilitatea este doar pentru orbi care nu pot citi. Dar, de fapt, există patru categorii principale de accesibilitate web:

1. Vizual - vedere redusă sau vedere slabă / fără vedere
2. auditoriu - cu deficiențe de auz sau surzi
3. Cognitive - probleme de înțelegere sau consumare a informațiilor
4. Motor - probleme de accesibilitate fizică care pot necesita dispozitive speciale de intrare, cum ar fi tastaturi sau programe de comandă vocală

Aceste categorii au fiecare tehnici extinse care sunt schimbând la fel de rapid ca standardele web. Dar există un sentiment de stabilitate cu aceste standarde ratificate în Ghidul de accesibilitate a conținutului web (WCAG).

Unele site-uri, cum ar fi instituțiile guvernamentale sunt obligate prin lege să urmeze aceste orientări. Acestea se aplică pe plan internațional prin W3C.

Să aruncăm o privire asupra birocrației din spatele accesibilității web și apoi să ne aruncăm cu privire la unele sfaturi de design aplicabile.

Proiectul W3C și accesibil

Sunt destul de puține acronime legate de accesibilitatea web. Acestea pot fi complicate dacă sunteți absolut nou la subiect, dar odată simplificat, sper că vor avea mai multă sens.

• W3C (Consorțiul World Wide Web) - Un grup internațional care definește standardele web pentru protocoale, limbi și regulamente. Toate directivele oficiale de accesibilitate intră sub incidența acestei organizații.
• WAI (Inițiativa accesibilității web) - Un program oficial care acoperă totul despre accesibilitate. Acest termen umbrelă conține toate regulile, instrucțiunile și tehnicile pentru accesibilitatea modernă.
• WCAG (Orientări privind accesibilitatea conținutului web) - Un grup de standarde și reguli care îi ajută pe designeri să-și clasifice site-urile în funcție de nivelul de accesibilitate.
• ARIA (Aplicații Rich Internet accesibile) - Un standard specific ce definește modul în care se construiesc aplicații bogate accesibile care se bazează pe JavaScript / Ajax și tehnologii similare. Citiți mai multe despre acest lucru în acest post de Anna Monus.

Alte linii directoare există sub umbrela WAI, inclusiv UAAG pentru agenții utilizator și O ETICHETĂ pentru instrumente de creație web. Pentru moment, ar trebui să fii cel mai interesat de sugestiile făcute de WAI și de liniile directoare prezentate de setul de reguli WAI sub numele WCAG.

O resursă excelentă pentru a învăța mai multe este acest post de la W3C privind dizabilitățile, care împărtășește povestiri despre modul în care persoanele cu handicap accesează Internetul. Poate fi dificil de înțeles toate problemele complicate, să nu mai vorbim de modul în care să le rezolvăm. Dar cea mai bună sursă este de la oameni care se confruntă cu aceste probleme zilnic.

Un alt subiect important pe care trebuie sa il intelegeti este conformitatea cu WCAG. Acest lucru se referă la accesibilitatea unui site web acoperind o mare varietate de factori. Nivelurile se bazează pe conformitatea cu un sistem de rating de A, AA și AAA. Puteți verifica acest lucru cu ajutorul unui instrument de verificare a accesibilității pe web. Cel mai bun punctaj este AAA.

Pentru a afla mai multe despre aceste linii directoare, consultați articolul W3C Introducere în înțelegerea articolului WCAG 2.0. De asemenea, aruncați o privire asupra acestor link-uri conexe pentru mai multe detalii:

• WCAG 2.0 simplificată
• Secțiunea 508 Performanța WCAG

Pași pentru design accesibil

Vă recomandăm să vizitați site-ul web al proiectului A11Y pentru sfaturi practice de accesibilitate. A11Y (care este de asemenea un numeron) este un proiect gratuit open source găzduit pe GitHub, oferind tehnici de design web accesibil.

Aveți posibilitatea să răsfoiți lista lor de verificare a elementelor de accesibilitate sau chiar o grămadă de modele de design pentru elemente cum ar fi dropdown-uri, file, acordeoane, butoane și ferestre modale (printre altele).

Este dificil să învățați toate aceste lucruri și să le implementați în același timp. Luați-o pas cu pas și fiți dispuși să cercetați mai mult dacă vă confundați.

Consultați instrucțiunile de la A11Y și sfaturile rapide pentru a începe. Veți căuta sugestii specifice cum ar fi link-urile de tip jumping-la-conținut și schemele de culori cu contrast ridicat. Aceste tehnici au fiecare nivel propriu de detaliu, astfel încât punerea în aplicare este în mare parte cu privire la testarea pentru a vedea ce funcționează.

Luați în considerare utilizatorii orbi care ar putea utiliza un cititor de conținut automatizat. De asemenea, aceștia ar putea avea un translator audio sau chiar o tastatură specială pentru navigarea pe Internet cu chei, mai degrabă decât cu mouse-ul. De-aceea HTML semantic propriu-zis (aruncați o privire la acest articol) este atât de important cu proprietăți precum tabindex și cheie de acces.

Dacă doriți să vă aruncați cu capul, luați în considerare alegerea unei teme de accesibilitate. Puteți studia arhitectura și personaliza designul pentru a se potrivi proiectului dumneavoastră.

Instrumente de testare a accesibilității

Dacă doriți să începeți, alegeți doar o zonă de accesibilitate și încercați. Apoi puteți folosi instrumentele de testare pentru a evalua nivelul dvs. de succes.

Merită menționat faptul că acest proces poate fi frustrant. Există atât de mult de luat în considerare și orientările WCAG sunt atât de greu de înțeles încât este posibil să ajungeți la supraîncărcarea informațiilor.

Cel mai important este să continuăm să ne mișcăm. Alegeți o zonă de accesibilitate și concentrați-vă. Apoi, utilizați aceste instrumente pentru a vă ajuta să optimizați și să vă îmbunătățiți activitatea.

De exemplu, puteți încerca să lucrați cu specificațiile de contrast ale WCAG îmbunătățirea lizibilității. Odată ce ați ales culorile, utilizați acest indicator pentru a vedea dacă lucrează împreună.

Din păcate, orientările WCAG 2.0 sunt atât de confuze încât este posibil să aveți dificultăți în înțelegerea cerințelor. Dar cu cât încerci mai mult cu cât vei învăța mai mult și cu cât vei înțelege mai mult.

Pentru a testa un site care este deja online, verificați WAVE. E o free checker vizual care afișează erori, alerte, probleme de contrast și alte specificații ale unui site web. Veți obține o vizualizare vizuală și o listă de probleme în bara laterală.

Există o altă aplicație gratuită pe site-ul Cynthia Says, care poate verificați site-urile web pentru evaluările de succes ale grupului A, AA, AAA, și secțiunea 508 pentru respectarea de către guvern.

Și dacă sunteți în open source, aruncați o privire la acestea instrumente gratuite de testare a accesibilității pe GitHub.

• HTML CodeSniffer
• Instrument de testare a accesibilității automate
• WCAG Validator

Suplimente pentru browsere

Suplimentele de browser furnizează probabil cele mai rapide și mai simple metode de testare a accesibilității. Puteți rula aceste informații de pe orice computer de pe orice site web pentru a obține rezultate cu adevărat utile.

AInspector pentru Firefox este considerat ca un must-have pentru accesibilitate. Acest lucru verifică totul și este mult mai detaliat decât testerul WAVE.

Utilizatorii Mozilla ar putea dori, de asemenea, WCG Contrast Checker, care este, de asemenea, un add-on gratuit.

Utilizatorii Chrome nu au AInspector, dar au Tools Developer Developer creat oficial de Google. Aceasta adaugă instrumente suplimentare în fereastra inspectorului pentru a verifica orientările privind accesibilitatea.

Utilizatorii Chrome au, de asemenea, dame de luminozitate pentru contrastul color și alte extensii gratuite.

Din păcate, nu am reușit să găsesc mult pentru utilizatorii Safari, dar am găsit o extensie pentru Opera care verifică compatibilitatea cu WCAG 2.0. Dacă sunteți dispus să căutați destul de mult Google, puteți găsi mai multe instrumente acolo.

Citirea în continuare

Dacă sunteți serios despre învățarea accesibilității pe Internet, atunci fiți pregătiți pentru un drum lung. Nu este ușor, dar este foarte îndeplinită.

Până acum, ar trebui să înțelegeți mai multe despre definiția actuală a accesibilității web, de ce există și despre detalii minore despre ce dezvoltatorii trebuie să facă pentru a-și îmbunătăți site-urile web. Următorul pas este cercetarea și practica viitoare de a încorpora aceste principii în fluxul de lucru.

Consultați următoarele postări pentru mai multe informații și asigurați-vă că consultați ghidul WCAG dacă doriți cunoașterea directă de la sursă.

• Cum de a îmbunătăți accesibilitatea tabelului HTML cu marcarea
• Design accesibil pentru utilizatorii cu dizabilități
• 6 sfaturi pentru îmbunătățirea accesibilității site-ului
• Asigurați-vă că site-ul dvs. este accesibil persoanelor cu deficiențe de vedere