Share
Formelementer som kryssboks og radioknapper ser annerledes avhengig av brukerens nettleser og operativsystem. Av denne grunn har designere og utviklere lenge utformet sine egne avkrysningsboks og radioknapper, med sikte på konsistens uansett nettleseren eller OS.
Dette er helt greit, men samtidig må vi sørge for at våre avkrysningsboks og radioknapper er tilgjengelige for hjelpeteknologier (AT) og tastaturbrukere. I denne veiledningen vil jeg forklare hva dette betyr og hvordan vi kan gjøre ting riktig på noen forskjellige måter.
Denne opplæringen er en del av Web Accessibility: Den komplette læringsguiden, der vi har samlet en rekke opplæringsprogrammer, artikler, kurs og e-bøker, for å hjelpe deg å forstå web tilgjengelighet fra begynnelsen.
La oss begynne med å se på hvordan nettleseren din gjør kryssruter som standard. Som nevnt, vil det du ser her, avhenge av nettleseren og operativsystemet.
Du vil legge merke til at du kan bruke musen til å slå av og på, og du kan også bruke tastaturet (hoppe gjennom å bruke TAB og veksle med ROM, selv om dette kan endres avhengig av innstillingene dine).
Tid til å bygge vår egen. Vi skal visuelt "skjule" standardboksene, og legge tilpassede versjoner over toppen. Det første vi må se på er oppslaget.
Markering for en enkelt boks ser slik ut:
Vi bruker en Dette skjuler avmerkingsboksen visuelt, slik at vi kan fortsette å lage vår egen. Det er viktig at vi ikke gjemmer det ved å bruke Du merker at, selv om vi gjemmer det, gir vi avkrysningsboksen en høyde og bredde på 40px. Dette gir oss et klart, funksjonelt målområde å plassere under vår produserte avkrysningsboks. Innpakningen Vi mangler fortsatt en visuell boks. For å løse dette bruker vi først a Jeg har brukt en 2 px solid ramme og arvelig farge, men du kan bruke en annen grense farge hvis du ønsker det. Vær oppmerksom på at vi plasserer og størrelse dette på samme måte som vår gjennomsiktige boks. Med noen ekstra marginer for etikettene for å gi oss noen avstand, så ser dette ut i våre bokser på dette tidspunktet: Det neste trinnet er å bruke Vi lager sjekken ved hjelp av et element som vi gir en fire pixelgrense for bunn og til høyre. Så roterer vi det 45 grader: bingo! En tilpasset sjekk. Du kan også bruke forskjellige grensefarger for å matche designet. På dette stadiet vil du ikke kunne se noe; vi gjemmer fortsatt sjekken visuelt med De Med det gjort, er dette det vi har: Merk: Det er en annen ting vi trenger å inkludere i dette, og det er "fokusstiler". Vi diskuterer dem i neste demo. La oss ta ting opp på et nivå. I stedet for et pseudoelement kunne vi bruke et egendefinert SVG-ikon for sjekken vår. For å gjøre det, ville vi plassere SVG inne i etiketten: I de fleste tilfeller er SVG bare dekorativt, så Vi må bruke et par stiler til SVG-elementet slik at det plasseres og dimensjoneres riktig. Vi kan også bruke Inspirasjon for mine eksempelboks-stiler ble tatt fra de som finnes i GOV.UKs designsystem for formelementer (en strålende ressurs, gå og ta en titt). Fokusstilene er like viktige som i noe fokusabelt element: Vi bruker en Windows High Contrast-modus fjerner boksskyggeregler, derfor må vi også legge til gjennomsiktige kontraststiler: Denne gjennomsiktige oversikten vises som en ekstra ramme i høy kontrast modus. I tillegg til å bruke SVG-kode inline, kunne vi også gjenskape en versjon av de første egendefinerte boksene vi laget, ved hjelp av SVG som bakgrunn for pseudoelementet i stedet for å bygge vår egen "check" med grenser. Vi har dekket alle teknikkene du trenger å vite for dette, så her er demoen for deg å dissekere: Nesten alle stilene og logikken vi har brukt til våre ruter så langt, er de samme for radioknapper. Ta en titt på demoen og se for deg selv (for å navigere med tastaturet, bruk Piltastene): Den eneste tilsynelatende forskjellen er å bruke Testing er viktig del av prosessen når du tinker med innfødte HTML-elementer. Mine tester er langt fra perfekt, men det var slik jeg gjorde ting for denne opplæringen: Kanskje denne listen mangler stemmegjenkjenningssoftware som Dragon, eller bytte enheter. Men i alle mine tester oppførte de egendefinerte boksene og radioknappene på samme måte som innfødte elementer. Forhåpentligvis har denne opplæringen gitt deg en forståelse av hvordan du oppretter egendefinerte stiler for avmerkingsbokser og radioknapper, mens du fortsatt bygger for tilgjengelighet. Jeg anbefaler på det sterkeste å lære mer om egendefinerte formelementer fra disse ressursene: bruker CSS-regelen opasitet: 0..wrapper posisjon: relative; .wrapper input høyde: 40px; venstre: 0; opasitet: 0; posisjon: absolutt; topp: 0; bredde: 40px;
skjerm: ingen fordi dette ville gjemme avmerkingsboksen fra både brukere av nettlesere og assistentteknologier (AT), og vi vil også miste tastaturinteraksjoner.stilling: relativ CSS regel. Dette hjelper oss å plassere avmerkingsboksen og etiketten ::før og ::etter pseudo elementer bruker posisjon: absolutt. Legg til Visual Checkbox ved hjelp av pseudoelementer
etiketten :: før element for å legge til en ramme:.pakkeinngang + etikett :: før border: 2px solid; innhold: ""; høyde: 40px; venstre: 0; posisjon: absolutt; topp: 0; bredde: 40px;
Tilpassede boksestiler med 2px-grense.etiketten :: etter pseudo-element for å stilte "sjekk":.pakkeinngang + etikett :: etter innhold: ""; grense: 4px solid; border-left: 0; border-top: 0; høyde: 20px; igjen: 14px; opasitet: 0; posisjon: absolutt; topp: 6px; transformere: roter (45deg); Overgang: Opacity 0.2s easy-in-out; bredde: 12px;
Pseudoelement stylet med 4px grense bunn og høyre. Når det roteres 45 grader, ser det ut som en sjekkopasitet: 0. La oss rette opp det! Gjenta tilpasset kontroll ved hjelp av
:sjekket Pseudovelger:sjekket pseudovelector retter seg mot en avkrysningsboks når den skiftes til "on" -tilstanden. Vi kan bruke dette til å endre opaciteten til vår egendefinerte sjekk:.innpakningspakke: merket + etikett :: etter opacity: 1;
2. Tilpasset avmerkingsboks Bruke Inline SVG
aria-skjult = "true" skjuler den fra AT-enheter.Legg til SVG-stiler
fylle eiendom for å endre fargen sin (blå i dette tilfellet):.wrapper input + label svg border: 0; fyll: blå; høyde: 20px; bredde: 20px; opasitet: 0; posisjon: absolutt; igjen: 10px; topp: 10px; Overgang: Opacity 0.2s easy-in-out;
Husk fokusstilstilte stiler
.innpakningspakke: fokus + etikett :: før boksskygge: 0 0 0 3px # ffbf47;
box-shadow for fokus stiler fordi det vil respektere avrundede grenser, som vi også vil bruke til radioknapper senere
Fokusstiler for avmerkingsboksen: gul kantlinje Legg til fokus stiler for Windows "High Contrast Mode"
.innpakningspakke: fokus + etikett :: før boksskygge: 0 0 0 3px # ffbf47; omriss: 3px solid gjennomsiktig; / * For Windows høy kontrast modus. * /
Transparent omriss vises som en ekstra ramme i Windows High Contrast Mode 3. SVG som Pseudo Element Bakgrunn
4. Tilpassede Radio Button Styles
border-radius og styling av :sjekket angi litt annerledes. Du kan sikkert også bruke et SVG-ikon i dette tilfellet - jeg vil forlate det som lekser for deg! Vis oss dine resultater i kommentarfeltet. 5. Testing for tilgjengelighet
Konklusjon og referanser
Accentsconagua