Share
Formularelemente wie Kontrollkästchen und Optionsfelder unterscheiden sich je nach Browser und Betriebssystem des Benutzers. Aus diesem Grund gestalten Designer und Entwickler seit langem ihre eigenen Kontrollkästchen und Optionsfelder, um die Konsistenz unabhängig vom Browser oder Betriebssystem zu gewährleisten.
Dies ist vollkommen in Ordnung, aber gleichzeitig müssen wir sicherstellen, dass unsere Kontrollkästchen und Optionsfelder für Benutzer der assistiven Technologie (AT) und der Tastatur zugänglich bleiben. In diesem Tutorial werde ich erklären, was dies bedeutet und wie wir die Dinge auf verschiedene Weise richtig machen können.
Dieses Tutorial ist Teil von Web Accessibility: der Complete Learning Guide, in dem wir eine Reihe von Tutorials, Artikeln, Kursen und E-Books zusammengestellt haben, um Ihnen das Verständnis der Web-Zugänglichkeit von Anfang an zu erleichtern.
Sehen wir uns zunächst an, wie Ihr Browser standardmäßig Kontrollkästchen darstellt. Wie bereits erwähnt, hängt das, was Sie hier sehen, von Ihrem Browser und Betriebssystem ab.
Sie werden feststellen, dass Sie die Kontrollkästchen mit der Maus ein- und ausschalten können, und Sie können auch die Tastatur verwenden TAB und umschalten mit PLATZ, Dies kann jedoch abhängig von Ihren Einstellungen variieren.).
Zeit, unser eigenes zu bauen. Wir werden die Standard-Kontrollkästchen visuell "ausblenden" und die benutzerdefinierten Versionen darüber platzieren. Als Erstes müssen wir uns das Markup ansehen.
Markup für ein einzelnes Kontrollkästchen sieht folgendermaßen aus:
Wir benutzen ein Dadurch wird unser Kontrollkästchen visuell ausgeblendet, sodass wir unser eigenes erstellen können. Es ist wichtig, dass wir es nicht mit verstecken Sie werden feststellen, dass das Kontrollkästchen eine Höhe und Breite von 40 Pixeln hat, obwohl wir es verstecken. Dies gibt uns einen klaren, funktionalen Zielbereich, den Sie unter unserer fertigen Checkbox platzieren können. Die Verpackung Es fehlt immer noch eine visuelle Checkbox. Um dieses Problem zu lösen, verwenden wir zuerst a Ich habe einen festen Rand von 2px und eine vererbte Farbe verwendet. Sie können jedoch auch eine andere Rahmenfarbe verwenden. Beachten Sie, dass wir dies genauso positionieren und sortieren wie unser transparentes Kontrollkästchen. Mit einigen zusätzlichen Rändern für die Etiketten, die uns etwas Abstand geben, sehen unsere Kontrollkästchen an dieser Stelle aus: Der nächste Schritt ist die Verwendung der Wir erstellen den Scheck mit einem Element, für das unten und rechts ein Rand von vier Pixeln angezeigt wird. Dann drehen wir es um 45 Grad: Bingo! Eine benutzerdefinierte Prüfung. Sie können auch andere Randfarben verwenden, um Ihrem Design zu entsprechen. Zu diesem Zeitpunkt können Sie nichts sehen; Wir verstecken den Scheck immer noch visuell Das Damit haben wir Folgendes: Hinweis: Es gibt noch eine andere Sache, die wir einbeziehen müssen, und das sind "Fokus-Stile". Wir werden sie in der nächsten Demo besprechen. Lassen Sie uns die Dinge auf eine Stufe bringen. Anstelle eines Pseudoelements können wir ein benutzerdefiniertes SVG-Symbol für unsere Prüfung verwenden. Dazu platzieren wir die SVG in das Label: In den meisten Fällen ist SVG also nur dekorativ Wir müssen ein paar Stile auf das SVG-Element anwenden, damit es richtig positioniert und dimensioniert wird. Wir können auch die verwenden Die Inspiration für meine Beispiel-Checkbox-Stile wurde von denen übernommen, die im GOV.UK-Designsystem für Formularelemente (eine brillante Ressource, finden Sie hier). Die Fokusstile sind genauso wichtig wie in jedem fokussierbaren Element: Wir benutzen ein Der Windows High Contrast-Modus entfernt Box-Shadow-Regeln. Aus diesem Grund müssen Sie auch transparente Gliederungsstile hinzufügen: Diese transparente Kontur erscheint im Kontrastmodus als zusätzlicher Rand. Neben der Verwendung von SVG-Code inline können wir auch eine Version der ersten von uns erstellten benutzerdefinierten Kontrollkästchen erstellen, wobei SVG als Hintergrund für das Pseudoelement verwendet wird, anstatt einen eigenen "Check" mit Rahmen zu erstellen. Wir haben alle Techniken behandelt, die Sie dafür wissen müssen. Hier ist die Demo, die Sie analysieren müssen: So ziemlich alle Stile und Logik, die wir bisher für unsere Kontrollkästchen verwendet haben, sind für Optionsfelder gleich. Schauen Sie sich die Demo an und überzeugen Sie sich selbst (zum Navigieren mit der Tastatur verwenden Sie die Pfeiltasten): Der einzige offensichtliche Unterschied ist unsere Verwendung Das Testen ist ein wichtiger Teil des Prozesses, wenn mit nativen HTML-Elementen gearbeitet wird. Meine Tests sind alles andere als perfekt, aber so habe ich die Dinge für dieses Tutorial gemacht: In dieser Liste fehlt wohl Spracherkennungssoftware wie Dragon oder Switch-Geräte. In allen meinen Tests verhielten sich die benutzerdefinierten Kontrollkästchen und Optionsfelder jedoch genauso wie native Elemente. Wir hoffen, dass Ihnen dieses Tutorial vermittelt, wie Sie benutzerdefinierte Stile für Ankreuzfelder und Optionsfelder erstellen können, während Sie immer noch nach Zugänglichkeit suchen. Ich empfehle dringend, mehr über benutzerdefinierte Formularelemente aus diesen Ressourcen zu lernen: mit der CSS-Regel Deckkraft: 0..Wrapper Position: relativ; .wrapper input height: 40px; links: 0; Deckkraft: 0; Position: absolut; oben: 0; Breite: 40px;
Anzeige: keine Dies würde das Kontrollkästchen sowohl für Browser- als auch für Assistent-Technologie-Benutzer (AT) verbergen, und wir würden auch Tastaturinteraktionen verlieren.Position: relativ CSS-Regel Dies hilft uns, die Checkbox und das Label zu positionieren ::Vor und ::nach dem Pseudoelemente mit Position: absolut. Visuelles Kontrollkästchen mit Pseudoelementen hinzufügen
label :: before Element zum Hinzufügen eines Rahmens:.Wrapper-Eingabe + Label :: before border: 2px solid; Inhalt: ""; Höhe: 40px; links: 0; Position: absolut; oben: 0; Breite: 40px;
Benutzerdefinierte Kontrollkästchenstile mit 2px-Rahmen.label :: after Pseudoelement, um die "Überprüfung" zu gestalten:.wrapper input + label :: after content: ""; Rand: 4px fest; Grenze links: 0; Border-Top: 0; Höhe: 20px; links: 14px; Deckkraft: 0; Position: absolut; oben: 6px; verwandeln: drehen (45 Grad); Übergang: Deckkraft 0,2 s "easy-in-out"; Breite: 12px;
Pseudo-Element mit 4px-Rahmen unten und rechts. Bei einer Drehung um 45 Grad sieht es aus wie ein ScheckDeckkraft: 0. Lassen Sie uns das beheben! Benutzerdefinierte Prüfung mit anzeigen
: geprüft Pseudo Selector: geprüft Der Pseudo-Selektor zielt auf ein Kontrollkästchen, wenn es in den Status "Ein" geschaltet wird. Wir können dies verwenden, um die Deckkraft unserer benutzerdefinierten Prüfung zu ändern:.Wrapper-Eingabe: überprüft + label :: after opacity: 1;
2. Benutzerdefiniertes Kontrollkästchen mit Inline-SVG
aria-hidden = "true" verbirgt es vor AT-Geräten.Fügen Sie SVG-Styles hinzu
füllen Eigenschaft, um seine Farbe zu ändern (Blau in diesem Fall):.Wrapper-Eingabe + Label svg border: 0; füllen: blau; Höhe: 20px; Breite: 20px; Deckkraft: 0; Position: absolut; links: 10px; oben: 10px; Übergang: Deckkraft 0,2 s "easy-in-out";
Denken Sie an die Focus State Styles
.Wrapper-Eingabe: focus + label :: before box-shadow: 0 0 0 3px # ffbf47;
Box Schatten für Fokusstile, weil sie abgerundete Rahmen berücksichtigen, die wir später auch für Optionsschaltflächen verwenden werden
Fokusarten für das Kontrollkästchen: gelber Rand Hinzufügen von Fokus-Styles für Windows "High Contrast Mode"
.Wrapper-Eingabe: focus + label :: before box-shadow: 0 0 0 3px # ffbf47; Umriss: 3px solide transparent; / * Für Windows mit hohem Kontrast. * /
Die transparente Kontur wird im Windows-Kontrastmodus als zusätzlicher Rand angezeigt 3. SVG als Pseudoelementhintergrund
4. Benutzerdefinierte Optionsschaltflächen
Grenzradius und Styling der : geprüft etwas anders sagen. Sie könnten sicherlich auch in diesem Fall ein SVG-Symbol verwenden - ich lasse das für Sie als Hausaufgabe! Zeigen Sie uns Ihre Ergebnisse im Kommentarbereich. 5. Prüfung auf Barrierefreiheit
Schlussfolgerung und Referenzen
Accentsconagua