Hallo an alle wunderbaren Entwickler da draußen! In diesem Beitrag werde ich Sie durch die Erstellung eines einfachen Kontaktformulars mit semantischem HTML und einer tollen CSS-Pseudoklasse namens führen :focus-withindem „Vermischten Geschmack“. Seine :focus-within Die Klasse ermöglicht eine gute Kontrolle über den Fokus und lässt Ihren Benutzer wissen, dass er sich genau an dieser Stelle im Erlebnis befindet. Bevor wir loslegen, wollen wir uns mit dem Kern dessen befassen, was Web-Zugänglichkeit ausmacht.

Formularzugänglichkeit?

Sie haben wahrscheinlich schon überall den Begriff „Barrierefreiheit“ oder das Numeronym a11y gehört. Was bedeutet das? Das ist eine tolle Frage mit so vielen Antworten. Wenn wir uns die physische Welt ansehen, bedeutet Barrierefreiheit Dinge wie das Vorhandensein von Behältern für scharfe Gegenstände in den Badezimmern Ihres Unternehmens, die Sicherstellung, dass es Rampen für Personen mit Rollstuhl gibt, und das Bereithalten von Peripheriegeräten wie großformatigen Tastaturen für alle, die diese benötigen.

Die Bandbreite der Barrierefreiheit endet hier nicht, wir verfügen über digitale Barrierefreiheit, die wir ebenfalls kennen müssen, nicht nur für externe Benutzer, sondern auch für interne Kollegen. Farbkontrast ist eine niedrig hängende Frucht dass wir in der Lage sein sollten, den Keim zu ersticken. An unseren Arbeitsplätzen stellen wir sicher, dass Mitarbeiter, die unterstützende Technologien wie einen Bildschirmleser benötigen, diese installiert und verfügbar haben. Es gibt viele Dinge, die beachtet werden müssen. Dieser Artikel konzentriert sich auf die Barrierefreiheit im Internet unter Beibehaltung der WCAG (Richtlinien zur Barrierefreiheit von Webinhalten) im Auge.

Diese Pseudoklasse ist wirklich großartig, wenn Sie hervorheben 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 auf eine Eingabe verschoben wird, können Sie die Beschriftung eines Eingabeelements fett und größer machen, wenn der Fokus auf diese Eingabe verschoben wird. Was unten in den Codeausschnitten und Beispielen passiert, macht das Formular zugänglich. :focus-within ist nur eine Möglichkeit, wie wir CSS zu unserem Vorteil nutzen können.

Wie man sich konzentriert

Im Hinblick auf Barrierefreiheit und Web-Erlebnis ist der Fokus der visuelle Indikator dafür, dass auf der Seite, in der Benutzeroberfläche oder innerhalb einer Komponente mit etwas interagiert wird. CSS kann erkennen, wann ein interaktives Element fokussiert ist.

Stellen Sie immer sicher, dass die Fokusanzeige oder der Ring um die fokussierbaren Elemente den richtigen Farbkontrast während des gesamten Erlebnisses beibehält.

„Focus“ ist so geschrieben und kann passend zu Ihrem Branding gestaltet werden, wenn Sie sich dafür entscheiden.

:focus {
  * / INSERT STYLES HERE /*
}

Was auch immer Sie tun, stellen Sie Ihre Gliederung niemals auf ein 0 or none. Dadurch wird ein sichtbarer Fokusindikator für alle während des gesamten Erlebnisses entfernt. 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 die Gliederung auf festlegen 0 or noneDadurch wird der Fokusring für alle Ihre Benutzer entfernt. Dies tritt häufig bei der Verwendung eines CSS-Resets auf. Durch einen CSS-Reset werden die Stile auf eine leere Leinwand zurückgesetzt. Auf diese Weise können Sie die leere Leinwand nach Ihren Wünschen gestalten. Wenn Sie einen CSS-Reset verwenden möchten, schauen Sie sich das an Josh Comeaus Reset.

*TUN SIE NICHT, was unten steht!

:focus {
  outline: 0;
}

:focus {
  outline: none;
}

Schauen Sie nach innen!

In diesem Artikel geht es um eine der coolsten Möglichkeiten, den Fokus mithilfe von CSS zu stylen. Falls Sie das noch nicht überprüft haben :focus-within Pseudo-Klasse, schauen Sie sich das unbedingt an! Bei der Verwendung von semantischem Markup und CSS gibt es viele versteckte Schätze, und dies ist einer davon. Viele Dinge, die übersehen werden, sind standardmäßig zugänglich, zum Beispiel ist semantisches Markup standardmäßig zugänglich und sollte jederzeit über Divs verwendet werden.

<header>
  <h1>Semantic Markup</h1>
  <nav>
    <ul>
      <li><a href="/de/">Home</a></li>
      <li><a href="/de/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>

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

Sofern keine benutzerdefinierte Komponente erstellt werden muss, a div ist gut zu verwenden, gepaart mit ARIA (Accessible Rich Internet Applications). Wir können in einem späteren Beitrag ausführlicher auf ARIA eingehen. Konzentrieren wir uns zunächst auf diese CSS-Pseudoklasse, um zu sehen, was ich dort gemacht habe.

Das :focus-within Mit der Pseudoklasse können Sie ein Element auswählen, wenn eines der darin enthaltenen untergeordneten Elemente den Fokus hat.

: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 die Hintergrundfarbe Orange hinzu, fügt etwas Abstand hinzu und ändert die Farbe der Beschriftungen in Schwarz.

Das Endprodukt sieht in etwa wie unten aus. Natürlich gibt es unzählige Möglichkeiten, das Design zu ändern, aber das sollte Sie auf einem guten Weg sein, das Web für alle zugänglicher zu machen!

Ein weiterer Anwendungsfall für die Verwendung :focus-within Dies würde darin bestehen, die Beschriftungen fett zu machen, eine andere Farbe zu wählen oder sie für Benutzer mit Sehbehinderung zu vergrößern. Der Beispielcode dafür würde in etwa wie folgt 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 bietet dementsprechend auch eine hervorragende Browserunterstützung auf ganzer Linie Kann ich benutzen.

Zusammenfassung

Die Schaffung einer beeindruckenden, zugänglichen Benutzererfahrung sollte bei der Bereitstellung von Software immer oberste Priorität haben, nicht nur extern, sondern auch intern. Wir als Entwickler bis hin zur obersten Führungsebene müssen uns der Herausforderungen bewusst sein, vor denen andere stehen, und wie wir Botschafter der Webplattform sein können, um sie zu einem besseren Ort zu machen.

Der Einsatz von Technologien wie semantischem Markup und CSS zur Schaffung integrativer Räume ist ein entscheidender Beitrag dazu, das Web zu einem besseren Ort zu machen. Lassen Sie uns weiter voranschreiten und Leben verändern.

Schauen Sie sich hier eine weitere großartige Ressource zu CSS-Tricks an mit :focus-within.

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• PlatoData.Network Vertikale generative KI. Motiviere dich selbst. Hier zugreifen.
• PlatoAiStream. Web3-Intelligenz. Wissen verstärkt. Hier zugreifen.
• PlatoESG. Kohlenstoff, CleanTech, Energie, Umwelt, Solar, Abfallwirtschaft. Hier zugreifen.
• PlatoHealth. Informationen zu Biotechnologie und klinischen Studien. Hier zugreifen.
• Quelle: https://css-tricks.com/accessible-forms-with-pseudo-classes/