CHIP empfiehlt: macx’ Essay “Barrierefrei”

11. April 2006 Bisher 11 Kommentare

Mit dem Sonderheft “Homepage – Die perfekte Website” hat die Zeitschrift CHIP einen interessanten Wegweiser für angehende Webentwickler veröffentlicht. Nur gut, dass die Autoren auch auf das Thema Barrierefreiheit aufmerksam machen. Dabei darf natürlich nicht die Nennung meines Essays Barrierefreie Webseiten fehlen.

Wer sich eingehend mit der Umsetzung von Webseiten beschäftigt, oder auch schon Profi ist, findet in meinem Essay Barrierefreie Webseiten eine gute Einführung in die Thematik. Da valide Webseiten an sich noch lange nichts mit Barrierefreiheit zu tun haben, sollte sich jeder Webentwickler der Barrierefreiheit nähern.

Selbst für den letzten Zweifler hatte ich Ende 2005 mein Case Study überarbeitet. In diesem Beispiel stelle ich zwei eigens entwickelte Webseiten zum direkten Vergleich nebeneinander: Zum einen eine mit Photoshop / Dreamweaver und wenig Know How Webseite und zum anderen die gleiche Webseite in einer barrierefreien Version mitsamt Druckoptimierung.

Peter Müller, der Autor, der die relevanten Fachartikel geschrieben hatte, nahm mein Essay und die Beispielseite Die Grüne Seite in seinen Artikel mit auf.

Weiterfürende Links

  • PDF-Lesebeispiel mit der Empfehlung (PDF, 925 Kb)

    Update: Das Heft ist über den CHIP-Shop bereits ausverkauft, probiert es einfach dann im Zeitschriftenhandel.

    Update 2: Ich habe die Links mal übersichltich in eine Liste gepackt. Vielen Dank an Peter und Wübke für die Hinweise.

    Dieser Artikel wurde am Dienstag, 11. April 2006 um 12:12 Uhr von macx geschrieben und unter Intern abgelegt. Du kannst die Antworten zu diesem Beitrag via RSS 2.0-Feed beobachten.

    Die Kommentarfunktion wurde für diesen Artikel deaktiviert. Möchtest du dennoch deinen Senf hinzufügen, schick mir bitte eine Nachricht

Kommentare

Einen eigenen Kommentar schreiben

  1. 1 Uwe schrieb am 11. April 2006 (15:04 Uhr)

    Deine grüne Seite ist doch nicht barrierefrei! Schon der Beginn mit einer H4 ist völliger Nonsens. Durchtabben wird nicht gehighlightet. Du benutzt em als Stilmittel und nicht zur Betonung.

  2. 2 macx schrieb am 11. April 2006 (15:04 Uhr)

    Was ist falsch an der h4? Meiner Meinung nach sollte die semantische Bedeutung des Hinweises auf das Menü eine ßberschrift sein.
    Das em benutze ich im ßbrigen sehr wohl als Betonung, denn die grüne Seite gibt es zwei Mal: Einmal erstellt nach den Webstandards und einmal ohne. Da der Titel identisch ist, muss betont werden, welche Version sich der User ansieht.

  3. 3 Wübke schrieb am 11. April 2006 (23:04 Uhr)

    Aber deine vielen mit “Hier” bezeichneten Links im letzten Absatz sind nicht barrierefrei. Besser wäre:
    >Der Mitautor Peter Müller beschreibt das Heft auf seiner Homepage http://www.infotekten.de genauer. Infos über die Seite über die Barrierefreiheit gibt es im Bereich Artikel, das PDF-Lesebeispiel aus dem Heft “Barrierefreies Webdesign” zum Runterladen.

  4. 4 Uwe schrieb am 11. April 2006 (23:04 Uhr)

    An einer H4 ist schlichtweg falsch, dass du sie als erstes setzt. Es ist keine H4 sondern eine H1. Ob diese versteckt ist oder nicht spielt keine Rolle.

  5. 5 Schnoop schrieb am 12. April 2006 (18:04 Uhr)

    Ich denke nicht das eine falsch gesetzte h1 oder h4 etwas an der Barrierefreiheit ändert.
    Es gibt viel wichtigere Dinge die die Barrierefreiheit sicherstellen.

  6. 6 Uwe schrieb am 12. April 2006 (20:04 Uhr)

    Sie ist, vor allem bei einer so simlen Seite, aber falsch und hinderlich. Die Seite bietet sonst ja quasi keinerlei Probleme oder “etwas besonderes”. Die H4 ist falsch.

  7. 7 Schnoop schrieb am 12. April 2006 (21:04 Uhr)

    Ja, die H4 ist falsch. Du hast Recht, und das Thema ist erledigt…..

  8. 8 macx schrieb am 13. April 2006 (08:04 Uhr)

    Ich habe aus der h4 ein p-Element gemacht. Somit sollten nun alle zufrieden sein. ;-)

  9. 9 ML schrieb am 13. April 2006 (16:04 Uhr)

    Uwe hat Recht.

    Die Seite enthält eine ganze Reihe Fehler. Von Barrierefreiheit kann hier also gar nicht die Rede sein. Beispiele:

    font-size: 1.5em im Body sorgt dafür das es im IE bei Schriftgrößenänderung zu extremen Vergrößerungen kommt.

    Der Skiplink wird mit display: none versteckt. Dadurch ist er weder für Screenreader-Nutzer erreichbar, noch durch TAB (zumindest im Firefox).

    Nach zweimal STRG + im Firefox rutscht die Subline ins Bild und die Navigation aus dem Rahmen.

    Außerdem wird XHTML 1.1. mit dem falschen MIME-Typ verwendet. Und durch diesen Doctype sind Sprachwechsel unmöglich auszuzeichnen. Denn kein User-Agent kennt ein HTML-Attribut “xml:lang”.

    Definitiv kein gutes Beispiel für Barrierefreiheit.

  10. 10 macx schrieb am 13. April 2006 (18:04 Uhr)

    Hallo?! Wo ist die konstruktive Kritik?

    Dass die Schrift zu groß im IE ist, mindert nicht die Barrierefreiheit, ganz im Gegenteil. Die Barrierefreiheit definiert sich bei der Schrift nämlich dadurch, dass diese frei skalierbar und von vorn hinein groß eingestellt ist.

    Die Navigation bricht im fixen Layout, das stimmt. Sinnvoller wäre auch ein fluid Layout. Aber deswegen ist die Seite nicht weniger barrierearm.

    Wenn ich hier wirklich sinnvolle ßnderungsvorschläge lese, baue ich die sofort ein. Dieses Versprechen gab ich in der Vergangenheit und das gilt auch für die Zukunft.

    Diese “grüne Seite” soll in Verbindung mit der normalen HTML-Version die Vorteile von Webstandards hervorheben. Und natürlich lebt sie auch von den Vorschlägen meiner Leser. Deshalb hier die Bitte: Helft mir sie perfekt zu machen, und wir alle können genau mit diesem Beispiel “Tabellenlayouter” davon überzeugen, umzusatteln..

  11. 11 Daniel schrieb am 13. April 2006 (19:04 Uhr)

    Man setzt im body 1em, niemals 1.5em. ML hat hier recht. Danach setzt man die Schriftgröße jedem Element entsprechend.

    Sinnvoller wären fuide Layouts? Ein klares nein hierzu, alle Layouts (Vollfluide, Halbfluide, Fest) haben Vor- und Nachteile. Aber man muss Breiten und Höhen sinnvoll einsetzen.

    Vorschlag: Mach mal einen :focus für die Links rein, man sieht beim durchtabben nicht wo man ist.

    Die id “oldbrowsermessage” hat keinen Sinn, was du sagen willst solltest du in deinem Essay sagen oder im lesbaren text der Seite, nicht aber im Quelltext. Ein Screenreader gibt den Text aus obwohl er keinen Sinn hat.