CSS lernen leicht gemacht: Strategische Positionierung – Elemente barrierefrei anordnen

Herzlich willkommen zum nächsten Teil meiner Serie „CSS lernen leicht gemacht“. In diesem Artikel geht es um die Positionierung. Wer seine Website professionell gestalten möchte, muss verstehen, wie man Elemente punktgenau platziert, ohne die Barrierefreiheit zu gefährden.

In der Informatik ist das Layout wie ein Schachbrett. Wenn Sie Inhalte online stellen, entscheiden Sie, welche Figur wo steht. Doch Vorsicht: Eine visuelle Verschiebung darf niemals die logische Lesereihenfolge für Screenreader durcheinanderbringen.

1. Text ausrichten mit text-align

Die einfachste Form der Positionierung betrifft den Text innerhalb eines Elements. Mit der Eigenschaft text-align steuern wir, wie Text und andere Inline-Elemente (wie Bilder) fließen. In diesem Grundkurs lernen wir die wichtigsten Werte kennen:

/* Keyword values für die Textausrichtung */
.beispiel-text {
  text-align: start;         /* Standard: Startet dort, wo die Sprache beginnt */
  text-align: end;           /* Richtet den Text am Ende aus */
  text-align: left;          /* Linksbündig */
  text-align: right;         /* Rechtsbündig */
  text-align: center;        /* Zentriert */
  text-align: justify;       /* Blocksatz */
  text-align: match-parent;  /* Erbt die Ausrichtung vom Elternelement */
}

Wichtiger Hinweis für barrierefreie Webseiten: Nutzen Sie justify (Blocksatz) auf Ihrer Website nur mit großer Vorsicht. Die entstehenden Lücken zwischen den Wörtern können für Menschen mit Dyslexie oder Sehbehinderungen eine echte Barriere darstellen, da das Schriftbild unruhig wirkt.

2. Div-Container horizontal zentrieren

Ein häufiges Problem für Anfänger in der Webentwicklung: Wie bekommt man eine ganze Box (ein div) in die Mitte der Website? Während text-align nur den Inhalt einer Box beeinflusst, verschieben wir die Box selbst meist über die Außenabstände (Margins).

.zentrierte-box {
  width: 80%;            /* Die Box braucht eine Breite */
  margin-left: auto;     /* Automatischer Abstand links */
  margin-right: auto;    /* Automatischer Abstand rechts */
}

Dies ist eine sehr stabile Methode, um Webseiten auf großen Bildschirmen harmonisch wirken zu lassen.

Beispiel: Einen Div-Container horizontal zentrieren

In diesem Beispiel nutzen wir die margin: auto-Methode, um ein „Schachbrett“ (einen Div-Container) in der Mitte der Website zu platzieren.
HTML:

CSS:

.schachbrett-container {
width: 300px; /* Eine feste Breite ist wichtig für das Zentrieren */
padding: 20px;
background-color: #f0f0f0;
border: 4px solid #333;

/* Horizontal zentrieren */
margin-left: auto;
margin-right: auto;

/* Optional: Text im Container zentrieren */
text-align: center;
}

3. Die Eigenschaft position: Das GPS für Webentwickler

Wenn wir die normale Ordnung von html verlassen wollen, nutzen wir die Eigenschaft position. In diesem Artikel erkläre ich Ihnen die fünf wichtigsten Zustände:

/* Die verschiedenen Positionierungs-Arten */
.element {
  position: static;   /* Der Standard: Alles bleibt im normalen Fluss */
  position: relative; /* Bleibt im Fluss, kann aber leicht verschoben werden */
  position: absolute; /* Löst sich vom Fluss und fliegt über andere Elemente */
  position: fixed;    /* Klebt am Bildschirm (z.B. für Menüs beim Scrollen) */
  position: sticky;   /* Rastet beim Scrollen an einer Stelle ein */

  /* Globale Werte zum Zurücksetzen oder Erben */
  position: inherit;
  position: initial;
  position: revert;
  position: revert-layer;
  position: unset;
}

Beispiel 2: Positionierung (Relative & Absolute)

HTML:

Turm

CSS:

/* Das Spielfeld dient als Ankerpunkt für absolute Elemente */
.spielfeld {
position: relative;
width: 200px;
height: 200px;
background-color: #e2e2e2;
border: 1px solid #999;
}

/* Die Figur wird innerhalb des Spielfelds frei platziert */
.schachfigur {
position: absolute;
top: 10px; /* 10 Pixel Abstand zum oberen Rand */
right: 10px; /* 10 Pixel Abstand zum rechten Rand */

padding: 5px 10px;
background-color: black;
color: white;
font-weight: bold;
}

Wenn Sie diese Techniken nutzen, um Webseiten zu gestalten, müssen Sie sicherstellen, dass die Tastatur-Navigation (Tab-Taste) weiterhin logisch bleibt. Inklusive Websites zeichnen sich dadurch aus, dass die visuelle Position und die Position im html5-Code übereinstimmen.

4. Barrierefreiheit und Logik

In der modernen webentwicklung ist es verlockend, Elemente mit absolute überall hinzuschieben. Aber ein Screenreader liest den html-Code von oben nach unten. Werden wichtige Informationen visuell ganz oben platziert, stehen aber im Code ganz unten, finden blinde Menschen diese Infos erst sehr spät. Ein guter grundkurs lehrt daher: Erst die Struktur im html5 sauber aufbauen, dann mit css gestalten.

---

Schlussbemerkung

Das Positionieren von Elementen erfordert Übung und eine klare Strategie! Mit text-align und position haben Sie nun die Werkzeuge, um Ihre eigene Webseite individuell und barrierefrei zu gestalten. In den nächsten Lektionen in diesem Grundkurs vertiefen wir, wie wir diese Layouts für mobile Endgeräte optimieren.

Haben Sie Fragen dazu, wie Sie Ihre Webseiten nach den neuesten Richtlinien optimieren? In meinem Grundkurs unterstütze ich Sie gerne dabei, digitale Barrieren abzubauen und moderne Websites für alle Menschen zugänglich zu machen.

Kontakt für Beratung und Schulung:
E-Mail: info@marlem-software.de
Telefon: 07072/1278463

Ihr Markus Lemcke, Experte für barrierefreie Informatik

Weiterlesen

CSS lernen leicht gemacht: Design für alle – inklusiv und barrierefrei