Zugänglichkeit und Nutzbarkeit Technikwürze 38

Technikwirtz achtunddreißig von Montag, den 11. September 2006. Die Entscheidung von Michael Schumacher, aufzuhören mit seiner Rennfahrerkarriere ist entschieden. Er wird definitiv Ende des Jahres aufhören. Technikwürze nicht. Wir starten gleich los in die neue Sendung mit: So funktioniert HTML, der zweite Teil, die zweite Vorlesung aus dem Buch von Peter Müller. Zunächst aber erst mal die News von Nadia Müller.

Schlagzeilen.

Die News und Links im Kurzformat. Der Online-Auftritt des Spiegels wurde erneut umgestaltet. Weniger Tabellen und eine leichtere Struktur zeichnen das neue Spiegel Online aus. An der Frage, ob das neue Design nun übersichtlicher und besser ist, scheiden sich allerdings die Geister. Der Screenreader Jaws ist in der Version sieben Punkt eins verfügbar und bietet nun im Firefox den gleichen Funktionsumfang wie im Internet Explorer und unterstützt Ajax.

Die zweite Beta-Version des Firefox zwei wurde am 31. August für Testzwecke zum Download bereitgestellt. Tipps für ein Layout mit einhundert Prozent Höhe gibt Roger Johansson. Designguide at bietet eine umfangreiche Sammlung an Informationen über Typografie, Grafik- und Logodesign.

Barrierefrei.

Gedanken über Zugänglichkeit und Nutzbarkeit. Heute wollen wir euch zudem einige Artikel zum Thema Accessibility näherbringen, die in letzter Zeit große Diskussionen ausgelöst haben. Die wichtigsten Punkte über Accessibility hat The Bee List zusammengefasst. Jeff Croft fordert mehr Einsicht von Accessibility-Verfechtern für Entscheidungen, die im Webdesign-Business tagtäglich getroffen werden müssen und nimmt in einem weiteren Artikel Stellung zur Diskussion.

Ursache für diese Diskussion war Roger Johansson Blogbeitrag über Light Text on Dark Background versus Readability. Weniger Bezug zur Diskussion hat der Beitrag von Joshua Briley auf exercises Punkt org, aber er zeigt, wie akustische Style Sheets, also Style Sheets für den Medientyp Aural, Webseiten zugänglicher machen können.

Feedback.

Für euch haben wir uns in die Unkosten gestürzt und haben uns eine Skype-Innen Nummer besorgt. Ab sofort könnt ihr uns telefonisch erreichen unter null fünf elf Hannover einundzwanzig siebenundzwanzig dreihundert. In Hannover die null fünf elf einundzwanzig siebenundzwanzig dreihundert und könnt uns gegebenenfalls zum Ortstarif eine Nachricht hinterlassen. Unsere Voicebox null fünf elf einundzwanzig siebenundzwanzig dreihundert.

Ruft bitte an, hinterlasst uns eure Kommentare und lasst uns eure Stimme hören. Wenn ihr einen Beitrag für die Sendung habt, sprecht den bitte auch auf unsere Voicebox und wir bringen das dann in der Sendung. Also noch mal: Skype-Innen Nummer null fünf elf einundzwanzig siebenundzwanzig dreihundert.

XHTML und CSS.

So funktioniert HTML. Aus dem Buch In Little Boxes – Webseiten gestalten mit CSS. Grundlagen. Ein Buch von Peter Müller. Drei Missverständnisse sind so weit verbreitet, dass sie hier kurz korrigiert werden sollten. HTML ist eine Programmiersprache. HTML wird nicht programmiert, sondern schlicht und einfach geschrieben.

HTML-Quelltext zu schreiben, kommt besonders Einsteigern oft vor wie programmieren, weil es auf jedes Zeichen ankommt, aber das ist bei Diktaten auch so und die werden auch geschrieben und nicht programmiert. HTML ist eine Seitenbeschreibungssprache. HTML beschreibt nicht, wie eine Seite aussieht. HTML strukturiert sie lediglich. Gestaltet wird sie mit CSS, den Casading Style Sheets. Seitenbeschreibungssprachen sind etwa Postscript oder PDF. HTML dient zum Gestalten von Webseiten.

Gestalten mit HTML ist wie Malen mit Handschellen. Dieser Satz gilt heute genau wie vor zehn Jahren. Wichtig beim Aufbau einer Webseite ist die Trennung von Inhalt und Gestaltung. HTML erstellt, wie gesagt, die rechteckigen Kästchen und füllt sie danach mit Inhalt. Gestaltet werden sie mit CSS. Diese strikte Aufgabentrennung eröffnet später ungeahnte Möglichkeiten. HTML-Kommentare.

Es ist eine gute Angewohnheit, den Quelltext mit Kommentaren zu versehen, damit Sie selbst auch nach einiger Zeit noch nachvollziehen können, was Sie sich bei bestimmten Quelltextpassagen gedacht haben. Der Browser erkennt einen Kommentar an einer bestimmten Zeichenfolge und stellt diesen nicht im Fenster dar. Kommentare bleiben im Quelltext sichtbar. Die Kommentare sind zwar im Browserfenster nicht sichtbar, bleiben aber im Quelltext stehen und jeder Besucher kann diesen Quelltext lesen.

Auf jeder Webseite vorhanden: das Grundgerüst. Der Quelltext einer Webseite lässt sich grob in vier Abschnitte aufteilen. DOCTYPE steht ganz am Anfang in der ersten Zeile. Das Stammelement HTML, das Head und Body enthält. Der Vorspann Head mit Title der Webseite und Elementen wie zum Beispiel Meta. Body mit dem Inhalt, der im Browserfenster dargestellt wird.

Die Einzelteile bilden zusammen das HTML-Grundgerüst, das einer Webseite wie ein Skelett eine unsichtbare Struktur gibt und sie zusammenhält.

Ein Grundgerüst für die Webseite erstellen. Bevor Sie eine neue Webseite mit dem Grundgerüst erstellen, ein Hinweis vorweg: DOCTYPE hat eine extrem unübersichtliche Syntax und falls Ihr Editor die Zeile nicht schon hingeschrieben hat, kopieren Sie sie am besten in den Quelltext, um Tippfehler zu vermeiden. Kopiervorlagen finden Sie zum Beispiel in Self HTML.

Die Dokumenttypdefinition DOCTYPE HTML public. Die Dokumenttypdefinition muss in der allerersten Zeile des Quelltexts stehen. Diese sagt dem Browser drei Dinge: Wie das Stammelement für das folgende Dokument heißt, welche HTML-Version benutzt wird und wo das dazugehörige Grammatikbuch zu finden ist.

Wenn kein DOCTYPE angegeben ist oder die abschließende URL zum Grammatikbuch fehlt, wechseln einige Browser in den sogenannten Quirks-Modus, dem Pfusch-Modus, was unter Umständen drastische Auswirkungen auf die Darstellung der Webseite haben kann.

Das Stammelement HTML. Mit HTML folgt das bereits in der DOCTYPE angekündigte Stammelement, von dem alle Elemente einer Webseite abstammen. HTML erstellt eine unsichtbare Kiste, in der Head und Body und alle anderen Elemente enthalten sind. In vielen HTML-Dokumentationen, auch in Self HTML, wird HTML als Wurzelelement bezeichnet. Ich bevorzuge die Bezeichnung Stammelement, denn alle HTML-Elemente einer Webseite stammen direkt oder indirekt von HTML ab. Der XML-Namensraum.

Der Zusatz XML NS definiert den sogenannten XML-Namensraum, der eine weltweite Einmaligkeit von Element- und Attributnamen sicherstellen soll. Es ist momentan nicht wirklich wichtig zu verstehen, was genau das ist und bewirken soll. Die Angabe gehört in XHTML der Vollständigkeit halber dazu. Das Attribut Lang schließlich gibt die Sprache an, in der die Webseite geschrieben ist. Lang ist ein sogenanntes Universalattribut, was bedeutet, dass es in vielen HTML-Elementen benutzt werden kann.

Zukünftig wird Lang durch XML-Doppelpunkt Lang ersetzt, was aber wiederum einige aktuelle Browser nicht verstehen. Kurzum: Wenn Sie mit Lang eine Sprache für ein HTML-Element definieren, sollten Sie XML-Doppelpunkt Lang gleich dazu schreiben. Ist zwar umständlich, aber oft kommt es nicht vor.

Der Vorspann: Head. Zwischen dem anfangenden und schließenden Head steht eine Art Vorspann für die Webseite, der nicht im Textfenster des Browsers erscheint und die Information über das Dokument selbst enthält, die von Browsern oder Suchmaschinen ausgewertet werden. Die vorläufig wichtigsten Elemente im Kopfbereich sind Meta und Title. In den Meta-Angaben können Sie verschiedene nützliche Anweisungen für die Webserver, Webbrowser und Suchmaschinen-Robots notieren.

Zum engeren Kern des Grundgerüsts gehört aber nur die Meta-Angabe zum Zeichensatz. Das Meta-Element im Grundgerüst sagt dem Browser, dass er für dieses Dokument den Zeichensatz ISO 8859-1 benutzen soll, den normalen Zeichensatz für westeuropäische Sprachen.

Normalerweise erfährt der Browser dies bereits bei der Übermittlung des Quelltext vom Webserver, aber falls das aus irgendeinem Grunde nicht passiert, weil die Seite zum Beispiel lokal gespeichert ist, hilft diese Meta-Angabe im Head ihn auf die Sprünge. Wenn Ihnen das Wort Zeichensatz nicht besonders viel sagt, finden Sie bei Self HTML im Abschnitt Internationalisierung eine sehr verständliche Erklärung. Der Name der Seite: Title.

Title ist wahrscheinlich das am meisten unterschätzte HTML-Element und enthält einen kurzen Text, der an verschiedenen Stellen wieder auftaucht. In der Browser-Titelleiste und den Ausklapplisten der Vor- und Zurück-Buttons. Der Namensvorschlag für Favoriten beziehungsweise Lesezeichen: Bookmarks. In den Eingabelisten der Suchmaschinen als optisch hervorgehobenen Link. Ein guter Titel ist kurz und beschreibt die Webseite, auch wenn man sie nicht sieht.

Infotecden Punkt de Startseite ist besser als "Willkommen" oder "Unbekanntes Dokument". Der auffällige, blau unterstrichene Text in den Ergebnislisten von Google ist der Titel der Webseite. Dass auch viele professionelle Webdesigner die Bedeutung von Title nicht wirklich verstanden haben, zeigt eine Google-Suche.

Der Standardtitel des bei Profis sehr beliebten Editors Macromedia Dreamweaver ist "Unbekanntes Dokument" und der wurde, wie diese Google-Suche zeigt, auf über drei Millionen deutschsprachigen Webseiten nicht verändert.

Hintergründe.

127 von 376 Webseiten haben sich für den Feintests der Biene 2006 qualifiziert. Die Aktion Mensch und die Stiftung Digitale Chancen, die den Wettbewerb bereits zum vierten Mal veranstalteten, sind mit dem Zwischenergebnis des Wettbewerbs für die besten deutschsprachigen barrierefreien Webseiten sehr zufrieden. "Die neuen Wettbewerbskategorien haben sich bewährt", bestätigt Jutta Groll, Geschäftsführerin der Stiftung Digitale Chancen.

"Eines unserer Ziele ist es, die Vergleichbarkeit der Wettbewerbsbeiträge zu verbessern. Das gelingt durch die neuen Kategorien. Die eher kleinen Angebote müssen nicht mehr mit komplexen Webseiten konkurrieren und in allen Bereichen sind die vielversprechenden Kandidaten dabei." Auch die Qualität der Beiträge ist nach Angaben der Veranstalter deutlich gestiegen.

"Vielen Einreichern geht es nicht mehr nur darum, die formalen Kriterien der Barrierefreiheit zu erfüllen, sondern diese gut und kreativ umzusetzen", lobt Iris Cornelsen, Projektleiterin für die Biene bei der Aktion Mensch, die diesjährige Einreichungen. Dadurch werde auch deutlich, dass einige Anbieter sich intensiver mit dem Thema Barrierefreiheit auseinandersetzen als andere, so Cornelsen weiter. "Eine positive Tendenz sehen wir bei Behörden und öffentlichen Auftraggebern.

Insbesondere Anbieter, die die Gestaltungsspielräume der BITV, der Verordnung für die Schaffung einer barrierefreien Informationstechnik im Sinne der Nutzerinnen und Nutzer interpretieren und nicht nur eine Checkliste abhaken, haben in der ersten Runde gute Testergebnisse erreicht", würdigte Cornelsen die kreative Auseinandersetzung mit dem Thema und den gesetzlichen Vorgaben. Kritisch sehen die Veranstalter die relativ geringe Beteiligung größerer Unternehmen.

Vor allem bei den komplexeren Angeboten hätte sie sich mehr Teilnehmer gewünscht.

Musik präsentiert von Podsave Music Network.

No One Like Me spielt Lisa Dames. Wir hören uns wieder nächste Woche Montag in Technikwürze 39. Bis dahin.

For fourteen years I've been right here For my precious children and my husband dear And everything's easy and everything's fine But I live with these dreams in the back of my mind 'Cause it could have been me up on that screen Or my face on the cover of Vogue magazine And maybe they'd roll that red carpet out for me Maybe, maybe But not for this wife and this mother Maybe for someone, but not for this no one like me Even if I had the chance I know that I never would go back Trade for one second the life we've made New dreams are born as old dreams fade 'Cause it could have been me up on that screen Or my face on the cover of Vogue magazine And maybe they'd roll that red carpet out for me Maybe, maybe But not for this wife and this mother Maybe for someone, but not for this no one like me Talk about a wishing well Life with you is like dream come true 'Cause it could have been me up on that screen Or my face on the cover of Vogue magazine And maybe they'd roll that red carpet out for me Maybe, maybe But not for this wife and this mother Who loves her life like no other Maybe for someone, but not for this someone Me

Eure Kommentare bitte an echo@Technikwürze.de oder direkt im Kommentarbereich auf Technikwürze.de.