Cerințele pentru designul web includ din ce în ce mai mult accesibilitatea web. Dar nu este suficient optimizarea site-ului pentru toate browserele majore cu compatibilitate multiplă a dispozitivelor? Puteți măsura cu ușurință performanța site-ului dvs., accesibilitatea, cele mai bune practici și SEO utilizând Google Lighthouse. Deci, de ce contează accesibilitatea?

Potrivit CDC (Centre for Disease Control and Prevention), peste 60 de milioane de americani trăiesc cu un handicap. Urmând liniile directoare privind accesibilitatea conținutului web, puteți introduce câteva considerații preliminare care vor contribui la crearea unui site web accesibil. Iată tot ce aveți nevoie pentru a începe cu accesibilitatea web utilizând HTML și CSS.

HTML structurat cu semantică adecvată

În timp ce site-ul este atractiv din punct de vedere vizual, utilizatorii de tehnologie de asistență nu ar trebui să se confunde. Deși multe sisteme de gestionare a conținutului, cum ar fi WordPress, aplică codul HTML, este responsabilitatea dumneavoastră să verificați din nou și să confirmați că acesta este aplicat corect.

De exemplu, a

Citeste mai mult: Exemple simple de cod HTML pe care le puteți învăța în 10 minute

HTML semantic este mai ușor de dezvoltat, deoarece veți obține funcționalități suplimentare împreună cu acesta. Funcționează minunat pe mobil. De asemenea, atunci când acordați importanță cuvintelor cheie înfășurate în interior

sau tag, ajută în SEO.

Conținut structurat pentru utilizatorii de cititori de ecran

Iată un exemplu de HTML semantic bun vs. rău.

HTML semantic bun
Direcția mea

Iată cum puteți crea un site accesibil utilizând HTML și CSS

A doua mea rubrică

HTML semantic greșit
Direcția mea

Iată cum puteți crea un site accesibil utilizând HTML și CSS

Primul caz este destul de ușor de navigat pentru cititoarele de ecran. Se va citi antetul care notifică antetul și paragraful. Se va opri o secundă după fiecare element. Puteți sări peste unele titluri sau să reveniți la precedent folosind Enter / Return. De asemenea, puteți forma un cuprins utilizând eticheta antet.

Când scrieți HTML de prezentare în loc de HTML semantic (în al doilea caz), linia se întrerupe inutil și are ca rezultat o experiență proastă. Este ca și cum ai pregăti un bloc uriaș, care este mult mai greu de utilizat în cascadă și de manipulat, deoarece nu există selectori potențiali.

Limba și aspectele pentru site-ul web accesibil

Ar trebui să utilizați un limbaj precis cu acronime și abrevieri extinse. Dacă este posibil, încercați să evitați liniuțele scriind 9-5 -> 9 până la 5. Anterior, tabelele HTML erau utilizate pentru a crea aspectele paginii. Obișnuia să împiedice citirile corecte datorită tabelelor imbricate care formau un aspect destul de complex. Iată o structură modernă a site-ului web:

Acesta este un antet



Conținutul paginii principale

care conține articol

Titlul articolului

conținutul articolului



Subsol pentru site-ul web

Deci, după cum puteți vedea, acest aspect este ușor de citit ecranul. Marcajul este de înțeles cu un cod clar și concis. De asemenea, este ușor de întreținut și necesită o lățime de bandă mai mică în timpul descărcării. Asigurați-vă că ați plasat codul sursă în mod logic; va face toată diferența.

Reconsiderați comenzile UI, tabelele și textul alternativ

Cel mai frecvent, comenzile UI sunt butoanele, formularele și comenzile de legătură ale documentului dvs. web. Regula generală este că pot fi manipulate de tastatură. Au un anumit stil implicit (pot diferi în diferite browsere) în care puteți accesa alte opțiuni folosind tasta tab și apăsați Enter / Return pentru a ajunge la o concluzie. Puteți gestiona etichetele de text adăugând texte de ancorare distincte și semnificative în loc de „faceți clic aici”.

Pentru a crea tabele accesibile, adăugați anteturi de tabel

și specificați rândurile sau coloanele folosind atributul scope. În plus, puteți utiliza fișierul sau atribut rezumat pentru a oferi cititorilor de ecran o prezentare rapidă a conținutului tabelului.

Textul alternativ oferă informațiile contextuale ale imaginii sau ale videoclipurilor crawlerelor web și cititoarelor de ecran. Dacă imaginea dvs. are scop decorativ, este mai bine să lăsați eticheta alternativă goală. În caz contrar, oferirea unei descrieri detaliate a imaginii ajută foarte mult.

În majoritatea cazurilor, cititorul de ecran va citi textul alternativ, numele fișierului și atributul titlu (îl puteți omite). De asemenea, dacă nu doriți să utilizați text alternativ sau doriți să adăugați aceeași etichetă la mai multe imagini, atunci iată un sfat rapid:

O floare roșie ...

Ați folosit atributul aria-labelledby pentru a vă referi la acel id. Acesta va permite cititorilor de ecran să utilizeze text alternativ sub forma acelui paragraf.

CSS standard pentru o mai bună accesibilitate

Stilul caracteristicilor paginii accesibile înseamnă că designul dvs. trebuie să se comporte în funcție de conținutul de bază al paginii. De exemplu, pentru un

,

, și

element, un CSS tipic ar trebui să fie:

h1 {
dimensiunea fontului: 4rem;
}
p, li {
dimensiunea fontului: 1,5rem;
Culoarea albastra;
}

Dimensiunea fontului, spațierea literelor, familia fonturilor etc. ar trebui să ajute la o citire confortabilă. Titlurile ar trebui să iasă în evidență din textul corpului (stilul implicit este, de asemenea, bun). În plus, textul ar trebui să aibă o culoare contrastantă din fundal pe care îl selectați cu CSS.

Styling Text, Link-uri și etichete

Micro-interacțiunile sunt posibile cu un CSS accesibil. Poate fi la fel de mic ca accentuarea textului și evidențierea legăturilor într-un mod adecvat. Puteți utiliza și etichetați distinct. Puteți adăuga un subliniat punctat folosind element.

Link-ul standard trebuie subliniat cu o culoare implicită: albastru și un link vizitat anterior cu o culoare implicită: violet (îl puteți personaliza).

A {
culoare: # ff0000;
}
a: activ {
culoare: # 000000;
culoare de fundal: # a60000;
}
a: hover, a: vizitat, a: focus {
culoare: # a60000;
decor-text: nici unul;
}

Deci, cu o schimbare a indicatorului mouse-ului, ar trebui să evidențiați textul focalizat. Cursorul indicatorului și conturul joacă un rol important în accesibilitatea web.

Utilizați CSS pentru a da un aspect curat elementelor formularului și etichetelor. De asemenea, decideți stările de focalizare / deplasare care sunt consistente în majoritatea browserelor. Amintiți-vă că aceste indicii mici îi ajută pe oameni să vă înțeleagă pagina web.

Contrastul culorilor și valorile ascunse

Ajustați schema de culori a site-ului web astfel încât culoarea din prim-plan (text / imagine) să contrasteze cu culoarea de fundal în primul rând pentru că este mai greu pentru persoanele cu deficiențe de vedere (de exemplu, daltonism) să citească conținutul corect. Poți să folosești Color Contrast Checker pentru a obține o schemă de culori decentă conform criteriilor WCAG. De asemenea, încercați să adăugați semne de marcare (cum ar fi un asterisc) împreună cu avertismente sau termeni și condiții (nu doar o alertă roșie).

Cititoarele de ecran nu au nimic de îngrijorat până când ordinea codului sursă nu este scrisă decent. Încercați să evitați utilizarea afișajului: nici unul sau a vizibilității: proprietăți ascunse, deoarece ascund conținutul de cititoarele de ecran.

Simplificați stilul

Punctul cheie este indiferent de cât de bine proiectați site-ul, utilizatorii au diverse motive pentru a ignora stilul. De exemplu, poate unii doresc o dimensiune mai mare a textului sau doresc să schimbe textul și culoarea de fundal pentru a fi ușor de citit. Deci, zona dvs. de conținut ar trebui să o poată gestiona complet.

Concluzie: combinați HTML și CSS

Acum, cunoașteți noțiunile de bază pentru a începe cu HTML semantic și a scrie un cod sursă sensibil în ordinea corectă pentru un site web accesibil. Concentrați-vă pe HTML și treceți la crearea unui CSS accesibil după ce ați terminat.

Folosind tehnicile de mai sus, puteți îmbunătăți experiența utilizatorului și puteți servi un public frumos. Deci, începeți să creați site-uri web care sunt receptive și accesibile.

Cum să creați un site web: pentru începători

Astăzi vă voi ghida prin procesul de creare a unui site web complet de la zero. Nu vă faceți griji dacă sună dificil. Vă voi ghida prin ea la fiecare pas.

Citiți în continuare

Despre autor

Extindeți pentru a citi povestea completă