Tipps zur Tastaturzugänglichkeit mit HTML und CSS

Das Ermöglichen, dass Ihre Website nur für Tastaturbenutzer zugänglich ist, ist ein wichtiger Teil des umfassenderen Zugangs zu Barrierefreiheit. Im Folgenden finden Sie einige Tipps zur Tastaturzugänglichkeit, die Sie mithilfe von grundlegendem HTML und CSS schnell implementieren können.

A11y von Anfang an

Diese Tipps sind Teil von Web Accessibility: Der Complete Learning Guide, in dem wir eine Reihe von Tutorials, Artikeln, Kursen und E-Books zusammengestellt haben, um Ihnen den Zugang zu Web von Anfang an zu erleichtern.

Was ist Tastaturzugänglichkeit??

Eine Tastatur kann für manche Benutzer das wichtigste Mittel zum Navigieren auf Websites sein. Wenn heutzutage die meisten Web-Interfaces für Mauszeiger und Berührungsinteraktion ausgelegt sind, wird die Navigation durch die Tastatur vernachlässigt. Tastaturzugriff ist die Praxis, um sicherzustellen, dass Benutzer mit ihrer Tastatur effizient und ungehindert navigieren können.

Wer könnte Tastaturzugriff benötigen?

Dies sind die Hauptzielgruppen der Tastaturzugänglichkeit:

• Benutzer mit motorischen Behinderungen, die Probleme mit der Maus, dem Touch-Gerät oder dem Klicken auf kleine Dinge haben.
  
• Blinde oder sehbehinderte Benutzer ziehen es häufig vor, mit speziellen Braille-Tastaturen auf Websites zu navigieren.
  
• Amputierte oder solche mit angeborener Amputation (Geburt ohne Gliedmaßen, hier insbesondere Hände) verwenden häufig spezielle Hardware, die die Tastaturfunktionalität nachahmt.
  
• Jeder, der einfach keinen Zugriff auf eine funktionierende Maus oder ein Touchpad hat.

1. Testen Sie Ihre Site auf Tastaturzugänglichkeit

Das wichtigste Ziel der Tastaturzugänglichkeit ist es, jedes interaktive Element, z. B. Verknüpfungen und Formularsteuerelemente, mit dem zur Verfügung zu stellen Tab Schlüssel. So navigieren nur Benutzer mit Tastatur durch eine Webseite. Das Testen Ihrer Website auf Tastaturzugriff ist eigentlich ganz einfach: Drücken Sie einfach die Tab Drücken Sie die Taste und navigieren Sie vom oberen Rand der Seite zum unteren Rand. Dabei werden aktive Elemente hervorgehoben.

Navigieren in der Tuts + Fußzeile mit der Tab Schlüssel

Beobachten Sie, wie einfach oder schwierig es ist, zum Hauptinhalt zu gelangen, auf ein Menüelement zu klicken, ein Formular auszufüllen, einen Schieberegler zu verwenden oder Ihrer aktuellen Position auf der Seite zu folgen. Sie können die umgekehrte Richtung auch mit testen Umschalt + Tab Tastaturkürzel.

2. Erstelle bemerkbar :Fokus Styles

CSS hat eine :Fokus Pseudoklasse, die ausgelöst wird, wenn ein Benutzer auf ein Element klickt oder tippt oder es mit der Option auswählt Tab Schlüssel. Das :Fokus state gilt nur für fokussierbare Elemente, nämlich , , , </code>, <code><select></code>, und <code><area></code>.</p><p>Jeder Browser verfügt über einen eigenen Standard <code>:Fokus</code> Stile - normalerweise eine gepunktete schwarze Kontur um das Element oder ein verschwommenes Glühen, jedoch finden viele Designer es nicht nach ihrem Geschmack und werden es vollständig entfernen. Dies ist tatsächlich der Fehler Nummer eins, der die Tastaturzugänglichkeit auf Webseiten ruiniert. Wenn Sie die Standardstile nicht mögen, verwenden Sie etwas, das zum Design Ihrer Website passt. </p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.jpg">Standardeinstellung: Fokusstile im Google Chrome-Browser<p>Wählen Sie einen Stil, der leicht wahrnehmbar ist, aber nicht nur von Farben abhängig ist. Hier ist ein mögliches Beispiel, das nur für Benutzer mit Tastaturen geeignet ist:</p><pre>: Fokus Umriss: 3px durchgehend rot; </pre><h2> 3. Verwenden Sie Nicht-Farbbezeichner für Links</h2><p>Hyperlinks sollten nicht nur nach Farbe unterschieden werden. Dieses Prinzip wird normalerweise in Bezug auf die visuelle Zugänglichkeit erwähnt, da Menschen mit Sehbehinderung die Unterschiede zwischen bestimmten Farben nur schwer erkennen können. Klar sichtbare Links sind jedoch auch für die Tastaturzugänglichkeit wichtig. Benutzer, die nur mit Tastaturen arbeiten, sollten so schnell wie möglich Verknüpfungen erkennen können. Dies hilft ihnen, die Seite zu scannen und herauszufinden, wie sie zu dem gewünschten Teil navigieren können.</p><p>ähnlich zu <code>:Fokus</code> Stile, Hyperlinks sind in den meisten Fällen auch mit Standard-Browser-Styling-Blau unterstrichen. Designer entfernen jedoch häufig die Unterstreichung und verwenden nur Farben, um das Vorhandensein einer Verknüpfung anzuzeigen. Wenn Sie die standardmäßige Unterstreichung entfernen, verwenden Sie immer einen anderen, nicht farblichen Bezeichner, der Ihrem Website-Design entspricht, z. B. Rahmen, Symbole oder Konturen.</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css.png">Links löschen auf gov.uk: (1) Hyperlink (2) konzentriert (3) besucht<p>Du kannst den ... benutzen <code>Titel</code> Attribut, um den Inhalt eines Links zu beschreiben, wird jedoch nur sichtbar, wenn jemand den Link zeigt. Benutzer, die nur über Tastaturen verfügen, haben keinen Zugriff auf Hover-Ereignisse. Legen Sie daher niemals wichtige Informationen in die <code>Titel</code> Attribut. Es gilt auch nicht als Nicht-Farbbezeichner. Tun Sie dies beispielsweise niemals:</p><pre> Klick hier </pre><p>Tun Sie dies stattdessen:</p><pre> Wichtige Informationen </pre><p>WCAG 2.0 warnt auch vor den Eingabehilfen des title-Attributs. Verwenden Sie es entweder mit Vorsicht oder verwenden Sie es überhaupt nicht.</p><h2> 4. Verwenden Sie native Steuerelemente</h2><p>Formulare sind interaktive Elemente und müssen daher über die Tastatur zugänglich sein. Benutzer, die nur mit Tastaturen arbeiten, sollten in der Lage sein, Formulare auszufüllen, Schaltflächen zu drücken, Bereichsschieberegler zu verwenden, Optionen auszuwählen und Steuerelemente einfach zu bedienen. Wenn Sie Formulare auf Ihrer Website haben, sollten Sie sie einzeln testen, indem Sie die <strong>Tab</strong> Schlüssel. Denken Sie an Anmeldeformulare, Newsletterformulare, Anmeldeformulare, Kommentarformulare, Einkaufswagen usw..</p><p>Die beste Möglichkeit, barrierefreie Formulare zu erstellen, besteht darin, native Steuerelemente zu verwenden, wo immer dies möglich ist. Native Steuerelemente verfügen über eine integrierte Tastaturzugriffsmöglichkeit, was bedeutet, dass sie fokussierbar sind und standardmäßig auf Tastendruckereignisse reagieren. Sie sind wie folgt:</p><ul> <li><code><button></code></li> <li><code><input></code></li> <li><code><textarea></code></li> <li><code><select></code></li> <li><code><option></code></li> </ul><p>Sie können beispielsweise einen auf die Tastatur zugreifbaren Bereichsregler mit dem folgenden HTML-Code erstellen:</p><pre><input type="range" min="0" max="10"></pre><p>Tastaturbenutzer können sie zuerst mit der Taste fokussieren <strong>Tab</strong> drücken Sie dann den Schieberegler auf und ab <strong>Platz</strong>. </p><p>Wenn Sie aus irgendeinem Grund ein nicht fokussierbares HTML-Tag für ein interaktives Element verwenden müssen, können Sie es mit dem fokussierbar machen <code>tabindex = "0"</code> Attribut. Zum Beispiel hier ist ein <code><div></code> verwandelte sich in eine fokussierbare Schaltfläche:</p><pre><div role="button" tabindex="0"> Klick mich </div></pre><p>Das <code>role = "button"</code> Das Attribut in dem obigen Snippet ist eine wichtige Rolle für ARIA. Obwohl nur für Benutzer mit Tastaturen dies nicht erforderlich ist, ist dies für Bildschirmleser und visuelle Zugänglichkeit unverzichtbar.</p><p>Auch wenn die nicht native Schaltfläche fokussierbar gemacht wurde, ist sie im Hinblick auf die Tastaturzugänglichkeit ihrem nativen Pendant unterlegen. Sie werden dies sofort verstehen, wenn Sie versuchen, der Schaltfläche einen Ereignishandler hinzuzufügen. So sieht ein Click-Event-Listener beim nativen aus <code><button></code> Element:</p><pre><button onclick="alert('Hi, I am a native button!')"> Klick mich </button></pre><p>Und hier ist das Äquivalent mit der div-Taste:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')"> Klick mich </div></pre> <iframe src="https://codepen.io/tutsplus/embed/jeYmpE/?height=300&theme-id=12451&default-tab=result&embed-version=2" frameborder="no" allowfullscreen="true" scrolling="no"></iframe> <p>Wenn Sie mit der Maus oder dem Touchpad auf die Schaltflächen klicken, werden beide Warnmeldungen angezeigt. Wenn Sie jedoch mit der Taste zu den einzelnen Schaltflächen navigieren <strong>Tab</strong> Taste drücken und drücken <strong>Eingeben</strong> Um sie zu verarbeiten, wird nur die erste Nachricht angezeigt, die zur nativen Schaltfläche gehört. Um den nicht-systemeigenen Tastenprozess als Tastatureingabe zu definieren, müssen Sie auch einen Keypress-Ereignishandler separat definieren:</p><pre><div role="button" tabindex="0" onclick="alert('Hi, I am a non-native button!')" onkeydown="alert('Hi, I am a non-native button!')"> Klick mich </div></pre><p>Jetzt, wenn Tastaturbenutzer schlagen <code>Eingeben</code>, Sie sehen auch die Nachricht, die zur nicht-nativen Schaltfläche gehört. Wie Sie sehen, ist es wesentlich einfacher und schneller, die native Version zu verwenden. Verwenden Sie daher native Steuerelemente, es sei denn, Sie haben einen guten Grund, sie nicht zu verwenden.</p><h2> 5. Fügen Sie einen Link "Zum Hauptinhalt springen" hinzu</h2><p>Hinzufügen eines <strong>Springe zum Hauptinhalt</strong> oder <strong>Navigation überspringen</strong> Ein Link zu Ihren Webseiten hilft Benutzern, die nur mit Tastaturen arbeiten. In den meisten Fällen möchten diese Benutzer nicht alle Navigationslinks durchgehen, bevor sie mit dem Lesen des Inhalts beginnen. Dies gilt insbesondere, wenn mehrere Seiten Ihrer Website betrachtet werden. Stellen Sie sich vor, Sie müssen ohne Navigationslink die gleichen Navigationslinks auf der Startseite durchgehen <em>jedes Mal</em>. Es scheint keine besonders unterhaltsame Tätigkeit zu sein.</p><p>Um einen funktionsfähigen Navigationslink zu erstellen, müssen Sie ihn mit dem Hauptinhalt binden <code>Ich würde</code> und <code>href</code> HTML-Attribute auf folgende Weise:</p><pre>Springe zum Hauptinhalt <nav>Navigation</nav> <main tabindex="-1">Hauptinhalt</main></pre><p>Sie müssen auch das hinzufügen <code>tabindex = "- 1"</code> Attribut zum Container des Hauptinhalts. Dies ist derselbe Tabindex, den wir oben verwendet haben, um die nicht-native Schaltfläche fokussierbar zu machen. Das <code>tabindex</code> Attribut wird verwendet, um die Standard-Navigationsreihenfolge zu ändern. Mit einem Wert von <code>0</code>, Dadurch werden nicht fokussierbare Elemente fokussierbar. Mit einem Wert von <code>-1</code>, Dadurch werden Elemente fokussierbar, sie sind jedoch mit der Standardnavigation der Tastatur nicht mehr erreichbar. Bestimmte Browser wie Chrome und IE erfordern die Verwendung von <code>tabindex = "- 1"</code> auf dem Ziel des Navigationslinks überspringen, lassen Sie ihn also niemals aus.</p><h3>Zeigen Sie den Skip-Link nur für Tastaturbenutzer an</h3><p>Sie können CSS verwenden, um den Link zum Überspringen der Navigation nur für Tastaturbenutzer sichtbar zu machen. Im Standardzustand blenden Sie den Link vor normalen Benutzern aus, indem Sie ihn außerhalb des Ansichtsfensters positionieren. Zeigen Sie es dann für Tastaturbenutzer an, indem Sie separate Stile für den Fokusstatus erstellen, der ausgelöst wird, wenn der Benutzer das Symbol trifft <strong>Tab</strong> Schlüssel. </p><p>Sie können diesen Effekt auf Websites wie webaim.org, www.w3.org und (wie üblich) www.gov.uk sehen:</p><img src="//accentsconagua.com/img/images/keyboard-accessibility-tips-using-html-and-css_2.jpg">Haben Sie diesen Link schon einmal gesehen??<p>Das folgende CSS ist eine vereinfachte Version des Navigationscodes für Überspringen des IT Accessibility Handbook der NC State University:</p><pre>a.skip-main left: -999px; Position: absolut; oben: auto; Breite: 1px; Höhe: 1px; Überlauf versteckt; z-Index: -999; a.skip-main: focus left: auto; oben: auto; Breite: 30%; Höhe: Auto; Überlauf: Auto; Marge: 0 35%; Polsterung: 5px; Schriftgröße: 20px; Umriss: 3px durchgehend rot; Text ausrichten: Mitte; z-Index: 999; </pre><p>Wenn der Benutzer das trifft <strong>Tab</strong> Schlüssel, die <code>.überspringen</code> Das Element erhält seinen Fokusstatus und der Link zum Überspringen der Navigation wird auf dem Bildschirm angezeigt. </p><p>Sie können schnell testen, wie es funktioniert, indem Sie ganz oben in der Demo auf die Schaltfläche klicken <strong>Tab</strong> Schlüssel. Möglicherweise ist es einfacher, die unten abgebildete Demo in der vollständigen Seitenansicht zu öffnen.</p> <iframe src="https://codepen.io/tutsplus/embed/VEyboG/?height=400&theme-id=12451&default-tab=result&embed-version=2" frameborder="no" allowfullscreen="true" scrolling="no"></iframe> <h2>Nächste Schritte</h2><p>In diesem Artikel habe ich einige grundlegende Tipps zum Zugriff auf die Tastatur gegeben, die Sie mit HMTL und CSS implementieren können. Es gibt andere, fortgeschrittenere Dinge, die Sie auch für den Zugriff auf die Tastatur tun können. Zum Beispiel könnten Sie:</p><ul> <li>Fügen Sie Ihrer Web-App benutzerdefinierte Tastenkombinationen hinzu,</li> <li>Erstellen Sie über die Tastatur navigierbare JavaScript-Widgets,</li> <li>oder über Tastatur zugängliche Schieberegler erstellen.</li> </ul><p>Vermeiden Sie, zusätzlich zu diesen Tipps, die Verwendung von CAPTCHAs nach Möglichkeit, da diese sowohl für Bildschirmlesegeräte als auch für Tastaturbenutzer schwerwiegende Probleme beim Zugriff verursachen. Wenn Sie sie dennoch verwenden müssen, geben Sie mehr als zwei Möglichkeiten an, um sie zu lösen. Andernfalls haben Benutzer mit Barrierefreiheit Schwierigkeiten, Ihre Formulare zu verarbeiten. Teilen Sie uns mit, wenn Sie über eigene Tastaturzugriffstipps verfügen!</p> <div class="rek-block"> <center> <ins class="adsbygoogle" style="display:inline-block;width:580px;height:400px" data-ad-client="ca-pub-3810161443300697" data-ad-slot="9434875811"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </center> </div> <div class="h-alltags"> <a href="articles/webdesign">Web-Design</a> </div> </div> </div> </div> </div> <div class="next_posts clearfix"> <div class="n_post"> <div class="next_posts-h1 left_nh1"><a href="/articles/computers/keyboard-maestro-i-introduction.html">Keyboard Maestro I Einführung</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_12/keyboard-maestro-i-introduction_7.jpg');"></div> </div> <div class="n_post"> <div class="next_posts-h1 right_nh1"><a href="/articles/code/key-value-observing-with-facebooks-kvocontroller.html">Schlüsselwertbeobachtung mit dem KVOController von Facebook</a></div> <div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_14/key-value-observing-with-facebooks-kvocontroller.png');"></div> </div> </div> <footer> <div class="container"> <div class="footer-langs"> <ul class="site-langs-list"> <li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li> <li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li> <li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li> <li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li> <li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li> <li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li> <li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li> <li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li> </ul> </div> <div class="h-block"><a href="/">accentsconagua.com</a><div class="h-block-a"></div></div> <div class="footer-text"> Interessante Informationen und nützliche Tipps zur Programmierung. Website-Entwicklung, Webdesign und Webentwicklung. Photoshop-Tutorials. Erstellung von Computerspielen und mobilen Anwendungen. Werden Sie von Grund auf professioneller Programmierer. </div> </div> </footer> <div class="search"> <img class="searchico" src="//accentsconagua.com/img/search.svg" alt=""> </div> <div class="modal"> <div class="modal-content"> <span class="close-button">×</span> <input class="searchmain" type="text" id="search-input" placeholder="Suche..."> <ul class="searchli" id="results-container"></ul> </div> </div> <link rel="stylesheet" href="css/flags.css"> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script src="js/scripts.min.js"></script> <script src="js/common.js"></script> <link rel="stylesheet" href="css/fontawesome-all.min.css"> <script> var modal = document.querySelector(".modal"); var trigger = document.querySelector(".search"); var closeButton = document.querySelector(".close-button"); function toggleModal() { modal.classList.toggle("show-modal"); } function windowOnClick(event) { if (event.target === modal) { toggleModal(); } } trigger.addEventListener("click", toggleModal); closeButton.addEventListener("click", toggleModal); window.addEventListener("click", windowOnClick); </script> <script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script> <script> SimpleJekyllSearch({ searchInput: document.getElementById('search-input'), resultsContainer: document.getElementById('results-container'), json: '/search.json', searchResultTemplate: '<li><a href="{url}">{title}</a></li>' }) </script> <script src="jquery.unveil2.min.js"></script> <script> $('img').unveil(); </script> </body> </html>