let’s dev GmbH & Co. KG - Die Marke für wegweisende Individualsoftware

Blog

Top!

let’s dev | Scroll to top
let’s dev | Scroll to next content item

Hello

let’s dev | Scroll to previous content item
let’s dev Blog | Barrierefreiheit in der Webentwicklung
by Sarah
31. October 2023

Barrierefreiheit in der Webentwicklung

Angetrieben durch die Digitalisierung verlagert sich ein immer größer werdender Teil des Alltags in die Welt vor den Bildschirmen. Was für Menschen mit Einschränkungen eigentlich ein Vorteil sein sollte, wird dabei häufig aufgrund von Barrieren zum Nachteil.

Wer profitiert von Barrierefreiheit?

Für Menschen mit Einschränkungen ist Barrierefreiheit unabdingbar, um Angebote im Internet nutzen zu können. Ob Menschen mit Sehbeeinträchtigungen, motorischen Einschränkungen oder Schwerhörige bzw. Gehörlose: Sie alle haben je nach Art der Einschränkung unterschiedliche Anforderungen und Bedürfnisse, die berücksichtigt werden sollten. Doch nicht nur Menschen mit permanenten Einschränkungen profitieren davon. Auch im Falle von situativen oder temporären Einschränkungen – z. B. starke Sonneneinstrahlung, vergessene Kopfhörer oder ein gebrochener Arm – erleichtert Barrierefreiheit die Benutzung eines Webangebots. Zusätzlich geht sie einher mit guter Usability sowie User Experience und bringt daher auch Vorteile für Menschen ohne Einschränkungen mit sich.

Wie wird mein Webangebot barrierefrei?

Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit: die vier Prinzipien der Barrierefreiheit sollte man bei der Umsetzung barrierefreier Webangebote berücksichtigen. Um diese Prinzipien einzuhalten, gibt es verschiedene Kriterien, die als Orientierung herangezogen werden können. Eine kleine Auswahl wird im Folgenden vorgestellt. Wer sich genauer informieren möchte, findet eine ausführliche Auflistung der Kriterien in den WCAG (Web Content Accessibility Guidelines) und weitere Informationen in der BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung).

Tastaturbedienbarkeit

Ein wichtiger Punkt im Hinblick auf die Gestaltung barrierefreier Webangebote ist die Tastaturbedienbarkeit. Besonders für Blinde oder Menschen mit motorischen Einschränkungen ist es wichtig, dass alle interaktiven Elemente per Tastatur (Tabulator- bzw. Pfeiltasten) erreicht werden können. Das fokussierte Element sollte dabei deutlich gekennzeichnet sein, z. B. durch eine Umrandung. Zusätzlich sollte auf eine schlüssige und erwartungskonforme Reihenfolge, in der die Elemente fokussiert werden, geachtet werden.

Hohe Kontraste

Um Menschen mit Seheinschränkungen den Zugang zu Inhalten zu erleichtern, sollten hohe Kontraste zwischen Vorder- und Hintergrundfarben verwendet werden. Die WCAG liefert Vorgaben dazu, wann ein Kontrast ausreichend ist und wann nicht. Prüfen kann man das Kontrastverhältnis z. B. mit dem Colour Contrast Analyser.

Colour Contrast Analyser in der Anwendung

Abbildung 1: Der Colour Contrast Analyser zeigt, dass der Farbkontrast zwischen blauem Hintergrund und weißer Schrift für großen Text in der Konformitätsstufe AAA ausreichend ist.

Darstellung im Hochkontrastmodus

Windows-Betriebssysteme stellen einen Hochkontrastmodus zur Verfügung, der von Menschen mit Seheinschränkungen verwendet werden kann. Dabei werden die Farben des ursprünglichen Designs auf eines der von Windows bereitgestellten Farbschemata umgestellt. Beispielsweise erhält die Seite dadurch einen schwarzen Hintergrund, Text wird weiß und Links werden gelb. Zu prüfen ist hier beispielsweise, ob Logos oder Icons erkennbar und Fokusmarkierungen sichtbar sind.

Skalierbarkeit

Für Menschen, die Inhalte einer Webseite vergrößern müssen, um diese wahrnehmen zu können, ist eine angemessene Skalierbarkeit unerlässlich. Texte sollten nicht abgeschnitten und ungewolltes horizontales Scrollen vermieden werden. Legt man bei der Umsetzung eines Webangebots Wert auf Responsiveness, ist dieser Punkt i. d. R. automatisch erfüllt.

Korrekte Syntax und Semantik

Menschen mit Beeinträchtigungen setzen meist assistive Technologien bei der Nutzung von Webangeboten ein. Diese interpretieren den Code und stellen die Inhalte in einer für die Person verständlichen Weise dar. Beispiel hierfür ist ein Screenreader, der das Webangebot mittels Sprachausgabe oder Braillezeile ausgibt und somit für die nutzende Person wahrnehmbar macht. Damit der Screenreader die Inhalte richtig interpretieren kann, ist die Verwendung einer korrekten Syntax und Semantik erforderlich. Beispielsweise sollten für einen Button, eine Liste oder eine Navigation die dafür vorgesehenen HTML-Tags verwendet werden.


Negativbeispiel:

         <div class=„button-primary“>Test starten</div>
         

Positivbeispiel:

         <button type=„button“ class=„button-primary“>Test starten</button>
         

Außerdem benötigen inhaltlich relevante Bilder und Grafiken einen aussagekräftigen Alternativtext.

Beispiel:

          <img src="schaukel.jpg" alt="Mädchen sitzt auf Schaukel">
           

Eine korrekte Überschriftenhierarchie ist gleichermaßen wichtig: Jede Seite sollte nur eine <h1>-Überschrift beinhalten. Auf eine <h1> folgt eine <h2>, gefolgt von einer <h3> etc. Es sollte kein Level übersprungen werden.

Negativbeispiel:

            
        <h2></h2>
            <h4></h4>
            <h4></h4>
            
        

Positivbeispiel:

            
        <h1></h1>
            <h2></h2>
                <h3></h3>
            <h2></h2>
                <h3></h3>
            
        

Mit Browser-Extensions, wie Google Lighthouse, Axe DevTools oder WAVE können Kriterien wie die HTML-Struktur überprüft werden. Ob das Webangebot für assistive Technologien optimiert ist, kann z. B. mit den Screenreadern NVDA (Windows) oder VoiceOver (Mac) getestet werden.

Fazit

Wie die oben beschriebenen Punkte zeigen, können viele Barrieren im eigenen Webangebot bereits mit geringem Aufwand beseitigt werden. Damit ermöglicht man nicht nur Zugänglichkeit für Menschen mit Einschränkungen, sondern auch eine Verbesserung der User Experience. Es empfiehlt sich also, bereits während der Entwicklung auf Barrierefreiheit zu achten, um somit ein inklusives Webangebot zu schaffen.

Weitere Artikel aus unserem Blog

let’s dev Blog | Apple Intelligence und ChatGPT: Die Highlights der WWDC24

Technical

Apple Intelligence und ChatGPT: Die Highlights der WWDC24

by Julian

2024-06-13

Weiterlesen
let’s dev Blog | Groß, größer, OMR: let’s dev und Kortpress auf dem OMR Festival 2024

Corporate

Groß, größer, OMR: let’s dev und Kortpress auf dem OMR Festival 2024

by Julian

2024-05-24

Weiterlesen
let’s dev Blog | Entdecke die Dynamic Island: Eine weitere Innovation der iOS-Welt

Technical

Entdecke die Dynamic Island: Eine weitere Innovation der iOS-Welt

by Nico

2024-04-05

Weiterlesen
let’s dev Blog | Der World Usability Day 2023

Corporate

Der World Usability Day 2023

by Sina

2023-11-10

Weiterlesen
let’s dev Blog | Adobe Max 2023

Corporate

Adobe Max 2023

by Julia

2023-10-13

Weiterlesen
let’s dev Blog | Digitale Wallet-Karten: Stärkung von Kundenbindung im digitalen Zeitalter

Corporate

Digitale Wallet-Karten: Stärkung von Kundenbindung im digitalen Zeitalter

by Julian

2023-07-07

Weiterlesen
let’s dev Blog | Kortpress auf dem OMR Festival 2023 in Hamburg

Corporate

Kortpress auf dem OMR Festival 2023 in Hamburg

by Julian

2023-05-31

Weiterlesen
let’s dev Blog | Recap 2022: Smart Devices, digitale Plattformen und innovative Forschungsprojekte

Corporate

Recap 2022: Smart Devices, digitale Plattformen und innovative Forschungsprojekte

by Julian

2023-01-31

Weiterlesen
let’s dev Blog | Mit LottieFiles Animationen für das Web erstellen

Corporate

Mit LottieFiles Animationen für das Web erstellen

by Julian

2022-12-15

Weiterlesen
let’s dev Blog | Lean in der Softwareentwicklung

Technical

Lean in der Softwareentwicklung

by Sabrina

2022-12-08

Weiterlesen
let’s dev Blog | Adobe Max - Live aus LA

Corporate

Adobe Max - Live aus LA

by Jessica

2022-10-28

Weiterlesen
let’s dev Blog | Mensch und Computer 2022 - Facing Realities

Corporate

Mensch und Computer 2022 - Facing Realities

by Kerstin

2022-09-12

Weiterlesen
let’s dev Blog | EUREKA Innovation Award

Corporate

EUREKA Innovation Award

by Karl

2022-06-23

Weiterlesen
let’s dev Blog | Die WWDC 2022: Unser Update zu Apples neuen Betriebssystemen

Technical

Die WWDC 2022: Unser Update zu Apples neuen Betriebssystemen

by Julian

2022-06-08

Weiterlesen
let’s dev Blog | Docker und die versteckte Sicherheitslücke

Technical

Docker und die versteckte Sicherheitslücke

by Martin

2022-02-17

Weiterlesen
let’s dev Blog | Die Weihnachtsfeiertage stehen wieder vor der Tür – Wir blicken gespannt auf das nächste Jahr 2022!

Corporate

Die Weihnachtsfeiertage stehen wieder vor der Tür – Wir blicken gespannt auf das nächste Jahr 2022!

by Julian

2021-12-22

Weiterlesen
let’s dev Blog | Fertigung und Montage von Stacks und Elektro­lyseuren für die Wasser­stoff­herstellung

Corporate

Fertigung und Montage von Stacks und Elektro­lyseuren für die Wasser­stoff­herstellung

by Anton

2021-12-21

Weiterlesen
let’s dev Blog | Adobe Max 2021 - Ein Fest der Kreativität

Corporate

Adobe Max 2021 - Ein Fest der Kreativität

by Julia

2021-11-02

Weiterlesen
let’s dev Blog | Relationale Datenbanken im Vergleich zu objektorientierten Datenbanken

Technical

Relationale Datenbanken im Vergleich zu objektorientierten Datenbanken

by Julian

2021-10-14

Weiterlesen
let’s dev Blog | Apple Developer Program: Wofür wird es benötigt und welche Inhalte bieten mir eine Mitgliedschaft?

Corporate

Apple Developer Program: Wofür wird es benötigt und welche Inhalte bieten mir eine Mitgliedschaft?

by Julian

2021-09-30

Weiterlesen
let’s dev Blog | Sketch, Figma & Co - Wir werfen einen Blick auf die beliebtesten UI und Prototyping Tools 2021

Corporate

Sketch, Figma & Co - Wir werfen einen Blick auf die beliebtesten UI und Prototyping Tools 2021

by Ellen

2021-07-15

Weiterlesen
let’s dev Blog | Rückenwind: Ein innovatives Projekt für den Weiterbetrieb von alten Windkraftanlagen

Corporate

Rückenwind: Ein innovatives Projekt für den Weiterbetrieb von alten Windkraftanlagen

by Karl

2021-06-24

Weiterlesen
let’s dev Blog | Features, Fixes und Funktionen - Ein Sumup der WWDC 2021

Corporate

Features, Fixes und Funktionen - Ein Sumup der WWDC 2021

by Julian

2021-06-10

Weiterlesen
let’s dev Blog | Smart Prognosis of Energy with Allocation of Resources

Corporate

Smart Prognosis of Energy with Allocation of Resources

by Karl

2021-02-18

Weiterlesen
let’s dev Blog | Dasoman - Daten-Souveränitäts-Manager

Corporate

Dasoman - Daten-Souveränitäts-Manager

by Karl

2021-01-11

Weiterlesen
let’s dev Blog | Wir blicken auf die vergangenen Monate zurück – Und wünschen alles Gute für das kommende Jahr 2021!

Corporate

Wir blicken auf die vergangenen Monate zurück – Und wünschen alles Gute für das kommende Jahr 2021!

by Julian

2020-12-17

Weiterlesen
let’s dev Blog | iOS User Interface Tests

Technical

iOS User Interface Tests

by Nicolas

2020-11-12

Weiterlesen
let’s dev Blog | Adobe Max - Zum ersten Mal online

Corporate

Adobe Max - Zum ersten Mal online

by Julia

2020-10-29

Weiterlesen
let’s dev Blog | CAN2BLE

Technical

CAN2BLE

by Raphael

2020-09-24

Weiterlesen
let’s dev Blog | Mensch und Computer 2020 - Digitaler Wandel im Fluss der Zeit

Corporate

Mensch und Computer 2020 - Digitaler Wandel im Fluss der Zeit

by UX Team

2020-09-18

Weiterlesen
let’s dev Blog | Neumorphism – Eine neue Ära des User Interface Design?

Technical

Neumorphism – Eine neue Ära des User Interface Design?

by Julian

2020-08-13

Weiterlesen
let’s dev Blog | UX Research Teil 3 – UX Methoden

Technical

UX Research Teil 3 – UX Methoden

by Elena

2020-05-28

Weiterlesen
let’s dev Blog | UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

Technical

UX Research Teil 2 - Was ist UCD und was hat User Research damit zu tun?

by Elena

2020-04-23

Weiterlesen
let’s dev Blog | go-digital fördert Einrichtung von Home Office Arbeitsplätzen

Corporate

go-digital fördert Einrichtung von Home Office Arbeitsplätzen

by Karl

2020-03-19

Weiterlesen
let’s dev Blog | Google Passes - Karten­verwaltung auf  Android-Geräten

Technical

Google Passes - Karten­verwaltung auf Android-Geräten

by Michelle

2020-03-12

Weiterlesen
let’s dev Blog | 100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

Technical

100% Code-Coverage bei Software Tests – eine sinnvolle Zielsetzung?

by Raphael

2020-03-06

Weiterlesen
let’s dev Blog | Swift UI - Einfache und schnelle Umsetzung von User Interfaces

Technical

Swift UI - Einfache und schnelle Umsetzung von User Interfaces

by Tobias

2020-03-02

Weiterlesen
let’s dev Blog | Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

Corporate

Im Dialog mit den Wirtschafts­junioren – Spannende Einblicke in die Unternehmens­gründung und die digitale Trans­formation

by Julian

2020-02-27

Weiterlesen
let’s dev Blog | Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

Technical

Vereinfachtes Testen von iOS Push Notifications im Simulator mit Xcode 11.4

by Manuel

2020-02-26

Weiterlesen
let’s dev Blog | Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

Corporate

Nationales Meeting des Konsortiums des SPEAR Forschungs­projektes bei let’s dev in Karlsruhe

by Karl

2020-01-27

Weiterlesen
let’s dev Blog | UX Research Teil 1 – Warum User Research so wichtig ist

Technical

UX Research Teil 1 – Warum User Research so wichtig ist

by Elena

2020-01-23

Weiterlesen
let’s dev Blog | Dark Mode

Technical

Dark Mode

by Elisa

2020-01-09

Weiterlesen
let’s dev Blog | Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

Corporate

Wir wünschen frohe Weihnachten – Und einen guten Start ins neue Jahr!

by Julian

2019-12-20

Weiterlesen
let’s dev Blog | Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

Corporate

Austausch zum Thema Digitalisierung mit dem Business Club Luxemburg in der Botschaft von Luxemburg in Berlin

by Karl

2019-12-17

Weiterlesen
let’s dev Blog | DaSoMan auf der Internet+ Expo in Foshan (China)

Corporate

DaSoMan auf der Internet+ Expo in Foshan (China)

by Karl

2019-12-13

Weiterlesen
let’s dev Blog | Google Play Console: Pre-Launch Berichte

Technical

Google Play Console: Pre-Launch Berichte

by Fabian

2019-12-11

Weiterlesen
let’s dev Blog | DevFest 2019 in Hamburg

Technical

DevFest 2019 in Hamburg

by Julian

2019-12-05

Weiterlesen
let’s dev Blog | Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

Corporate

Vernissage digitale Kunst im Medientheater der Humboldt Universität Berlin

by Karl

2019-11-21

Weiterlesen
let’s dev Blog | World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

Corporate

World Usability Day 2019 in Karlsruhe – let’s dev unterstützt als Hauptsponsor

by Aileen

2019-11-11

Weiterlesen
let’s dev Blog | Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

Corporate

Ausgeschlachtet - Tag der offenen Türen auf dem Alten Schlachthof Karlsruhe 2019

by Julian

2019-09-26

Weiterlesen
let’s dev Blog | Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

Corporate

Mensch und Computer 2019 - Konferenz zu User Experience und Usability in Hamburg

by Elena

2019-09-17

Weiterlesen
let’s dev Blog | Business und Enterprise App Verteilung unter iOS

Technical

Business und Enterprise App Verteilung unter iOS

by Aileen

2019-08-05

Weiterlesen
let’s dev Blog | Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

Corporate

Digital Transformation - Chances and Challenges in the Automotive Industry, Agriculture and New Technologies

by Karl

2019-07-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

Corporate

let’s dev unterstützt Läuferinnen und Läufer bei der 7. KIT Meisterschaft

by Karl

2019-07-05

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

Technical

Automatisiertes Testing von C++ Code mit Google Test und Google Mock – Teil 2

by Arne

2019-06-13

Weiterlesen
let’s dev Blog | Apple WWDC 2019: Das sind die Highlights der Keynote

Technical

Apple WWDC 2019: Das sind die Highlights der Keynote

by Nicolas

2019-06-05

Weiterlesen
let’s dev Blog | App Builders 2019

Technical

App Builders 2019

by Nicolas

2019-05-23

Weiterlesen
let’s dev Blog | Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

Corporate

Offizielle Eröffnung des Festigungs- und Expansionszentrums (FUX)

by Helena

2019-04-15

Weiterlesen
let’s dev Blog | Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

Corporate

Delegation aus Nottingham zu Besuch auf dem Alten Schlachthof in Karlsruhe

by Helena

2019-04-14

Weiterlesen
let’s dev Blog | Es ist soweit: Wir ziehen um!

Corporate

Es ist soweit: Wir ziehen um!

by Helena

2019-03-26

Weiterlesen
let’s dev Blog | Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

Technical

Automatisiertes Testing von C++ Code mit Frameworks – Teil 1

by Arne

2019-02-20

Weiterlesen
let’s dev Blog | Die App im Google Play Store

Technical

Die App im Google Play Store

by Elisa

2019-01-24

Weiterlesen
let’s dev Blog | „UX Day“ 2018

Corporate

„UX Day“ 2018

by Aileen

2018-12-17

Weiterlesen
let’s dev Blog | let’s dev unterstützt SG Siemens Volleyballer aus Karlsruhe

Corporate

let’s dev unterstützt SG Siemens Volleyballer aus Karlsruhe

by Helena

2018-12-04

Weiterlesen
let’s dev Blog | KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

Corporate

KMU gestalten die Digitalisierung – Mittelstandskonferenz 2018

by Helena

2018-11-12

Weiterlesen
let’s dev Blog | Apple Wallet

Technical

Apple Wallet

by Maik

2018-10-26

Weiterlesen
let’s dev Blog | „Mensch und Computer“ 2018

Corporate

„Mensch und Computer“ 2018

by Judith

2018-09-24

Weiterlesen
let’s dev Blog | State Design Pattern in Android

Technical

State Design Pattern in Android

by Thomas

2018-09-17

Weiterlesen
let’s dev Blog | let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

Corporate

let’s dev ist autorisiertes Beraterunternehmen im Förderprogramm „go-digital“

by Helena

2018-09-01

Weiterlesen
let’s dev Blog | App Design & Development Conference 2018

Corporate

App Design & Development Conference 2018

by Helena

2018-08-14

Weiterlesen
let’s dev Blog | iOS 12: Die Top-Neuerungen im Überblick

Technical

iOS 12: Die Top-Neuerungen im Überblick

by Nicolas

2018-07-17

Weiterlesen
let’s dev Blog | let’s dev auf der CEBIT

Corporate

let’s dev auf der CEBIT

by Karl

2018-06-11

Weiterlesen
let’s dev Blog | Einführung in User Interface (UI) Tests mit Espresso

Technical

Einführung in User Interface (UI) Tests mit Espresso

by Raphael

2018-06-07

Weiterlesen
let’s dev Blog | Die App im Apple App Store: welche Informationen werden benötigt?

Technical

Die App im Apple App Store: welche Informationen werden benötigt?

by Aileen

2018-04-27

Weiterlesen
let’s dev Blog | Smart Pointer in C++

Technical

Smart Pointer in C++

by Matthias

2018-04-01

Weiterlesen
let’s dev Blog | User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

Technical

User Interface Design für das iPhone X: alle Neuerungen auf einen Blick

by Helena

2018-02-07

Weiterlesen
let’s dev Blog | WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

Technical

WebVR – Virtual Reality Experience im Browser mit dem A-Frame Framework

by Judith

2018-01-10

Weiterlesen
let’s dev Blog | Open Data Hackathon der Deutschen Bahn

Corporate

Open Data Hackathon der Deutschen Bahn

by Karl

2015-03-31

Weiterlesen
let’s dev Blog | Blur-Effekte unter iOS 7

Technical

Blur-Effekte unter iOS 7

by Katja

2014-04-24

Weiterlesen
let’s dev Blog | Beyond App Store – Distribution von iOS-Anwendungen

Technical

Beyond App Store – Distribution von iOS-Anwendungen

by Karl

2012-08-27

Weiterlesen
let’s dev Blog | Frontend-Architektur – Model View Presenter und Message Bus

Technical

Frontend-Architektur – Model View Presenter und Message Bus

by Karl

2011-03-08

Weiterlesen