Gunnar Bittersmann: Includes und media query

Beitrag lesen

SELF-Forum

Includes und media query

Gunnar Bittersmann Homepage des Autors
+1 Informationen zu den Bewertungsregeln

@@Martin

Ja.

Schauen wir mal:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>

Auf einer deiner Unterseiten hab ich gesehen, dass du da dran bist, das auf <!DOCTYPE html> umzustellen und auch die Sprache in <html lang="de"> anzugeben?

<div align="center"><a href="index2.shtml"><img src="/bilder/grundgrafik/eingang.gif" alt="[ Bitte auf das Eingangsbild klicken ]" border="0"></a><span class="bildunterschrift"><br>
Um zur eigentlichen Seite zu gelangen bitte auf das Eingangsbild klicken</span></div><br>

Präsentationsbezogene Attribute wie align="center" und border="0" haben in HTML nichts zu suchen. Darstellung ist Sache von CSS.

Der Alternativtext ist nicht sinnvoll. Nicht nur wegen der eckigen Klammern. Warum sollte jemand „Bitte auf das Eingangsbild klicken. Um zur eigentlichen Seite zu gelangen bitte auf das Eingangsbild klicken“ zu lesen/hören bekommen?

br-Elemente sollten im HTML nur in Ausnahmefällen auftreten (Postadressen, Gedichtszeilen). Für „Um zur eigentlichen Seite zu gelangen bitte auf das Eingangsbild klicken“ ist das p-Element das richtige. Da dieses ein Blockelement ist, brauchst du kein br.

Warum leitest du von dem Text zum Bild; warum ist nicht auch der Text selbst anclickbar? Also beides – img und p – in das a-Element.

Aber „zur eigentlichen Seite“[1] verdeutlicht schon das Problem. Eine uneigentliche Seite sollte es gar nicht geben. Binde die Navigation auf diese Seite ein und spare den Link zur „eigentlichen Seite“.

Diese Seite ist für Neuigkeiten. Binde sie als solche mit in die Navigation ein.

<div class="news">
  <div class="ueberschrift">Die letzten Neuigkeiten vom Herold der Hallen</div>

So nicht. Überschriften müssen als solche ausgezeichnet werden. Bei <div class="ueberschrift"> versteht der Browser nicht, dass es sich um eine Überschrift handelt, und kann diese Information bspw. nicht an einen Screenreader weiterleiten. Nutzer von Screenreadern hangeln sich aber gerade anhand von Überschriften durch eine Seite.

Zur Auszeichnung von Überschriften dienen (in absteigender Hierarchie) die Elemente h1, h2 bis h6. h1 ist für die Hauptüberschrift(en). Das wäre auf dieser Seite bspw. „Neuigkeiten“. Die jeweiligen Überschriften in den Kästen wären dann die nächste Hierarchie-Ebene: h2.

Eine vorhandene Überschrift ist ein sicheres Zeichen dafür, dass der Bereich nicht mit div, sondern besser mit section o.ä. auszuzeichnen wäre. Auf dieser Seite könnten die einzelnen Neuigkeiten auch articles sein. Also:

<section class="news">
  <h2>Die letzten Neuigkeiten vom Herold der Hallen</h2>

oder

<article class="news">
  <h2>Die letzten Neuigkeiten vom Herold der Hallen</h2>

class="news" hab ich mal dringelassen, vermutlich brauchst du das aber nicht. Dafür bietet es sich an, section bzw. article eine ID zu geben. Das könnte hier id="herold-der-hallen" sein oder (besonders wenn das automatisch erzeugt wird) id="Die-letzten-Neuigkeiten-vom-Herold-der-Hallen". Oder auch im zweiten Fall die Großbuchstaben in Kleinbuchstaben umwandeln.

<p>HINWEIS ZUM MICROSOFT INTERNET EXPLORER</p>
<p>Diese Seite wurde mittels sogenannter Cascading Stylesheets
(CSS) erstellt. Ältere Versionen des Internetexplorers interpretieren aber viele Angaben
im CSS nicht korrekt. Erst mit dem IE Version 7 werden die meisten
dieser Angaben korrekt interpretiert. Es wurde zwar eine Version auch
für ältere Versionen des Internet Explorers eingefügt, jedoch kann es
hier trotzdem zu Darstellungsfehlern kommen.

Vergiss nicht, diesen Abschnitt ersatzlos zu streichen.

Und die „Valid-HTML“- und „Valid-CSS“-Bapperl möchte das Jahr 2006 auch gerne zurückhaben.

LLAP 🖖

--
“There’s no such thing as an ‘average’ user, but there is such a thing as an average developer.” —Vitaly Friedman in Accessibility Matters: Meet Our New Book, “Inclusive Design Patterns”
Selfcode: sh:) fo:} ch:? rl:) br:> n4:& va:| de:> zu:} fl:{ ss:| ls:# js:|

  1. Du meinst eigentlich Site. Eine Website sind alle zusammengehörigen Webseiten unter einer Domain. ↩︎

Beitrag melden
+1
Informationen zu den Bewertungsregeln