EfA 2004 – Teil 2

Der Inhalt

Ab hier beginnen die drei inhaltlichen Spalten der Website. Zuerst der Newsbereich:

41. <div id="content">
42. <div id="linkespalte">

Für den Blog-Bereich kommt dieses CSS zum Einsatz, das in der »chrome.css« global für alle dreispaltigen Layouts definiert ist:

79. #linkespalte {
80. float: left;
81. width: 37%;
82. background: #F5E8D0;
83. }

Die Anweisungen sind einfach: Die Position ergibt sich aus dem Dokumentfluss im HTML, lediglich die Breite von 37% wird definiert und daß dieser Bereich linksfliessend ist. Im Style Sheet folgen noch Definitionen für die Überschriften H2 und H3 (wieder in Form von Reitern, sogenannten Tabs, die über Hintergrundbilder erzeugt werden), den Absätzen und Definitionslisten.

83. h2.linkespaltetab {
84. margin: 0;
85. padding: 0;
86. font-size: 1.1em;
87. line-height: normal;
88. background: #fff url("/img/chrome/blogreiterrechts.gif") no-repeat right top;
89. text-shadow: #eee 2px 2px 0.1em;
90. }

Die Deklaration von text-shadow wird bei EfA an mehreren Stellen benutzt, um zum Beispiel Überschriften einen leichten Schlagschatten zu geben oder den Reitern in der Primärnavigation ein Relief-artiges Aussehen zu verleihen. Hier gibt es vier mögliche Argumente, die in dieser Reihenfolge notiert werden müssen:

1. Farbe des Schattens
2. horizontaler Versatz (positiv heißt nach rechts)
3. vertikaler Versatz (positiv heißt nach unten)
4. Weichzeichnung (0 heißt scharf)

Leider wird dieser an sich sehr schöne Effekt bisher nur vom Browser Safari unter MacOS X unterstützt.

Zu beachten ist noch die Verwendung von SPANs zur Auszeichnung von Sprachwechseln:

43. <h2><acronym>EfA</abbr>
44. <span lang="en">Access[B]log</span>:</h2>
45. <p>Tagesfrische <span lang="en" title="Nachrichten">News</span> rund um das Thema Barrierefreiheit.</p>

Mit span lang="en" title="...">…</span> wird bei verwendeten fremdsprachlichen Ausdrücken die deutsche Übersetzung mitgeliefert (wenn das Wort denn sinnvoll übersetzbar ist).

46. <div class="linkespaltecontent">
47. <dl>
48. <dt>Barrierefreie Landeshauptstädte?</dt>
49. <dd>Das Heidelberger Projekt <span lang="en">WEB for ALL</span> hat die Internetseiten von 10 Hauptstädten in den Bundesländern getestet, die über ein Gesetz zur Gleichstellung verfügen. Der Bericht wurde in dem Fachmagazin für Kommunale Entscheidungsträger <a href="http://www.kommune21.de/" rel="external">Kommune21</a> veröffentlicht und ist im <acronym>PDF</abbr>-Format auf den Seiten von <a href="http://www.webforall.info/" lang="en" rel="external">WEB for ALL</a> herunterzuladen.</dd>
50. <dd class="commentlink"><img class="icon" src="/img/chrome/comment.png" alt=""><a href="/blog/id/949/" title="Kommentare von Lesern zum Beitrag »Barrierefreie Landeshauptstädte«">Kommentare: 1</a></dd>
51. </dl>
52. </div>

Auch Links sind besonders markiert: Mit rel=«external« soll die Beziehung zwischen Link und Linkziel angegeben werden (im HTML 4-Standard so genannte Link Relations). Da in HTML 4 strict sowie XHTML 1.0 strict das target-Attribut zum Öffnen von Links in neuen Fenstern nicht mehr erlaubt ist, könnte man dieses Verhalten per JavaScript emulieren, indem die Werte der rel-Attribute ausgewertet werden. (Kevin Yank zeigt in einem Artikel bei sitepoint wie es geht). Im Moment hat das eher semantische Bedeutung, aber mit Hilfe von CSS lässt sich mit einer solchen Auszeichnung schon etwas anfangen. So werden durch:

87. #content a[rel="external"]:before {
88. content: url(../img/icon/extern.gif);
89. }

und

90. #content a[rel="internal"]:before {
91. content: url(../img/icon/intern.gif);
92. }

unterschiedliche Icons zur Kennzeichnung interner und externer Links eingefügt. Wie üblich funktioniert dies jedoch nicht im Internet Explorer, der mit derart fortgeschrittenen Selektoren auch in der aktuellen 6-er Version schlichtweg überfordert ist.

Mit CSS 3 wird zumindest der letzte Style überflüssig, denn dann wird man mit:

93. #content a:not[rel="external"]:before {
94. content: url(../img/icon/intern.gif);
95. }

allen Links, die nicht explizit als Extern ausgezeichnet sind (a:not[rel="external"]), automatisch ein Intern-Icon voranstellen können. Aber das ist wie gesagt noch Zukunftsmusik und wird noch von keinem aktuellen Browser umgesetzt.

Am Ende des Newsbereiches kommt noch ein Kontaktlink und der Verweis auf das News-Archiv. Beachten Sie auch hier wieder den Einsatz von title zur ausführlichen Beschreibung der Linkziele.

53. <p id="archivlink"><a href="mailto:efa@aktion-mensch.de">Eintrag vorschlagen</a> |
54. <a href="/blog/index.php"><span lang="en">Blog</span>-Archiv</a></p>
55. </div>
56. <hr class="skip">

Mit class="skip" werden sämtliche Elemente ausgezeichnet, die zwar der inhaltlichen Strukturierung für nicht-grafische Darstellungsarten dienen, in der Gestaltung des Medientyps screen aber überflüssig sind. Per display: none; werden diese bereits im Style Sheet »basic.css« ausgeblendet.

Nun beginnt der Bereich der mittleren Spalte.

58. <div id="rechtespalte">

Die CSS-Anweisungen für #rechtespalte finden sich in »chrome.css«. Hier werden Position, Bemaßung, Vorder- und Hintergrundfarben geregelt:

96. #rechtespalte {
97. margin-top: 1.2em;
98. padding: 0 .5em 0 3%;
99. float: left;
100. width: 58%;
101. background: #fff;
102. color: #000;
103. }

In dieser Spalte werden die aktuellen Artikel im EfA-Magazin angerissen und verlinkt:

59. <h2 class="skip">Artikel:</h2>
60. <h3>BIENE-<span lang="en">Award</span>: Hohe Hürden auf dem Weg zum Honigtopf</h3>
61. <img src="/award2004/img/aufmacher_biene.png" alt="" class="imgright" width="130" height="118">
62. <h4>Fast 100 Beiträge erfüllen Grundanforderungen der Barrierefreiheit</h4>
63. <p id="abstract" class="abstract">Fast 100 <span lang="en" >Websites</span> haben die erste Hürde des BIENE-<span lang="en">Award</span> erfolgreich überwunden. Bei den so genannten Ausschlusstests des Wettbewerbs für barrierefreie <span lang="en">Web</span> gestaltung haben sie die Grund- oder Mindestanforderungen erfüllt und sich für die Feintests qualifiziert&hellip;</p>

Die Klasse imgright dient dazu, alle Elemente, die sie benutzen rechts auszurichten und, mit einem gewissen Abstand, vom umgebenden Text umfließen zu lassen. Erreicht wird dies durch:

104. .imgright {
105. float: right;
106. margin: .3em .2em .2em .4em;
107. }

Weiter im HTML:

64. <div class="separator">&nbsp;</div>

Mit diesem Code werden die horizontalen gestrichelten Linien erzeugt. Im CSS sieht dies wie folgt aus

108. .separator {
109. font-size: 1px;
110. line-height: 1px;
111. height: 3px;
112. border-bottom: 1px solid #BCBCD0;
113. /* -- Wegen der font-size oben hier die margins und paddings nicht in relativen Werten angeben -- */
114. margin: 10px 0 10px 0;
115. padding: 0;
116. }

In Fällen, wo semantisch zwar kein <hr> zu rechtfertigen wäre, trotzdem aber eine optische Trennung erwünscht ist, wird diese durch border-bottom erzeugt. In einigen Fällen gibt es aber auch die Notwendigkeit eines <hr>, z. B. um größere logische Blöcke von einander zu trennen. In diesem Fall werden sie in grafischen Browsern versteckt:

117. .separator hr {
118. display : none;
119. }

Es folgen weitere Artikel, die sich strukturell nicht vom ersten unterscheiden. Am Ende des Inhaltsbereiches steht ein Bereich mit weiterführenden Links:

65. <div id="related">

Die CSS-Anweisung dazu steht nur in »print.css« und lautet schlicht display: none. Damit werden die im Ausdruck sinnlosen Navigations-Links unterdrückt.

66. <div id="relatedtab">
67. <h2><span>Aktuelle Artikel im Magazin:</span></h2>
68. </div>

Wie bereits bei den Weblog-Meldungen in der linken Spalte ist die Überschrift hier in der Optik eines Reiters gehalten, die wir auch später in der rechten Navigationsspalte wiederfinden werden.

120. #relatedtab h2 {
121. float: left;
122. color: #333;
123. background: url("/img/chrome/reiter_navi_rechts.gif") no-repeat right top;
124. text-shadow: #999 0.2em 0.2em 0.2em;
125. width: auto;
126. margin: .7em 0 0 0 !important;
127. padding: 0;
128. font-size: .95em;
129. }

Wegen width: auto; erstrecken sich diese Reiter exakt auf die Breite des enthaltenen Textes. Über background wird wie bei allen Reitern ein leichter Farbverlauf hinter den Text gelegt. Das hierzu verwendete GIF ist an einer Kante kreisförmig beschnitten, um die abgerundete Optik zu erreichen.

Wie auch schon bei den News im Weblog werden die beschriebenen Links als Definitionsliste behandelt. Die identischen Styles werden auch auf den Artikel-Seiten im Magazin benutzt, um den Bereich der weiterführenden Links zu gestalten.

69. <dl>
70. <dt><a href="/artikel/dyslexie/">Lernbehinderung und Barrierefreiheit</a></dt>
71. <dd>Ein bislang zu wenig beachteter Aspekt der Barrierefreiheit im Internet ist der Zugang für Benutzer mit Lese- und Rechtschreibschwäche…</dd>

Das zweitwichtigste: die Navigation

Die dritte und letzte Spalte:

72. <div id="navigation">

ist im Style Sheet »chrome.css« so beschrieben:

130. #navigation {
131. width: 20%;
132. float: right;
133. margin: .8em .5% 0 0;
134. background: #f6f5f8;
135. }

Damit wird diese Spalte in einer Breite von 20% der Seite rechtsbündig angeordnet. Darin folgt die Navigation zu verschiedenen Themen und Funktionen der Website. Die Überschriften der einzelnen Unterbereiche in der Navigationsspalte sind wieder nach dem bekannten Muster der Reiter gestaltet:

73. <div id="contentnav" class="navhead">
74. <h2><span>Navigation:</span></h2>
75. </div>
76. <br class="fixfloat">

Die eigentliche Navigation ist auch hier in Form einer Liste angelegt, diesmal jedoch in klassischer Form mit den einzelnen List Items als vertikale Auflistung.

77. <ul id="contentnavlist" class="navitems">
78. <li><a href="/inhalt/">Artikel</a></li>
79. <li><a href="/download/" lang="en">Downloads</a></li>
80. <li><a href="/events/" lang="en">Events</a></li>
81. <li><a href="/gaestebuch/">Gästebuch</a></li>
82. <li><a href="/kontakt/">Kontakt</a></li>
83. <li><a href="/links/">Links</a></li>
84. <li><a href="/blog/">Nachrichten</a> <span class="skip">, </span> <a href="/blog/feed/efafeed.rss" class="xmlbutton"><abbr>RSS</abbr></a></li>
85. <li><a href="/newsletter/" lang="en">Newsletter</a></li>
86. <li><a href="http://presse.aktion-mensch.de/">Presse</a></li>
87. </ul>

Die Klasse navitems wird in dieser Spalte noch mehrfach verwendet werden und regelt unter anderem die Verwendung eines leichten Blauverlaufs im Hintergrund.

136. .navitems {
137. background: #F6F5F8 url("/img/chrome/gradient_nav.png") repeat-x;
138. }

Die einzelnen Listenpunkte bekommen mit:

139. ul#contentnavlist {
140. margin: 0;
141. padding: 3px 0 4px 24px;
142. list-style: disc url("/img/chrome/navicon.gif") outside;
143. vertical-align: middle;
144. }

ein eigenes Symbol statt der üblichen vorangestellt. Um die unterschiedliche Interpretation der Abstände von Listensymbolen in den verschiedenen Browsern zu umgehen, wird zuerst margin auf Null gesetzt und dann ein padding definiert, der in etwa der Breite des Icons entspricht.

GIF-freie XML-Buttons

Der Button, der zur RSS-Variante der News führt ist komplett in CSS realisiert. Das schafft die Klasse xmlbutton. Durch a.xmlbutton:hover kommt sogar ein Button-Down-Effekt beim Überfahren des Buttons mit der Maus zustande (obwohl man diesen Stil auch a.xmlbutton.active, also dem heruntergedrückten Button zuordnen könnte).

145. .xmlbutton {
146. border: 1px solid;
147. border-color: #fc9 #630 #330 #f96;
148. margin: 0;
149. padding: 0 3px;
150. font: bold 9px Verdana,sans-serif;
151. color: #fff;
152. background: #f60;
153. text-decoration: none;
154. }
155. a.xmlbutton:hover {
156. color: #000;
157. background-image: none;
158. background-color: #ffa060;
159. border-color: #630 #fc9 #f96 #330;
160. text-decoration: none;
161. }

Sonderfall Formulare

Nach der »reinen Lehre« gehört zu einem vollständigen Formular mindestens ein umgebendes fieldset> mit einer legend>. Das erste Element kennzeichnet logische Blöcke innerhalb von Formularen – es ist also in Formularen, die nur aus einer einzigen logischen Einheit bestehen strenggenommen überflüssig. Das zweite Element wiederum definiert die Legende, sozusagen die Überschrift des Fieldsets.

Hier schlagen in der Praxis aber die verschiedenen Browserbugs gnadenlos zu. So dehnen verschiedene Version des Intenet Explorers die Breite der legend immer bis auf das Eltern-Element aus, auch wenn der CSS-Standard etwas anderes festlegt. In Opera wiederum haben wir es auch mit den ausgefeiltesten Hacks nicht geschafft, der Legend das gleiche Aussehen zu verpassen wie den Überschriften <h3> und <h4> in der Navigationsspalte.

Auch im Sinne der Effizienz hat dieses Formular bei EfA nun eben keine <legend>, sondern eine <h3>, was auch den Vorteil mit sich bringt, dass das Formular nun in der Struktur der Überschriften der Seite eingebettet ist.

88. <form id="suche" method="get" action="/suche/search.pl">
89. <fieldset>
90. <h3>Suchen:</h3>
91. <input type="text" …><br />
92. <input type="submit" id="find" value="Finden">
93. […]
94. </fieldset>
95. </form>

Der fontsizer ist ein Skript zur Änderung der Schriftgröße, das an anderer Stelle ausführlich beschrieben wird. Hier wird nur die Auswahl »Schrift größer | kleiner« erzeugt.

96. <script type="text/javascript">
97. if (efa_fontSize) document.write(efa_fontSize.allLinks);
98. </script>

Dann die Toolbox – das ist das Dropdown-Menü, mit dem Sie den CSS-Stil der Seite aussuchen können (Style Switcher). Es wird über ein eigenes JavaScript eingebunden, welches im Seitenkopf referenziert wurde.

99. <script type="text/javascript">
100. showToolbox();
101. </script>

Und schließlich der Seitenabschluss mit dem Logo des Anbieters, sowie Kontakt- und Impressumslink.

102. <div id="masthead">
103. <div class="navhead">
104. <h4><span>&Einfach für Alle</span></h4>
105. </div>
106. <br class="fixfloat">
107. <div class="navitems">
108. <p>ist eine Initiative der:</p>
109. <a href="http://www.aktion-mensch.de/" rel="external">
110. <img src="/img/logo/am.gif" alt="" height="21" width="75"></a>

Die Adresse…

111. <address>
112. […]
113. </address>
114. <p id="impressum">
115. <a href="/impressum/">Impressum</a> | <a href="/lizenz/" rel="copyright">Rechte</a>
116. </p>
117. </div
118. </div>

Die gesamte Navigation wird, wie der Kopfbereich und die Fußzeile im Druck-Style Sheet wieder ausgeblendet und nicht mit ausgedruckt. Dazu gibt es die Zeile in »print.css«

102. #navigation, #metanav, #related, #bottomnav, .none, .skip {
103. display: none;
104. }

Als Letztes noch die Fußzeile (im Druck-Style Sheet ausgeblendet).

119. <div id="footer">
120. <ul id="bottomnav">
121. <li id="bot-top"><a href="#top">Seitenanfang</a> |</li>
122. <li id="bot-home"><a href="/" rel="start">Startseite</a> |</li>
123. <li id="bot-inhalt"><a href="/inhalt/" rel="contents">Inhaltsverzeichnis</a> |</li>
124. </ul>
125. <span class="fixfloat"></span>
126. </div>

In diesem Bereich kommen auch wieder die Link-Relationen zum Einsatz. Der Home-Link wird durch rel="start" und das Inhaltsverzeichnis durch rel="contens" gekennzeichnet. Auch die Symbole vor den Links werden per CSS realisiert. Nicht vergessen: Es handelt sich um eine Liste. Mit der zugehörigen CSS-Definition:

105. #bottomnav li {
106. float: left;
107. width: auto;
108. margin: .2em 2px 0 0;
109. padding: 0;
110. display: inline-block;
111. list-style: inside;
112. position: relative;
113. top: 0;
114. color: #fff;
115. padding: 0 .2em;
116. }

werden die Listenelemente nebeneinander statt untereinander angezeigt und das zugehörige Symbol wird innerhalb des jeweiligen Eintrags erzeugt. Wie dieses Symbole aussehen soll, regeln weitere CSS-Angaben:

117. ul#bottomnav li#bot-top {
118. list-style-image : url(../img/icon/top.gif);
119. }

Diese und die drei folgenden Definitionen in »chrome.css« ordnen den <li>, die durch zusätzliche IDs (hier: #bot-top) gekennzeichnet sind, die passenden Grafiken als Aufzählungspunkte zu. Die Zuweisung display: inline-block ist eigentlich erst ab CSS 2.1 vorgesehen, sorgt aber hier für die gewünschte Anzeige zumindest unter Mozilla (list-item ginge auch).

127. <span class="fixfloat"></span>
128. </div>
129. </div>
130. </div>
131. </body>
132. </html>

Und schließlich das Ende der Startseite. In der nächsten Folge geht es um den Aufbau der Folgeseiten…

Diskutieren Sie mit!

Wir würden gerne Ihre Meinung wissen: Teilen Sie uns Ihre Erfahrungen mit und diskutieren Sie diesen Artikel mit anderen Experten.