de Jonathan Speek

S-ar putea să vă regăsiți într-o bună zi când trebuie să construiți un buton nebun pe care un designer l-a visat. S-ar putea să începi să ajungi la acel vechi bun <div>, dar ușor acolo big-shifter? – să încercăm și să folosim that <; buton> element pe care îl evitați?

Vom începe prin simpla apucare a codului pentru o pictogramă SVG pe care dorim să o folosim. Am creat rapid o pictogramă Chemex pe care o puteți folosi aici (Îmi place niște cafea ☕️). Lipiți asta între a <button> etichetați în HTML astfel (codul SVG va fi destul de lung).

Cum sa faci accesibil butonul tau elegant SVG
inițial cu cod SVG în interior

Vrem ca acest buton să fie eliminat de stilul său implicit, așa că hai să-i dăm butonului un „id” și îl vom viza cu niște CSS.

1611628806 957 Cum sa faci accesibil butonul tau elegant SVG
Îndepărtați stilul implicit al butonului

Acordați butonului o lățime / înălțime bună, care este mai mare decât SVG-ul nostru – acest lucru va ajuta la vizibilitatea conturului. Apropo, asigurați-vă că raportul de contrast dintre culoarea conturului dvs. și culoarea de fundal trece acest lucru. Scăpați de acel chenar și fundal neplăcut, asigurați-vă că cursorul este setat la indicator.

În acest moment, aveți un buton care poate fi făcut clic pe care, când faceți clic, afișează schița implicită pe care browserul dvs. a ales-o pentru stările de focalizare. Să schimbăm asta și să o îmbunătățim.

1611628807 537 Cum sa faci accesibil butonul tau elegant SVG
Oferiți o anumită atenție butonului?

Acum, când facem clic pe buton sau apăsăm pe butonul nostru, obținem o schiță linistită, care ne permite să știm unde ne concentrăm.

De asemenea, dorim să ne asigurăm că SVG în sine nu primește o schiță dacă este făcut clic. Și vrem să ne asigurăm că Firefox nu adaugă conturul său punctat implicit. În timp ce suntem la el, putem oferi SVG un mic efect de plutire.

1611628807 782 Cum sa faci accesibil butonul tau elegant SVG
Adăugați efectul nostru plăcut de hover?

Acum putem ajunge la părțile reci? Nu vrem să deranjăm sau să confundăm utilizatorii cititorului de ecran cu butonul nostru. Așadar, avem nevoie de o scurtă descriere a ceea ce ne putem aștepta. De asemenea, ați dori ca utilizatorii vizuali să aibă o idee despre ce fac clic și ei, deocamdată să-i continuăm să ghicim …

Putem realiza cu ușurință acest lucru punând un <spun element> în jurul textului din butonul nostru și stilarea acestuia în afara vederii. Face suNu trebuie să setați afișajul la „nici unul”, deoarece acest lucru va împiedica cititoarele noastre de ecran să o acceseze.

1611628807 202 Cum sa faci accesibil butonul tau elegant SVG
Spuneți utilizatorilor noștri cititori de ecran pe ce fac clic?

În cele din urmă, să ne asigurăm că:

  • a ascuns SVG oricui utilizează tehnologia de asistență și
  • setați tabindexul la „0” astfel încât browserul să utilizeze ordinea de tab-uri așteptată pentru orice utilizator de tastatură.
1611628808 129 Cum sa faci accesibil butonul tau elegant SVG
Setarea ordinii corespunzătoare a taburilor ⌨️

Ar trebui să aveți acum un buton cu adevărat accesibil de care să vă puteți mândri? Pe lângă faptul că vă bateți pe spate – faceți-l acum – înainte aveți acum câteva modele reutilizabile pe care le puteți implementa, care vă ajută să faceți webul puțin mai accesibil?

Iată un link către exemplul CodePen, simțiți-vă liber să vă furcați propria copie?

Mulțumesc pentru lectură. Dacă aveți câteva cunoștințe despre accesibilitate, asigurați-vă că lăsați un comentariu.

Si tu poti urmărește-mă pe Twitter aici.