Share
Elementele formularului, precum casetele de selectare și butoanele radio, arată diferit în funcție de browserul și sistemul de operare al utilizatorului. Din acest motiv, designerii și dezvoltatorii au elaborat de mult propriile casete de selectare și butoanele radio, având ca scop consecvența indiferent de browser sau de sistemul de operare.
Acest lucru este perfect, dar, în același timp, trebuie să ne asigurăm că casetele de selectare și butoanele radio rămân accesibile utilizatorilor tehnologiei de asistență (AT) și utilizatorilor tastaturii. În acest tutorial voi explica ce înseamnă acest lucru și cum putem face lucrurile în mod corect în câteva moduri diferite.
Acest tutorial face parte din Accesibilitatea Web: Ghidul complet de învățare, unde am colectat o serie de tutoriale, articole, cursuri și cărți electronice, pentru a vă ajuta să înțelegeți accesibilitatea web de la început.
Să începem să examinăm modul în care browserul dvs. redă casetele de selectare în mod prestabilit. După cum sa menționat, ceea ce vedeți aici va depinde de browserul dvs. și de sistemul dvs. de operare.
Veți observa că puteți folosi mouse-ul pentru a activa și a dezactiva casetele de control, plus puteți utiliza tastatura dvs. (faceți salt folosind TAB și comutați folosind SPAŢIU, deși acest lucru s-ar putea modifica în funcție de setările dvs.).
E timpul să ne construim propriul. Vom viziona "ascunde" casetele de selectare implicite, plasând versiuni personalizate în partea de sus. Primul lucru la care trebuie să ne uităm este marcajul.
Marcarea pentru o singură casetă de selectare arată astfel:
Noi folosim a Acest lucru ascunde caseta de verificare vizuală, permițându-ne să mergem mai departe și să creați propria noastră. Este important să nu-l ascundem Veți observa că, chiar dacă îl ascundem, bifăm caseta de selectare cu o înălțime și o lățime de 40 de pixeli. Acest lucru ne oferă o zonă țintă clară și funcțională care să fie plasată sub caseta de selectare fabricată. Ambalajul Încă lipsește o casetă de selectare vizuală. Pentru a rezolva acest lucru, folosim mai întâi a Am folosit o margine solidă de 2px și o culoare moștenită, dar puteți utiliza o altă culoare de margine dacă doriți. Rețineți că poziționăm și dimensionăm acest lucru în același mod ca și caseta de selectare transparentă. Cu niște margini suplimentare pentru etichete pentru a ne da niște spații, acestea arată căsuțele noastre de bifare în acest moment: Următorul pas este să utilizați Creăm cecul folosind un element pe care-l oferim o margine de patru pixeli pentru partea de jos și dreapta. Apoi îl rotim cu 45 de grade: bingo! O verificare personalizată. De asemenea, puteți utiliza diferite culori de margine pentru a se potrivi designului dvs.. În această etapă nu veți putea vedea nimic; încă ascundem verificarea vizuală folosind Cu ceea ce am făcut, acesta este ceea ce avem: Notă: există încă un lucru pe care trebuie să-l includeți în acest lucru, și asta este "stilurile de focalizare". Le vom discuta în următorul demo. Să facem lucrurile la un nivel. În loc de un element pseudo am putea folosi o pictogramă personalizată SVG pentru cecul nostru. Pentru a face acest lucru, am plasa SVG în interiorul etichetei: În majoritatea cazurilor, SVG este doar decorativ Trebuie să aplicăm câteva elemente de stil pentru elementul SVG astfel încât să fie poziționate și dimensionate corespunzător. Putem folosi, de asemenea, Inspirația pentru stilurile casetei de exemplu a fost inspirată din cele găsite în sistemul de design GOV.UK pentru elementele de formă (o resursă strălucitoare, du-te și aruncă o privire). Stilurile de focalizare sunt la fel de importante ca și în orice element focalizabil: Noi folosim a Modul de contrast ridicat al Windows elimină regulile umbrită în cutie, deci din acest motiv trebuie să adăugăm și stiluri transparente de contur: Această contur transparent apare ca o margine suplimentară în modul de contrast înalt. În afară de utilizarea codului SVG inline, am putea recrea și o versiune a primelor casete de selectare personalizate pe care le-am făcut, folosind SVG ca fundal pentru elementul pseudo, în loc să construim propriul "control" cu frontierele. Am acoperit toate tehnicile pe care trebuie să le cunoașteți pentru acest lucru, deci iată demo-ul pe care îl puteți face pentru a diseca: Destul de mult, toate stilurile și logica pe care le-am folosit pentru căsuțele noastre deocamdată sunt aceleași pentru butoanele radio. Aruncați o privire la demo și vedeți-vă (pentru a naviga cu tastatura, utilizați Sagetile): Singura diferență aparentă este folosirea noastră Testarea este o parte importantă a procesului atunci când tinkering cu elemente HTML nativ. Testele mele sunt departe de a fi perfecte, dar așa am făcut și eu pentru acest tutorial: Este posibil ca această listă să lipsească de la software-ul de recunoaștere a vocii, cum ar fi Dragon, sau de a comuta dispozitive. Dar, în toate testele mele, casetele de selectare personalizate și butoanele radio se comportau în același mod ca și elementele native. Sperăm că acest tutorial vă oferă o înțelegere a modului de a crea stiluri personalizate pentru casetele de selectare și butoanele radio, în timp ce încă se construiesc pentru accesibilitate. Vă recomand să învățați mai multe despre elementele formularului personalizat din aceste resurse: utilizând regula CSS opacitate: 0..înveliș poziție: relativă; intrare de tip wrapper height: 40px; stânga: 0; opacitate: 0; poziția: absolută; top: 0; lățime: 40px;
afișare: niciuna pentru că acest lucru ar ascunde caseta de selectare de la utilizatorii de tehnologii de navigare și asistență (AT), iar noi am pierde și interacțiunile de la tastatură.poziție: relativă Regula CSS. Acest lucru ne ajută să poziționăm caseta de selectare și eticheta ::inainte de și ::după pseudo elemente folosind poziția: absolută. Adăugați caseta de verificare vizuală utilizând pseudo elemente
eticheta :: înainte element pentru a adăuga o margine:.wrapper input + label :: înainte de border: 2px solid; conținut: ""; înălțime: 40px; stânga: 0; poziția: absolută; top: 0; lățime: 40px;
Câmpuri cu casete personalizate cu margine de 2px.etichetă :: după pseudo element pentru stilul "check":.wrapper input + label :: după conținut: ""; frontieră: 4px solid; frontieră-stânga: 0; vârf de frontieră: 0; înălțime: 20px; stânga: 14px; opacitate: 0; poziția: absolută; top: 6px; transforma: roti (45deg); tranziție: opacitate de 0,2 secunde; lățime: 12px;
Element Pseudo cu un stil de fundal de 4px și de dreapta. Când se rotește 45 de grade, arată ca un cecopacitate: 0. Să rezolvăm asta! Reveal Custom Check Using
: verificat Pseudo Selector: verificat pseudo selectorul vizează o căsuță de selectare atunci când este comutată în starea "on". Putem folosi aceasta pentru a schimba opacitatea cecului nostru personalizat:.înveliș de intrare: verificat + etichetă :: după opacity: 1;
2. Câmp de verificare personalizat utilizând SVG inline
arie-ascuns = "true" îl ascunde de dispozitivele AT.Adăugați stiluri SVG
completati proprietății să-și schimbe culoarea (albastru în acest caz):.wrapper de intrare + etichetă svg frontieră: 0; umpleți: albastru; înălțime: 20px; lățime: 20px; opacitate: 0; poziția: absolută; stânga: 10px; top: 10px; tranziție: opacitate de 0,2 secunde;
Amintiți-vă stilurile de stare focalizată
.înveliș de intrare: focus + etichetă :: înainte de box-shadow: 0 0 0 3px # ffbf47;
box-shadow pentru stilurile de focalizare, pentru că va respecta granițele rotunjite, pe care le vom folosi și pentru butoanele radio mai târziu
Stiluri de focalizare pentru caseta de selectare: margine galbenă Adăugați stiluri de focalizare pentru Windows "Mod înalt de contrast"
.înveliș de intrare: focus + etichetă :: înainte de box-shadow: 0 0 0 3px # ffbf47; contur: 3 pixeli transparenți; / * Pentru modul Windows cu contrast ridicat. * /
Prezentarea transparentă apare ca o margine suplimentară în modul Windows High Contrast 3. SVG ca pseudo-element de fond
4. Stiluri personalizate ale butoanelor radio
border-radius și stilul : verificat stați puțin diferit. Cu siguranță puteți folosi o pictogramă SVG și în acest caz - voi lăsa asta ca temă pentru tine! Arătați-ne rezultatele dvs. în secțiunea de comentarii. 5. Testarea accesibilității
Concluzie și referințe
Accentsconagua