In diesem Video erklärt Jaci vom WebFX Interactive-Team, wie Sie mit barrierefreiem Webdesign beginnen können.

Transkript:

Wie würden Sie sich fühlen, wenn Sie wirklich aufgeregt wären, eine Website zu besuchen, aber wenn Sie auf diese Website gehen, können Sie auf keinen ihrer Inhalte zugreifen? Ich persönlich wäre frustriert, und ich kann mir vorstellen, dass Sie das auch tun würden.

Wenn Sie kein barrierefreies Webdesign verwenden, ist dies das Szenario, das Sie für einen von vier Erwachsenen mit einer Behinderung in den USA schaffen. Das sind etwa 61 Millionen Menschen, die keinen gleichberechtigten Zugang zu Ihrer Website haben.

Es ist nicht einfach, die Richtlinien für barrierefreie Webdesigns zu befolgen, wenn Sie dies noch nie zuvor getan haben, aber ich werde einige Dinge skizzieren, die Sie tun können, um loszulegen .

Verwenden Sie die Zeitstempel in der Videobeschreibung, wenn Sie zu anderen Abschnitten dieses Videos springen möchten. Jetzt werde ich in einen Überblick über die Zugänglichkeit von Websites eintauchen.

Was ist Website-Barrierefreiheit?

Barrierefreiheit bedeutet, dass Ihre Website so gestaltet ist, dass Menschen mit Behinderungen sie nutzen können. Das Ziel des barrierefreien Designs besteht darin, technologische Barrieren zu beseitigen, damit jeder mit Ihren Inhalten interagieren kann.

Laut dem World Wide Web Consortium, auch bekannt als W3C, funktioniert eine barrierefreie Website für Menschen mit Hör-, kognitiven, neurologischen, körperlichen, sprachlichen und visuellen Behinderungen.

Machen Sie sich keine Sorgen, wenn Sie nicht sicher sind, wo Sie anfangen sollen. Das W3C hat eine Dokumentation, die Ihnen sagt, was Ihre Website enthalten sollte, um ihre Standards zu erfüllen.

Diese Dokumentation umfasst:

• Richtlinien für die Barrierefreiheit von Autorentools (ATAG)
• Richtlinien für barrierefreie Webinhalte (WCAG)
• Richtlinien für die Barrierefreiheit von Benutzeragenten (UAAG)

ATAG konzentriert sich auf Tools, die Menschen verwenden, um Internetinhalte zu erstellen, und UAAG untersucht die Zugänglichkeit von Tools, die Webinhalte rendern.

Ich werde mich in diesem Video auf die WCAG konzentrieren , die die Richtlinien darstellen, um Website-Inhalte für jedermann zugänglich zu machen.

Bei den WCAG haben Sie drei verschiedene Konformitätsstufen: A, AA und AAA. Wenn Sie von A über AA zu AAA gehen, befolgen Sie mehr von den WCAG festgelegte Standards und machen Ihre Website für eine größere Anzahl von Menschen zugänglich.

Woher wissen Sie also, ob Sie eine barrierefreie Website haben? Führen Sie eine Wirtschaftsprüfung durch!

So überprüfen Sie die Barrierefreiheit Ihrer Website

Sie müssen nicht selbst ein Audit durchführen. Wenn Sie Ihre Prüfung lieber auslagern möchten, wenden Sie sich an ein Team von Beratern , die Ihre Website analysieren und alle notwendigen Anpassungen für Sie vornehmen können.

Wenn Sie die Dinge lieber intern erledigen möchten, haben Sie viele Möglichkeiten. Sie können die Seiten Ihrer Website manuell nach Problemen durchsuchen, aber das wird wahrscheinlich viel Zeit in Anspruch nehmen.

Vielleicht möchten Sie einige Tools verwenden, um Ihnen zu helfen. Stecken Sie Ihre URL in einen Zugänglichkeitsprüfer wie WAVE , um zu sehen, was Sie auf einer Seite aktualisieren müssen. Sie können auch einen Bulk Accessibility Checker verwenden , um mehrere Seiten gleichzeitig zu analysieren.

Die W3C-Website hat eine große Liste von Barrierefreiheits-Tools , sodass Sie nicht alles selbst machen müssen.

Wir haben auch eine Liste mit fünf wichtigen Elementen für Ihre Zugänglichkeit und einige barrierefreie Designbeispiele – über die ich als nächstes sprechen werde – also bleiben Sie bei mir.

5 Richtlinien für barrierefreie Webdesigns

Denken Sie nur daran, dass dies kurze Zusammenfassungen der WCAG-Richtlinien sind. Ich möchte Sie ermutigen, die Kurzanleitung des W3C zu verwenden , um tiefergehende Techniken für barrierefreies Design zu erlernen.

1. Stellen Sie sicher, dass der Text lesbar ist

Jeder Text in normaler Größe, der wichtige Informationen übermittelt, muss leicht lesbar sein.

Kontrast spielt dabei eine wichtige Rolle. So wie es jetzt aussieht, benötigt großer Text (wie Hauptüberschriften) ein Kontrastverhältnis von 3:1 Text zu Hintergrund. Normaler (oder kleinerer) Text, wie der Text, der den Hauptteil Ihres Inhalts ausmacht, benötigt ein Kontrastverhältnis von 4,5:1.

Ein Beispiel für zu wenig Kontrast sieht etwa aus wie hellgrüner Text auf einem etwas dunkleren grünen Hintergrund. Ändern Sie den Text vielleicht in Schwarz oder Weiß, und Sie haben viel mehr Kontrast auf Ihrer Website.

Benutzer sollten auch in der Lage sein, Text auf eine Weise zu vergrößern, die die Funktionalität Ihrer Website nicht beeinträchtigt oder dazu führt, dass ihnen Inhalte entgehen.

2. Optimieren Sie Bilder, damit sie gesehen und gelesen werden

Das Hinzufügen von Alt-Text zu Bildern ist nicht nur eine gängige SEO-Praxis. Es hilft Menschen, die keine Bilder sehen können, zu verstehen, was darauf zu sehen ist.

Alt-Text ist ein Textabschnitt, der klar erklärt, was in einem Bild vor sich geht. Der Alt-Text passt direkt in die Einbettungscodes Ihrer Bilder. Wie Sie in diesem Beispiel von Mashable sehen, enthält die Seite Bilder, und wenn Sie zur Codeseite der Dinge wechseln, sehen Sie den Alt-Text.

3. Geben Sie Ihrem Publikum zusätzliche Möglichkeiten, Videos zu verstehen

Wenn Sie Ihren Videos noch nie Untertitel hinzugefügt haben, ist es jetzt an der Zeit, damit zu beginnen. Und verlassen Sie sich nicht nur auf die, die YouTube oder ein anderer Hosting-Anbieter automatisch generiert.

Wenn Sie Zeit und Geduld haben, sehen Sie sich Ihre automatisch generierten Untertitel an und nehmen Sie Änderungen vor. Sie werden nicht perfekt sein, wenn sie von einer KI kommen.

Sie können Untertitel auch mit einem Tool wie Rev bestellen und sie dann zu Ihrem Video hinzufügen.

Das Einfügen von Transkripten in Ihre Videos macht sie zugänglicher. Wenn Sie ein Skript geschrieben haben, haben Sie bereits ein Transkript erstellt!

Audiobeschreibungen fügen eine weitere Ebene der Zugänglichkeit hinzu. Dies sind separate Audiospuren, die beschreiben, was in Ihrem Video zwischen den Dialoglücken vor sich geht.

Wenn Sie also zwei Personen haben, die über ihren letzten Einkaufsbummel sprechen, und das Video dann auf einige Aufnahmen einer Person schneidet, die Kleidung anprobiert, würde die Audiobeschreibung erklären, was im Video passiert. Das kann etwa so sein: Eine Frau steht vor einem Spiegel und legt sich zwei Tücher über die Schulter.

Eine Hosting-Plattform wie Wistia ermöglicht es Ihnen, Audiobeschreibungen hochzuladen (und hat sogar eine Checkliste für die Barrierefreiheit von Videos, wenn Sie Ihre Videos hochladen).

4. Gestalten Sie Ihre Website maus- und tastaturfreundlich

Nicht jeder benutzt eine Maus, um im Internet zu navigieren. Ihre Website sollte das widerspiegeln.

Das bedeutet nicht nur, dass Sie sicherstellen müssen, dass jemand über eine Tastatur mit Ihrer Website interagieren kann, sondern es erfordert auch, dass Sie auffällige Möglichkeiten haben, hervorzuheben, welcher Teil Ihrer Website im Fokus steht.

Wenn Sie sich ein weiteres barrierefreies Designbeispiel ansehen, sehen Sie, dass die klassische blinkende Linie erscheint, wenn ich auf der Keds-Website auf die Suchleiste klicke, um mich wissen zu lassen, dass ich tippen kann. Die Suchleiste wird auch prominenter, wenn sie angeklickt wird.

Um die WCAG-Richtlinien zu erfüllen, sollte diese Funktionalität erfolgen, wenn eine Tastatur verwendet wird.

5. Machen Sie Ihre Seitennavigation leicht verständlich

Dieser Tipp geht über Barrierefreiheit hinaus. Es ist generell eine gute Sache, die Navigation auf Ihrer Website einfach und übersichtlich zu gestalten.

Schreiben Sie Seitentitel und Überschriften, die einen klaren Zweck haben. Verwenden Sie Link-Anchor-Text, der es einfach macht, zu verstehen, was sich in den Inhalten befindet, auf die Sie verlinken.

Verwenden Sie auch hier Fokusindikatoren, damit die Leute wissen, wo sie sich auf einer Seite befinden. Bieten Sie mehr als eine Möglichkeit an, auf eine Webseite zuzugreifen, z. B. über eine Sitemap, eine Hauptnavigation oder ein Inhaltsverzeichnis.

Und wie kann ich diesen überspringen? Haben Sie eine konsistente Navigation. Das bedeutet, wenn Sie eine Kopfzeile für die Hauptnavigation haben, sollte sich diese wirklich nicht ändern, wenn ein Benutzer von Seite zu Seite springt.

In diesem Beispiel mit der Website von At Home ändert sich die Navigation oben auf der Seite nicht, obwohl ich von einer Seite zur nächsten klicke.

Und wie ich bereits sagte, ist dies definitiv keine umfassende Liste dessen, was Sie tun müssen, um die Richtlinien für barrierefreie Webdesigns zu befolgen. Diese Richtlinien können sich ebenfalls ändern, recherchieren Sie also, wenn Sie bereit sind, Ihre Zugänglichkeit zu bewerten .

Abonnieren Sie unseren YouTube-Kanal und unseren E-Mail-Newsletter Revenue Weekly , um sich über verschiedene Themen zu Webdesign und digitalem Marketing zu informieren . Sie werden nicht enttäuscht sein.

Danke, dass du dich mir angeschlossen hast!

Schließen Sie sich den 5.000 Vermarktern an, die ihr Marketingwissen aus WebFX-Videos beziehen.

Abonniere jetzt