Share
Vormelementen zoals selectievakjes en keuzerondjes zien er anders uit, afhankelijk van de browser en het besturingssysteem van de gebruiker. Om deze reden hebben ontwerpers en ontwikkelaars al lang hun eigen selectievakjes en keuzerondjes ontworpen, met het oog op consistentie, ongeacht de browser of het besturingssysteem.
Dit is prima, maar we moeten er tegelijkertijd voor zorgen dat onze selectievakjes en keuzerondjes toegankelijk blijven voor assistentietechnologie (AT) en toetsenbordgebruikers. In deze tutorial leg ik uit wat dit betekent en hoe we de dingen op verschillende manieren correct kunnen doen.
Deze zelfstudie maakt deel uit van Web Accessibility: de complete leergids, waar we een reeks zelfstudies, artikelen, cursussen en e-boeken hebben verzameld, zodat u de webtoegankelijkheid vanaf het begin beter begrijpt.
Laten we beginnen met te kijken hoe uw browser standaard de selectievakjes aanvinkt. Zoals eerder vermeld, hangt wat u hier ziet af van uw browser en besturingssysteem.
U zult merken dat u uw muis kunt gebruiken om de selectievakjes in of uit te schakelen, plus u kunt uw toetsenbord gebruiken (doorschakelen via TAB en schakelen met RUIMTE, hoewel dit kan veranderen afhankelijk van uw instellingen).
Tijd om onze eigen te bouwen. We gaan de standaardvinkjes visueel "verbergen", waarbij op maat gemaakte versies over de kop worden gezet. Het eerste dat we moeten bekijken, is de opmaak.
Opmaak voor een enkel selectievakje ziet er als volgt uit:
We gebruiken een Dit verbergt ons selectievakje visueel, waardoor we ons eigen kunnen maken. Het is belangrijk dat we het niet verbergen met Je zult merken dat, hoewel we het verbergen, we het selectievakje een hoogte en breedte van 40 px geven. Dit geeft ons een duidelijk, functioneel doelgebied om onder ons gefabriceerde selectievakje te plaatsen. De verpakking We missen nog steeds een visueel selectievakje. Om dit op te lossen gebruiken we eerst een Ik heb een 2px volle rand en overerfde kleur gebruikt, maar je kunt desgewenst een andere randkleur gebruiken. Merk op dat we dit op dezelfde manier positioneren en vergroten als ons transparante checkbox. Met wat extra marges voor de labels om ons wat ruimte te geven, zo zien onze selectievakjes er op dit punt uit: De volgende stap is om de We maken de controle met behulp van een element dat we een onderrand van vier pixels geven voor onder en rechts. Daarna draaien we het 45 graden: bingo! Een aangepaste controle. U kunt ook verschillende randkleuren gebruiken die passen bij uw ontwerp. In dit stadium kunt u niets zien; we verbergen de cheque nog steeds visueel met behulp van De Met dat gedaan, is dit wat we hebben: Notitie: er is nog iets anders dat we hierin moeten opnemen, en dat zijn 'focusstijlen'. We bespreken ze in de volgende demo. Laten we de zaken een niveau hoger leggen. In plaats van een pseudo-element kunnen we een aangepast SVG-pictogram gebruiken voor onze controle. Om dit te doen, plaatsen we de SVG in het label: In de meeste gevallen is SVG gewoon decoratief, dus We moeten een aantal stijlen toepassen op het SVG-element, zodat het op de juiste manier wordt gepositioneerd en gedimensioneerd. We kunnen ook de Inspiratie voor mijn voorbeeld checkbox-stijlen werd genomen van die gevonden in GOV.UK's ontwerpsysteem voor formulierelementen (een briljante bron, ga en neem een kijkje). De focusstijlen zijn net zo belangrijk als in elk focuseerbaar element: We gebruiken een Windows High Contrast Mode verwijdert box-shadow regels, daarom moeten we daarom ook transparante outline styles toevoegen: Deze transparante omtrek verschijnt als extra rand in de modus Hoog contrast. Naast het gebruik van SVG-code inline, konden we ook een versie van de eerste aangepaste selectievakjes maken die we hebben gemaakt, met behulp van SVG als achtergrond voor het pseudo-element in plaats van een eigen "vinkje" met randen te maken. We hebben alle technieken besproken die je hiervoor moet weten, dus hier is de demo die je kunt ontleden: Vrijwel alle stijlen en logica die we tot nu toe voor onze selectievakjes hebben gebruikt, zijn hetzelfde voor keuzerondjes. Bekijk de demo en ontdek het zelf (om met het toetsenbord te navigeren, gebruik de Pijltjestoetsen): Het enige duidelijke verschil is ons gebruik Testen is een belangrijk onderdeel van het proces bij het sleutelen aan native HTML-elementen. Mijn tests zijn verre van perfect, maar dit is hoe ik dingen deed voor deze tutorial: Wellicht ontbreekt in deze lijst spraakherkenningssoftware zoals Dragon of schakelt u van apparaat. Maar bij al mijn tests gedroegen de aangepaste selectievakjes en keuzerondjes zich op dezelfde manier als native elementen. Hopelijk heeft deze tutorial je inzicht gegeven in hoe je aangepaste stijlen voor selectievakjes en keuzerondjes kunt maken, terwijl je toch bouwt voor toegankelijkheid. Ik raad ten zeerste aan meer te leren over aangepaste formulierelementen uit deze bronnen: gebruik van de CSS-regel dekking: 0..wrapper positie: relatief; .wrapper input height: 40px; links: 0; dekking: 0; positie: absoluut; boven: 0; breedte: 40px;
Geen weergeven omdat dit het selectievakje voor gebruikers van zowel browser- als hulptechnologie (AT) zou verbergen en we ook toetsenbordinteracties zouden verliezen.positie: relatief CSS-regel. Dit helpt ons om het selectievakje en label te positioneren ::voor en ::na pseudo-elementen gebruiken positie: absoluut. Visuele checkbox toevoegen met behulp van pseudo-elementen
label :: vóór element om een rand toe te voegen:.wrapper input + label :: before border: 2px solid; inhoud: ""; hoogte: 40px; links: 0; positie: absoluut; boven: 0; breedte: 40px;
Aangepaste selectievakstijlen met 2px-rand.label :: na pseudo-element om de "vinkje" te stijlen:.wrapper input + label :: after content: ""; rand: 4px massief; grens links: 0; border-top: 0; hoogte: 20 px; links: 14px; dekking: 0; positie: absoluut; top: 6px; transformeren: roteren (45 graden); overgang: ondoorzichtigheid 0,2s gemak in gebruik; breedte: 12px;
Pseudo-element gestileerd met 4 px-rand onder en rechts. Als het 45 graden gedraaid is, lijkt het op een vinkjedekking: 0. Laten we dat verhelpen! Reveal Custom Check gebruiken
: aangevinkt Pseudo-selector: aangevinkt pseudo-selector target een selectievakje wanneer het in de "aan" -status wordt geschakeld. We kunnen dit gebruiken om de dekking van onze aangepaste check te wijzigen:.wrapper input: checked + label :: after opacity: 1;
2. Aangepast selectievakje met Inline SVG
aria-verborgen = "true" verbergt het van AT-apparaten.SVG-stijlen toevoegen
vullen eigenschap om de kleur te wijzigen (blauw in dit geval):.wrapper input + label svg border: 0; opvulling: blauw; hoogte: 20 px; breedte: 20px; dekking: 0; positie: absoluut; links: 10px; top: 10px; overgang: ondoorzichtigheid 0,2s gemak in gebruik;
Onthoud Focus State Styles
.wrapper input: focus + label :: before box-shadow: 0 0 0 3px # ffbf47;
box-shadow voor focusstijlen omdat het afgeronde randen respecteert, die we later ook zullen gebruiken voor keuzerondjes
Focusstijlen voor selectievakje: gele rand Focusstijlen toevoegen voor Windows "High Contrast Mode"
.wrapper input: focus + label :: before box-shadow: 0 0 0 3px # ffbf47; overzicht: 3px solide transparant; / * Voor Windows-modus Hoog contrast. * /
Transparante omtrek verschijnt als een extra rand in Windows High Contrast Mode 3. SVG als achtergrond van een pseudo-element
4. Aangepaste keuzerondjes
border-radius en stylen van het : aangevinkt staat een beetje anders. Je zou in dit geval zeker ook een SVG-pictogram kunnen gebruiken - ik zal dat als huiswerk voor je achterlaten! Toon ons uw resultaten in de commentarensectie. 5. Testen op toegankelijkheid
Conclusie en verwijzingen
Accentsconagua