Barrierefreies Webdesign in Reutlingen und Tübingen

In diesem Artikel geht es um barrierefreies Webdesign in Reutlingen und Tübingen.

Wenn Sie Ihre Internetseite ohne Barrieren für behinderte und ältere Menschen Gestalten möchten, dann nennt das „barrierefreies Webdesign„. Bei einer zunehmend älter werdenden Gesellschaft sind Menschen im fortgeschrittenen Alter eine wichtige Zielgruppe für barrierefreies Webdesign. Auch sie sind oft sehr dankbar über Webseiten die nach Richtlinien für barrierefreies Webdesign erstellt worden sind. barrierefreies Webdesign bedeutet, dass eine Internetseite auf körperliche und geistige Einschränkungen von Menschen Rücksicht nimmt. Barrierefreies Webdesign ist suchmaschinenfreundlich. Deswegen bringt barrierefreies Webdesign auch mehr Besucher.

Definiton

Barrierefreiheit bedeutet ohne Hindernisse. Barrierefreiheit gibt es bei Gebäuden, auf der Straße oder in der EDV. Barrierefreiheit in der EDV bedeutet, dass Websites und Software barrierefreier gestaltet sind, dass Menschen mit unterschiedlichen Einschränkungen die Webseite / Software bedienen können.
Behindertengerechtes Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie auch für Menschen mit körperlichen und geistigen Beeinträchtigungen wahrnehmbar ist. Es geht also darum dass Websites für alle Menschen wahrnehmbar und erfahrbar sind. Oft kommt auch der Begriff Barrierefreies Internet oder Barrierefreiheit Internet oder barrierefreie Webseiten / Websites / Internetseiten oder accessibility (=Zugänglichkeit) bei Webauftritten oder behindertengerechtes Webdesign anstelle von barrierefreies Webdesign vor. Dies meint aber das Gleiche.

In nachstehenden Video geht es um Webdesign Reutlingen – Zugänglich und barrierefrei

Barrierefreies Webdesign für Reutlingen – Richtlinien

Es werden Richtlinien benötigt, um zu beurteilen ob eine Website nach den Grundlagen des barrierefreien Websites erstellen, erstellt wurde. So existieren internationale und nationale (also für Deutschland geltende) Richtlinien für solche Sites.

International gelten die Web Content Accessibility Guidelines wcag 2 .

In Deutschland gilt die Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz

Wenn ich eine Webseite z. B. aus Österreich frei von Barrieren machen soll, wende ich die WCAG 2 an. Bei Seiten aus Deutschland die BITV 2.0 .

accessibility bei Websites gibt es also national und international.

Auch in der Fachliteratur wird die Bedeutung von barrierefreies Webdesign immer wichtiger. Für mich ist barrierefreies Webdesign ein Qualitätsmerkmal.

barrierefreie Webseiten in Reutlingen und Tübingen – Testen

Es gibt noch immer keine Webseite oder Software mit der es möglich ist, eine Webseite auf Barrierefreiheit automatisiert zu testen. Die
Kriterien sind so komplex dass sie nur von einem Menschen der systematisch die Richtlinien durch geht überprüft werden können. Das ist aber auch ganz gut so, weil es eingeschränkten Menschen eine Möglichkeit bietet mit ihrem behinderungsbedingtem Fachwissen Geld zu verdienen. In Deutschland wird auf behindertengerechtes Webdesign nach der BITV 2.0 getestet.

Das Bild zeigt ein Formular barrierefrei gestaltet mit Tastenkürzel und guter Anzeige des Tastenfokus
Das Bild zeigt ein barrierefreies Formular mit Tastenkürzel und gut sichtbaren Tastaturfokus.

Webdesign für Menschen mit Behinderung in der Fachliteratur

Früher wurde das Thema in der Fachliteratur nie erwähnt! Inzwischen sehe ich es mit Freude, dass Bücher die “Professionelles Webdesign” im Titel haben, ein extra Kapitel diesem Thema widmen. Websites ohne Barrieren gelten also inzwischen als professionell! Das erste Buch zu diesem Thema hat Jan Eric Hellbusch geschrieben.

Zugänglichkeit bei Internetseiten für Smartphones, Iphones, Ipads und Tablets

Viele Menschen mit Behinderung, ich auch, sind begeisterter Nutzer von Smartphones, Iphones, Ipads und Tablets. Deswegen bringt eine Webseite erstellt nach den Richtlinien der Barrierefreiheit auch hier Vorteile! Achten Sie darauf, dass Webauftritte für Mobiltelefone ebenfalls frei von Barrieren umgesetzt werden.

Der Blog von Marlem-Software angezeigt auf einem Ipad
Die Ipad-Ansicht von Marlem’s Blog

Barrierefreies Webdesign für Unternehmen aus Reutlingen

Am 12. Mai 2017 war ich in Stuttgart in der Hochschule der Medien und habe folgenden Vortrag gehalten:
Accessibility Day 2017 in der Hochschule der Medien Stuttgart. Mein Vortrag kann online angeschaut werden: Who cares. Warum sich Unternehmen jetzt um digitale Barrierefreiheit kümmern sollten

Ich biete barrierefreies Wedesign in Reutlingen und Tübingen.

Wenn Sie Ihre Webseite nach den Richtlinien für barrierefreies Webdesign gestalten möchten, sprechen Sie mit mir: 07121/504458 oder schicken Sie eine Mail: info@marlem-software.de .


Weitere Artikel zum Thema:

SEO und Barrierefreiheit – Ein Traumteam

Gastartikel von  lomali

Wie versprochen, befasse ich mich heute mit den zwei – für uns sehr wichtigen – Themen SEO und Barrierefreiheit. Ihr meint sicher, dass sowohl die Suchmaschinenoptimierung als auch die Barrierefreiheit sehr komplexe Themen sind und man für deren Beachtung viel Geld ausgeben muss.

Wenn Unwissenheit im Spiel ist, gibt es wie in vielen Bereichen im Leben Vorurteile, die gar nicht oder nur zum Teil stimmen. Auch bei diesen zwei Themen gibt es Vorurteile und oft sind das die Gleichen.

Aktualisierung bitte!
Diese zwei Themen haben nicht nur gemeinsame Vorurteile, wie Zeitintensiv, kostspielig und kompliziert, sondern müssen zusammen behandelt werden, da sie in sehr vielen Bereichen ineinander reinspielen.

Wenn man z. B. eine zwei Jahre alte Webseite für die Suchmaschinen und Barrierefreiheit optimieren möchte, ist das klar zeitintensiv und diese Zeit möchte auch bezahlt werden.

Die Ursache, dass eine nachträgliche Optimierung oftmals – muss es aber nicht sein – zeitintensiv ist, liegt nicht in der Komplexität der Themen. Eher sind die vielen selbsternannten Webdesigner schuld. Sie verfügen oftmals über altes HTML-Wissen oder meinen, man könne mit Generatoren, wie es sie zu tausende im Internet gibt, eine korrekt strukturierte Webseite basteln.

Dieser Umstand führt dazu, dass sehr viele Webseiten nicht richtig strukturiert sind und auf alten HTML-Standards aufbauen.

Der aktuelle HTML-Standard XHTML 1.0 und das neue HTML5 zwingen Programmierer dazu, optimiert für Suchmaschinen und Barrierefreiheit zu arbeiten.

Der richtige Weg
Man kann z. B. bei XHTML 1.0 den Doctype STRICT verwenden. Mit diesem Doctype sind die Regeln für das HTML-Dokument besonders streng definiert (einige tags sind z.B. nicht mehr erlaubt). Bei Regelverstoss werden die Fehler umgehend vom W3C-Validator gemeldet. Er prüft beispielsweise ob alle Bilder einen Alternativtext haben. Auch überprüft er die korrekte Codierung und Strukturierung der Webseite.

So bemüht sich der Webdesigner von Anfang an richtig und genau zu arbeiten. Dadurch werden automatisch die elementaren Grundlagen der SEO und Barrierefreiheit berücksichtigt.

Ein Tipp an alle jungen Webdesigner am Rande:
Die Struktur und die Gestaltung einer guten Webseite ist immer gut in HTML- und CSS-Definitionen aufgeteilt.

Was hat SEO eigentlich mit Barrierefreiheit zutun?
Viele Leute schauen diese zwei wichtigen Themen immer getrennt an und produzieren so gegebenenfalls mehr Kosten bei der Realisierung der Webseite.

Wenn man sich aber einmal vor Augen führt, wie die Suchmaschinen mit ihren Webcrawlers die eigene Webseite durchsuchen und analysieren, dann erkennt man, dass dieses Vorgehen sich gar nicht sehr von den Vorgehen eines Screen-Readers für sehbehinderte Besucher unterscheidet.

Ein sehr interessanter Bereich der Barrierefreiheit ist die Medienvielfalt im Internet. Seh- und Hörbehinderte können Videos bzw. Musik nicht wahrnehmen. Eine barrierefreie Webseite muss deshalb immer eine Alternative zu den Medien bieten, eine Transkription.

Wenn wir nun den Schritt zur Suchmaschinenoptimierung machen, können wir mit Transkriptionen unserer Medien unsere Platzierung in den Suchmaschinen verbessern. Bis heute können die Webcrawlers noch keine Videos und Musik auf Stichworte durchsuchen oder analysieren.

Es gibt noch viel mehr Bereiche einer Webseite in denen sich SEO und Barrierefreiheit ergänzen.

Mehr Vorbereitung, geringere Kosten
Ihr seht wie man mit geringem Aufwand gerade zwei sehr wichtige Themen einer guten Webseite umsetzen kann. Kleinerer Aufwand heisst auch tiefere Kosten bei der Realisation.

Wie schon oben geschrieben, ist die nachträgliche Optimierung sehr viel mühsamer und teuerer. Deshalb muss man schon in der Planungsphase und bei der Gestaltung bzw. Programmierung sich Gedanken machen, wie weit man in die SEO und Barrierefreiheit reingehen möchte.

Es wäre vielleicht sinnvoll mangels Kenntnisse in diesen Bereiche auch Fachleute hinzuziehen. Je nach Budget nur als Berater oder auch als Teammitglied bei der Realisation der Webseite.

Alles das muss man schon in den ersten Stunden des Projektes berücksichtigen, ansonsten kostet es unnötig viel mehr.

Und nun?
Ich hoffe, dass ihr euch ein Bild über die Verbindung und Wichtigkeit dieser zwei Themen machen könnt. Es gibt noch vieles zu entdecken und ich habe nur wenige Punkte erwähnt. Gebt uns doch ein Feedback. Mich würde interessieren, welche Erfahrungen ihr mit eurer Webseite bei der Suchmaschinenoptimierung und Barrierefreiheit gemacht habt. Vielleicht wollt ihr ja eine neue Webseite erstellen und braucht einen Fachmann. Wir helfen euch sehr gerne!

eye.syde ermöglicht Software-und Webentwickler Einblicke in die Welt der Farbfehlsichtigen

Jeder 20. Deutsche ist farbenblind. Diese Menschen haben bei der Arbeit am Computer große Probleme. Das Unternehmen i.syde Informationstechnik GmbH hat eine Software entwickelt mit der Software-und Webentwickler Farbfehlsichtigkeit simulieren können. Da ich selber Farbenblind und denke, dass diese Software zur barrierefreien Gestaltung von Webseiten und Software sehr nützlich ist, möchte ich dieses Programm kurz vorstellen.

Thomas Friebe, Geschäftsführer der i.syde Informationstechnik GmbH aus Balge hat festgestellt wie schwierig es für normalsichtige Menschen ist, sich vorzustellen wie Menschen mit Farbfehlsichtigkeit sehen. Deswegen hat ein interdisziplinäres Entwicklerteam bei i.syde die Spezialsoftware eye.syde entwickelt. Die Software eye.syde ermöglicht es Grafikdesigner, Software-und Webentwickler ihre Arbeit durch die Augen eines farbfehlsichtigen Menschen zu betrachten. Dadurch können Software und Webseiten besser auf die Bedürfnisse von Menschen mit Farbfehlsichtigkeit angepasst werden. Die Anpassung von Webseiten und Software an die Bedürfnisse von Menschen mit Farbfehlsichtigkeit ist ein wichtiger Schritt, wenn eine Webseite oder Software barrierefrei gestalten werden soll. Mit der Software lassen sich die unterschiedlichen Arten der Farbenfehlsichtigkeit wie Tritanopie, Protanopie, Deuteranopie oder Achromasie simulieren.

Die Software wurde mit dem .NET Framework und WPF (Windows Presentation Foundation) entwickelt und lässt sich unter den Betriebssystemen Windows XP und Windows 7 einsetzen.

Das Unternehmen i.syde Informationstechnik GmbH sieht das Ziel barrierefreier Software als soziales Anliegen. Deswegen gibt es die Software zum kostenlosen Download auf www.eyesyde.de .

Was ist die „Web Accessibility Initiative“ (WAI)?

Es gibt einige Begriffe die im Zusammenhang mit Barrierefreies Internet immer wieder vorkommen. Hier möchte ich erläutern, was sich hinter den Begriff „Web Accessibility Initiative“ verbirgt.

Die Web Accessibility Initiative(WAI) ist eine Arbeitsgruppe der W3C , die sich mit dem barrierefreien Zugang zum Internet beschäftigt. Die W3C ist das World Wide Web Consortium-Gremium, welches sich um die Standardisierung des World Wide Web(=Internet) kümmert.

Das Ziel der WAI (Web Accessibility Initiative) ist es, das Internet möglichst vielen Menschen zugänglich zu machen. Menschen mit unterschiedlichen Behinderungen sind auch eine Zielgruppe der WAI (Web Accessibility Initiative).

Die „Web Content Accessibility Guidelines 1.0“ (WCAG 1.0) beinhalten Anforderungen an die Webseitenprogrammierung als auch an Inhaltsarchitekturen, Layout-Grundlagen und Technik-Verwendung. Sie wurden von der Web Accessibility Initiative veröffentlicht.

Die Barrierefreie Informationstechnik-Verordnung (BITV) in Deutschland, baut auf die Web Content Accessibility Guidelines 1.0 auf.

Sind barrierefreie Internetseiten teurer wie „normale“ Webseiten?

Oft hört und liest man, dass barrierefreie Internetseiten zu teuer sind und sich deswegen nicht lohnen. In diesem Artikel möchte ich die Sache etwas beleuchten und zurecht rücken.

Zuerst möchte ich ein paar Überlegungen zum Begriff „Normal“ anstellen, weil ich als Mensch mit Behinderung immer wieder darüber stolpere, dass ich nicht „normal“ bin.

Oder dass es Behindertensoftware und „normale“ Software gibt. Oder es gibt barrierefreie Internetseiten und „normale“ Internetseiten.

Was ist „Normal“? Wie definiert man „Normal“. Dieser Begriff ist so „normal“, dass es recht schwierig ist im Internet eine Definition zu finden mit der man was anfangen kann!

Im Offenen Internetlexikon Wikipedia habe ich u.a. folgende 3 Kriterien gefunden:

[1] ohne Steigerung: Vorhandenen Normen entsprechend

(gesellschaftlichen, wissenschaftlichen, medizinischen, subjektiv erfahrenen)

[2] Über längere Zeiträume ähnlich ablaufenden Ereignissen entsprechend

[3] ohne Steigerung: im rechten Winkel/orthogonal (Mathematik)

Ich weiß nicht wie es Ihnen geht, aber ich finde alle 3 Erklärungsversuche nicht wirklich griffig.

Seit 2002 gibt es ein Gleichstellungsgesetz mit einem §11 Barrierefreie Informationstechnik in dem drin steht, dass staatliche Internetseiten barrierefrei sein müssen und gewerbliche sollten barrierefrei sein. Angenommen im Jahr 2011 sind alle Internetseiten barrierefrei, dann ist es plötzlich „normal“, dass Internetseiten barrierefrei sind!

Ich hoffe, ich konnte Sie etwas ins grübeln bringen, was die Verwendung des Begriffs „Normal“ betrifft. Ich spreche deswegen lieber von barrierefreien und nicht barrierefreien Webseiten.

Nun zur eigentlichen Frage: sind barrierefreie Internetseiten teurer als nicht barrierefreie?

Hier muss man unterscheiden. Wenn es darum geht eine bestehende Internetseite barrierefrei zu machen, kostet das auf jeden Fall Geld. Wie viel Geld hängt selbstverständlich vom Arbeitsaufwand hat. Das Problem bei Internetseiten ist, dass man zunächst nur die „Oberfläche“ sieht und nicht den HTML und CSS-Code der dahinter steckt. Somit ist es für einen Laien fast unmöglich den Fachmann vom Hobby-Webseitengestalter zu unterscheiden. Viele Hobby-Webseitengestalter können mit Bildbearbeitungsprogramme und Farbe sehr gut umgehen, legen aber auf eine korrekte Verwendung der HTML-und CSS-Befehle überhaupt keinen Wert. Damit eine Webseite barrierefrei ist, ist es unabdingbar, dass die HTML bzw. CSS-Befehle korrekt eingesetzt werden.

Wenn eine Webseite neu erstellt wird und von Beginn an die Richtlinien der Barrierefreiheit mit einbezogen werden, hält sich der Mehraufwand und somit auch die zusätzlichen Kosten in Grenzen. Es gibt gewisse Richtlinien, die es bei nicht barrierefreien Webseiten und bei barrierefreien Webseiten gibt, die sich nur in der Begründung unterscheiden!

Ich mache ein Beispiel. Der Alternativtext bei Bildern soll verwendet werden, damit ein Text angezeigt wird, wenn das Bild nicht geladen oder angezeigt werden kann, aus welchen Gründen auch immer. Dies steht in den nicht barrierefreien Richtlinien.

In den barrierefreien Richtlinien steht, dass der Alternativtext bei Bildern, den Bildinhalt grob beschreiben soll, damit blinde und sehbehinderte Menschen, die mit einem Screenreader surfen, wissen, dass es sich um ein Bild handelt und was auf dem Bild zu sehen ist.

In beiden Richtlinien steht das Gleiche nur die Begründung ist anders!

Ein zweites Beispiel. In den barrierefreien Richtlinien steht dass Navigationsmechanismen übersichtlich und schlüssig zu gestalten sind. In jedem guten Buch über professionelles Webdesign liest man ganz genau das Gleiche. Es gibt also in den nicht barrierefreien und den barrierefreien Richtlinien gemeinsame Punkte. Somit ist klar, dass es nicht zwei völlig unterschiedliche Ziele(Webseiten) sind.

Ein Video, zum Beispiel, in Textform zu beschreiben kostet selbstverständlich zusätzliche Zeit und Geld. Durch dieses zusätzlich investierte Geld, steigt allerdings die Zahl der Besucher der Webseite und somit kann, zum Beispiel im Fall eines Webshops, das investierte Geld wieder rein kommen.

Fassen wir zusammen:
In den Richtlinien für nicht barrierefreie Webseiten und den Richtlinien für barrierefreie Webseiten gibt es Gemeinsamkeiten. Eine nicht barrierefreie Webseite barrierefrei zu machen kostet Geld. Wie viel Geld hängt davon ab, wie Wichtig dem Web-Entwickler die Umsetzung der nicht barrierefreien Richtlinien war. Bei einer sehr guten Umsetzung der nicht barrierefreien Richtlinien, dürften die Kosten nicht sehr hoch sein. Bei einer neu erstellten Webseite ist es sehr empfehlenswert, gleich auf barrierefreies Webdesign zu achten. Durch die Gemeinsamkeiten der nicht barrierefreien und barrierefreien Richtlinien hält sich der Mehraufwand und die damit verbunden Mehrkosten in Grenzen.

Durch die umgesetzte Barrierefreiheit steigt die Zahl der Webseitenbesucher (siehe Artikel „Barrierefreiheit – wer braucht das?“ ) und somit die Beliebtheit der Webseite und im Fall eines Webshops kommt mehr Umsatz in die Kasse!

Barrierefreie Internetseiten lohnen sich!

Screenreader leicht und verständlich erklärt

Blinde und sehbehinderte Menschen arbeiten mit einer Software, die unter dem Oberbegriff Screenreader zusammengefasst wird. Was diese Software macht und wie Sie funktioniert, erfahren Sie hier.

Computernutzung bei Blindheit und Sehbehinderung
Blinde Personen können Computer mithilfe einer Braillezeile nutzen. Das Computer-Ausgabegerät stellt Zeichen in Brailleschrift dar und wird üblicherweise durch Screenreader angesteuert. Bildquelle: zlikovec – 428299819 / Shutterstock.com

Ein Screenreader ist ein Bildschirmleseprogramm. Wenn ein Mensch blind oder sehbehindert ist, heißt das nicht, dass er nicht am PC/Laptop arbeiten kann. Der Screenreader „spielt“ für den blinden oder sehbehinderten Menschen die Augen und liest den Bildschirminhalt. Die Vermittlung der Informationen auf dem Bildschirm können dabei auf zwei verschiedene Arten geschehen:

  • Akustisch: über eine Soundkarte
  • Taktil: über eine Braillezeile

Wenn der gelesene Text über die Soundkarte ausgegeben wird, heißt das, dass der Text dem blinden oder sehbehinderten Menschen vorgelesen wird. Im Fall der Braillezeile kann der Nutzer den Inhalt selbst in Blindenschrift lesen.Wenn der gelesene Text über die Soundkarte ausgegeben wird, heißt das, dass der Text dem blinden oder sehbehinderten Menschen vorgelesen wird. Im Fall der Braillezeile kann der Nutzer den Inhalt selbst in Blindenschrift lesen.

Hier noch ein Youtube-Video in dem ich erkläre was ein Screenreader ist:

Zwei Wege der Sprachausgabe

Die akustische Wiedergabe des Bildschirminhalts ist besonders für sehbehinderte Menschen geeignet, deren Sehvermögen noch gut genug ist, dass sie auf Blindenschrift verzichten können. Es gibt zwei Wege, um synthetische Sprache zu erzeugen:

  • Externe Geräte: Diese werden an den Computer angeschlossen und erzeugen die Sprachausgabe unabhängig vom benutzten Endgerät. Dabei werden die Bildschirminformationen vom Endgerät (PC, Tablet, Laptop) auf das externe Ausgabemedium übertragen.
  • Internes Softwareprogramm: Dieses Programm ist in der Regel in den Screenreader integriert und übersetzt die Bildschirminhalte in Sprache. Die Ausgabe erfolgt über die PC-Lautsprecher wahlweise mit oder ohne Kopfhörer.

Synthetische Sprache hat den Nachteil, dass sie sehr maschinell klingt. Das Hauptproblem dieser assistiven Technologie ist zweifellos, mit so produzierter Sprache Gefühle zu transportieren. Das Ergebnis wirkt deshalb nicht immer angenehm und harmonisch. Die Sprachausgabe erfolgt recht monoton ohne Pause oder Betonung. Bei Wörtern, die anders ausgesprochen als sie geschrieben werden, können teilweise Verständnisprobleme auftreten.

Die in die Software integrierte Wörterbuchfunktion kann unverständliche Wörter aber noch einmal nach ihrem Sinn erklären. Diese Funktion ist auch bei Zeichenfolgen wie Smileys oder Abkürzungen sehr hilfreich. Ähnlich wie bei Navigationsgeräten können Benutzer in der Regel zwischen einer Männer- oder Frauenstimme wählen. Über die Einstellungen kann zudem die Lesegeschwindigkeit angepasst werden.

Braillezeilen übersetzen Bildschirminhalte in Blindenschrift

Die Braillezeile ist ein Ausgabegerät, welches den gelesenen Text in Brailleschrift (=Blindenschrift) ausgibt. Die Brailleschrift wird mit Stößel dargestellt, die aus einer Fläche herausragen. Diese herausragenden Stößel bilden die Zeichen der Blindenschrift ab. Der blinde oder sehbehinderte Mensch kann mit seinen Fingerkuppen die Stößel abtasten und somit eine Bildschirmzeile lesen.

Alternativtexte für Bilder und Videos sind wichtig

Da Screenreader nur lesen und nicht sehen können, ist es z. B. wichtig, dass Bilder auf einer Webseite einen Alternativtext haben. Fehlt dieser Alternativtext, wird diese Fläche vom blinden oder sehbehinderten Menschen als „leere“ Fläche wahrgenommen.
Bei Videos verhält es sich genau gleich. Der Screenreader kann ein Video nicht „lesen“. Wenn man auf einer Webseite Videos einbindet, sollte man unter dem Video kurz beschreiben, was auf dem Video zu sehen ist.
Mit oben beschriebener Vorgehensweise können blinde und sehbehinderte Menschen am PC/Laptop arbeiten. Der Screenreader liest den Bildschirminhalt und liest ihn vor oder schickt ihn an die Braillezeile.

Programmoberflächen müssen Text beinhalten

Damit Screenreader Programmoberflächen „lesen“ können, müssen diese so programmiert werden, dass die Oberflächenkomponenten Texte beinhalten, die Sinn und Zweck der Komponente erklären.
Da Screenreader in unterschiedlichen Betriebssystemen anders heißen, hier eine kurze Auflistung:

Betriebssysteme Name des Screenreaders Wo finden Sie den Screenreader
Windows Sprachausgabe Einstellungen -> Erleichterte Bedienung
IOS Voice Over Einstellungen -> Bedienungshilfen
Android Talkback Einstellungen -> Bedienungshilfen oder Eingabehilfe
Ubuntu Bildschirmleser Einstellungen -> Zugangshilfen

Die in der Praxis am meisten verwendeten Screenreader

Die Softwareprogramme für Screenreader gibt es sowohl als kostenlose oder Open-Source-Versionen als auch von kommerziellen Anbietern gegen Bezahlung. Der bekannteste Gratis-Screenreader ist NonVisual Desktop Access (NVDA) für Microsoft Windows. In diesem Blogartikel erkläre ich den Screenreader NVDA. Zusätzlich habe ich im Netz ein Video gefunden, das den NVDA Screenreader ebenfalls erklärt:

Youtube-Video, das den Gebrauch des NVDA Screenreaders in englischer Sprache erklärt.
Zu den bekanntesten kommerziellen Screenreadern gehört die Software Job Access With Speech (JAWS). Die Kosten für die Version Professional liegen bei etwa 900 Euro. Die Home Edition gibt es schon ab etwa 735 Euro.
In diesem Video wird der Screenreader JAWS vorgestellt. Leider habe ich kein deutschsprachiges Video gefunden:

Video-Tutorial in englischer Sprache über die verschiedenen Elemente einer Webseite, einschließlich Links, Überschriften und Dialogboxen und wie JAWS auf diese Elemente zugreift.
Auf meiner Webseite finden Sie weitere nützliche Informationen zum Thema barrierefreies Webdesign.

Wann ist eine Webseite / Internetseite barrierefrei? (BITV 1.0)

Heute schauen wir uns an, welche Kriterien erfüllt werden sein müssen, damit man von einer barrierefreien Webseite / Internetseite sprechen kann. Mit Sicherheit lassen sich nicht alle Kriterien zu 100% umsetzen. Es geht aber bei diesem Thema auch nicht um das sture Umsetzen von irgendwelchen Richtlinien, sondern es geht darum, ein Bewusstsein zu schaffen, dass es Menschen mit unterschiedlichen Einschränkungen gibt, die beim Wahrnehmen / Lesen einer Webseite auf Barrieren (=Hindernisse) stoßen.

Im folgenden Liste ich die Punkte der Barrierefreie Informationstechnik-Verordnung(=BITV) auf, die für die Umsetzung von Barrierefreiheit auf Webseiten wichtig sind.

Die Bedingungen sind in zwei Priorität-Stufen gegliedert. Eine Webseite ist erst dann Barrierefrei, wenn alle Priorität-Stufen erfüllt sind.

 

Übersicht der Anforderungen für barrierefreies Webdesign auf der BITV

 


Textäguivalente und -alternativen ( Anforderung 1 )
Für jeden Audio- oder visuellen Inhalt sind geeignete äquivalente Inhalte bereitzustellen, die den gleichen Zweck oder die gleiche Funktion wie der originäre Inhalt erfüllen.

Priorität I
Bedingung 1.1
Für jedes Nicht-Text-Element ist ein äquivalenter Text bereitzustellen. Dies gilt insbesondere für: Bilder, graphisch dargestellten Text einschließlich Symbolen, Regionen von Imagemaps, Animationen (z.B. animierte GIFs), Applets und programmierte Objekte, Zeichnungen, die auf der Verwendung von Zeichen und Symbolen des ASCII-Codes basieren (ASCII-Zeichnungen), Frames, Scripts, Bilder, die als Punkte in Listen verwendet werden, Platzhalter-Graphiken, graphische Buttons, Töne (abgespielt mit oder ohne Einwirkung des Benutzers), Audio-Dateien, die für sich allein stehen, Tonspuren von Videos und Videos.

Bedingung 1.2
Für jede aktive Region einer serverseitigen Imagemap sind redundante Texthyperlinks bereitzustellen.

Bedingung 1.3
Für Multimedia-Präsentationen ist eine Audio-Beschreibung der wichtigen Informationen der Videospur bereitzustellen.

Bedingung 1.4
Für jede zeitgesteuerte Multimedia-Präsentation (insbesondere Film oder Animation) sind äquivalente Alternativen (z.B. Untertitel oder Audiobeschreibungen der Videospur) mit der Präsentation zu synchronisieren.

Priorität II
Bedingung 1.5
Für jede aktive Region einer clientseitigen Imagemap sind redundante Texthyperlinks bereitzustellen.


Farben und Kontraste ( Anforderung 2 )
Texte und Graphiken müssen auch dann verständlich sein, wenn diese ohne Farbe betrachtet werden.

Priorität I
Bedingung 2.1
Alle mit Farbe dargestellten Informationen müssen auch ohne Farbe verfügbar sein, z.B. durch den Kontext oder die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache.

Bedingung 2.2
Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.

Priorität II
Bedingung 2.3
Texte sind so zu gestalten, dass die Kombinationen aus Vordergrund- und Hintergrundfarbe auf einem Schwarz-Weiß-Bildschirm und bei der Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend kontrastieren.


Trennung von Inhalt und Layout ( Anforderung 3 )
Markup-Sprachen (insbesondere HTML) und Stylesheets (CSS) sind entsprechend ihrer Spezifikationen und formalen Definitionen zu verwenden.

Priorität I
Bedingung 3.1
Soweit eine angemessene Markup-Sprache existiert, ist diese anstelle von Bildern zu verwenden, um Informationen darzustellen.

Bedingung 3.2
Mittels Markup-Sprachen geschaffene Dokumente sind so zu erstellen und zu deklarieren, dass sie gegen veröffentlichte formale Grammatiken validieren.

Bedingung 3.3
Es sind Stylesheets zu verwenden, um die Text- und Bildgestaltung sowie die Präsentation von mittels Markup-Sprachen geschaffener Dokumente zu beeinflussen.

Bedingung 3.4
Es sind relative anstelle von absoluten Einheiten in den Attributwerten der verwendeten Markup-Sprache und den Stylesheet-Property-Werten zu verwenden.

Bedingung 3.5
Zur Darstellung der Struktur von mittels Markup-Sprachen geschaffener Dokumente sind Überschriften-Elemente zu verwenden.

Bedingung 3.6
Zur Darstellung von Listen und Listenelementen sind die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache zu verwenden.

Bedingung 3.7
Zitate sind mittels der hierfür vorgesehenen Elemente der verwendeten Markup-Sprache zu kennzeichnen.


Sprachliche Besonderheiten ( Anforderung 4 )
Sprachliche Besonderheiten wie Wechsel der Sprache oder Abkürzungen sind erkennbar zu machen.

Priorität I
Bedingung 4.1
Wechsel und Änderungen der vorherrschend verwendeten natürlichen Sprache sind kenntlich zu machen.

Priorität II
Bedingung 4.2
Abkürzungen und Akronyme sind an der Stelle ihres ersten Auftretens im Inhalt zu erläutern und durch die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache kenntlich zu machen.

Bedingung 4.3
Die vorherrschend verwendete natürliche Sprache ist durch die hierfür vorgesehenen Elemente der verwendeten Markup-Sprache kenntlich zu machen.


Tabellen ( Anforderung 5 )
Tabellen sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu beschreiben und in der Regel nur zur Darstellung tabellarischer Daten zu verwenden.

Priorität I
Bedingung 5.1
In Tabellen, die tabellarische Daten darstellen, sind die Zeilen- und Spaltenüberschriften mittels der vorgesehenen Elemente der verwendeten Markup-Sprache zu kennzeichnen.

Bedingung 5.2
Soweit Tabellen, die tabellarische Daten darstellen, zwei oder mehr Ebenen von Zeilen- und Spaltenüberschriften aufweisen, sind mittels der vorgesehenen Elemente der verwendeten Markup-Sprache Datenzellen und Überschriftenzellen einander zuzuordnen.

Bedingung 5.3
Tabellen sind nicht für die Text- und Bildgestaltung zu verwenden, soweit sie nicht auch in linearisierter Form dargestellt werden können.

Bedingung 5.4
Soweit Tabellen zur Text- und Bildgestaltung genutzt werden, sind keine der Strukturierung dienenden Elemente der verwendeten Markup-Sprache zur visuellen Formatierung zu verwenden.

Priorität II
Bedingung 5.5
Für Tabellen sind unter Verwendung der hierfür vorgesehenen Elemente der genutzten Markup-Sprache Zusammenfassungen bereitzustellen.

Bedingung 5.6
Für Überschriftenzellen sind unter Verwendung der hierfür vorgesehenen Elemente der genutzten Markup-Sprache Abkürzungen bereitzustellen.


Allgemeine Rückwärtskompatibilität ( Anforderung 6 )
Internetangebote müssen auch dann nutzbar sein, wenn der verwendete Benutzeragent neuere Technologien nicht unterstützt oder diese deaktiviert sind.

Priorität I
Bedingung 6.1
Es muss sichergestellt sein, dass mittels Markup-Sprachen geschaffene Dokumente verwendbar sind, wenn die zugeordneten Stylesheets deaktiviert sind.

Bedingung 6.2
Es muss sichergestellt sein, dass Äquivalente für dynamischen Inhalt aktualisiert werden, wenn sich der dynamische Inhalt ändert.

Bedingung 6.3
Es muss sichergestellt sein, dass mittels Markup-Sprachen geschaffene Dokumente verwendbar sind, wenn scripts, Applets oder andere programmierte Objekte deaktiviert sind.

Bedingung 6.4
Es muss sichergestellt sein, dass die Eingabebehandlung von scripts, Applets oder anderen programmierten Objekten vom Eingabegerät unabhängig ist.

Bedingung 6.5
Dynamische Inhalte müssen zugänglich sein. Insoweit dies nur mit unverhältnismäßig hohem Aufwand zu realisieren ist, sind gleichwertige alternative Angebote unter Verzicht auf dynamische Inhalte bereitzustellen.


Dynamische Inhalte ( Anforderung 7 )
Zeitgesteuerte Änderungen des Inhalts müssen durch die Nutzerin/den Nutzer kontrollierbar sein.

Priorität I
Bedingung 7.1
Bildschirmflackern ist zu vermeiden.

Bedingung 7.2
Blinkender Inhalt ist zu vermeiden.

Bedingung 7.3
Bewegung in mittels Markup-Sprachen geschaffener Dokumente ist entweder zu vermeiden oder es sind Mechanismen bereitzustellen, die der Nutzerin, dem Nutzer das Einfrieren der Bewegung oder die Änderung des Inhalts ermöglichen.

Bedingung 7.4
Automatische periodische Aktualisierungen in mittels Markup-Sprachen geschaffener Dokumente sind zu vermeiden.

Bedingung 7.5
Die Verwendung von Elementen der Markup-Sprache zur automatischen Weiterleitung ist zu vermeiden. Insofern auf eine automatische Weiterleitung nicht verzichtet werden kann, ist der Server entsprechend zu konfigurieren.


Benutzerschnittstellen ( Anforderung 8 )
Die direkte Zugänglichkeit der in Internetangeboten eingebetteten Benutzerschnittstellen ist sicherzustellen.

Priorität I
Bedingung 8.1
Programmierte Elemente (insbesondere scripts und Applets) sind so zu gestalten, dass sie entweder direkt zugänglich oder kompatibel mit assistiven Technologien sind.


Geräte-Unabhängigkeit ( Anforderung 9 )
Internetangebote sind so zu gestalten, dass Funktionen unabhängig vom Eingabegerät oder Ausgabegerät nutzbar sind.

Priorität I
Bedingung 9.1
Es sind clientseitige Imagemaps bereitzustellen, es sei denn die Regionen können mit den verfügbaren geometrischen Formen nicht definiert werden.

Bedingung 9.2
Jedes über eine eigene Schnittstelle verfügende Element muss in geräteunabhängiger Weise bedient werden können.

Bedingung 9.3
In Scripts sind logische anstelle von geräteabhängigen Event-Handlern zu spezifizieren.

Priorität II
Bedingung 9.4
Es ist eine mit der Tabulatortaste navigierbare, nachvollziehbare und schlüssige Reihenfolge von Hyperlinks, Formularkontrollelementen und Objekten festzulegen.

Bedingung 9.5
Es sind Tastaturkurzbefehle für Hyperlinks, die für das Verständnis des Angebots von entscheidender Bedeutung sind (einschließlich solcher in clientseitigen Imagemaps), Formularkontrollelemente und Gruppen von Formularkontrollelementen bereitzustellen.


Kompatibilität mit Hilfsmitteln ( Anforderung 10 )
Die Verwendbarkeit von nicht mehr dem jeweils aktuellen Stand der Technik entsprechenden assistiven Technologien und Browsern ist sicherzustellen, soweit der hiermit verbundene Aufwand nicht unverhältnismäßig ist.

Priorität I
Bedingung 10.1
Das Erscheinenlassen von Pop-Ups oder anderen Fenstern ist zu vermeiden. Die Nutzerin, der Nutzer ist über Wechsel der aktuellen Ansicht zu informieren.

Bedingung 10.2
Bei allen Formular-Kontrollelementen mit implizit zugeordneten Beschriftungen ist dafür Sorge zu tragen, dass die Beschriftungen korrekt positioniert sind.

Priorität II
Bedingung 10.3
Für alle Tabellen, die Text in parallelen Spalten mit Zeilenumbruch enthalten, ist alternativ linearer Text bereitzustellen.

Bedingung 10.4
Leere Kontrollelemente in Eingabefeldern und Textbereichen sind mit Platzhalterzeichen zu versehen.

Bedingung 10.5
Nebeneinanderliegende Hyperlinks sind durch von Leerzeichen umgebene, druckbare Zeichen zu trennen.


W3C-Technologien ( Anforderung 11 )
Die zur Erstellung des Internetangebots verwendeten Technologien sollen öffentlich zugänglich und vollständig dokumentiert sein, wie z. B. die vom World Wide Web Konsortium entwickelten Technologien.

Priorität I
Bedingung 11.1
Es sind öffentlich zugängliche und vollständig dokumentierte Technologien in ihrer jeweils aktuellen Version zu verwenden, soweit dies für die Erfüllung der angestrebten Aufgabe angemessen ist.

Bedingung 11.2
Die Verwendung von Funktionen, die durch die Herausgabe neuer Versionen überholt sind, ist zu vermeiden.

Bedingung 11.3
Soweit auch nach bestem Bemühen die Erstellung eines barrierefreien Internetangebots nicht möglich ist, ist ein alternatives, barrierefreies Angebot zur Verfügung zu stellen, das äquivalente Funktionalitäten und Informationen gleicher Aktualität enthält, soweit es die technischen Möglichkeiten zulassen. Bei Verwendung nicht barrierefreier Technologien sind diese zu ersetzen, sobald aufgrund der technologischen Entwicklung äquivalente, zugängliche Lösungen verfügbar und einsetzbar sind.

Priorität II
Bedingung 11.4
Der Nutzerin, dem Nutzer sind Informationen bereitzustellen, die es ihnen erlauben, Dokumente entsprechend ihren Vorgaben (z.B. Sprache) zu erhalten.


Kontextuelle Hilfen ( Anforderung 12 )
Der Nutzerin/dem Nutzer sind Informationen zum Kontext und zur Orientierung bereitzustellen.

Priorität I
Bedingung 12.1
Jeder Frame ist mit einem Titel zu versehen, um Navigation und Identifikation zu ermöglichen.

Bedingung 12.2
Der Zweck von Frames und ihre Beziehung zueinander ist zu beschreiben, soweit dies nicht aus den verwendeten Titeln ersichtlich ist.

Bedingung 12.3
Große Informationsblöcke sind mittels Elementen der verwendeten Markup-Sprache in leichter handhabbare Gruppen zu unterteilen.

Bedingung 12.4
Beschriftungen sind genau ihren Kontrollelementen zuzuordnen.


Navigation und Orientierung ( Anforderung 13 )
Navigationsmechanismen sind übersichtlich und schlüssig zu gestalten.

Priorität I
Bedingung 13.1
Das Ziel jedes Hyperlinks muss auf eindeutige Weise identifizierbar sein.

Bedingung 13.2
Es sind Metadaten bereitzustellen, um semantische Informationen zu Internetangeboten hinzuzufügen.

Bedingung 13.3
Es sind Informationen zur allgemeinen Anordnung und Konzeption eines Internetangebots, z.B. mittels eines Inhaltsverzeichnisses oder einer Sitemap, bereitzustellen.

Bedingung 13.4
Navigationsmechanismen müssen schlüssig und nachvollziehbar eingesetzt werden.

Priorität II
Bedingung 13.5
Es sind Navigationsleisten bereitzustellen, um den verwendeten Navigationsmechanismus hervorzuheben und einen Zugriff darauf zu ermöglichen.

Bedingung 13.6
Inhaltlich verwandte oder zusammenhängende Hyperlinks sind zu gruppieren. Die Gruppen sind eindeutig zu benennen und müssen einen Mechanismus enthalten, der das Umgehen der Gruppe ermöglicht.

Bedingung 13.7
Soweit Suchfunktionen angeboten werden, sind der Nutzerin, dem Nutzer verschiedene Arten der Suche bereitzustellen.

Bedingung 13.8
Es sind aussagekräftige Informationen am Anfang von inhaltlich zusammenhängenden Informationsblöcken (z.B. Absätzen, Listen) bereitzustellen, die eine Differenzierung ermöglichen.

Bedingung 13.9
Soweit inhaltlich zusammenhängende Dokumente getrennt angeboten werden, sind Zusammenstellungen dieser Dokumente bereitzustellen.

Bedingung 13.10
Es sind Mechanismen zum Umgehen von ASCII-Zeichnungen bereitzustellen.


Verständlichkeit
( Anforderung 14 )
Das allgemeine Verständnis der angebotenen Inhalte ist durch angemessene Maßnahmen zu fördern.

Priorität I
Bedingung 14.1
Für jegliche Inhalte ist die klarste und einfachste Sprache zu verwenden, die angemessen ist.

Priorität II
Bedingung 14.2
Text ist mit graphischen oder Audio-Präsentationen zu ergänzen, sofern dies das Verständnis der angebotenen Information fördert.

Bedingung 14.3
Der gewählte Präsentationsstil ist durchgängig beizubehalten.

Auf meiner Webseite finden Sie auch Infos zum Thema barrierefreies Webdesign