Websites sollten für alle zugänglich sein. Hier ist, was Sie wissen müssen.

Das Erstellen einer Webseite ist nicht nur das Erstellen einer Webseite. Ein wichtiger Aspekt der Front-End-Entwicklung besteht darin, sicherzustellen, dass Benutzeroberflächen für jeden im Internet zugänglich sind, einschließlich Menschen mit Seh- und Hörbehinderungen. Sie müssen Ihren Code mit diesen Leuten im Hinterkopf schreiben. Wie geben Sie sehbehinderten Menschen den gleichen Zugang zu Ihrer Website wie nicht sehbehinderten Menschen? Lesen Sie diesen Artikel, um es herauszufinden.

Warum sollten sich Entwickler Gedanken über die Barrierefreiheit im Web machen?

Barrierefreiheit im Internet dreht sich um die Idee, dass jeder den gleichen Zugang zum Internet haben sollte, unabhängig von einer oder mehreren Behinderungen. Eine barrierefreie Website macht es einfacher, ein größeres Publikum zu erreichen (etwa 16 % der Weltbevölkerung leidet an der einen oder anderen Behinderung).

Digitale Zugänglichkeit sollte keine Option sein

instagram viewer
für Entwickler. Es ist eine Notwendigkeit für jede professionelle Marke. Das wird ernst genommen: wie berichtet von Vielfalt2019 verklagte jemand The Pokémon Company wegen einer nicht zugänglichen Website.

Web-Barrierefreiheit mit HTML

In HTML gibt es Regeln, um die Entwicklung barrierefreier Websites zu gewährleisten. In diesem Abschnitt werden einige dieser Regeln erläutert.

Verwenden Sie semantische Elemente

Semantische Elemente in HTML sind Elemente, die Bedeutungen haben. In HTML5 gibt es etwa 100 Elemente. Einige Elemente, wie z Und, sind nicht-semantisch, während andere HTML-Tags sind semantisch. Obwohl es unmöglich sein kann, auf diese nicht-semantischen Elemente zu verzichten, ist es wichtig, so viele semantische Elemente wie möglich in Ihre Arbeit einzubeziehen. Hier ist eine Liste beliebter semantischer Elemente:

Betrachten Sie dieses Beispiel von Taaskly:

Ein Blick auf das obige Bild zeigt die folgenden Elemente:

  • Eine Überschrift
  • Ein Bild
  • Ein Absatz
  • Drei Knöpfe

Es ist leicht anzunehmen, dass die Entwickler verwendet haben Tags, um die Elemente auf dem Bildschirm anzuordnen. Wenn Sie sich die Codes genauer ansehen, werden Sie feststellen, dass sie stattdessen sechs semantische Tags verwendet haben. Der vereinfachte Code sieht so aus:

<Abschnitt>
<BildQuelle="/hero.png"alt="Held">
<Artikel>
<h1>Finden Sie die richtigen Produkte und Dienstleistungen zur richtigen Zeit.h1>
<P>
 Handgemachte Schuhe, Haarauffrischung, Social Media Manager, Besorgungen machen, EinnahmequelleB>— Sie nennen es, Taaskly hat es verstanden. Finden Sie jedes Produkt oder jede Dienstleistung, die Sie heute benötigen, wenn Sie sich anmelden und Taaskly verwenden. 
P>
<Ahref="/main/home">Eine Aufgabe auslagernA>
<Ahref="/main/services"> Finden Sie einen DienstA>
<Ahref="/main/marktplatz" >Finden Sie ein GeschäftA>
Artikel>
Abschnitt>

Aus dem HTML-Snippet können Sie Folgendes beobachten:

  1. Die Bilder, Texte und Schaltflächen befinden sich in a Element.
  2. Der Element teilt die Und Elemente.
  3. Der Element hält die, , Und Elemente.
  4. Die Tasten sind codiert als Elemente; Daher sind sie Links, keine Schaltflächen. Verwenden Sie als allgemeine Regel immer Links, um den Benutzer zu einer anderen Seite oder Ansicht zu leiten, und verwenden Sie Schaltflächen, wenn Sie nur möchten, dass der Benutzer eine Aktion in derselben Ansicht ausführt. Sehen Button-Seite von Angular für weitere Informationen dazu.

Verwenden Sie Orientierungspunkte, um eine klare Seitenstruktur bereitzustellen

Orientierungspunkte sind semantische Tags, die blinden Benutzern helfen, mit Screenreadern auf einer Webseite zu navigieren. Mit Orientierungspunkten ist es einfach, verschiedene Teile einer Webseite zu definieren. Apples Website verwendet Orientierungspunkte.

Das obige Bild zeigt vier verschiedene Orientierungspunkte. Du kannst den... benutzen Einblicke in die Barrierefreiheit Erweiterung, um diese Orientierungspunkte zu visualisieren.

Im Bild können wir a ableiten oben, a enthält a, und ein Element. Deutlich zeigt das Bild "Navigation", "Region", Und "Inhaltsinfo". Diese werden als Rollen bezeichnet, die wir uns später ansehen werden.

Wann immer Sie mehrere Orientierungspunkte für eine Seite verwenden müssen, unterscheiden Sie diese immer durch ein Label. Zum Beispiel, wenn Sie mehrere verwenden Elemente wie Apple hat, müssen Sie sie beschriften. Sie sollten sie mit dem kennzeichnen Arie-Label Attribut. Sie können also so etwas schreiben wie:

<NaviArie-Label = "global">
<NaviArie-Label = "Lokale Navigation">
<NaviArie-Label = "Apfelverzeichnis">

Die Verwendung von Labels kann Screenreadern helfen, zu jeder Navigation zu springen.

Verwenden Sie Rollen-, Namens- und Wertattribute

Manchmal kann es unmöglich sein, HTML-Elemente mit integrierten Barrierefreiheitsfunktionen zu verwenden. Solche Fälle können einer dieser beiden sein:

  1. Es gibt kein natives HTML-Element für das, was Sie erreichen möchten. Wenn Sie zum Beispiel a verwenden müssen weil kein anderes Element zu dieser Rolle zu passen scheint.
  2. Sie können semantische Elemente aufgrund technischer Probleme nicht verwenden. Wenn Sie ein Framework verwenden, das verwendet wenn es besser gewesen wäre zu verwenden, ist es Ihre Pflicht, ein benutzerdefiniertes Steuerelement zu definieren.

Um ein benutzerdefiniertes Steuerelement zu definieren, benötigen Sie eine Rolle, einen Namen und (manchmal) einen Wert für Ihr Element.

Rolle

Standardmäßig ist a Element hat die Navigationsrolle, während a Element hat die Bannerrolle. Sie sollten diese Elemente nur für den vorgesehenen Zweck verwenden, um Hilfstechnologien dabei zu helfen, die Struktur einer Webseite zu verstehen. Wenn Sie eine anstelle der anderen verwenden müssen, sollten Sie die Rolle wie folgt angeben:

<HeaderRolle = "Navigation">
<NaviRolle = "Banner">
<divRolle = "Navigation">

Name

Ein Name ist ein beschreibender Text oder eine Bezeichnung, die einem HTML-Element zugeordnet ist. Die einfachste Form eines Namens ist der Text eines Elements. Hier ist ein Beispiel:

<divRolle = "Taste">Klick mich!div>

Im obigen Ausschnitt "Klick mich!“ ist der Name der Element. Er wird auch als zugänglicher Name bezeichnet.

Bei Elementen wie Navigation, Dropdowns etc. ist die Namensvergabe aufwändiger als im vorherigen Beispiel. Es ist anders, weil diese Elemente untergeordnete Elemente enthalten. Um einen Namen für die obige Navigation zu vergeben, verwenden Sie die Arie-Label Attribut. Sehen Sie sich dieses Beispiel an:

<NaviRolle = "Navigation"Arie-Label = "globale-navigation">...Navi>

Sie sollten beachten, dass a Name -Attribut unterscheidet sich von einem zugänglichen Namen. Dieses Code-Snippet gibt ein besseres Verständnis:

 Namensattribut 
<NaviRolle = "Navigation"Name = "globale-navigation">...Navi>
 zugänglicher Name 
<NaviRolle = "Navigation"Arie-Label = "globale-navigation">...Navi>

Sehen TGPis Artikel über zugängliche Namen um ein tieferes Verständnis dafür zu bekommen.

Wert

In HTML kann das value-Attribut zusätzliche Informationen zu einem Element liefern. Werte liefern Informationen über den Status der Komponente für benutzerdefinierte Komponenten wie Akkordeons. Beispielsweise kann ein Akkordeon entweder geöffnet oder geschlossen werden.

Sie können Ihren Elementen auf verschiedene Weise einen Mehrwert verleihen. Dieses Snippet zeigt einige der Möglichkeiten, wie Sie das tun können:

 aria-valuenow 
Wert
<EingangTyp="Kontrollkästchen"Name="Produkt[]"Wert="1">

Priorisierung der Barrierefreiheit im Internet für ein inklusives Online-Erlebnis

Die Barrierefreiheit im Internet geht über das Befolgen von Regeln hinaus; Es geht auch darum sicherzustellen, dass jeder den gleichen Zugang zu Ihrer Website hat. Die Einbindung von semantischen Elementen, Orientierungspunkten und Attributen wie Rolle, Name und Wert in Ihren HTML-Code kann Ihre Website für Menschen mit Behinderungen zugänglicher machen. Betrachten Sie die Barrierefreiheit im Internet nicht als Option; halte es für eine Notwendigkeit.