Astăzi vom examina accesibilitatea și semantica. Să începem cu o întrebare: ați folosit vreodată un cititor de ecran? Dacă răspunsul este Nu, ar trebui să-l încercați - s-ar putea schimba modul în care vă apropiați marcajul HTML pentru totdeauna!
În acest articol vom examina structura unei pagini web, felul în care cititorii de ecran interpretează această structură și îmbunătățirile pe care le putem aduce la marcajul propriu pentru a îmbunătăți accesibilitatea.
Un cuvânt rapid despre demo
Am tras împreună o pagină de eșantion pentru a demonstra modul în care marcajele specifice sunt procesate de cititoarele de ecran. De asemenea, am vrut să demonstrez marcajul HTML5 semantic la cel mai de bază - ceea ce sper că veți găsi util. În cele din urmă, știu cum vă place să descărcați fișierele sursă să vină cu un tutorial, astfel încât să vă bucurați să-l trageți în afară!
Demo-ul
Demo-ul este o pagină simplă și flexibilă. Nu este receptiv, dar este bine configurat pentru a fi făcut așa dacă doriți: să utilizeze unități orizontale relative (%) și unități relative (em) pentru fonturi. Imaginile sunt flexibile și modifică în funcție de dimensiunile containerului părinte. De asemenea, utilizează câteva perechi de fonturi Google groove. Lumină și curată.
Modelul standardelor Web
Dacă sunteți un vizitator regulat al site-ului, veți fi auzit din când în când că atunci când construiți un site web, este important să separați preocupările. Toate acestea fac parte din ceea ce recunoaștem ca fiind model de standarde web; compusă din structură, prezentare și comportament.
Structura construim sub forma marcajului HTML, prezentare este stilul nostru (modul în care conținutul apare în orice agent de utilizator dat) pe care îl abordăm cu CSS și comportament a unei pagini web, interactivitate front-end, pe care o realizăm de obicei cu javascript.
Menținerea acestor trei aspecte ale designului web separat este benefică pentru noi în termeni practici - este mult mai ușor să menținem conținut care este împărțit în felul acesta și nu toate sunt amestecate.
Separarea preocupărilor este, de asemenea, benefică în termeni de înțelegere. Noi, ființele umane, de obicei procesăm o pagină web mulțumită modului în care este livrată printr-un browser. Există însă și alte modalități prin care este accesată o pagină web, printre care se numără și Roboti de motoare de căutare, care accesează structura brută a paginilor pentru a clasifica și clasifica cu precizie conținutul.
Apoi, avem tehnologii de asistență (AT), cum ar fi cititoare de ecran. Cititorii de ecran interpretează interfețele de pe computer și spun ceea ce văd, ajutând persoanele cu deficiențe de vedere să le folosească. Paginile Web sunt un astfel de exemplu de interfețe, iar cititoarele de ecran citesc conținutul așa cum le este prezentat în marcaj. Marcarea confuză și dezordonată conduce logic la probleme de accesibilitate, chiar dacă site-ul Web ranit poate apărea în browser.
Notă: Este important să rețineți că, în timp ce acest tutt se concentrează pe persoanele cu deficiențe de vedere, optimizând accesibilitate beneficiază și utilizatorii restricționați în alte moduri (motor, auditiv, cognitiv etc.)
Semantică
Chiar dacă nu ați înțeles ce se înțelege Semantică probabil că ați auzit termenul aruncat în jur. Semantica în designul web se referă la sens acordată marcării HTML. Trecerea de la planurile bazate pe tabelă a înregistrat îmbunătățiri uriașe ale valorii semantice a marcajului (X) HTML, celulele de tabel făcând loc pentru
etichete (diviziuni), liste neordonate (
) a devenit obișnuită și am început să folosim lucruri de genul (accent) în loc de (italic) pentru a distanța în continuare marcajul nostru de codul de prezentare.
În prezent, comunitatea de design web se confruntă cu marcajul HTML5 și, mulțumită unei game largi de elemente noi, putem descrie marcajul nostru mai detaliat decât oricând. Navigarea primară durează în mod obișnuit sub forma unei liste neordonate, dar poate trăi acum în interiorul grupului etichete, care descriu perfect ce face acolo.
Pentru ajutor cu HTML5 semantic adecvat, verificați ce au făcut cei de la HTML5Doctor.com.
Ați folosit vreodată un cititor de ecran?
Este surprinzător cât de puțini web designeri au folosit de fapt cititorii de ecran. Testarea muncii dvs. din perspectiva unei persoane care are probleme de vedere poate fi la fel de plină de satisfacții, deoarece este frustrant, dar vă recomand să o încercați cel puțin o dată. Instrumentele pentru cititorul de ecran pot fi destul de greu de înțeles, deci asigurați-vă că recunoașteți diferența dintre accesibilitatea slabă și incapacitatea simplă de a utiliza software-ul?
Cititorii de ecran utilizează navigație alternativă (prin tastatură) pentru a evidenția, procesa și interacționa cu diferite elemente de pe ecran. Jumping între comenzile din browser și controalele dintr-o pagină Web poate fi dificil de început! Cu toate acestea, odată ce v-ați confruntat cu utilizarea instrumentelor, accesibilitatea (în) a marcajului va deveni clară.
Există mai multe exemple utilizate în mod obișnuit, aici sunt doar câteva dintre ele pentru referință:
FĂLCI
NVDA
Window-Eyes
SAToGo
VoiceOver
Notă: Interesant este faptul că, potrivit cercetării demografice efectuate de webaim.org, cea mai mare parte a utilizatorilor de cititoare de ecran citează Internet Explorer ca browserul pe care îl folosesc în mod obișnuit atunci când citesc paginile web. Interpretarea de către Microsoft a spec. CSS nu a fost așa cum am presupus?
Exemplu de marcare
Adesea primesc depuneri de tutori pentru pagini web care, deși arată foarte bine în browser, și folosesc doctype-ul corect, lăsăm adesea acolo pentru HTML5. Este o rușine, pentru că nu depune mult efort pentru a aduce la bord un marcaj semantic HTML5.
Să începem cu un exemplu de document. Mai intai, scapa de orice doctype care arata similar cu aceasta:
Pentru HTML5 valid nu avem nevoie de nimic mai complex decât acesta:
Hai să facem acum restul paginii web de bază:
Care este marcajul tău care îți spune?
Care este marcajul tău care îți spune?
Acasă
Mai mult brânză
Mai multe babe
Dreptul de autor? Ian Yates 2011
Acest lucru este destul de tipic pentru modul în care am structurat o pagină înainte ca elementele HTML5 să se îndrepte spre noi. Este perfect bine și poate fi decorat fără probleme reale.
Noi avem un acasă-principal div, care stă în sine într - un învelitoare div. În acasă-principal găsim câteva perechi de articole și vom complica lucrurile mai mult într-o secundă prin blocarea unor mai multe diviziuni acolo? uita-te la asta?
Care este marcajul tău care îți spune?
Care este marcajul tău care îți spune?
Acasă
Mai mult brânză
Mai multe babe
Wisconsin Cheese History
"Brânzeturi", datorită Graeme Maclean pe Flickr
Povestea industriei lactate din Wisconsin are rădăcini în vremurile preistorice. Natura a stabilit scena pentru Dairyland din America în ultima eră de gheață, când ghețarii au tăiat ceea ce este acum Wisconsin. Pe măsură ce au scăzut, masiv munți de gheață lăsat în urmă într-o zonă rurală de dealuri și dealuri luxuriante.
Milioane de ani mai târziu, când imigranții europeni au migrat spre vest, au găsit inima națiunii, care le-a amintit multora din patria lor. Condițiile climatice s-au adaptat bine la agricultură, iar inițial, agricultorii au crescut grâu, hamei și alte cereale. Industria lactatelor a urmat în mod natural, iar producătorii de produse lactate au produs în curând o multitudine de lapte de calitate superioară. Pentru a menține laptele în exces, fermierii au făcut brânză. Trecerea de la producerea brânzeturilor de uz familial la producerea brânzeturilor a fost un pas scurt. Cu toate acestea, producția comercială de brânză în Wisconsin a început la scară mică.
Luat de pe www.eatwisconsincheese.com
Sisteme sociale în interiorul unei trupe de bunică
"Fâșii Baboon", prin amabilitatea lui Prakhar Amba pe Flickr
Majoritatea babuonilor trăiesc în trupe ierarhice. Dimensiunile grupelor variază între 5 și 250 de animale (adesea aproximativ 50 de persoane), în funcție de circumstanțele specifice, în special speciile și perioada din an. Structura din cadrul trupei variază considerabil între baboarii hamadrias și speciile rămase, uneori numite în mod colectiv babonele savană.
Hamadryas baboon apare adesea în grupuri foarte mari compuse din mai multe hareme mai mici (un bărbat cu patru femele), la care femele din alte părți ale trupei sunt recrutați în timp ce sunt încă prea tineri pentru a fi hrăniți. Alte specii de babuini au o structură mai promiscuă, cu o ierarhie strictă de dominare bazată pe matriline. Grupul hamadryas baboon va include de obicei un bărbat mai tânăr, dar nu va încerca să se îmbine cu femelele decât dacă bărbatul mai în vârstă este eliminat.
Luat de pe wikipedia.com
Dreptul de autor? Ian Yates 2011
Vezi? Pentru fiecare articol div am adăugat o imagine, imbrăcată într-o div astfel încât să o legăm de legenda ei, plus o alta div care funcționează ca un subsol în partea de jos.
Acum, să adăugăm câteva prezentare; unele stiluri CSS. În primul rând, unele stiluri de resetare, luate în întregime de Eric Meyer:
/ * http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 Licență: none (domeniu public) * / html, corp, div, span, applet, obiect, iframe, h1, h2, h4, mare, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, dd, ol, ul, li, câmp, formă, etichetă, legenda, tabel, caption, t, tfoot, hgroup, meniu, nav, ieșire, rubin, secțiune, rezumat, timp, marcă, audio, video margine: 0; umplutura: 0; frontieră: 0; font-size: 100%; font: inherit; aliniere verticală: linia de bază; / * Resetarea rolului afișării HTML5 pentru browserele mai vechi * / articol, deoparte, detalii, figcaption, figura, subsol, antet, hgroup, meniu, nav, secțiune display: block; corp linie-înălțime: 1; ol, ul stil-list: nici unul; blockquote, q citate: none; blockquote: înainte, blockquote: după, q: înainte, q: după content: ";
Apoi vom adăuga propriile noastre stiluri. Veți observa câteva perechi de fonturi extraterestre, grabite de API-ul fonturilor Google și aplicate utilizând @ Font-face. Restul este auto-explicativ, iar rezultatul demonstrează puțin în calea complicațiilor.
În mai puțin de 200 de linii (fără condens) din CSS, ne-am desenat frumos pagina noastră. Nu există nicio rubrică și elemente de meniu centrate pe fantezie, o dimensiune mare a fontului (100% din valoarea implicită a browserului, de obicei 16 pixeli) și imaginile ale căror containere plutesc spre dreapta. Cea mai complicată dintre stiluri este, fără îndoială, umbrele duble cu cutii pe elementele de meniu și containerele de imagini. Oricum, stilul nu se încadrează în sfera de aplicare a acestui tut, dar nu ezitați să-l alegeți după cum doriți.
Accesibilitate îmbunătățită
Există mai multe domenii în care am fi putut îmbunătăți accesibilitatea în marcarea noastră. Pentru început, etichetele lipsesc Alt atribut. Navigarea pe site în condiții normale ar fi briza peste această problemă, dar oricine ar fi oprit imaginile ar ignora că ar fi existat vreodată o imagine. Cititorii de ecran vor afirma, în cel mai bun caz, că există o imagine prezentă, dar nu le pot spune utilizatorului mai mult decât atât.
Utilizați textul alternativ ca o șansă de a descrie imaginea. Acest lucru va aduce beneficii utilizatorilor, motoarelor de căutare și, prin urmare, și dumneavoastră.
Documentul este, de asemenea, lipsit de semnificație semantică, utilizatorii navigând pagina dvs. cu un cititor de ecran nu pot determina nicio valoare ierarhică în text. Un div cu o clasă de subsol spune absolut nimic despre continut pentru oricine (cu exceptia dumneavoastra), pur si simplu permite ca fisierul CSS sa-l vizeze.
În ceea ce privește întreținerea, este, de asemenea, dificil să distingem toate cele imbricate
elemente prezente; Numarul mare al acestora impune in continuare necesitatea de a comenta elementele de inchidere. Încercarea de a menține ordinea în secțiuni de marcare ca aceasta este dificilă!
Să schimbați apoi unele dintre etichetele de div superfluă pentru mai multe elemente semantice:
La revedere?
Care este marcajul tău care îți spune?
Acasă
Mai mult brânză
Mai multe babe
? Salut
Care este marcajul tău care îți spune?
La revedere?
Wisconsin Cheese History
"Brânzeturi", datorită Graeme Maclean pe Flickr
Povestea lui Wisconsin? pășune luxuriantă.
Milioane de ani mai târziu? o scară mică.
Luat de pe www.eatwisconsincheese.com
? Salut
Wisconsin Cheese History
"Brânzeturi", datorită Graeme Maclean pe Flickr
Povestea lui Wisconsin? pășune luxuriantă.
Milioane de ani mai târziu? o scară mică.
Iată semnul HTML complet, strălucit cu semantică glorioasă:
Care este marcajul tău care îți spune?
Care este marcajul tău care îți spune?
Wisconsin Cheese History
"Brânzeturi", datorită Graeme Maclean pe Flickr
Povestea industriei lactate din Wisconsin are rădăcini în vremurile preistorice. Natura a stabilit scena pentru Dairyland din America în ultima eră de gheață, când ghețarii au tăiat ceea ce este acum Wisconsin. Pe măsură ce au scăzut, masiv munți de gheață lăsat în urmă într-o zonă rurală de dealuri și dealuri luxuriante.
Milioane de ani mai târziu, când imigranții europeni au migrat spre vest, au găsit inima națiunii, care le-a amintit multora din patria lor. Condițiile climatice s-au adaptat bine la agricultură, iar inițial, agricultorii au crescut grâu, hamei și alte cereale. Industria lactatelor a urmat în mod natural, iar producătorii de produse lactate au produs în curând o multitudine de lapte de calitate superioară. Pentru a menține laptele în exces, fermierii au făcut brânză. Trecerea de la producerea brânzeturilor de uz familial la producerea brânzeturilor a fost un pas scurt. Cu toate acestea, producția comercială de brânză în Wisconsin a început la scară mică.
Sisteme sociale în interiorul unei trupe de bunică
"Fâșii Baboon", prin amabilitatea lui Prakhar Amba pe Flickr
Majoritatea babuonilor trăiesc în trupe ierarhice. Dimensiunile grupelor variază între 5 și 250 de animale (adesea aproximativ 50 de persoane), în funcție de circumstanțele specifice, în special speciile și perioada din an. Structura din cadrul trupei variază considerabil între baboarii hamadrias și speciile rămase, uneori numite în mod colectiv babonele savană.
Hamadryas baboon apare adesea în grupuri foarte mari compuse din mai multe hareme mai mici (un bărbat cu patru femele), la care femele din alte părți ale trupei sunt recrutați în timp ce sunt încă prea tineri pentru a fi hrăniți. Alte specii de babuini au o structură mai promiscuă, cu o ierarhie strictă de dominare bazată pe matriline. Grupul hamadryas baboon va include de obicei un bărbat mai tânăr, dar nu va încerca să se îmbine cu femelele decât dacă bărbatul mai în vârstă este eliminat.
Deci, care sunt îmbunătățirile pe care le-am făcut? Ei bine, în plus față de adăugarea de atribute altfel imaginilor noastre, am utilizat următoarele șapte elemente:
: Am folosit acest lucru în partea de sus a documentului nostru, unde se află principala noastră rubrică și navigația. De asemenea, am putea folosi această etichetă ca antet pentru subsecțiunile marcajului (cum ar fi articolele).
: Această etichetă joacă pentru orice element care acționează ca navigare într-o pagină web. Navigarea noastră primară este exemplul perfect, dar etichetele nav pot de asemenea să înfășoare paginarea (de exemplu).
: Avem doar o singură secțiune, dar aceasta este o etichetă excelentă pentru gruparea conținutului asociat.
: Un articol poate fi descris ca o bucată de informații care pot sta independent de conținutul său înconjurător, fără a pierde semnificația. În cazul nostru, avem două articole, fiecare cuprinzând un titlu, un text, o acreditare și o imagine relevantă.
: Eticheta cifră ne permite să conțină imaginile noastre, apoi să asociem și meta informații cum ar fi?
: Subtitrarea noastră a fost plasată în așa fel încât să fie asociată cu imaginea sa frățească.
: Avem un subsol la poalele paginii noastre (hmmmm), dar, ca etichetele antetului, acestea pot fi de asemenea folosite în secțiuni, așa cum am demonstrat în articolele noastre.
Încercați să utilizați elemente precum acestea ori de câte ori puteți. Utilizați etichete div, prin toate mijloacele, dar numai dacă nu vă puteți gândi la un element semantic mai adecvat. În ceea ce privește stilul, nu puteți greși cu adevărat, iar în momentul de față nu este o crimă dacă folosiți elemente în locul greșit. Trebuie sa incepeti undeva, asa ca nu va fie frica sa folositi articole si sectiuni imperfect.
Cu unele CSS puțin editate, rezultatul în browser este? nu altfel.
Cum se vede un cititor de ecran??
Iată designul nostru, așa cum se vede din ochii extensiei cititorului de ecran Google Chrome și din VoiceOver de la OSX.
Atunci când VoiceOver este lăsat să proceseze o întreagă pagină Web (Control-Option-A), se plimbă prin DOM în mod secvențial, dictând orice conținut se întâlnește. Ultimele versiuni vă permit să specificați puncte de pe paginile web preferate la care puteți să accesați, dar dacă cursorul se află în căutarea unui link, a unei liste, a unui paragraf sau a unei imagini, îl citește cât mai bine.
Eforturile noastre au trecut neobservate!
S-ar putea să observați, în afară de vocea ciudat de atractivă, că VoiceOver nu a făcut nici o mențiune despre navigația noastră fiind plasată într-o tag-ul și a ignorat complet prezența articolelor. Aceasta este realitatea situației în acest moment; HTML5 nu este încă bine susținut de cititorii de ecran, eforturile noastre au trecut neobservate! În același mod în care standardele de marcare și de styling sunt implementate lent (dar sigur) de către furnizorii de browsere, astfel încât dezvoltatorii de cititoare de ecran se află în aceeași situație.
Pentru a rămâne la curent cu stadiul de accesibilitate HTML5 și de dezvoltare a cititorului de ecran, puteți face mult mai rău decât să țineți cont de Bruce Lawson. Adesea împinge problema, blog-uri despre asta și vorbind despre asta. Alternativ, verificați www.accessibleculture.org pentru testarea produsului cu cititoare de ecran obișnuite.
Ajutor în formularul WIA-ARIA
WIA-ARI-CE?! WIA (Inițiativa accesibilității web) ARIA (Accessible Rich Internet Applications) este o specificație care ajută tehnologiile asistive să interpreteze marcajul HTML. Utilizează atribute pentru a descrie elementele în mai multe moduri:
Rol: Scopul unui element (da, ok, rolul acestuia)
Stat: Starea curentă a unui element (bifați caseta de selectare)
Proprietate: Oricare dintre ele tonă de proprietăți (cum ar fi poziția orizontală a unui cursor)
În special în ceea ce privește statele și proprietățile, vă puteți imagina că ar fi altfel dificil pentru interpretarea tehnologiilor de asistență. Putem adăuga fericit atributele ARIA (în limite) la marcajul nostru și, în mod crucial, aceștia validează ca parte a spec. HTML5.
WAI-ARIA este conceput pentru a fi o tehnologie de legătură. Se clarifică semantica la tehnologiile de asistență atunci când autorii creează noi tipuri de obiecte, prin stil și script, care nu sunt încă suportate direct de limba paginii. www.w3.org
Iată un exemplu despre modul în care am putea îmbunătăți în continuare marcajul nostru - luăm acest lucru:
? și adăugăm aceasta:
Din nou, acesta este valabil HTML5.
Am adăugat un atribut de rol navigare pentru noi nav element, care ar putea părea contra-intuitiv, dar pentru moment ajută. (Unele) cititoare de ecran vor recunoaște în mod corespunzător navigația noastră. În continuare, în jos, atunci când spec. HTML5 a fost corect adoptat de dispozitive de toate tipurile, elementul nav va implica un atribut ARIA de navigare (și altele pentru alte elemente), ceea ce îl face inutil.
De asemenea, putem adăuga un rol în antetul nostru:
Și, în cele din urmă, ne câștigăm un articol care merită o recunoaștere:
Pentru mai multe detalii despre rolurile disponibile și despre modul de utilizare a acestora, consultați introducerea cuprinzătoare a lui Virginia DeBolt în rolurile ARIA.
Așadar, am actualizat în sfârșit marcajul nostru pentru a îmbunătăți accesibilitatea. Aruncați o privire la articolul finit, deși observați orice diferență reală pe care ar trebui să o vizualizați cu un cititor de ecran adecvat, desigur. Cel mai bun pariu în acest moment ar fi să testați folosind JAWS sau NVDA deoarece aceștia sunt foarte scumpi pentru manipularea lor atât a semanticii HTML5, cât și a atributelor ARIA.
Concluzie
Sper că acest articol v-a ajutat să obțineți o perspectivă mai bună asupra rolului pe care îl puteți juca în îmbunătățirea accesibilității pe web. Practicați-vă design-ul pe bază de standarde, acordați atenție tehnologiilor în curs de dezvoltare și, chiar dacă eforturile dvs. nu pot fi încă utilizate pe deplin, sunteți în măsură să vă protejați munca în viitor. Vă mulțumim că ați citit (sau ascultat)!
Accentsconagua
Share
Demo-ul 
