Ren CSS: Tilgængelige afkrydsningsfelter og radioknapper

Hvis du læser denne artikel, ved du, at det er en smerte at tilføje brugerdefinerede stilarter til standard afkrydsningsfelter og radioknapper, der kun bruger CSS. Hvis du holder dig med standardindstillingerne, ser de anderledes ud på forskellige browsere. Der er flere løsninger til at omgå dette problem ved hjælp af ting som forhandlerpræfikser, baggrundsbilleder, unicode-tegn og ikonskrifter. Men de fleste af disse løsninger har egne spørgsmål eller er ikke ensartede på tværs af alle browsere. Derudover fokuserer meget få af disse løsninger på tilgængelighed.

Jeg fandt også, at brug af en af ​​ovennævnte løsninger ikke giver mig det udseende og følelse, som jeg ønsker. Men jeg fandt en enkel løsning, der ikke kompromitterer udseendet og opretholder tilgængeligheden.

Så lad os komme i gang! Vi bruger følgende:

  • :: før og :: efter pseudo-elementer
  • : markeret CSS-pseudoklasse-vælger
  • + tilstødende søskendesektor

Næsten alle browsere (IE 10 og derover) har god støtte til de tre varer ovenfor.

Jeg vil demonstrere en løsning til afkrydsningsfelter her, men radioknapper bruger den samme tilgang med lidt forskellige stilarter.

markup

         

Den ydre .checkbox-indpakning er at indkapsle input og etiket, så vi ved, at denne del af markeringen repræsenterer et afkrydsningsfelt.

Følgende ting kræves for at få afkrydsningsfeltet til at fungere:

  • Etiketten skal vises efter
  • Id-attributten er påkrævet i
  • Til attributten kræves på etiketten

Årsagerne til disse krav vil blive forklaret i trin 3 i denne artikel.

Trin 1: Skjul standard afkrydsningsfeltet uden at miste tilgængeligheden

Da vi ikke kan style standard-afkrydsningsfeltet ved hjælp af CSS, er vi nødt til at skjule det. Der er flere måder at skjule :

  • Brug display: ingen
  • Brug synlighed: skjult
  • Brug opacitet: 0
  • Placer det fra skærmen ved hjælp af position: absolut og en sindssygt stor værdi som venstre: -9999px

Her er en interessant artikel, der dækker nogle af disse metoder: http://webaim.org/techniques/css/invisiblecontent/. Vi ønsker ikke at bruge de to første metoder, fordi en skærmlæser ikke kan læse standardfeltet. Jeg kan godt lide den tredje metode bedst, fordi vi ikke nødvendigvis behøver at placere afkrydsningsfeltet fra skærmen til vores brugssag. Det kan forblive usynligt på det aktuelle sted.

Vigtig note: Selvom det skjulte input stadig er tilgængeligt, er vi nødt til at tilføje: fokusformater, så brugerne let kan registrere det. Det gør vi i trin 4.

Så lad os skjule standard afkrydsningsfeltet ved hjælp af opacitet: 0:

.indtastning af afkrydsningsfelt [type = "afkrydsningsfelt"] {
    opacitet: 0;
}

Dette er, hvad vi ser efter det første trin:

Trin 2: Oprettelse af et falsk afkrydsningsfelt ved hjælp af pseudo-elementer

Ved hjælp af :: før og :: efter pseudo-elementer kan vi oprette et falsk afkrydsningsfelt. Vi bruger elementet :: før til at oprette den ydre boks og :: efter-elementet til at oprette afkrydsningsfeltet. Vi placerer disse elementer før teksten på etiketten.

Jeg har delt dette trin i tre dele.

Del 1: Oprettelse af den ydre boks

Vi vil gøre :: før pseudo-elementet til et inline-block-element og tildele det en højde og en bredde. Vi tilføjer en ramme for at gøre den synlig. Du kan også tilføje dine egne brugerdefinerede stilarter i stedet for grænsen.

.checkbox label :: før {
    indhold: "";
    display: inline-block;
    
    højde: 16px;
    bredde: 16px;
    
    kant: 1px fast;
}

Bemærk: indhold: "" kræves for at synliggøre pseudo-elementet. Hvis indholdet ikke er indstillet, gengives pseudo-elementet ikke.

Del 2: Oprettelse af afkrydsningsfeltet

Vi gør :: efter pseudo-elementet til en inline-blok og tildeler det en højde og en bredde. Vi tilføjer også brugerdefinerede stilarter til dets venstre og nedre kant og roterer det med 45 grader for at få det til at se ud som et hak.

.checkbox label :: efter {
    indhold: "";
    display: inline-block;
    højde: 6px;
    bredde: 9px;
    kant-venstre: 2px fast;
    kantbund: 2px fast;
    
    transform: rotere (-45deg);
}

Del 3: Placering af den ydre boks og markering

Vi bruger absolut positionering til at placere begge pseudo-elementer i forhold til teksten på etiketten.

.checkbox label {
    position: relativ;
}
.checkbox label :: før,
.checkbox label :: efter {
    position: absolut;
}
/ * Ydre-kasse * /
.checkbox label :: før {
    top: 3px;
}
/*Afkrydsning*/
.checkbox label :: efter {
    venstre: 4px;
    top: 7px;
}

Trin 3: Få markeringen til at vises og forsvinde baseret på afkrydsningsfeltets tilstand

Fordi vi bruger id attributten på og for attributten på etiketten, er det muligt at skifte tilstand for standard afkrydsningsfeltet ved at klikke på etiketten. Og grunden til, at vi placerede etiketten efter er, så vi kan udnytte den: markerede tilstand af for at style :: efter pseudo-elementet (afkrydsningsfelt) af etiketten ved hjælp af en + tilstødende søskensvælger som vist nedenfor:

/ * Skjul afkrydsningsfeltet som standard * /
.checkbox input [type = "afkrydsningsfelt"] + label :: efter {
    indhold: ingen;
}
/ * Fjern skjulet i den markerede tilstand * /
.checkbox input [type = "checkbox"]: markeret + label :: efter {
    indhold: "";
}

Vi har nu et funktionelt afkrydsningsfelt, men husk, at det stadig ikke er tilgængeligt.

Trin 4: Tilføjelse af fokusformater for at gøre afkrydsningsfeltet tilgængeligt

Ved hjælp af: fokusvælger på kan vi igen bruge + tilstødende søskensvælger til at give :: før pseudo-elementet (ydre boks) på etiketten en fokusstil. Jeg kan godt lide at tilføje den samme stil, som Google Chrome bruger, fordi brugere er mest fortrolige med denne stil.

/ * Tilføjelse af fokusformater på den udvendige boks i det falske afkrydsningsfelt * /
.indtastning af afkrydsningsfelt [type = "afkrydsningsfelt"]: fokus + etiket :: før {
    kontur: rgb (59, 153, 252) auto 5px;
}

Prøv at få adgang til afkrydsningsfeltet i ovenstående eksempel med et tastatur.

Og vi er færdige! Vi har et fuldt tilgængeligt, tilpasses og funktionelt afkrydsningsfelt i kun fire enkle trin.

Glem ikke at tjekke de rene CSS-afkrydsningsfelter og radioknapper i Project Clarity, og du er velkommen til at fortælle os om din feedback!