{"id":83582,"date":"2022-10-06T07:13:04","date_gmt":"2022-10-06T05:13:04","guid":{"rendered":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"modified":"2020-09-17T00:18:49","modified_gmt":"2020-09-17T03:18:49","slug":"accessibility-tips-for-web-developers","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/","title":{"rendered":"Tipps zur Barrierefreiheit f\u00fcr Webentwickler"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Inhalt<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Inhaltsverzeichnis umschalten\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Umschalten<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Are-your-UI-components-accessible\" >Sind Ihre UI-Komponenten zug\u00e4nglich?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Can-your-UI-component-be-used-with-the-keyboard-alone\" >Kann Ihre UI-Komponente nur mit der Tastatur verwendet werden?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Using-tabindex\" >Verwenden von Tabindex<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Using-autofocus\" >Autofokus verwenden<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Adding-keyboard-interaction\" >Tastaturinteraktion hinzuf\u00fcgen<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Can-you-use-your-UI-component-with-a-screen-reader\" >K\u00f6nnen Sie Ihre UI-Komponente mit einem Bildschirmleser verwenden?<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Do-all-components-and-images-have-meaningful-text-alternatives\" >Haben alle Komponenten und Bilder sinnvolle Textalternativen?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Do-your-components-provide-semantic-information\" >Stellen Ihre Komponenten semantische Informationen bereit?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Can-users-understand-everything-without-relying-on-color\" >K\u00f6nnen Benutzer alles verstehen, ohne sich auf Farbe zu verlassen?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Is-there-sufficient-contrast-between-text-and-images-and-their-background\" >Gibt es einen ausreichenden Kontrast zwischen Text und Bildern und ihrem Hintergrund?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\" >Ist der sich bewegende oder blinkende Inhalt Ihrer Komponenten stoppbar und sicher?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/#Conclusions\" >Schlussfolgerungen<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n          Durch die Verbesserung der Zug\u00e4nglichkeit wird Ihre Website f\u00fcr alle Benutzer benutzerfreundlicher.\n        <\/p>\n<p>\n          <time>6. Dezember 2019<\/time><\/p>\n<\/header>\n<p>Es ist gro\u00dfartig, Websites zu erstellen, die inklusiv und f\u00fcr alle zug\u00e4nglich sind.<br \/>\nEs gibt mindestens sechs Schl\u00fcsselbereiche f\u00fcr Behinderungen, f\u00fcr die Sie optimieren k\u00f6nnen:<br \/>\n<strong>visuell<\/strong>, <strong>H\u00f6ren<\/strong>, <strong>Mobilit\u00e4t<\/strong>, <strong>Erkenntnis<\/strong>, <strong>Rede<\/strong>, und <strong>neuronale<\/strong>.<br \/>\nViele Tools und Ressourcen k\u00f6nnen hier helfen,<br \/>\nAuch wenn Sie mit der Barrierefreiheit im Internet noch nicht vertraut sind.<\/p>\n<p>\u00dcber eine Milliarde Menschen leben mit irgendeiner Form von Behinderung.<br \/>\nSie k\u00f6nnten irgendwann in einem lauten Raum gewesen sein<br \/>\nversuche das Gespr\u00e4ch um dich herum zu h\u00f6ren<br \/>\noder bei schlechten Lichtverh\u00e4ltnissen versuchen, im Dunkeln etwas zu finden.<br \/>\nErinnerst du dich an die Frustration, die du unter diesen Umst\u00e4nden empfunden hast?<br \/>\nStellen Sie sich nun vor, dieser vor\u00fcbergehende Zustand w\u00e4re dauerhaft.<br \/>\nWie unterschiedlich w\u00e4ren Ihre Erfahrungen im Web?<\/p>\n<p>Um zug\u00e4nglich zu sein, m\u00fcssen Sites auf mehreren Ger\u00e4ten funktionieren<br \/>\nmit unterschiedlichen Bildschirmgr\u00f6\u00dfen und verschiedenen Arten von Eingaben, wie z. B. Bildschirmleseger\u00e4ten.<br \/>\nDar\u00fcber hinaus sollten Websites f\u00fcr die breiteste Benutzergruppe nutzbar sein.<br \/>\neinschlie\u00dflich Menschen mit Behinderungen.<br \/>\nHier ist ein Beispiel f\u00fcr einige Behinderungen, die Ihre Benutzer m\u00f6glicherweise haben:<\/p>\n<div class=\"w-table-wrapper\">\n<table>\n<thead>\n<tr>\n<th>Vision<\/th>\n<th>H\u00f6ren<\/th>\n<th>Mobilit\u00e4t<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>\n<ul>\n<li>Schlechte Sicht<\/li>\n<li>Blindheit<\/li>\n<li>Farbenblindheit<\/li>\n<li>Katarakte<\/li>\n<li>Sonnenblendung<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>H\u00f6rbehinderte<\/li>\n<li>Taubheit<\/li>\n<li>L\u00e4rm<\/li>\n<li>Ohrinfektion<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>R\u00fcckenmarksverletzung<\/li>\n<li>Begrenzte Geschicklichkeit<\/li>\n<li>H\u00e4nde voll<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<th>Kognitiv<\/th>\n<th>Rede<\/th>\n<th>Neuronale<\/th>\n<\/tr>\n<tr>\n<td>\n<ul>\n<li>Lernschw\u00e4che<\/li>\n<li>Schl\u00e4frigkeit oder Ablenkung<\/li>\n<li>Migr\u00e4ne<\/li>\n<li>Autismus<\/li>\n<li>Krampfanfall<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Umgebungsger\u00e4usche<\/li>\n<li>Halsschmerzen<\/li>\n<li>Sprachfehler<\/li>\n<li>Unf\u00e4hig zu sprechen<\/li>\n<\/ul>\n<\/td>\n<td>\n<ul>\n<li>Depression<\/li>\n<li>PTBS<\/li>\n<li>Bipolare St\u00f6rung<\/li>\n<li>Angst<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p><strong>Visuelle Probleme<\/strong> reichen von der Unf\u00e4higkeit, Farben zu unterscheiden, bis hin zu keiner Sicht.<\/p>\n<ul>\n<li>Stellen Sie sicher, dass der Textinhalt ein Minimum erf\u00fcllt<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#visual-audio-contrast-contrast\">Kontrastverh\u00e4ltnisschwelle<\/a>.<\/li>\n<li>Vermeiden Sie die \u00dcbermittlung von Informationen<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-without-color\">ausschlie\u00dflich mit Farbe verwenden<\/a><br \/>\nund stellen Sie sicher, dass der gesamte Text ist<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-scale\">der Gr\u00f6\u00dfe ver\u00e4nderbar<\/a>.<\/li>\n<li>Stellen Sie sicher, dass alle Komponenten der Benutzeroberfl\u00e4che mit unterst\u00fctzenden Technologien verwendet werden k\u00f6nnen<br \/>\nwie Bildschirmleser, Lupen und Braillezeilen.<br \/>\nDies beinhaltet die Sicherstellung, dass UI-Komponenten markiert sind<br \/>\nso dass Eingabehilfen-APIs programmgesteuert bestimmen k\u00f6nnen<br \/>\ndas <em>Rolle<\/em>, <em>Zustand<\/em>, <em>Wert<\/em>, und <em>Titel<\/em> eines beliebigen Elements.<\/li>\n<\/ul>\n<p><strong>Trinkgeld:<\/strong> Die Elementinspektionsfunktion im Chrome-, Edge- und Firefox-Entwickler<br \/>\ntools zeigt einen Tooltip mit CSS-Eigenschaften an<br \/>\nDazu geh\u00f6rt eine schnelle \u00dcberpr\u00fcfung des Farbkontrastverh\u00e4ltnisses.<\/p>\n<p><img alt='Inspect-Element-5474631' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/inspect-element-5474631.jpg'><\/p>\n<p>Ich pers\u00f6nlich lebe mit Sehbehinderung und sehe mich oft dabei, Websites zu vergr\u00f6\u00dfern.<br \/>\nihre DevTools und das Terminal.<br \/>\nW\u00e4hrend die Unterst\u00fctzung von Zoom fast nie ganz oben auf der To-Do-Liste der Entwickler steht,<br \/>\nF\u00fcr Benutzer wie mich kann dies einen gro\u00dfen Unterschied machen.<\/p>\n<p><strong>H\u00f6rprobleme<\/strong> Dies bedeutet, dass ein Benutzer m\u00f6glicherweise Probleme beim H\u00f6ren von Ton hat, der von einer Seite ausgegeben wird.<\/p>\n<p><img alt='Bildschirmleser-7256747' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/screen-reader-7256747.jpg'><\/p>\n<p><strong>Mobilit\u00e4tsprobleme<\/strong> kann die Unf\u00e4higkeit beinhalten, eine Maus, eine Tastatur oder einen Touchscreen zu bedienen.<\/p>\n<ul>\n<li>Machen Sie den Inhalt Ihrer UI-Komponenten<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/wai-aria-practices\/#keyboard\">funktional \u00fcber eine Tastatur zug\u00e4nglich<\/a><br \/>\nF\u00fcr alle Aktionen w\u00fcrde man sonst eine Maus verwenden.<\/li>\n<li>Stellen Sie sicher, dass die Seiten f\u00fcr unterst\u00fctzende Technologien korrekt markiert sind - einschlie\u00dflich<br \/>\nBildschirmleser, Sprachsteuerungssoftware und physische Schaltersteuerungen - welche<br \/>\nneigen dazu, die gleichen APIs zu verwenden.<\/li>\n<\/ul>\n<p><strong>Kognitive Probleme<\/strong> bedeutet, dass ein Benutzer m\u00f6glicherweise unterst\u00fctzende Technologien ben\u00f6tigt<br \/>\nUm ihnen beim Lesen von Text zu helfen, ist es wichtig sicherzustellen, dass Textalternativen vorhanden sind.<\/p>\n<ul>\n<li>\n<p>Seien Sie vorsichtig, wenn Sie Animationen verwenden. Vermeiden Sie Videos und Animationen<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#time-limits\">wiederholen<\/a><br \/>\noder Blitz, der verursachen kann <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/WCAG20\/#seizure\">Probleme<\/a><br \/>\nf\u00fcr einige Benutzer.<\/p>\n<p>Das <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/updates\/2019\/03\/prefers-reduced-motion#too_much_motion_in_real_life_and_on_the_web\"><code>bevorzugt-reduzierte-Bewegung<\/code><\/a><br \/>\nMit der CSS-Medienabfrage k\u00f6nnen Sie Animationen einschr\u00e4nken<br \/>\nund automatische Wiedergabe von Videos f\u00fcr Benutzer, die eine reduzierte Bewegung bevorzugen:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-css\"><code class=\"language-css\"><br><span class=\"token atrule\"><span class=\"token rule\">@media<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token property\">bevorzugt-reduzierte-Bewegung<\/span><span class=\"token punctuation\">:<\/span> reduce<span class=\"token punctuation\">)<\/span><\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token selector\">Taste<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token property\">animation<\/span><span class=\"token punctuation\">:<\/span> keiner<span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/li>\n<li>\n<p>Vermeiden Sie Interaktionen, die sind<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/Understanding\/no-timing.html\">zeitbasiert<\/a>.<\/p>\n<\/li>\n<\/ul>\n<p>Dies scheint eine Menge zu behandelnder Grundlagen zu sein,<br \/>\nAber wir werden den Prozess zur Bewertung durchlaufen<br \/>\nund dann die Zug\u00e4nglichkeit Ihrer UI-Komponenten verbessern.<\/p>\n<p><strong>Trinkgeld:<\/strong> Das GOV.UK-Team f\u00fcr Barrierefreiheit hat einige gro\u00dfartige Ergebnisse erzielt<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/accessibility.blog.gov.uk\/2016\/09\/02\/dos-and-donts-on-designing-for-accessibility\/\">Zug\u00e4nglichkeit macht digitale Plakate aus<\/a><br \/>\num das Bewusstsein f\u00fcr Best Practices in Ihrem Team zu verbreiten:<\/p>\n<p><img alt='Zwei-Donts-4261761' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/dos-donts-4261761.jpg'><\/p>\n<h2 id=\"are-your-ui-components-accessible\"><span class=\"ez-toc-section\" id=\"Are-your-UI-components-accessible\"><\/span>Sind Ihre UI-Komponenten zug\u00e4nglich? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><strong>Zusammenfassung (tl; dr)<\/strong><\/p>\n<p>Fragen Sie sich, wenn Sie die UI-Komponenten Ihrer Seite auf Barrierefreiheit pr\u00fcfen:<\/p>\n<ul>\n<li>\n<p><strong>K\u00f6nnen Sie Ihre UI-Komponente nur mit der Tastatur verwenden?<\/strong><\/p>\n<p>Verwaltet die Komponente den Fokus und vermeidet Fokusfallen?<br \/>\nKann es auf die entsprechenden Tastaturereignisse reagieren?<\/p>\n<\/li>\n<li>\n<p><strong>K\u00f6nnen Sie Ihre UI-Komponente mit einem Bildschirmleser verwenden?<\/strong><\/p>\n<p>Haben Sie Textalternativen f\u00fcr visuell dargestellte Informationen bereitgestellt?<br \/>\nHaben Sie mit ARIA semantische Informationen hinzugef\u00fcgt?<\/p>\n<\/li>\n<li>\n<p><strong>Kann Ihre UI-Komponente ohne Ton arbeiten?<\/strong><\/p>\n<p>Schalten Sie Ihre Lautsprecher aus und gehen Sie Ihre Anwendungsf\u00e4lle durch.<\/p>\n<\/li>\n<li>\n<p><strong>Kann Ihre UI-Komponente ohne Farbe arbeiten?<\/strong><\/p>\n<p>Stellen Sie sicher, dass Ihre UI-Komponente von jemandem verwendet werden kann, der keine Farben sehen kann.<br \/>\nEin hilfreiches Tool zur Simulation von Farbenblindheit ist eine Chrome-Erweiterung namens<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/see\/dkihcccbkkakkbpikjmpnbamkgbjfdcn\">SEHEN<\/a>.<br \/>\n(Probieren Sie alle vier verf\u00fcgbaren Formen der Farbenblindheitssimulation aus.)<br \/>\nDas k\u00f6nnte Sie auch interessieren<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/daltonize\/obcnmdgpjakcffkcjnonpdlainhphpgh\">Daltonisieren<\/a><br \/>\nErweiterung, die \u00e4hnlich n\u00fctzlich ist.<\/p>\n<\/li>\n<li>\n<p><strong>Kann Ihre UI-Komponente mit aktiviertem kontrastreichen Modus arbeiten?<\/strong><\/p>\n<p>Alle modernen Betriebssysteme unterst\u00fctzen einen kontrastreichen Modus.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chrome.google.com\/webstore\/detail\/high-contrast\/djcfdncoelnlbldjfhinnjlhdjlikmph?hl=en\">Hoher Kontrast<\/a><br \/>\nist eine Chrome-Erweiterung, die hier helfen kann.<\/p>\n<\/li>\n<\/ul>\n<p>Native Steuerelemente (wie z <code><button><\/code> und <code><\/code>)<br \/>\nvom Browser integrierte Barrierefreiheit.<br \/>\nSie sind mit dem fokussierbar <code>Tab<\/code> Schl\u00fcssel;<br \/>\nSie reagieren auf Tastaturereignisse (wie das <code>Geben Sie ein<\/code>, <code>Raum<\/code>und Pfeiltasten);<br \/>\nund sie haben semantische Rollen, Zust\u00e4nde und Eigenschaften, die von Eingabehilfen verwendet werden.<br \/>\nIhr Standardstil sollte auch die oben aufgef\u00fchrten Barrierefreiheitsanforderungen erf\u00fcllen.<\/p>\n<p>Benutzerdefinierte UI-Komponenten<br \/>\n(mit Ausnahme von Komponenten, die native Elemente wie erweitern <code><button><\/code>)<br \/>\nhaben keine eingebaute Funktionalit\u00e4t, einschlie\u00dflich Zug\u00e4nglichkeit,<br \/>\nSie m\u00fcssen es also bereitstellen.<br \/>\nEin guter Ausgangspunkt f\u00fcr die Implementierung der Barrierefreiheit<br \/>\nbesteht darin, Ihre Komponente mit einem analogen nativen Element zu vergleichen<br \/>\n(oder eine Kombination mehrerer nativer Elemente,<br \/>\nabh\u00e4ngig davon, wie komplex Ihre Komponente ist).<\/p>\n<p><strong>Trinkgeld:<\/strong> Die meisten Browser-Entwicklertools unterst\u00fctzen das \u00dcberpr\u00fcfen des Eingabehilfenbaums einer Seite.<br \/>\nIn Chrome DevTools ist dies \u00fcber das verf\u00fcgbar <strong>Barrierefreiheit<\/strong> Registerkarte in der <strong>Elemente<\/strong> Panel:<\/p>\n<p><img alt='a11y-tree-chrome-2315214' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/a11y-tree-chrome-2315214.png'><\/p>\n<p>Firefox hat auch eine <strong>Barrierefreiheit<\/strong> Panel:<\/p>\n<p><img alt='a11y-tree-ff-3157030' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/a11y-tree-ff-3157030.jpg'><\/p>\n<p>Safari macht Informationen zur Barrierefreiheit in der <strong>Elemente<\/strong> Panels <strong>Gib nicht<\/strong> Tab.<\/p>\n<p>Im Folgenden finden Sie eine Liste von Fragen, die Sie sich stellen k\u00f6nnen, wenn Sie versuchen, Ihre UI-Komponenten zug\u00e4nglicher zu machen.<\/p>\n<h2 id=\"can-your-ui-component-be-used-with-the-keyboard-alone\"><span class=\"ez-toc-section\" id=\"Can-your-UI-component-be-used-with-the-keyboard-alone\"><\/span>Kann Ihre UI-Komponente nur mit der Tastatur verwendet werden? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Stellen Sie im Idealfall sicher, dass alle Funktionen<br \/>\nin Ihrer UI-Komponente kann \u00fcber die Tastatur zugegriffen werden.<br \/>\nBei der Gestaltung Ihrer Benutzererfahrung,<br \/>\n\u00dcberlegen Sie, wie Sie Ihr Element nur mit der Tastatur verwenden w\u00fcrden<br \/>\nund finden Sie eine konsistente Reihe von Tastaturinteraktionen.<\/p>\n<p>Stellen Sie zun\u00e4chst sicher, dass Sie f\u00fcr jede Komponente ein sensibles Fokusziel haben.<br \/>\nBeispielsweise kann eine komplexe Komponente wie ein Men\u00fc ein Fokusziel innerhalb einer Seite sein<br \/>\nsollte dann aber den Fokus in sich selbst verwalten, damit der aktive Men\u00fcpunkt immer den Fokus erh\u00e4lt.<\/p>\n<figure class=\"w-figure\">\n  <img alt='Managing-Focus-5142883' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/manage-focus-5142883.png'><figcaption class=\"w-figcaption\">\n    Verwalten des Fokus innerhalb eines komplexen Elements.<br \/>\n  <\/figcaption><\/figure>\n<h3 id=\"using-tabindex\"><span class=\"ez-toc-section\" id=\"Using-tabindex\"><\/span>Verwenden von Tabindex <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Das <code>Tabindex<\/code> Mit Attribut k\u00f6nnen Elemente und UI-Komponenten mithilfe der Tastatur fokussiert werden. Benutzer, die nur \u00fcber Tastaturen und unterst\u00fctzende Technologien verf\u00fcgen, m\u00fcssen in der Lage sein, die Tastatur auf Elemente zu konzentrieren, um mit ihnen interagieren zu k\u00f6nnen. Native interaktive Elemente sind implizit fokussierbar, sodass sie keine ben\u00f6tigen <code>Tabindex<\/code> Attribut, es sei denn, Sie m\u00f6chten ihre Position in der Tabulatorreihenfolge \u00e4ndern.<\/p>\n<p><strong>Es gibt drei Arten von <code>Tabindex<\/code> Werte:<\/strong><\/p>\n<ul>\n<li>\n<p><strong><code>tabindex = &quot;0&quot;<\/code><\/strong> ist die h\u00e4ufigste und platziert das Element in der nat\u00fcrlichen Tabulatorreihenfolge (definiert durch die DOM-Reihenfolge).<\/p>\n<\/li>\n<li>\n<p><strong>zu <code>Tabindex<\/code> Wert gr\u00f6\u00dfer als 0<\/strong> Platziert das Element in einer manuellen Tabulatorreihenfolge - alle Elemente auf der Seite mit einem Positiv <code>Tabindex<\/code> Werte werden in numerischer Reihenfolge vor Elementen in der nat\u00fcrlichen Tabulatorreihenfolge aufgerufen.<\/p>\n<\/li>\n<li>\n<p><strong>zu <code>Tabindex<\/code> Wert gleich -1<\/strong> bewirkt, dass das Element programmgesteuert fokussierbar ist, jedoch nicht in der Tabulatorreihenfolge.<\/p>\n<\/li>\n<\/ul>\n<p>Verwenden Sie f\u00fcr benutzerdefinierte UI-Komponenten immer <code>Tabindex<\/code> Werte von 0 oder -1, da Sie die Reihenfolge der Elemente auf einer bestimmten Seite nicht im Voraus bestimmen k\u00f6nnen - und selbst wenn Sie dies getan haben, kann sich die Reihenfolge \u00e4ndern. ZU <code>Tabindex<\/code> Der Wert -1 ist besonders n\u00fctzlich, um den Fokus innerhalb komplexer Komponenten wie oben beschrieben zu verwalten.<\/p>\n<p>Stellen Sie au\u00dferdem sicher, dass der Fokus immer sichtbar ist, indem Sie den Standard-Fokusringstil zulassen oder einen erkennbaren benutzerdefinierten Fokusstil anwenden. Denken Sie daran, Tastaturbenutzer nicht zu fangen - sie sollten in der Lage sein, den Fokus nur mit der Tastatur von einem Element weg zu bewegen.<\/p>\n<div class=\"w-aside w-aside--note\">\n<p>Vielleicht interessiert Sie auch das Roving <code>Tabindex<\/code> oder <code>arienaktiver Nachkomme<\/code> n\u00e4hert sich,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Accessibility\/Keyboard-navigable_JavaScript_widgets#Technique_1_Roving_tabindex\">auf MDN abgedeckt<\/a>.<\/p>\n<\/div>\n<h3 id=\"using-autofocus\"><span class=\"ez-toc-section\" id=\"Using-autofocus\"><\/span>Autofokus verwenden <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Mit dem HTML-Autofokus-Attribut kann ein Autor angeben<br \/>\ndass ein bestimmtes Element automatisch in den Fokus r\u00fccken soll<br \/>\nwenn die Seite geladen ist.<br \/>\n<code>Autofokus<\/code> wird bereits am unterst\u00fctzt<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/html.spec.whatwg.org\/multipage\/forms.html#association-of-controls-and-forms\">alle Webformular-Steuerelemente<\/a>,<br \/>\neinschlie\u00dflich Schaltfl\u00e4chen.<br \/>\nUm Elemente in Ihren eigenen benutzerdefinierten UI-Komponenten automatisch zu fokussieren,<br \/>\nRuf den ... an <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/HTMLElement.focus\"><code>Fokus ()<\/code><\/a> Methode,<br \/>\nUnterst\u00fctzt alle HTML-Elemente, die fokussiert werden k\u00f6nnen<br \/>\n(zum Beispiel, <code>document.querySelector (&#039;myButton&#039;). focus ()<\/code>).<\/p>\n<h3 id=\"adding-keyboard-interaction\"><span class=\"ez-toc-section\" id=\"Adding-keyboard-interaction\"><\/span>Tastaturinteraktion hinzuf\u00fcgen <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Sobald Ihre UI-Komponente fokussierbar ist,<br \/>\nbieten eine gute Geschichte der Tastaturinteraktion<br \/>\nwenn eine Komponente durch Behandeln geeigneter Tastaturereignisse fokussiert wird.<br \/>\nErm\u00f6glichen Sie dem Benutzer beispielsweise, Pfeiltasten zum Ausw\u00e4hlen von Men\u00fcoptionen zu verwenden<br \/>\nund <code>Raum<\/code> oder <code>Geben Sie ein<\/code> Tasten aktivieren.<br \/>\nDie ARIA <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/wai-aria-practices\/#aria_ex\">Leitfaden f\u00fcr Designmuster<\/a><br \/>\nbietet hier einige Anleitungen.<\/p>\n<p>Stellen Sie schlie\u00dflich sicher, dass Ihre Tastaturk\u00fcrzel erkennbar sind.<br \/>\nEs ist \u00fcblich, eine Tastaturk\u00fcrzel-Legende (Bildschirmtext) zu haben.<br \/>\num den Benutzer dar\u00fcber zu informieren, dass Verkn\u00fcpfungen vorhanden sind.<br \/>\nZum Beispiel \u00abDr\u00fccken Sie? f\u00fcr Tastaturk\u00fcrzel. \u00bb<br \/>\nAlternativ kann ein Hinweis wie ein Tooltip verwendet werden<br \/>\num den Benutzer \u00fcber eine Verkn\u00fcpfung zu informieren.<\/p>\n<p>Die Bedeutung des Fokusmanagements kann nicht genug betont werden.<br \/>\nEin Beispiel ist eine Navigationsschublade.<br \/>\nWenn Sie der Seite eine UI-Komponente hinzuf\u00fcgen,<br \/>\nSie m\u00fcssen den Fokus auf ein Element in ihm richten.<br \/>\nAndernfalls m\u00fcssen Benutzer m\u00f6glicherweise die gesamte Seite durchbl\u00e4ttern, um dorthin zu gelangen.<br \/>\nDies kann eine frustrierende Erfahrung sein,<br \/>\nTesten Sie daher unbedingt den Fokus f\u00fcr alle navigierbaren Tastaturkomponenten auf Ihrer Seite.<\/p>\n<p><strong>Trinkgeld:<\/strong> Sie k\u00f6nnen verwenden <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/puppeteer\/puppeteer\">Puppenspieler<\/a><br \/>\nAutomatisieren der Ausf\u00fchrung von Tastaturzugriffstests zum Umschalten von UI-Status.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/medium.com\/walkme-engineering\/web-accessibility-testing-d499a7f7a032\">WalkMe Engineering<\/a><br \/>\nhat eine tolle Anleitung dazu Ich empfehle zu lesen.<\/p>\n<figure class=\"w-figure\">\n  <img alt='Arie-erweitert-9017763' class=\"w-screenshot\" src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/aria-expanded-9017763.gif'><br \/>\n<\/figure>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><br><span class=\"token keyword\">const<\/span> Kategorie <span class=\"token operator\">=<\/span> <span class=\"token keyword\">erwarten<\/span> Seite<span class=\"token punctuation\">.<\/span><span class=\"token function\">$<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">.category<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">erwarten<\/span> Seite<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Rolle<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> Kategorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Taste<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">erwarten<\/span> Seite<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">Tabindex<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> Kategorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">0<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">erwarten<\/span> Seite<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> Fenster<span class=\"token punctuation\">.<\/span>Dokument<span class=\"token punctuation\">.<\/span>activeElement <span class=\"token operator\">===<\/span> elem<span class=\"token punctuation\">,<\/span> Kategorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token boolean\">wahr<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">erwarten<\/span> Seite<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">aria-expanded<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> Kategorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">falsch<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token keyword\">erwarten<\/span> Seite<span class=\"token punctuation\">.<\/span>keyboard<span class=\"token punctuation\">.<\/span><span class=\"token function\">press<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'Space'<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><p><br><span class=\"token function\">expect<\/span><span class=\"token punctuation\">(<\/span><span class=\"token keyword\">erwarten<\/span> Seite<span class=\"token punctuation\">.<\/span><span class=\"token function\">evaluate<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">elem<\/span> <span class=\"token operator\">=&gt;<\/span> elem<span class=\"token punctuation\">.<\/span><span class=\"token function\">getAttribute<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">aria-expanded<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">,<\/span> Kategorie<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">toEqual<\/span><span class=\"token punctuation\">(<\/span><span class=\"token template-string\"><span class=\"token template-punctuation string\">`<\/span><span class=\"token string\">wahr<\/span><span class=\"token template-punctuation string\">`<\/span><\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/p><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h2 id=\"can-you-use-your-ui-component-with-a-screen-reader\"><span class=\"ez-toc-section\" id=\"Can-you-use-your-UI-component-with-a-screen-reader\"><\/span>K\u00f6nnen Sie Ihre UI-Komponente mit einem Bildschirmleser verwenden? <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Etwa 1\u20132% der Menschen verwenden einen Bildschirmleser.<br \/>\nK\u00f6nnen Sie alle wichtigen Informationen verstehen?<br \/>\nund mit der Komponente nur mit dem Bildschirmleser und der Tastatur interagieren?<\/p>\n<p>Die folgenden Fragen sollen Ihnen dabei helfen, die Zug\u00e4nglichkeit von Bildschirmleseprogrammen zu verbessern.<\/p>\n<h3 id=\"do-all-components-and-images-have-meaningful-text-alternatives\"><span class=\"ez-toc-section\" id=\"Do-all-components-and-images-have-meaningful-text-alternatives\"><\/span>Haben alle Komponenten und Bilder sinnvolle Textalternativen? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00dcberall dort, wo Informationen \u00fcber die <em>S\u00fc\u00dfkartoffel<\/em> oder <em>Zweck<\/em><br \/>\neiner interaktiven Komponente wird visuell vermittelt,<br \/>\nbieten eine zug\u00e4ngliche Textalternative.<\/p>\n<p>Zum Beispiel, wenn Ihr <code><\/code> Die UI-Komponente zeigt nur ein Zahnradsymbol an<br \/>\num anzuzeigen, dass es sich um ein Einstellungsmen\u00fc handelt,<br \/>\nEs ben\u00f6tigt eine zug\u00e4ngliche Textalternative wie \u00abEinstellungen\u00bb<br \/>\ndas vermittelt die gleichen Informationen.<br \/>\nJe nach Kontext<br \/>\nSie k\u00f6nnen eine Textalternative mit einem bereitstellen <code>alt<\/code> Attribut,<br \/>\nein <code>Arien-Label<\/code> Attribut, ein <code>Arie-beschriftet von<\/code> Attribut,<br \/>\noder Klartext im Shadow DOM.<br \/>\nAllgemeine technische Tipps finden Sie in <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webaim.org\/resources\/quickref\/\">WebAIM-Kurzreferenz<\/a>.<\/p>\n<p>Jede UI-Komponente, die ein Bild anzeigt, sollte einen Mechanismus bereitstellen<br \/>\nf\u00fcr die Bereitstellung von alternativem Text f\u00fcr dieses Bild, analog zu <code>alt<\/code> Attribut.<\/p>\n<h3 id=\"do-your-components-provide-semantic-information\"><span class=\"ez-toc-section\" id=\"Do-your-components-provide-semantic-information\"><\/span>Stellen Ihre Komponenten semantische Informationen bereit? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Assistive Technologie vermittelt semantische Informationen<br \/>\nDies wird f\u00fcr sehende Benutzer ansonsten \u00fcber visuelle Hinweise ausgedr\u00fcckt<br \/>\nwie Formatierung, Cursorstil oder Position.<br \/>\nIn nativen Elementen sind diese semantischen Informationen vom Browser integriert.<br \/>\naber f\u00fcr benutzerdefinierte Komponenten m\u00fcssen Sie verwenden<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/WAI\/PF\/aria\/\">ARIE<\/a> um die Informationen hinzuzuf\u00fcgen.<\/p>\n<p>Als Faustregel gilt jede Komponente, die ein Mausklick- oder Hover-Ereignis abh\u00f6rt<br \/>\nsollte nicht nur eine Art Tastaturereignis-Listener haben,<br \/>\naber auch eine ARIA-Rolle und m\u00f6glicherweise ARIA-Zust\u00e4nde und -Attribute.<\/p>\n<p>Zum Beispiel ein Brauch <code><\/code> Die UI-Komponente kann eine ARIA-Rolle als Schieberegler \u00fcbernehmen.<br \/>\nwelches einige verwandte ARIA-Attribute hat: <code>Arie-Wert<\/code>, <code>Arie-Wertemin<\/code> und <code>Arie-Wertemax<\/code>.<br \/>\nDurch Binden dieser Attribute an die relevanten Eigenschaften Ihrer benutzerdefinierten Komponente<br \/>\nSie k\u00f6nnen Benutzern unterst\u00fctzender Technologien die Interaktion mit dem Element erm\u00f6glichen.<br \/>\n\u00c4ndern Sie den Wert und bewirken Sie sogar, dass sich die visuelle Darstellung des Elements entsprechend \u00e4ndert.<\/p>\n<figure class=\"w-figure\">\n  <img alt='Schieberegler-8196398' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/slider-8196398.png' class=\"w-screenshot\"><figcaption class=\"w-figcaption\">\n    Eine Bereichsschiebereglerkomponente.<br \/>\n  <\/figcaption><\/figure>\n<p><web-copy-code><\/p>\n<pre class=\"language-html\"><code class=\"language-html\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;<\/span>fancy-slider<\/span> <span class=\"token attr-name\">Rolle<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>slider<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">Arie-Wertemin<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>1<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">Arie-Wertemax<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>5<span class=\"token punctuation\">\"<\/span><\/span> <span class=\"token attr-name\">Arie-Wert<\/span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=<\/span><span class=\"token punctuation\">\"<\/span>2.5<span class=\"token punctuation\">\"<\/span><\/span><span class=\"token punctuation\">&gt;<\/span><\/span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;\/<\/span>fancy-slider<\/span><span class=\"token punctuation\">&gt;<\/span><\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"can-users-understand-everything-without-relying-on-color\"><span class=\"ez-toc-section\" id=\"Can-users-understand-everything-without-relying-on-color\"><\/span>K\u00f6nnen Benutzer alles verstehen, ohne sich auf Farbe zu verlassen? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Farbe sollte nicht als einziges Mittel zur \u00dcbermittlung von Informationen verwendet werden.<br \/>\nB. Anzeigen eines Status, Auffordern des Benutzers zur Eingabe einer Antwort,<br \/>\noder Daten visualisieren.<br \/>\nWenn Sie beispielsweise ein Kreisdiagramm haben,<br \/>\nGeben Sie Beschriftungen und Werte f\u00fcr jedes Slice an<br \/>\nSo k\u00f6nnen Benutzer mit Sehbehinderungen die Informationen verstehen<br \/>\nauch wenn sie nicht sagen k\u00f6nnen, wo die Scheiben beginnen und enden:<\/p>\n<figure class=\"w-figure\">\n  <img alt='Kreisdiagramm-2580594' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/pie-chart-2580594.png'><figcaption class=\"w-figcaption\">Ein zug\u00e4ngliches Kreisdiagramm. (Von dem <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.w3.org\/WAI\/GL\/low-vision-a11y-tf\/wiki\/Informational_Graphic_Contrast_(Minimum)\">W3C Web Accessibility Initiative<\/a>.)<\/figcaption><\/figure>\n<h3 id=\"is-there-sufficient-contrast-between-text-and-images-and-their-background\"><span class=\"ez-toc-section\" id=\"Is-there-sufficient-contrast-between-text-and-images-and-their-background\"><\/span>Gibt es einen ausreichenden Kontrast zwischen Text und Bildern und ihrem Hintergrund? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Alle in Ihrer Komponente angezeigten Textinhalte sollten den Anforderungen entsprechen<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast-contrast\">minimale WCAG AA-Level-Kontrastschwelle<\/a>.<br \/>\nErw\u00e4gen Sie, ein kontrastreiches Thema bereitzustellen, das dem entspricht<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.w3.org\/TR\/2008\/REC-WCAG20-20081211\/#visual-audio-contrast7\">h\u00f6here AAA-Schwelle<\/a>,<br \/>\nund stellen Sie sicher, dass User Agent-Stylesheets angewendet werden k\u00f6nnen<br \/>\nWenn Benutzer einen benutzerdefinierten Kontrast oder andere Farben ben\u00f6tigen.<br \/>\nSie k\u00f6nnen dies verwenden <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/webaim.org\/resources\/contrastchecker\/\">Farbkontrast-Checker<\/a><br \/>\nals Hilfe beim Entwerfen Ihrer Komponente.<\/p>\n<h3 id=\"is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\"><span class=\"ez-toc-section\" id=\"Is-the-moving-or-flashing-content-in-your-components-stoppable-and-safe\"><\/span>Ist der sich bewegende oder blinkende Inhalt Ihrer Komponenten stoppbar und sicher? <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Inhalte, die sich l\u00e4nger als f\u00fcnf Sekunden bewegen, scrollen oder blinken<br \/>\nsollte angehalten, gestoppt oder ausgeblendet werden k\u00f6nnen.<br \/>\nVermeiden Sie im Allgemeinen das Flashen von Inhalten.<br \/>\nWenn etwas blinken muss, stellen Sie sicher, dass es nicht mehr als dreimal pro Sekunde blinkt.<\/p>\n<p>Es stehen eine Reihe von Tools zur Verf\u00fcgung, die dabei helfen k\u00f6nnen<br \/>\nDebuggen der Zug\u00e4nglichkeit Ihrer visuellen Komponenten.<\/p>\n<ul>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.deque.com\/products\/axe\/\">Axt<\/a> bietet automatisierte Zug\u00e4nglichkeitstests<br \/>\nf\u00fcr Ihr Framework oder einen Browser Ihrer Wahl.<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.deque.com\/blog\/axe-and-attest-integration-puppeteer\/\">Axe Puppenspieler<\/a><br \/>\nkann zum Schreiben automatisierter Zug\u00e4nglichkeitstests verwendet werden.<\/li>\n<li>Das <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.google.com\/web\/tools\/lighthouse\">Leuchtturm<\/a><br \/>\nBarrierefreiheitspr\u00fcfungen bieten hilfreiche Einblicke, um h\u00e4ufig auftretende Barrierefreiheitsprobleme zu ermitteln.<br \/>\nDie Barrierefreiheitsbewertung ist ein gewichteter Durchschnitt aller Barrierefreiheitspr\u00fcfungen<br \/>\nbeyogen auf <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/dequelabs\/axe-core\/blob\/develop\/doc\/rule-descriptions.md\">Axe User Impact Assessments<\/a>.<br \/>\nInformationen zur \u00dcberwachung der Barrierefreiheit durch kontinuierliche Integration finden Sie unter <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/lighthouse-ci\">Leuchtturm CI<\/a>.<\/li>\n<\/ul>\n<p><img alt='lh-a11y-audit-4036737' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/lh-a11y-audit-4036737.png'><\/p>\n<ul>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/tenon.io\/\">Tenon.io<\/a> ist n\u00fctzlich, um h\u00e4ufig auftretende Probleme mit der Barrierefreiheit zu testen.<br \/>\nTenon bietet eine starke Integrationsunterst\u00fctzung f\u00fcr Build-Tools, Browser (\u00fcber Erweiterungen) und sogar Texteditoren.<\/p>\n<\/li>\n<li>\n<p>Es gibt viele bibliotheks- und Framework-spezifische Tools<br \/>\nzum Hervorheben von Barrierefreiheitsproblemen mit Komponenten.<br \/>\nZum Beispiel web.dev<br \/>\nerkl\u00e4rt, wie man es benutzt <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.npmjs.com\/package\/eslint-plugin-jsx-a11y\">eslint-plugin-jsx-a11y<\/a><br \/>\nSo heben Sie Barrierefreiheitsprobleme f\u00fcr React-Komponenten in Ihrem Editor hervor:<\/p>\n<p><img alt='React-a11y-Testing-6044405' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/react-a11y-testing-6044405.png'><\/p>\n<p>Wenn Sie Angular verwenden, codelyzer<br \/>\nbietet auch Audits zur Barrierefreiheit im Editor:<\/p>\n<p><img alt='Winkel-a11y-Test-2426100' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/angular-a11y-testing-2426100.png'><\/p>\n<\/li>\n<li>\n<p>Sie k\u00f6nnen mithilfe von Hilfstechnologien untersuchen, wie unterst\u00fctzende Technologien Webinhalte anzeigen<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.apple.com\/library\/archive\/documentation\/Accessibility\/Conceptual\/AccessibilityMacOSX\/OSXAXTestingApps.html#\/\/apple_ref\/doc\/uid\/TP40001078-CH210-SW1\">Inspektor f\u00fcr Barrierefreiheit<\/a> (Mac)<br \/>\noder <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/msdn.microsoft.com\/en-us\/library\/windows\/desktop\/dd373661(v=vs.85).aspx\">Windows Automation API-Testtools<\/a><br \/>\nund <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/accessibility.linuxfoundation.org\/a11yweb\/util\/accprobe\/\">AccProbe<\/a> (Windows).<br \/>\nSie k\u00f6nnen auch den von Chrome erstellten vollst\u00e4ndigen Eingabehilfenbaum anzeigen<br \/>\ndurch Navigieren zu <code>chrome:\/\/accessibility<\/code>.<\/p>\n<\/li>\n<li>\n<p>Der beste Weg, um die Unterst\u00fctzung von Bildschirmleseprogrammen auf einem Mac zu testen, ist die Verwendung des Dienstprogramms VoiceOver.<br \/>\nBenutzen <code>\u2318F5<\/code> um es zu aktivieren oder zu deaktivieren, <code>Strg + Option \u2190 \u2192<\/code> sich durch die Seite bewegen,<br \/>\nund <code>Strg + Umschalt + Option + \u2191 \u2193<\/code> um den Barrierefreiheitsbaum auf und ab zu bewegen.<br \/>\nF\u00fcr detailliertere Anweisungen,<br \/>\nsiehe die <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.apple.com\/voiceover\/info\/guide\/_1131.html\">vollst\u00e4ndige Liste der VoiceOver-Befehle<\/a><br \/>\nund das <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.apple.com\/voiceover\/info\/guide\/_1131.html#vo27972\">Liste der VoiceOver-Webbefehle<\/a>.<\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/khan.github.io\/tota11y\/\">tota11y<\/a> ist ein n\u00fctzlicher Visualizer<br \/>\nf\u00fcr unterst\u00fctzende Technologieprobleme, die von der Khan Academy erstellt wurden.<br \/>\nEs ist ein Skript, das Ihrem Dokument eine Schaltfl\u00e4che hinzuf\u00fcgt, die mehrere Plugins ausl\u00f6st<br \/>\nzum Kommentieren von Dingen wie unzureichendem Kontrastverh\u00e4ltnis und anderen a11y-Verst\u00f6\u00dfen.<\/p>\n<\/li>\n<li>\n<p>Unter Windows <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.nvaccess.org\/\">NVDA<\/a> ist ein kostenloser Open Source Screenreader<br \/>\nDas ist voll ausgestattet und erfreut sich immer gr\u00f6\u00dferer Beliebtheit.<br \/>\nBeachten Sie jedoch, dass es f\u00fcr sehende Benutzer eine viel steilere Lernkurve gibt als VoiceOver.<\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/chromelens.xyz\/\">ChromeLens<\/a> hilft bei der Entwicklung f\u00fcr Sehbehinderte.<br \/>\nEs bietet auch hervorragende Unterst\u00fctzung f\u00fcr die Visualisierung von Tastaturnavigationspfaden.<\/p>\n<p><img alt='Chromelens-1704496' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/chromelens-1704496.jpg'><\/p>\n<\/li>\n<li>\n<p><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"http:\/\/www.chromevox.com\/\">ChromeVox<\/a> ist ein Bildschirmleser, der als Chrome-Erweiterung erh\u00e4ltlich und in ChromeOS-Ger\u00e4te integriert ist.<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"conclusions\"><span class=\"ez-toc-section\" id=\"Conclusions\"><\/span>Schlussfolgerungen <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Wir haben noch einen langen Weg vor uns, um die Zug\u00e4nglichkeit im Web zu verbessern.<br \/>\nPer die <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/almanac.httparchive.org\/en\/2019\/accessibility\">Web-Almanach<\/a>:<\/p>\n<ul>\n<li>4 von 5 Websites haben Text, der sich leicht in den Hintergrund einf\u00fcgt und ihn unlesbar macht.<\/li>\n<li>49.91% von Seiten k\u00f6nnen immer noch nicht bereitgestellt werden <code>alt<\/code> Attribute f\u00fcr einige ihrer Bilder.<\/li>\n<li>Nur 24% von Seiten, die Schaltfl\u00e4chen oder Links verwenden, enthalten Textbezeichnungen f\u00fcr diese.<\/li>\n<li>Nur 22.33% Seiten enthalten Beschriftungen f\u00fcr alle Formulareingaben.<\/li>\n<\/ul>\n<p>Um mehr \u00fcber die Grundlagen der Barrierefreiheit zu erfahren und diese Statistiken zu verbessern,<br \/>\nIch empfehle den Zugriff auf alle Dokumente auf web.dev.<br \/>\nWir k\u00f6nnen viel tun, um Erfahrungen zu sammeln, die f\u00fcr alle zug\u00e4nglicher sind.<\/p>\n<p><img alt='web-dev-a11y-3820183' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/web-dev-a11y-3820183.jpg'><\/p>\n<p>    <web-feedback additional-questions=\"\"><\/web-feedback>\n  <\/div>","protected":false},"excerpt":{"rendered":"<p>Durch die Verbesserung der Zug\u00e4nglichkeit wird Ihre Website f\u00fcr alle benutzerfreundlicher. 6. Dez. 2019 Es ist gro\u00dfartig, Websites zu erstellen, die integrativ und f\u00fcr alle zug\u00e4nglich sind. Es gibt mindestens sechs Schl\u00fcssel \u2026<\/p>","protected":false},"author":1,"featured_media":83583,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-83582","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Accessibility tips for web developers - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It&#039;s awesome to build sites that are inclusive and accessible to everyone.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accessibility tips for web developers\" \/>\n<meta property=\"og:description\" content=\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It&#039;s awesome to build sites that are inclusive and accessible to everyone.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-06T05:13:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"420\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Accessibility tips for web developers\",\"datePublished\":\"2022-10-06T05:13:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"},\"wordCount\":2491,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\",\"name\":\"Accessibility tips for web developers - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"datePublished\":\"2022-10-06T05:13:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.\",\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/dev\\\/accessibility-tips-for-web-developers\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8449472.jpg\",\"width\":1000,\"height\":420,\"caption\":\"hero-8449472-5278027-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tipps zur Barrierefreiheit f\u00fcr Webentwickler \u2013 R Marketing Digital","description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/","og_locale":"de_DE","og_type":"article","og_title":"Accessibility tips for web developers","og_description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","og_url":"https:\/\/rmarketingdigital.com\/de\/dev\/accessibility-tips-for-web-developers\/","og_site_name":"R Marketing Digital","article_published_time":"2022-10-06T05:13:04+00:00","og_image":[{"width":1000,"height":420,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Accessibility tips for web developers","datePublished":"2022-10-06T05:13:04+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"},"wordCount":2491,"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","articleSection":["Dev"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/","url":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/","name":"Tipps zur Barrierefreiheit f\u00fcr Webentwickler \u2013 R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","datePublished":"2022-10-06T05:13:04+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Improving accessibility makes your site more useable for everyone. Dec 6, 2019 It's awesome to build sites that are inclusive and accessible to everyone.","inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/rmarketingdigital.com\/dev\/accessibility-tips-for-web-developers\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8449472.jpg","width":1000,"height":420,"caption":"hero-8449472-5278027-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digitales Marketing","description":"SEO Agentur | Werbung f\u00fcr soziale Netzwerke | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digitales Marketing","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83582","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/comments?post=83582"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/posts\/83582\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media\/83583"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/media?parent=83582"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/categories?post=83582"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/de\/wp-json\/wp\/v2\/tags?post=83582"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}