Zugängliche Formulare mit Pseudo Klassen

Hallo liebe Entwickler da draußen! In diesem Beitrag zeige ich Ihnen, wie Sie ein einfaches Kontaktformular mit semantischem HTML und einer fantastischen CSS-Pseudoklasse namens :focus-within erstellen. Die :focus-within-Klasse ermöglicht eine hervorragende Kontrolle über den Fokus und informiert Ihren Benutzer genau darüber, wo er sich in der Benutzererfahrung befindet. Bevor wir loslegen, kommen wir zum Kern dessen, was Web-Zugänglichkeit ausmacht.

Formular-Zugänglichkeit?

Sie haben den Begriff „Zugänglichkeit“ oder das Numeronym a11y wahrscheinlich schon überall gehört. Was bedeutet das? Das ist eine großartige Frage mit vielen Antworten. Wenn wir uns die physische Welt ansehen, bedeutet Zugänglichkeit Dinge wie das Vorhandensein von scharfen Behältern in Ihren Badezimmern in Ihrem Unternehmen, die Sicherstellung von Rampen für Menschen mit Mobilitätshilfen und das Vorhandensein von Peripheriegeräten wie Tastaturen mit Großbuchstaben für jeden, der sie benötigt.

Die Bandbreite der Zugänglichkeit endet nicht dort, wir müssen auch die digitale Zugänglichkeit berücksichtigen, nicht nur für externe Benutzer, sondern auch für interne Kollegen. Der Farbkontrast ist eine leicht zu erreichende Frucht, die wir im Keim ersticken sollten. Stellen Sie an unseren Arbeitsplätzen sicher, dass wir assistierende Technologien wie Screenreader installieren und zur Verfügung stellen, falls ein Mitarbeiter diese benötigt. Es gibt viele Dinge, die berücksichtigt werden müssen. Dieser Artikel konzentriert sich auf die Web-Zugänglichkeit unter Berücksichtigung der WCAG (Web Content Accessibility Guidelines).

Diese Pseudoklasse ist wirklich großartig, wenn Sie betonen möchten, dass der Benutzer tatsächlich mit dem Element interagiert. Sie können beispielsweise die Hintergrundfarbe des gesamten Formulars ändern. Oder wenn der Fokus in ein Eingabefeld verschoben wird, können Sie die Beschriftung eines Eingabefeldelements fett und größer machen, wenn der Fokus in dieses Eingabefeld verschoben wird. Was unten in den Code-Snippets und Beispielen geschieht, macht das Formular zugänglich. :focus-within ist nur eine Möglichkeit, wie wir CSS zu unserem Vorteil nutzen können.

Wie man fokussiert

Fokus, in Bezug auf Zugänglichkeit und die Web-Erfahrung, ist die visuelle Anzeige, dass etwas auf der Seite, in der Benutzeroberfläche oder innerhalb einer Komponente gerade interagiert wird. CSS kann erkennen, wann ein interaktives Element fokussiert ist.

Stellen Sie immer sicher, dass der Fokusindikator oder der Ring um fokussierbare Elemente während der gesamten Erfahrung den richtigen Farbkontrast aufweist.

Fokus wird so geschrieben und kann optional so gestaltet werden, dass er zu Ihrem Branding passt.

:focus {
  * / INSERT STYLES HERE /*
}

Was auch immer Sie tun, setzen Sie Ihren Umriss niemals auf 0 odernone. Dies entfernt einen sichtbaren Fokusindikator für alle Benutzer der gesamten Erfahrung. Wenn Sie den Fokus entfernen müssen, können Sie dies tun, aber stellen Sie sicher, dass Sie ihn später wieder hinzufügen. Wenn Sie den Fokus aus Ihrem CSS entfernen oder den Umriss auf 0 odernone setzen, wird der Fokusring für alle Ihre Benutzer entfernt. Dies geschieht häufig bei der Verwendung eines CSS-Resets. Ein CSS-Reset setzt die Stile auf eine leere Leinwand zurück. So haben Sie die Kontrolle über die leere Leinwand, um sie nach Belieben zu gestalten. Wenn Sie einen CSS-Reset verwenden möchten, sehen Sie sich Josh Comeaus Reset an.

*TUN SIE NICHT, was unten steht!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Schau nach innen!

Eine der coolsten Möglichkeiten, den Fokus mit CSS zu gestalten, ist, worum es in diesem Artikel geht. Wenn Sie die :focus-within-Pseudoklasse noch nicht ausprobiert haben, sollten Sie sie unbedingt ansehen! Es gibt viele versteckte Juwelen, wenn es um die Verwendung von semantischem Markup und CSS geht, und dies ist eines davon. Viele Dinge, die übersehen werden, sind standardmäßig zugänglich, zum Beispiel ist semantisches Markup standardmäßig zugänglich und sollte immer divs vorgezogen werden.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<section><!-- Code goes here --></section>

<section><!-- Code goes here --></section>

<aside><!-- Code goes here --></aside>

<footer><!-- Code goes here --></footer>

header, nav, main, section, aside und footer sind alles semantische Elemente. h1 und ul sind ebenfalls semantisch und zugänglich.

Sofern kein benutzerdefiniertes Widget erstellt werden muss, ist die Verwendung eines div in Ordnung, gekoppelt mit ARIA (Accessible Rich Internet Applications). Wir können uns in einem späteren Beitrag ausführlich mit ARIA beschäftigen. Konzentrieren wir uns vorerst auf diese CSS-Pseudoklasse...

Die :focus-within-Pseudoklasse ermöglicht es Ihnen, ein Element auszuwählen, wenn ein beliebiges untergeordnetes Element, das es enthält, fokussiert ist.

:focus-within in Aktion!

HTML

<form>
  <div>
    <label for="firstName">First Name</label><input id="firstName" type="text">
  </div>
  <div>
    <label for="lastName">Last Name</label><input id="lastName" type="text">
  </div>
  <div>
    <label for="phone">Phone Number</label><input id="phone" type="text">
  </div>
  <div>
    <label for="message">Message</label><textarea id="message"></textarea>
  </div>
</form>

CSS

form:focus-within {
  background: #ff7300;
  color: black;
  padding: 10px;
}

Der obige Beispielcode fügt eine orangefarbene Hintergrundfarbe hinzu, fügt etwas Polsterung hinzu und ändert die Farbe der Beschriftungen in Schwarz.

Das Endergebnis sieht ungefähr so aus. Natürlich sind die Möglichkeiten zur Änderung des Stylings endlos, aber dies sollte Ihnen einen guten Ausgangspunkt bieten, um das Web für alle zugänglicher zu machen!

Ein weiterer Anwendungsfall für die Verwendung von :focus-within wäre, die Beschriftungen fett, in einer anderen Farbe oder größer für Benutzer mit eingeschränktem Sehvermögen zu machen. Der Beispielcode dafür würde ungefähr so aussehen.

HTML

<form>
  <h1>:focus-within part 2!</h1>
  <label for="firstName">First Name: <input name="firstName" type="text" /></label>
  <label for="lastName">Last Name: <input name="lastName" type="text" /></label>
  <label for="phone">Phone number: <input type="tel" id="phone" /></label>
  <label for="message">Message: <textarea name="message" id="message"/></textarea></label>
</form>

CSS

label {
  display: block;
  margin-right: 10px;
  padding-bottom: 15px;
}

label:focus-within {
  font-weight: bold;
  color: red;
  font-size: 1.6em;
}

:focus-within hat laut Can I use auch eine hervorragende Browserunterstützung auf breiter Front.

Fazit

Die Schaffung einer erstaunlichen, zugänglichen Benutzererfahrung sollte stets oberste Priorität haben, wenn Software ausgeliefert wird, nicht nur extern, sondern auch intern. Wir als Entwickler, bis hin zur Führungsebene, müssen uns der Herausforderungen bewusst sein, denen andere gegenüberstehen, und wie wir als Botschafter für die Webplattform fungieren können, um sie zu einem besseren Ort zu machen.

Die Nutzung von Technologien wie semantischem Markup und CSS zur Schaffung inklusiver Räume ist ein entscheidender Schritt, um das Web zu einem besseren Ort zu machen. Lassen Sie uns weiter voranschreiten und Leben verändern.

Sehen Sie sich hier eine weitere großartige Ressource auf CSS-Tricks zur Verwendung von :focus-within an.