Matthias Kurz: Wie barrierefrei ist CSS??

Heidiehoh,

ich habe grade mal ein bischen gegrübelt. Über Screenreader, Semantik und CSS.

Man sagt ja immer, dass CSS ganz tolle barrierefrei sei.

Ich persönlich hasse JavaScript abgrundtief. Bzw. die Leute, die es skrupellos missbrauchen, z.B. um andere gnadenlos und endlos mit Animationen zu *F**EN*.

Da gibt es ja nun Die ohne brauchbare Klüsen (in deren Gruppe ich immer mehr drifte, weil ohne Brille kann ich rein gar nichts mehr lesen) und die anderen, die auf optische Effekte stehen.

In wie weit ist CSS da eigentlich ein Ausweg? Es gibt ja phantastische Tricks, die z.B. unter http://www.cssplay.co.uk/ zu besichtigen sind.

In wie weit ist eigentlich eine über CSS realisierte Navigation, z.B. mit Flyout-Menüs, barrierefrei?

(mk)

  1. Hi!

    Css ist erstmal auch nur so barrierefrei, wie man es macht. Tendenziell iest es natuerlich besser als Javascipt, weil die erste Barriere: Javascript, nicht existiert. Der Browser liefert also erstmal alle vorhandenen Informationen aus.

    Auch im zweiten Schritt ist CSS besser geeignet, als Javascript Spielereien. Ganz einfach:

    Was passiert mit einer Webseite die auf Javascipt aufbaut und du schaltest es aus?

    Was passiert mit einer Seite die aus CSS aufbaut und du schaltest es aus?

    Richtig. Eine Seite ohne CSS sollte pures HTML sein und deshal auch z.B. alle Menues enthalten. Irgendwelche Ein- und Ausblendungen mit CSS aendern nichts daran, dass die Informationen trotzdem vorhanden sind. Ohen CSS sind sie halt immer da und werden nicht huebch bunt sichtbar und unsichtbar gemacht.

    Das ist wohl der Primaere Vorteil. Natuerlich hindert der Einsatz von CSS niemanden daran, seine Seiten semantisch dermassen schlecht und verschatlt aufzubauen, dass ohne CSS nur noch mist lesbar ist.

    Ein extrem Beispiel waere: Du hast jedes Wort Alphabetisch sortiert im HTML stehen und sichtest mit CSS die kleinen Container so aus, dass der Text Sinn ergibt.

    Dass es total unfaehige Autoren gibt, ist aber nicht die Schuld von CSS.

    1. Sziasztok!

      Dass es total unfaehige Autoren gibt, ist aber nicht die Schuld von CSS.

      Aber auch nicht die Schuld von Javascript.
      Eine ohne JS gut nutzbare Seite kann durchaus noch mit etwas vernünftigem JS angereichert werden. Deswegen schließe ich mich auch dem totalen Haß auf JS nicht an, obwohl es in meinem Browser deaktiviert* ist. ;-)
      Die meisten Seiten benutzen es halt doch nur für Werbeeinblendungen oder nervtötendes Gewackel. Am meisten stören mich die Werbe-Divs, die über den Text fliegen und ihn komplett verdecken. JS gelegentlich auf Seiten per Klick aktivieren zu müssen, die etwas Vernünftiges damit machen, kostet weniger Zeit, als unentwegt die doofen Flatter-Divs zu fangen. Hoffentlich sind die bald out...

      Viele Grüße vom Længlich

      * nicht ganz deaktiviert, aber unter strenger Kontrolle durch NoScript

      1. Right!

        Ich hab es auch oft aus. Ist wirklich gemuetlicheres surfen.

        1. Right!

          Ich hab es auch oft aus. Ist wirklich gemuetlicheres surfen.

          Definitiv meine Einstellung. Ich wäre ohne NoScript längst zum Mörder geworden.

          Aber es ist schon so, dass CSS-Effekte im Sinne von Barrierefreiheit keinerlei Vorteile bieten, oder?

          Gibt es irgendwelche Screenreader oder so, die mit CSS-Effekten besser als mit JavaScript funktionieren? Oder hätte man mit JavaScript eher _bessere_ Möglichkeiten bzgl. der Barrierefreiheit - wenn diese Monstren nicht wären, die das missbrauchen?

          (mk)

          1. Nochmal kurz:

            Mit Javascript erstellter Inhalt (dynamische Menues, Dropdownboxen,...) ist definitiv nicht Barrierefrei. Der Inhalt ist im HTML nicht zugaenglich. Ein Menue, das mit CSS auf und zuklappt IST Barrierefrei. Der Code ist zugaenglich.

            AUs diesem Grund funktionieren screenreader gewoehnlcih besser mit CSS. Dort wird ihnen nichts vorenthalten. Mit ordentlicher Semantik wirst Du das komplette Menu samt Untermenue als solche auch zu sehen, hoeren,... bekommen.

            Fazit: Javascript und CSS sind nur so boese, wie der Autor der Seite sein Handwerk nicht versteht. Und genau das ist eben das Problem: Da wird wirres HTML mit CSS aufgehuebscht und mit Javascript versehen wo keines sein sollte. Das ist dann auhc nicht Barrierefrei.

            Wenn Du einem gehbehindertem Menschen zwar einen Rollstuhl gibst (CSS benutzt), aber leider keine Rampe an deine Treppe baust (HTML versaust), bist dur immer noch nicht behindertengerecht (Barrierefrei).

            Barrierefreiheit faengt in den Koepfen der Programmierer an.

            1. Hallo,

              Nochmal kurz:

              Mit Javascript erstellter Inhalt (dynamische Menues, Dropdownboxen,...) ist definitiv nicht Barrierefrei. Der Inhalt ist im HTML nicht zugaenglich. Ein Menue, das mit CSS auf und zuklappt IST Barrierefrei. Der Code ist zugaenglich.

              Nochmal kurz:

              Das ist ziemlicher Unsinn.

              Du machst hier eine Opposition von JavaScript und CSS auf, die mit den Techniken nichts notwendig zu tun hat. Ich kann Menüs, deren Inhalt im HTML zugänglich ist, mit JavaScript und CSS gleichermaßen bauen.

              Ein dynamisches Menü in JavaScript muss keine »Inhalte erstellen«, sondern kann vorhandenen Inhalten Interaktivität hinzufügen.

              Mathias

              1. Hi

                was Du sagst, ist mir klar. Ich sprach aber definitiv von Inhalten die mit Javascript erstellt werden - also z.b. aus Arrays gefuellte Dropdwonboxen, mit document.write erstellte Geschichten... Sowas benutzen wir hier z.B. fast Grundsaetzlich, weil es nicht gewollt ist, dauernd Transfer zu verursachen oder den Server in irgendeiner Weise unnoetig zu beanspruchen. Also liefert der Server einmal alle benoetigen Datenbankeintraege und die iegentliche Arbeit wird mit clientseitig gemacht. Angenommen es wird ein Formular erstellt in dem man Niederlassungen in Laendern aussuchen kann. Dan gibt es dafuer lustige Arrays und die Verknuepfung wird per Javascript gemacht - unbenutzbar ohne.

                Natuerlich kann ich ein HTML Dokument bauen, das ohne JS funktioniert und mit JS auch.

                Wahrend bei blosser Verwendung von CSS automatisch die Inhalte im Dokument vorhanden sind, auch wenn CSS dafuer sorgt, dass man sie nicht sieht.

                Nichts anderes habe ich geschrieben. Wie duerften beide dasselbe meinen.

                1. Hallo

                  Natuerlich kann ich ein HTML Dokument bauen, das ohne JS funktioniert und mit JS auch.

                  Wahrend bei blosser Verwendung von CSS automatisch die Inhalte im Dokument vorhanden sind, auch wenn CSS dafuer sorgt, dass man sie nicht sieht.

                  Nichts anderes habe ich geschrieben. Wie duerften beide dasselbe meinen.

                  Ich glaube, molily meint, dass man mit JavaScript nicht nur, um bei deinem Formularbeispiel zu bleiben, bei einer bestimmten Auswahl eines Elements ein oder mehrere andere Elemente des Formulars erzeugen kann, sondern, dann man diese grundsätzlich im HTML-Quelltext drinzustehen hat und sie beim Laden des Dokuments per JavaScript ausblendet.

                  Damit sind sie auch ohne JavaScript zugänglich (auch wenn evtl. erklärungsbedürftig) und mit aktivem JavaScript so benutzerfreundlich, wie man es halt auf die Reihe kriegt.

                  Tschö, Auge

                  --
                  Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                  (Victor Hugo)
                  Veranstaltungsdatenbank Vdb 0.2
                  1. Ja, ich weiss, was er meint.

                    Aber grad bei Forumularen wirds bei sowas ohne JS zimelich schwierig, wenn man alles in einem Formular loesen will/muss.

                    Ohne Javascript, bleibt einem eigentlich kaum was uebrig, als alle Staedte in ein Feld zu schreiben oder fur jedes Land ein Dropdownmenu mit staedten anzubieten. Beides etwas unuebersichtlich.

                    Molily geht halt davon aus, dass man gutes HTML mit allen Elementen hat und das dann mit JS 'veredelt'. Das ist aber nunmal nicht der Standard und wenn man es andersherum aufzieht ist JS eben absolut nicht Barrierefrei. Bei CSS kommt man kaum drumrum. Das ist eben der Unterschied: Schaltet man auf einer schlecht durchdachten Seite (eine die z.B. alle Inhalte nur per AJAX laedt) JS ab geht eben nichts mehr. Schaltet man CSS ab macht das normal nur wenig aus. Sie wird selten schlechter. Auch wenn dann vielleicht ersmtal ein ziemliches Chaos herrschen mag, ist aber alles da. Nicht mehr und nicht weniger habe ich geschrieben.

                    Ach was solls. Ich denke wir meinen eh alle das gleiche. Warum also drueber Diskutieren?

                    1. Hallo

                      Aber grad bei Forumularen wirds bei sowas ohne JS zimelich schwierig, wenn man alles in einem Formular loesen will/muss.

                      Ohne Javascript, bleibt einem eigentlich kaum was uebrig, als alle Staedte in ein Feld zu schreiben oder fur jedes Land ein Dropdownmenu mit staedten anzubieten. Beides etwas unuebersichtlich.

                      Die Liste mit den Städten habe ich sowieso, entweder als HTML-Dropdown oder als JavaScript-Array, aus dem ich den HTML-Dropdown generiere. Im ersten Fall muss ich, da auch bei konkreter Auswahl unnütze Elemente da sind, Erklärungen beifügen. Da komme ich nicht herum. Das ist halt auch eine Frage der Benutzbarkeit, die man auch so beantworten kann, dass man das Formular mehrstufig aufbaut, sobald JavaScript (und somit auch Ajax) nicht zur Verfügung steht.

                      Ach was solls. Ich denke wir meinen eh alle das gleiche. Warum also drueber Diskutieren?

                      Weil die Herangehensweise (Setze ich einfach JavaScript voraus und lass den kleinen Rest verrecken?) vermeidbar ist und man einen Plan haben sollte, _wie_ man dies vermeiden kann.

                      Tschö, Auge

                      --
                      Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
                      (Victor Hugo)
                      Veranstaltungsdatenbank Vdb 0.2
    2. Hallo,

      Auch im zweiten Schritt ist CSS besser geeignet, als Javascript Spielereien.

      Das halte ich so pauschal für Unsinn, CSS und JavaScript sind unterschiedliche Techniken zu anderen Zwecken und erlauben andere Lösungswege.

      Nehmen wir ein Aufklappmenü: In CSS kann ich eine einfache Logik einrichten, die ein Element bei :hover einblendet. JavaScript hat da ganz andere Möglichkeiten für Interaktivität. Jetzt kann ich sagen: Ob ich's mit CSS oder JavaScript löse, der Quelltext, auf den alles reduzierbar ist, kann grob derselbe sein, und »deshalb« ist es barrierefrei. Das mag vielleicht für den Extremfall »Blinder mit Screenreader« stimmen (die Problematik von riesigen verschachtelten Navigationslisten, display:none usw. mal außen vor). Aber ich würde doch behaupten, dass sich das Menü mit JavaScript für das Gros der Benutzer komfortabler umsetzen lässt, weil richtige Ereignisbehandlung möglich ist. (Es gibt natürlich ausgereifte CSS-Aufklappmenüs, die durchaus verschiedene Komfortfeatures haben, das will ich gar nicht leugnen.)

      Irgendwelche Ein- und Ausblendungen mit CSS aendern nichts daran, dass die Informationen trotzdem vorhanden sind.

      Irgendwelche Ein- und Ausblendungen mit JavaScript ändern auch nichts daran, dass die Informationen trotzdem vorhanden sind.
      Diese Erkenntnisse bringen uns nicht viel weiter in der Frage.

      Mathias

  2. Hallo,

    In wie weit ist eigentlich eine über CSS realisierte Navigation, z.B. mit Flyout-Menüs, barrierefrei?

    CSS dient zur optischen Gestaltung, somit erübrigt sich (eigentlich) schon ganz alleine die Frage, inwieweit CSS für Leute, die schwerwiegende Probleme mit der Optik haben, von belang ist.
    Der Punkt bei der Barrierefreiheit ist in erster Linie nicht, was mittels CSS angestellt wird, sondern wie der HTML-Code aussieht, denn nur im HTML-Code steckt die Information, die insbesondere Hilfen wie Screenreader sinnvoll ver- und aufwerten können.

    Gegen Dein Beispiel CSS-animierte Menüs ist daher (erstmal) nichts einzuwenden, wohl aber, wenn dieses Menü auf HTML-Seite statt als <ol>-Liste ausschließlich aus <div>s und <span>s besteht. Eine <div>-Wüste ist so gesehen nicht besser als ein <table>-Monstrum, CSS hin oder her.

    Gruß, Hannes.

    1. Hallo,

      Der Punkt bei der Barrierefreiheit ist in erster Linie nicht, was mittels CSS angestellt wird, sondern wie der HTML-Code aussieht, denn nur im HTML-Code steckt die Information, die insbesondere Hilfen wie Screenreader sinnvoll ver- und aufwerten können.

      Du definierst »Barrierefreiheit« hier gerade als »Webdesign für Blinde«.
      Das ist ein Teil von Barrierefreiheit, aber nur ein kleiner. Natürlich ist es sehr stark relevant, was mittels CSS angestellt wird. CSS strukturiert das Dokument, nutzt Farben, Typographie usw.

      Gegen Dein Beispiel CSS-animierte Menüs ist daher (erstmal) nichts einzuwenden, wohl aber, wenn dieses Menü auf HTML-Seite statt als <ol>-Liste ausschließlich aus <div>s und <span>s besteht. Eine <div>-Wüste ist so gesehen nicht besser als ein <table>-Monstrum, CSS hin oder her.

      Natürlich sollte eine Liste als solche ausgezeichnet werden, aber das ist nicht der wichtigste Punkt, der wäre für mich eher die Sinnhaftigkeit und Verständlichkeit der Menüstruktur selbst.

      Mathias

      1. @@molily:

        CSS strukturiert das Dokument

        ?? Die Formulierung ist bedenklich. Das Dokument IST bereits strukturiert – durch die Auszeichnungssprache, in der es verfasst wurde (HTML, irgendwelches XML, was auch immer).

        CSS kann helfen, die AUSGABE (Anzeige) übersichtlicher zu strukturieren. Bspw. eine optische Giederung in Spalten; Leerraum zwischen Abschnitten („Luft trägt.“) ...

        Live long and prosper,
        Gunnar

        --
        „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
        1. Hallo,

          CSS strukturiert das Dokument

          ?? Die Formulierung ist bedenklich.

          Wenn man sie aus dem Kontext reißt, ja.

          Das Dokument IST bereits strukturiert

          Und CSS obliegt die Aufgabe, die Struktur des Dokuments überhaupt erst sichtbar/wahrnehmbar zu machen.

          Genau deshalb trete ich so vehement der These entgegen, dass CSS für Barrierefreiheit nebensächlich sei und die Auszeichnung die Hauptsache sei. Im HTML kann ich sehr viel Struktur unterbringen, aber ohne die Hilfe von CSS werden nur die gröbsten davon kommuniziert (i.d.R. sind das größtenteils Überschriften, Absätze und Listen). Eine Gliederung in Spalten, um das Beispiel von dir aufzugreifen, geht weit darüber hinaus. Die basiert eben auf divs und Klassen, die ohne CSS und damit einem Screenreader-Nutzer gar nicht ersichtlich werden.

          Mathias

      2. Der Punkt bei der Barrierefreiheit ist in erster Linie nicht, was mittels CSS angestellt wird, sondern wie der HTML-Code aussieht, denn nur im HTML-Code steckt die Information, die insbesondere Hilfen wie Screenreader sinnvoll ver- und aufwerten können.

        Du definierst »Barrierefreiheit« hier gerade als »Webdesign für Blinde«.
        Das ist ein Teil von Barrierefreiheit, aber nur ein kleiner.

        Das ist der wichtigste Teil der Barrierefreiheit. Keine andere körperliche Einschränkung wirkt sich so stark auf das Lesen aus wie die der Augen.

        Natürlich ist es sehr stark relevant, was mittels CSS angestellt wird. CSS strukturiert das Dokument, nutzt Farben, Typographie usw.

        Die Struktur entsteht in erster Linie durch den HTML-Code, da lässt sich nicht viel falsch machen, wenn man sich an eine sinnvolle Auszeichnung hält. Mit CSS kann man hingegen haufenweise verschlimmbessern, mit Farben den Farbfehlsichtigen ein Bein stellen und ich selbst habe in Sachen Typographie bei jeder dritten Webseite ein Problem, weil die Schrift zu klein ist.

        Kurzum: Die breite Übersichtlichkeit / Verständlichkeit eines Textes hängt in erster Linie vom HTML-Code ab. CSS kann höchstens noch dazu beitragen, ist dafür aber nicht stark relevant und kann es im Gegenteil auch verschlimmern, ohne dabei Regeln zu verletzen, wie es zB bei der HTML'schen <div>-Wüste der Fall wäre.

        Natürlich sollte eine Liste als solche ausgezeichnet werden, aber das ist nicht der wichtigste Punkt, der wäre für mich eher die Sinnhaftigkeit und Verständlichkeit der Menüstruktur selbst.

        Das jemand, der im Vollbesitz der üblichen geistigen Kräfte ist, ein Menü versteht, fällt nicht unter Barrierefreiheit, sondern unter Benutzerfreundlichkeit. Ich mag Barrierefreiheit etwas sehr eingeschränkt haben (wobei ich anmerken möchte, dass Du eventuell ein "eigentlich" und ein "erstmal" übersehen hast), Du legst sie etwas sehr weit aus.

        Gruß, Hannes.

        1. Hi,

          Das ist der wichtigste Teil der Barrierefreiheit. Keine andere körperliche Einschränkung wirkt sich so stark auf das Lesen aus wie die der Augen.

          Keine Arme bspw. wuerden nicht nur keine Kekse bedeuten, sondern auch erhebliche Schwierigkeiten beim Navigieren innerhalb einer Website.

          MfG ChrisB

        2. Hallo Hannes,

          Das ist der wichtigste Teil der Barrierefreiheit. Keine andere körperliche Einschränkung wirkt sich so stark auf das Lesen aus wie die der Augen.

          Das jemand, der im Vollbesitz der üblichen geistigen Kräfte ist, ein Menü versteht, fällt nicht unter Barrierefreiheit, sondern unter Benutzerfreundlichkeit.

          Barrierefreiheit bedeutet nicht nur, dass behinderte Menschen mit der Seite klarkommen, sondern auch das "normale" Menschen keine Probleme haben.

          Barrierefreiheit lässt sich fast synonym zu Benutzerfreundlichkeit verwenden. Wenn es keine Barrieren für den Benutzer gibt, ist die Seite auch Benutzerfreundlich. Barrierefreiheit bedeutet nur, dass man man davon ausgeht, dass (in diesem Fall) die Webseite _auch_ von eventuell eingeschränkten Benutzern benutzet werden kann, während sich Benutzerfreundlichkeit eher auf "gesunde" Personen beschränkt.

          Man kann es auch anders formulieren: Wenn schon "gesunde" Personen Probleme mit der Bedienung haben, wie sollen dann behinderte Personen damit klarkommen?

          Jonathan

    2. @@Hannes:

      CSS dient zur optischen Gestaltung

      Nein. CSS dient der Gestaltung. Punkt.

      Der akustischen wie auch – wenn es sie denn gäbe – der olfaktorischen und der haptischen. Und auch der optischen.

      Live long and prosper,
      Gunnar

      --
      „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
  3. @@Matthias Kurz:

    Man sagt ja immer, dass CSS ganz tolle barrierefrei sei.

    CSS ist eine Technik.

    Barrierefreiheit bezieht sich auf Menschen.

    CSS hat also mit Barrierefreiheit erstmal gar nichts zu tun. Man kann eine Webseite mit übelstem HTML 3.2 barrierefrei gestalten. Man kann aber auch eine Seite mit CSS völlig verhunzen.

    Live long and prosper,
    Gunnar

    --
    „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
  4. Heidiehoh,

    ich habe grade mal ein bischen gegrübelt. Über Screenreader, Semantik und CSS.

    ...
    Danke für die Antworten.
    Wenn man nach "screenreader css" sucht, findet man auch ein paar ganz interessante Dinge.
    Hier eine Screenreader-Matrix:
    http://en.wikipedia.org/wiki/List_of_screen_readers
    Hier ein schönes Beispiel:
    http://bad-seendorf.de/

    (mk)