Ausgewählter Vortrag:
Web-Accessibility und Screendesign
-
21.11.2008, 12:45–13:30 Uhr, Raum 2
Warum sind Barrierefreiheit und cooles Design immer noch ein Gegensatz? Warum brechen barrierefreie Vorzeigeseiten oft die simpelsten Designgesetze? Welche Anforderungen stellen die WCAG 2.0 an das Design einer Website? Was macht gelungenes Design aus? Kann man Barrierefreiheit jetzt sehen oder nicht? Sind liquide Layouts die Lösung, oder zoomfähige Browser oder die großen Web 2.0 Buttons? Brauchen wir spezielle Lösungen („Big, Stark & Chunky“) oder nur mehr Professionalität und DesignerInnen, die das Web verstehen.
Unterlagen
Transkription:
Maria Putzhuber:
Screen-Design. Cooles Screen-Design und Web-Accessibility. Die sind immer noch ein ungleiches Paar, so wie eine kapriziöse Katze und ein braver Hund. Die Katze müsste ein bisschen sozialer werden und ein bisschen nutzerorientierter und ein bisschen weniger egozentrisch, und der brave Hund, die Barrierefreiheit ein bisschen weniger sozial, ein bisschen weniger zwanghaft, ein bisschen Fehler toleranter. Ja. Dann kommen gut zugängliche, barrierearme, schöne Webseiten raus.
Ich heiß’ Putzhuber noch amal, Maria Putzhuber und in meinem weiblichen Wahnsinn habe ich jetzt 70 Folien zusammengestellt [Lachen] und wollte keine mehr rausnehmen. Also das wird sich nicht ausgehen, aber ich denke ich mach’ jetzt bis zum Mittagessen und dann hören wir einfach auf [Lachen] und die Präsentation kommt sowieso ins Internet. Ich versuche hier ein bisschen eine Design-Kritik, das ist natürlich glattes Eis. Ich werde hier keine Webseiten besprechen, die ich ganz schlecht finde. Das ist nicht nötig, glaube ich. Und ich möchte ein bisschen vermitteln, was die WCAG 2.0 in Punkto Design wirklich vorgibt.
Anfangen will ich mit einer Studie. WebdesignerInnen finden Design wichtiger als WebnutzerInnen. Ein amerikanisches Forschungsinstitut namens idea.org, die haben 2008 eine Studie gemacht, und die haben WebseitenbesucherInnen, WebdesignerInnen und Webzuständige von non-profit Organisationen die gleichen Fragen gestellt. Non-profit Organisationen ist also öffentliche Hand, Museen, Universitäten usw.
Eine Frage war z.B.: ist gutes visuelles Design wichtig? Und die DesignerInnen haben zu über 80% gesagt, es ist sehr wichtig, aber die WebnutzerInnen nur zu 50%. Den Anderen ist schnell zu aktueller Information zu kommen viel wichtiger. A zweite interessante Frage: da geht’s um Orientierung. Die DesignerInnen waren wieder zu fast 70% der Meinung, dass man sich auf ihren Seiten sehr gut orientieren kann und die WebnutzerInnen nur zu 12%, fast immer. Also schon ein bissl eine unterschiedliche Ansicht, wo man sich überlegen muss, wer da was tun muss.
Nur 30% der Befragten finden Web-Accessibility sehr wichtig. Kann man jetzt darüber streiten, ob das viel oder wenig ist. Dem gegenüber steht, dass nur ca. 4% aller öffentlichen Web-Auftritte in Europa wirklich gut barrierefrei sind, zwar streng gemessen. Ein Institut oder EU-Projekt namens European Internet Accessibility Observatory. Die haben heuer eine Studie herausgebracht, wo sie sehr viele europäische öffentliche Webauftritte automatisiert getestet haben auf WCAG 1.0 AA Konformität. Also alles, was man automatisiert testen kann, haben sie getestet und nur 4% haben da wirklich gut abgeschnitten, sehr gut abgeschnitten. Ja, da ist auch schon ein bisschen ein Potential auch drin, ja, wenn 30% Interesse haben und nur 4% sind es, ja, da kann noch was passieren. Aber jedenfalls ist eine Tatsache, Design, Informationsarchitektur ist wichtiger und deshalb nur mit Profi-Design und Profi-Informationsarchitektur kann die Barrierefreiheit Mainstream werden. Das heißt man muss die Cool Cats mit ins Boot holen, sonst geht’s nicht.
Oft gesagt, Barrierefreiheit hat ein Image-Problem. Es ist nicht cool, nicht Hype, nicht schön, nicht business-tauglich, es ist ein Spaßverderber, eine Nische für AmateurInnen. Die fortschrittsorientierten Programmierer die sind längst wieder wo anders. Die haben vor ein paar Jahre, sich vor ein paaren Jahren sich mit Barrierefreiheit beschäftigt, jetzt machen’s was anderes. Wir predigen seit Jahren dagegen an. Der Insider-Zirkel wird immer ein bisschen größer, aber es ist immer noch ein Insider-Zirkel, und außerhalb von dem kleinen Kreis interessiert das Thema nicht wirklich jemanden.
Jetzt hab’ ich mir drei Gründe überlegt für den schlechten Ruf. Das Bild hier ist ein bisschen geschmacklos. Es ist eine Katze ohne Fell, nackte Katze auf einer Plüsch-Decke, soll heißen nur mit guter Verpackung schaut Barrierefreiheit nicht arm aus.
Erstes Problem. Die Barrierefreiheit ist von AmateurInnen ausgegangen, die Bewegung ist von AmateurInnen ausgegangen, von Menschen mit Behinderung selbst, von guten Menschen, von technisch interessierten, gestalterisch weniger begabten. Wenn man in Österreich nach Barrierefreiheit oder nach Web-Accessibility googelt, dann kommt man immer noch zu den Pionieren, also nicht zu denen, die Barrierefreiheit als Geschäftsfeld gemacht haben so wie ich. Man kommt z.B. auf der ersten Seite zu BIZEPS, Nachrichtendienst für Menschen mit Behinderungen, sehr informativ, aber das Design ist konservativ. Könnte ein bisschen grafischen Feinschliff vertragen. Man kommt zur Seite von der Eva Papst, WAI Austria, das ist 90er Jahre Design. Das würde ich aber gar nicht ändern, weil das ist eine Seite, wo es um Screen-Reader-Tauglichkeit geht und die Frau Papst ist so eine starke Marke wie vielleicht der Jakob Nielsen im Usability-Bereich. Der Jakob Nielsen der hat auch eine Webseite von 1995, aus gutem Grund ändert er sie nicht. Also das hebt sich hervor, das ist irgendwie marketingtechnisch vielleicht gut.
Eine Seite, wo ich schon was tun würde, ist die Seite von der Uni Linz, das Institut Integriert Studieren. Ja, die machen Forschung und Lehre auf dem Gebiet, veranstalten riesengroße Konferenzen, aber diese Seite, die hat 0 akademische Aura, keine wissenschaftliche Wichtigkeit, ja das ist ein kleines liebes Institut. [Lachen]
Dann findet man noch bei Google auf der ersten Seite die Webseite von Accessible Media. Da sieht man schon Design-Anspruch. Aber dieser orange-rosa Hintergrund, ja der ist dominanter als der Inhalt. Warme Farben treten da nach vorne, sind einfach ins Design gesetzt. Es geht einmal, um Aufmerksamkeit zu erregen, aber das ist keine Dauerlösung.
Und als letztes Beispiel noch das Mainblog. Da bin ich mit beteiligt, also ich übe auch Selbstkritik. Diese großen runden Ecken, das ist längst schon wieder Passé. Ja, die Seite kommt ein bisschen naiver daher, als es dem Thema vielleicht gut tut. Und wie gesagt, alle diese Seiten sind nicht wirklich unter jeder Kritik, ja, aber gemeinsam haben sie, sie sind Low-Budget-Seiten. Als Symbolbild habe ich da ein Paar Frankfurter. Das ist nicht abwertend gemeint. Es steht für kleines Budget und großes Engagement. [Lachen]
Die Seiten sind einfach, informativ, der Fokus liegt auf dem Inhalt und wir müssen uns aber fragen, verstärken diese Seiten das Image mangelnder Business-Tauglichkeit? Also alle, die sich im Feld Barrierefreiheit engagieren, müssen sich der Verantwortung bewusst sein. Wenn sie das Thema nicht professionell verpacken, dann bleibt die Bewegung klein, dann schaden sie sich selbst. Es gibt natürlich auch hier Professionalisierung. Eine gute Seite finde ich die Webseite von A-Tag. Die hat z.B. ein typografisches Konzept. Die weiß, dass Verdana bei der gleichen Schriftgröße wie Georgia viel dominanter wirkt. Ja, das ist mehr Konzept als wir nehmen große Verdana, weil die ist gut lesbar.
Nächstes Problem: Barrierefreiheit wird mit Behördenseiten und mit Pflicht assoziiert. Öffentliche Seiten haben oft ein konservatives Design und mäßigen Gestaltungsfreiraum. Wie wir gehört haben, nur 4% aller öffentlichen Seiten sind barrierefrei. Also die Accessibility hat da einen „schwarzen Peter“, den sie nicht nehmen müsste. Aber es gilt auch hier, die Accessibility-Vorreiter sind nicht unbedingt die Design-Vorreiter. Ich möchte jetzt zwei unserer renommiertesten Beispiele zeigen. Das erste ist wien.at. Bei einer Auflösung von 1280 am Laptop, da wirkt sie schon sehr schmal, muss man sich fragen, ob das noch zeitgemäß ist. Ja, die Prognosen sagen, dass nächstes Jahr über 40% aller Bildschirme größer sind als 1024 Pixel. Außerdem ist sie sehr voll, sehr gedrängt, sehr viele Links, wirkt ein bisschen Web 1.0, ja ein bisschen sehr traditionell. Aber trotzdem, es ist ein Vorzeigebeispiel, es ist eine gute Webseite. Ja, das will ich nicht schmälern.
Das nächste Beispiel: help.gv.at, „Biene“-Gewinner letztes Jahr, vor zwei Jahren. Wenn ich die Seite anschaue, so als 45-jährige, fühle ich mich ein bisschen überfordert, so viele Links auf einer Seite, so wenig Weißraum, so vollgestopft. Ich habe eine Eye-Tracking-Simulation gemacht davon, kann man im Internet machen. Das zeigt die visuelle Wahrnehmung in den ersten fünf Sekunden. Und man sieht, dass der Blick da sehr herumspringt und sich nirgendwo richtig festhalten kann, jedenfalls nicht dort, wo die Information ist.
Öffentliche Webseiten: als Symbolbild das Wiener-Schnitzel, die sind seriös, textlastig, vollgefüllt, der Inhalt hängt über den Teller. [Lachen] Sie sind nicht schlecht, sie sind nicht außergewöhnlich, natürlich mit Anspruch gemacht, ja in der Panier, aber immer das Gleiche, Mehl, Eier und Brösel, eher ein statisches, klassisches Design. Die Design-Herausforderung bei großen Seiten ist der Umgang mit viel Information. Eine kleine Webseite barrierefrei zu machen ist nicht so schwierig.
Ich zeig hier die Seite vom Finanzministerium. Die kommt sehr schick daher, ja, sehr schön gemacht, aber das ist ein eher herkömmlicher Umgang mit der Informationsflut. Man sieht da ein aufgeklapptes Drop-Down-Menü, mehrere Stufen. Das ist nicht nur für Menschen mit Behinderungen schwer zu bedienen.
Besser finde ich da die Seite vom Bundeskanzleramt. Da hat man mehr Übersicht und der Blick wird geleitet, von Gusenbauer zum Amt, zu den News. [Lachen] Die Seite ist viel weniger imposant natürlich. Sie ist übersichtlicher, nicht überfordernd, aber auch nicht so grandios wie das Finanzministerium. Das ist für mich ein Beispiel, wo man Barrierefreiheit sieht, im positiven Sinn.
Interessant finde ich dann auch noch den Web 2.0 Ansatz von den Grünen. Die Seite hat mich auf den ersten Blick auch ein bisschen erschlagen. Ja, da kann man sehr viel machen. Da kann man sich die News selber zusammenstellen, man kann die einzelnen Widgets herum schieben. Man kann die grünen Menschen da aufpoppen lassen und [Lachen], hatten am Anfang Probleme mit der technischen Umsetzung. Sie arbeiten dran, ich weiß jetzt nicht, wie der letzte Stand ist. So eine Seite macht neugierig, ist interessant, ist fortschrittsorientiert, kann barrierefrei sein.
Drittes Problem: Irgendwann komm’ ich auch zu den WCAG. Behinderung ist nicht ästhetisch und cool. Sie ist nicht sexy, das ist einfach eine Tatsache. Und DesignerInnen haben einen ästhetischen Zugang zur Welt und Angst vor der Einschränkung der Gestaltungsfreiheit und ProgrammiererInnen wollen komplexe Funktionalitäten. Die wollen sich nicht intensiv mit Behinderung auseinander setzen, mit speziellen Bedürfnissen. Die wollen Gourmet-Teller bauen. Das Verständnis bleibt an der Oberfläche.
Richtlinien, die WCAG, die A-Tag, die, die ich nicht aussprechen kann, User Agent Accessibility Guidelines, die werden nicht gelesen, das ist schwere, kreativitätshemmende Kost und DesignerInnen orientieren sich eher an Vorbildern würde ich sagen. Und was Sie da so sehen, verführt Sie vielleicht zu einem komischen Bild. DesignerInnen glauben vielleicht, barrierefreie Seiten müssen ein bisschen streng und konservativ aussehen. Das ist die Seite von der veterinärmedizinischen Universität. Ich kenn’ die Designerin, die sie gemacht hat, und von der Designerin habe ich auch schon viel modernere, coolere Layouts gesehen, aber bei dem Anspruch eine barrierefreie Seite zu machen haben sich die Kundin und die Designerin für ein eher konservatives Layout entschieden. Die Seite ist wieder nicht schlecht, mit sehr hohem Anspruch, ja, und Barrierefreiheit und Usability, aber nicht wirklich fortschrittlich.
Und noch ein Problem, ein Seitenproblem, TopdesignerInnen kommen oft aus dem Print-Bereich. Und sie machen daher Seiten wie im Print. Die Seite, wombads.at, Youth-Hostel-Kette, die ist auch nicht schlecht, ich habe das HTML gemacht, das ist ganz brav standardkonform, ist ein bisserl skalierbar die Seite, und trotzdem ist es eher ein Print-Design. Wenn man die jetzt mit einem zoomfähigen Browser zoomt, ist das ok, aber trotzdem die Seite ist nicht flexibel genug für jede Art von Inhalt. Wenn man sich das jetzt mit einem langen Scroll-Text vorstellt, schaut’s schon gar nicht mehr so harmonisch aus, wie so. Gut, das Webdesign nimmt sich ein bisschen zurück. Ja es ist offen, flexibel für jede Art von Inhalt.
So, jetzt geht’s ans Eingemacht, zur Sache. Was geben die WCAG 2 in Punkto Design vor? Jetzt habe ich zwei vollgestopfte Folien. Ich mache das jetzt nicht so genau. Wenn Sie wirklich barrierefrei arbeiten wollen, müssen Sie die sowieso lesen die Guidelines. Ich gebe einen kleinen Überblick, ja, Punkte, die mir wichtig scheinen. Beim ersten Prinzip Wahrnehmbarkeit ist es der Strukturpräsentationsbezug, die Farbunabhängigkeit von Information, sind beides A-Kriterien, dann gute Kontraste, AA und verschärft AAA, Textvergrößerung, AA, Text als Text und nicht als Grafik, AA, und ganz exakte Vorgaben für Textblöcke, wie die gestaltet sein müssen, gibt’s erst bei AAA. Dann noch sechs Punkte bei Bedienbarkeit. Es geht um bewegten Inhalt, wie geht man damit um. Es geht um verständliche Links, beides A-Kriterien. Dann um die Navigationsstruktur, mehrfache Navigationsmöglichkeit, konsistente Navigation, um Überschriften und Labels, um Standort und Orientierung und ganz wichtig, um Tastaturbedienbarkeit. Das sind alles AA-Kriterien. Tastaturbedienbarkeit zum Teil auch A.
Ich zeige jetzt Webseiten, die mir gefallen ja, die ich gut finde und die einzelne Punkte sehr gut erfüllen, ja?
Frage Mag. Jakob Putz: Zur Tastaturbedienbarkeit eine Verständnisfrage. Von was geht man da eigentlich von der Bedienbarkeit aus? Ich habe das für den vorigen Vortrag auch schon angeregt, weil ich verwende nur eine Hand, und tastaturbedienbar ist, wenn ich, mein Lieblingsbeispiel ALT+SHIFT+N ist, eine stinknormale Tastatur mit einer hand breche ich mir halt die Hand. Also gibt es da auch Empfehlungen und Kriterien, weil Tastaturbedienbarkeit, ja?
Antwort: Also i gehe jetzt nur davon aus, was ich als Webdesignerin beeinflussen kann, ja, und wenn’s um die Optik geht, dann geht’s einmal um dass die Skiplinks sichtbar sind, dass der Fokus sichtbar ist. Und in die Technik, wenn man jetzt irgendwelche Kombinationstasten drücken kann, weiß ich nicht.
O.k., ich gehe jetzt die einzelnen Punkte durch, und zeige meine 70 Screenshots. [Lachen] Aber so spät ist es noch gar nicht, geht schon. [Lachen]
Also erstens die semantische Struktur entspricht der Präsentation. Semantische Struktur, das ist was Programmiertechnisches, also die Navigation ist z.B. eine Liste, Überschriften sind auch Überschriften im Quellcode, Absätze sind Absätze usw. Aber es setzt voraus, dass es auch eine optische Struktur gibt.
Und die optische Struktur, das ist eher eine Frage von Benutzerfreundlichkeit und von gutem Design. Da gibt es keine strikten Vorgaben in Punkto Accessibility. Das sind irgendwelche Zusatzempfehlungen, aber keine Richtlinien.
Ich zeige die Seite vom deutschen Bundesrat. Das ist auch ein eher klassisches Design, aber durchgestylt. Das finde ich sehr schick. Und was ich hier gut finde ist die Hierarchienbildung. Man weiß, wo man zuerst hinschauen soll. Der Blick wird geleitet, und es gibt genug Weißraum zwischen den einzelnen Elementen. Noch ein Screenshot von der gleichen Seite. Die hat ein klares Raster und sie hält sich an Konventionen. Ja, News-Teaser schaut aus, wie ein News-Teaser halt ausschaut. Die Suche schaut aus wie sie halt ausschaut üblicherweise. Da ist eigentlich keine Konvention, dass die Suche ganz unten ist, die sollte eigentlich ganz oben rechts sein, aber ja, klick ich jetzt drüber.
Das nächste Beispiel ist ein bisschen unkonventioneller, Kibus, französische Seite, ein Autobusunternehmen, verwendet eine Kinderbuchmetapher. Ja, es ist kinderleicht da herumzukommen mit dem Autobussystem. Was mir hier auch gefällt ist die klare Gruppierung von Elementen, die Seite ist nicht überladen. Hat in Frankreich einen Preis gekriegt, Accessible Web Label, Silber 2008.
Das ist wieder eine österreichische Seite, femonco.net. Das ist natürlich eine sehr kleine Seite, aber was hier gut ist, ist die reduzierte Information, die großen Icons, die Web 2.0 Vereinfachung. Natürlich kann man das nicht vergleichen mit großen öffentlichen Seiten, aber man kann im Hinterkopf ja behalten, dass es wichtig ist, so wenig Information wie möglich, zielgerichtete Information zu geben, nicht so viel wie möglich Information auf eine Webseite zu packen.
Strukturierung betrifft alle Content-Elemente, also es hört nicht bei der Startseite auf. Da habe a Beispiel für a gute, klar strukturierte Datentabelle, 100%ig barrierefrei programmiert, einfach für alle. Die grafische Gestaltung könnte noch ein bisschen mehr klotzen, ja das ist ein bisschen zart.
Und noch als Beispiel für gute Strukturierung, Formulare müssen auch gezoomt gut bedienbar sein. Da ist z.B. wichtig, dass das Label direkt neben dem Input-Feld steht, ja damit man auch bei 400% noch weiß, welches Input-Feld zu welchem Label gehört und dass aktive Felder klar markiert sind. Es kommt, das Beispiel kommt von der A-Tag-Seite.
Nächster Punkt, geht’s noch überhaupt? Ja? [Lachen] Farbunterschiede sind nicht allein bedeutungstragend. Das heißt z.B., dass Links im Content und Formularfehler nicht nur farblich markiert sind. Man muss sich überlegen, ob bei Farbfehlsichtigkeit in Graustufen noch alles klar lesbar und verständlich ist. Da habe ich ein Beispiel von Screen-Reader lesbaren Diagrammen. Ganz gut gemacht, es sind keine Grafiken, es ist JavaScript generiert aus barrierefreien Tabellen natürlich, von der Fillerment-Group, also wunderbar Screen-Reader tauglich. Aber sind die Diagramme auch optisch gut lesbar mit einem Blendfilter z.B., den man sich drüber legen kann über die Seite, einen blauen Filter z.B.? Oder bei Farbenblindheit? Oder, das können wir uns, wirklich alle vorstellen, im Schwarz-Weiß-Ausdruck.
Da habe ich noch ein Beispiel für Rot-Grün-Blindheit. Das ist a Flash-Applikation zu den Wahlergebnissen von Österreich heuer, und da sieht man, dass die Roten, Grünen und das BZÖ farblich ein bisschen verschwimmen.
Kommentar aus dem Publikum: …eine Regierung bilden sollten.
Antwort: genau
Flash-Applikation, die ist nicht barrierefrei, die ich da zeige, aber sie sollte es sein. Das wird vergessen, wenn man irgend welche Flashs auf die Seite stellt, dann sollten sie auch den Kriterien genügen.
Eine deutsche Seite zeige ich noch, Düssel-Energie als Beispiel für gute Fehlermeldungen. Da steht nicht nur rot da, da war jetzt ein Fehler, sondern es ist mit dem Icon versehen, fettgedruckt, umrahmt, ja, mehrfach markiert.
Jetzt bin ich beim nächsten Punkt, den ich sehr heikel finde. Das ist ein Kontrastverhältnis von 5:1. Das müssen Sie auch nachlesen, was das genau bedeutet. Im Prinzip betrifft es fast jegliche Art von Text, die man auf Webseiten findet, weil die nicht mit 100% anfangen, sondern oft mit 62,5%. Und die Regel lautet, dass alles unter 150% oder 120% Bold, 18 Punkt, 14 Punkt Schriftgröße, dies einem Kontrastverhältnis von 5:1 entsprechen muss. Und das ist eine sehr anspruchsvolle Forderung, kann man messen. Ja, man misst das Verhältnis von Farbsättigung und Kontrast. Ich finde diesen A-Logarithmus ein bisschen komisch, hab z.B. die Zürcher Kantonalbank getestet, die ja eigentlich sehr zarte Farben verwendet, so blau-grau-Töne. Und hier ist der Kontrast ausreichend, bis auf das Menü oben, das weiß auf hellblau, da reicht’s nicht ganz. Sonst ist es ok.
Eine andere Seite, die viel kontrastreicher daherkommt, das deutsche Bundesministerium für Gesundheit. Das verwendet ein Farbleitsystem mit blau, rot, orange, grün und lila, und bei orange, grün und lila reichen die Kontraste nicht aus, obwohl es für mich jetzt so eigentlich ja kontrastreich ausschaut. Beim Menü reichen sie sicher nicht, da ist die Schrift zu klein. Ausreichen würden sie bei den Headlines da oben beim Pflegegipfel z.B., unter dem Bild, die Headline, da ist es groß genug. Da ist dann nicht ein Kontrastverhältnis von 5:1 vorgeschrieben, sondern nur noch von 3:1.
Als Lösung bietet das WCAG an, bieten die WCAG an, dass man extra Style Sheet macht, a extra Kontrastversion, wo die Kontraste dann ausreichen. Aus meiner Sicht ist das keine Lösung.
Frage aus dem Publikum:_ [nicht verständlich]
Antwort Frau Putzhuber: Ja, aus meiner Sicht ist das auch eine Sache von Bildschirmen und Browsern und Betriebssystemen. Ich habe bei meinem Bildschirm eine Taste, da kann ich umschalten auf Text z.B. und die ganze Seite wird ein bisschen weniger stark blendend. Ich würde die Zukunft in der Richtung sehen, dass man sich die Kontraste selber einstellt und nicht Webseiten strikt vorschreibt, was sie erfüllen müssen, weil jeder Nutzer sich das selber umstellen kann, aber nicht gut, ja.
Frage aus dem Publikum: [nicht verständlich]
Antwort Frau Putzhuber: Ich weiß nicht. Manche Seiten werden es erfüllen, manche Seiten werden es nicht komplett erfüllen. Ich würde es nicht so eng sehen, Shadi.
Anmerkung aus dem Publikum: [nicht verständlich] Das ist dein Problem.
Antwort Frau Putzhuber: Ist mein Problem, jaja, mein Problem. [Lachen] Ich werde einfach auf Webstandards umsandeln ähm umsatteln, absandeln umsandeln.
Nächster Punkt, genauso a bisserl a Problempunkt, Text ist auf 200% vergrößerbar. Diese 200% die kommen daher, dass ältere Zoom-Programme erst bei 200% angefangen haben zum Zoomen. Moderne Browser haben eine Zoom-Funktion, das ist die Zukunft. Trotzdem muss auch nur der Text vergrößerbar sein. Im Internet Explorer sind das die zwei Größensprünge, die er halt machen kann, und viel mehr halte ich auch nicht für realistisch. Bei herkömmlichen Webseiten jedenfalls nicht.
Wichtig ist ein skalierbares Layout, also zumindestens in die Höhe, und wichtig ist auch ein Spielraum für die Zoom-Funktion von modernen Browsern. Wenn ich sofort quer scrollen muss, wenn ich schon ein bisschen gezoomt habe, dann ist das nicht gut. Es gibt drei verschiedene Methoden, wie man Layouts gestalten kann.
Das erste ist ein fixes Layout. Da habe ich eine Seite als Beispiel, wo ich auch mitgearbeitet habe, ein Wissenschaftsprojekt, Jak-Stat, und da finde ich die Menügestaltung ganz interessant. Da gibt es ein horizontales Menü, dann ein Submenü, das im aktiven Zustand vertikal aufgeklappt ist, unten bündig mit einem Hintergrundbild und daneben gibt es noch ein Metamenü, das auch bündig ist mit dem Bild. Und was passiert, wenn man die Schrift jetzt vergrößert? Das horizontale Menü, das kann umbrechen, das Submenü verlängert sich über das Bild hinaus und das Metamenü links kann nach oben wachsen. Aber Sie sehen, das geht nur bis zu einem gewissen Grad. Wenn man jetzt längere Menüteile hat, die werden abgeschnitten oder legen sich drüber über den Rest. Das ist beim Zoomen natürlich nicht der Fall.
Die nächste Variante ist das Zoom-Layout oder elastisches Layout. Die Breiten werden in em angegeben. Das nimmt eigentlich die Zoom-Funktion von Browsern von modernen Browsern vorweg. Da ist es gar nicht mehr möglich, nur den Text allein zu vergrößern. Ich habe noch einmal das Beispiel vom Bundeskanzleramt und zwar jetzt bei einer Bildschirmauflösung von 1680. Da schaut’s ein bisschen dünn aus, ja. Aber wenn man’s auf 200% vergrößert, dann braucht man diese 1680 Pixel Bildschirmgröße, damit man nicht quer scrollen muss. Es ist nicht mehr Vorschrift in den WCAG 2.0, dass Layouts sich zusammenschieben lassen müssen auf 800 Pixel. Ja, es geht nur drum, dass einzelne Textblöcke ohne Querscrollen lesbar sind bei irgend welchen normalen Auflösungen.
Anmerkung aus dem Publikum: [nicht verständlich]
Antwort Frau Putzhuber:_ Ja, genau. Also dieses Layout könnte auch 960 Pixel breit sein, und hätte dann immer noch ein bisschen Spielraum bei, auf einem Laptop z.B. ein bisschen zu zoomen.
Die letzte Variante ist liquides, fluides oder flexibles Layout. Da sind die Breitenangaben in Prozent und das Layout passt sich immer dem Bildschirm an. Muss man jetzt auch wieder überlegen, wie weit geht man. Wichtig ist a Maximalbreite, damit einzelne Textspalten nicht zu breit werden.
Alle diese Varianten haben ihre Berechtigung. Also ich würde jetzt nicht sagen, eine ist die einzig wahre. Da gibt es auch ein bissl religiöse Diskussionen, dass das liquide, fluide, flexible Layout das allerbeste ist, aber [Lachen] ja, ich finde auch das fixe Layout hat seine Berechtigung.
Nächster Punkt: Text ist Text möglichst und nicht Grafik. Das heißt man muss webtaugliche Schriften verwenden, das sind nicht sehr viele. Und webtaugliche Schriftgrößen, und man soll wichtige Information nicht als Hintergrundbild ins CSS stecken. Ich zeige eine Seite, die auch ein Label bekommen hat, eine belgische Seite mit dem AnyServer Label, Westvlaams Intercommunale, die mir sehr gut gefällt. Und die haben da eine Navigation, wo sie halt eine Schrift verwenden, die nicht webtauglich ist und deshalb sind das alles Grafiken, und die Grafiken sind im CSS.
Das ist Screen-Reader-tauglich programmiert, weil die Texte von den von den Menübestandteilen die sind außerhalb vom Bildschirm positioniert, aber wenn man jetzt die Farben wegschaltet, die Bilder wegschaltet, dann verschwinden die Hintergrundbilder und damit die ganze Navigation. Trotzdem hat diese Seite ein Label bekommen.
Ich würde ja als Webdesignerin Leuten verbieten, dass sie ihr Betriebssystem umstellen und Bilder wegschalten und Farben wegschalten, aber [Lachen] aber man kann es ihnen nicht verbieten. Es passiert einfach, man muss damit rechnen. Es gibt inzwischen interessante Ansätze von Image-Replacement-Techniken. Es gibt interessante Ansätze von Font-Einbindung, aber das ist alles noch ein bisschen im Werden.
Ein Beispiel für ein grafisches Menü, wo die Grafiken im HTML sind, ist die Forschung-macht-Schule-Seite. Wenn man das macht, muss man halt drauf achten, dass die Grafiken relativ groß sind und idealerweise vermeidet man es. Und man ist streng genommen nicht AA-konform, oder Shadi, mit einer grafischen Navigation. [Antwort ist nicht verständlich] Ja ich weiß es auch nicht, ich würde annehmen nicht. [Kommentar von Shadi Abou-Zahra wieder nicht verständlich] Ja, es ist so, wenn möglich, also man kann argumentieren, wenn man jetzt eine bestimmte Schrift braucht, dann ist das einfach nicht möglich, wenn das die Corporate Identity vorschreibt. Ja, idealer ist Text, alles, was Text sein kann, soll Text sein. AAA, wie gesagt, da gibt’s ganz genaue Vorschriften, wie Textblöcke gestaltet sein sollen. Das möchte ich jetzt überspringen, das lesen Sie nach.
Wichtig ist jedenfalls, Textblöcke müssen ohne Scrollen lesbar sein, ohne quer scrollen. Sie sollen nicht mehr als 80 Buchstaben haben. Und dann gibt es noch genaue Vorschriften, wie der Zeilenabstand sein soll, wie der Abstand zwischen Absätzen sein soll, kein justified. Da ist in einer Richtlinie ist da sehr, sehr viel drin.
Noch was zu bewegtem Inhalt: Da zeige ich jetzt die Seite vom Hauptbahnhof Wien. Die ist auch ein Implementierungsbeispiel für die WCAG 2.0. Also an der Seite kann man sich generell orientieren, wie man es machen kann, und ich zeige sie, weil sie eine Animation auf der Startseite haben mit einem Stop-Button. Das muss man Design-mäßig vorsehen.
Und dann habe ich auch noch ein Screenshot von den Videos mit Captions, die’s auf der Seite gibt. Das ist jetzt keine besondere Design-Herausforderung, aber nur zur Erinnerung. Multimedia ist die Zukunft, Videos brauchen Untertitel. Die Schrift die Seite hat eine winzig kleine Schrift. Das gefällt mir ja nicht so gut. Aber man kann sie ziemlich vergrößern, ohne dass das Layout zerfällt. Dann als nächste Frage noch, Links, die müssen im unmittelbaren Kontext verständlich sein. Da gibt es auch ganz exakte, genaue Vorgaben, wie das sein muss im gleichen Absatz, in der gleichen Tabelle muss man nichts mehr zusätzlich programmiertechnisch vorsehen, keinen zusätzlichen Title kein Title-Attribut. Am besten ist, wenn im Link steht, was, wo er hinführt.
Als Beispiel habe ich da die Seite von einem Personalberater. Das sind kleine Datentabellen und da wäre es jetzt erlaubt, dass da unten drin ein „Bewerben Sie sich“-Button stünde bei jeder einzelnen Datentabelle wieder, ohne dass man zusätzlich was tun müsste, weil es im unmittelbaren Kontext zuordenbar ist. Und wenn mehr Links jetzt im gleichen Absatz sind, dann sind sie, muss man nichts mehr tun. Wenn sie im nächsten Absatz stehen, muss man ein Title-Attribut machen.
Neunter Punkt: Klare Navigation, konsistente Navigation, mehrfache Navigation. Seiten müssen auch eine Sitemap haben, eine Suche haben, wenn sie größer sind. Und die Seite ist auch ein Biene-Beispiel, theologisches Seminar Elstal, die finde ich ganz übersichtlich, ja, also in der Strukturierung der Information.
Als Beispiel für Navigation noch ein Drop-Down-Menü von Hornbacher Energie-Innovation. Das ist o.k., barrierefrei gemacht. Es gibt zusätzlich noch ein Suchmenü und das Drop-Down-Menü ist so klein, dass man es eigentlich nicht braucht. Wenn es so groß ist, dass man es braucht, sollte man es vermeiden. [Lachen] Ja also wenn es über die ganze Seite ragt, dann ist es mit Zoom-Software z.B. irrsinnig schwer bedienbar. Oder man muss dann vorsehen, was macht man mit den Screen-Reader-Usern oder Tastatur-Usern. Lässt man die jetzt durchklicken oder macht man nur die Hauptmenüpunkte verfügbar? Es ist ein nicht so einfach.
Beispiel Clean-IT für versteckte Hilfe, progressive disclosure. Man muss nicht die ganze Information immer sofort liefern. Da gibt es z.B. kleine Hilfe-Buttons bei der Schriftvergrößerung oder bei Erklärung von Flickr! z.B. mit JavaScript gemacht und ohne JavaScript steht halt der Text da. Also es spricht nichts gegen JavaScript-Einsatz, aber JavaScript muss Tastatur bedienbar sein, und die Inhalte müssen auch ohne JavaScript verfügbar sein.
Letzte Folie: Tastaturbedienbarkeit.(pullquote) Noch einmal als gutes Beispiel die A-Tag-Seite. Die hat große Klickflächen, also beim Menü ist nicht nur der Text klickbar, sondern die ganze Fläche von der Navigation. Es gibt ein Skiplink am Anfang der Seite. Es gibt einen Skiplink, nicht fünf. Und es gibt einen sichtbaren Tastaturfokus. Man weiß, wo man ist.
Ja, jetzt bin ich fertig. Gutes barrierefreies Design ist nutzerinnenzentriertes Design. 100%ig barrierefrei gibt’s nicht, aber wenn man die Barrierefreiheit überhaupt nicht sieht, dann ist sie nur für Blinde gut. Also man sollte es barrierefreien Seiten ansehen, dass sie barrierefrei sind, aber die Barrierefreiheit soll man nicht auf einem Tablett vor sich hertragen, sondern benutzerfreundlich. Danke! [Applaus]
Maria Putzhuber