HTML - Verarbeitung
Eine Einführung in die grundlegenden Konzepte von HTML
michael.eichberg@dhbw.de, Raum 149B
1.0.1
Sprache zur Beschreibung der Darstellung von Inhalten (Markup Language), zwischen denen „navigiert“ werden kann (Hypertext).
Auszeichnungssprache abgeleitet aus SGML (Standard Generalized Markup Language).
Verwendungszweck:
Webseiten
Progressive Web-Apps
Desktop Apps (z. B. mit Electron)
WHATWG ≘ Web Hypertext Application Technology Working Group
Im folgenden bezeichnet HTML die HTML(5) Spezifikation (Living Standard).
Die HTML Spezifikation definiert eine abstrakte Sprache zur Beschreibung von Dokumenten. XML und HTML sind konkrete Syntaxbeschreibungen dieser abstrakten Sprache.
HTML ist eine Beschreibungssprache für entsprechende Dokumente.
XML ist eine Beschreibungssprache, die auch für HTML verwendet werden kann. (MIME Type: application/xhtml+xml) (nicht mehr empfohlen)
Das DOM (Document Object Model) ist die In-Memory Darstellung eines Dokuments.
Das DOM ist ein API, um HTML Dokumente zu manipulieren.
Beispiele für Unterschiede
Namespaces werden nicht von der HTML-Syntax unterstützt, aber sowohl vom DOM als auch der XML-Syntax unterstützt.
noscript wird nur in HTML Dokumenten unterstützt.
Kommentare, die --> enthalten, werden nur vom DOM unterstützt.
HTML-Dokumente bestehen aus einem Baum von Elementen und Text.
HTML Dokument
<!DOCTYPE html>
<html lang="de">
<head><title>Eine Webseite</title></head>
<body>
<h1>Informationen</h1>
<p><!-- Ein Kommentar.. -->
Ein einfacher link auf
<a href="
http://www.michael-eichberg.de
">
Michael Eichberg's Homepage
</a>.
</p>
</body>
</html>DOM
├─DOCTYPE: html
└─html lang="de"
├─head
│ └─title
│ └─#text: Eine Webseite
├─ #text: ⏎
└─body
├─ #text: ⏎␣␣␣␣
├─ h1
...Mehrere HTML Dokumente bilden ggf. auf den selben DOM ab. Zum Beispiel werden die Tags als solches gar nicht abgebildet und wenn im HTML Code ein optionales (schließendes) Tag fehlt, dann ist dies im DOM nicht mehr ersichtlich.
Die Dokumente müssen aus den folgenden Teilen in der angegebenen Reihenfolge bestehen:
Optional ein einzelnes U+FEFF BYTE ORDER MARK (BOM) Zeichen.
Eine beliebige Anzahl von Kommentaren und ASCII-Whitespace.
Eine DOCTYPE Deklaration: <!DOCTYPE html>.
Eine beliebige Anzahl von Kommentaren und ASCII-Whitespace.
Das Dokumentenelement in Form eines html-Elements[1].
Eine beliebige Anzahl von Kommentaren und ASCII-Leerzeichen.
—HTML Spezifikation
Start Tag |
Inhalt des Elements |
End Tag |
|
||
Element |
||
Im Fall von Elementen ohne Endtag (z. B. <wbr>) darf auch keines hinzugefügt werden!
Beispiel
<!DOCTYPE HTML><head>
<title>Hello</title>
</head>
<body>
<p>Welcome to this example.</p>
</body>
</html>Ist ein gültiges Dokument. Es ist jedoch keine gute Praxis (hier wurde das Start Tag des html Elements weggelassen.
Sechs Typen von HTML-Elementen werden unterschieden:
area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr
script, style
textarea, title
template
Elemente aus dem MathML- und SVG-Namensraum.
Alle weiteren HTML Elemente sind normale Elemente.
Attribute liefern Informationen über das Element.
Start Tag |
||
|
||
Attribute |
||
Attribute kommen nur beim Start Tag vor.
Attribute (in HTML) können, müssen aber kein Wert haben (Boolsche Attribute).
Attributwerte sollten in Anführungszeichen (quoted) (entweder: " oder ') stehen, müssen aber nicht.
Werte ohne Anführungszeichen dürfen keine Leerzeichen oder Anführungszeichen enthalten.
Konkrete Attributwerte aus der HTML Spezifikation sind case-insensitive; andere Werte sind es nicht.
Im Allgemeinen sollten Attributwerte klein geschrieben werden. Selektoren in CSS und JavaScript sind case-sensitive.
Z. B. ist <input type="text"> und <input type="TEXT"> gleichwertig, aber <div id="text"> und <div id="Text"> nicht!
<!DOCTYPE HTML">
<html lang="de">
<head>
... Meta-Daten, Scripte, Stylesheets, etc. ...
</head>
<body>
... das Dokument ...
</body>
</html>Im Head sollten immer die folgenden Informationen deklariert werden:
Der Titel des Dokuments mit Hilfe des title elements
Der verwendete Zeichensatz mit Hilfe des passenden meta elements: <meta charset="utf-8">
Konfiguration des Viewports[2] (insbesondere für mobile Geräte relevant): <meta name="viewport" content="width=device-width, initial-scale=1.0">
Insbesondere Mobilgeräte haben oft entweder eine geringere Auflösung als Desktop-Computer oder verwenden HiDPI Screens. Beides führt dazu, dass die Webseiten nicht wie gewünscht aussehen. In diesem Fall verwenden die Browser für die Webseiten einen virtuellen Viewport mit (z. B.) 960px und skalieren dann die Seite (z. B.) auf 390px herunter. Wenn dieses Verhalten nicht gewünscht ist — z. B. weil die Seite Responsive ist oder von vorneherein auf mobile Endgeräte ausgerichtet ist — dann ist auf jeden Fall eine Viewport Konfiguration notwendig.
Device |
Viewport Size (width x height) |
Device Resolution (width x height) |
|---|---|---|
iPhone 12 |
390 x 844 |
1170 x 2532 |
iPhone 12 Mini |
360 x 780 |
1080 x 2340 |
iPhone 12 Pro |
390 x 844 |
1170 x 2532 |
iPhone 12 Pro Max |
428 x 926 |
1248 x 2778 |
Siehe: https://experienceleague.adobe.com/en/docs/target/using/experiences/vec/mobile-viewports.html?lang=de für weitere Details.
Im Head können weitere Informationen und Pragmas deklariert werden bzw. sollten dort deklariert werden, wenn sie benötigt werden:
<script [src="script.js" [defer|async]]></script>
Mittels <link rel="stylesheet" href="style.css"> oder <style>...</style>
<link rel="icon" type="image/png" href="/img/icon.png" />
http-equiv ≘ HTML equivalent; d. h. die Informationen könnte auch im HTTP Header stehen.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> (alt)
<meta http-equiv="Content-Security-Policy" content="default-src https:">
Äquivalente HTTP Header Definition:
Content-Security-Policy: default-src https:<meta name="author" content="Michael Eichberg">
Semantisches HTML
Verwendung von HTML Elementen, die die Bedeutung des Inhalts klar machen.
Bessere Zugänglichkeit
Bessere Suchmaschinen-Optimierung
Beispiel Elemente
<header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, <figure>, <address>, <b>, <s>, ...
Nicht-Semantic HTML
Verwendung von <div> und <span> Elementen, um den Inhalt zu strukturieren.
Keine klare Bedeutung des Inhalts.
<div>
<span>Zwei Wörter</span>
<div>
<a>Ein Wort</a>
<a>Ein Wort</a>
</div>
</div>
<div>
<div>
<div>Viele Wörter</div>
</div>
<div>
<div>Erste Worte</div>
<div>DaDaDa</div>
<div>BlaBlaBla</div>
</div>
</div>
<div>
<span>Alle Worte</span>
</div><header>
<h1>Zwei Wörter</h1>
<nav>
<a>Ein Wort</a>
<a>Ein Wort</a>
</nav>
</header>
<main>
<header>
<h1>Viele Wörter</h1>
</header>
<section>
<h2>Erste Worte</h2>
<p>DaDaDa</p>
<p>BlaBlaBla</p>
</section>
</main>
<footer>
<p>Alle Worte</p>
</footer>Semantische Informationen im DOM zu haben, ist insbesondere für die Barrierefreiheit notwendig.
Alternativ zur Verwendung von semantischen Elementen können auch generische Attribute mit dem role Attribute versehen werden, um die Bedeutung des Elements zu spezifizieren: <div role="navigation">...</div>
Verwenden Sie HTML zur Strukturierung von Inhalten, und nicht, um das Aussehen der Inhalte zu definieren.
Das Aussehen ist Sache von CSS.
header, footer, nav, article, section, aside, main, figure, address, ...
In Hinblick auf die konkrete Semantik eines Elements gibt es Unterschiede wo und wie oft diese verwendet werden.
Ein footer Element innerhalb eines article Elements hat eine andere Bedeutung als ein footer Element auf oberster Ebene.
Ein main Element sollte nur einmal pro Dokument verwendet werden.
Überschriften: h1, h2, h3, h4, h5, h6
Überschriften sollten in der richtigen Reihenfolge verwendet werden.
Überschriften gruppiert mit zugehörigem Inhalt: hgroup.
Das hgroup-Element stellt eine Überschrift und den zugehörigen Inhalt dar. Dient dazu eine Überschrift mit einem oder mehreren p-Elementen zu gruppieren. Zum Beispiel für eine Unterüberschrift oder einen alternativen Titel.
sind wahr, wenn diese angegeben sind und falsch andernfalls.
Z. B. <input id="the-checkbox" type="checkbox" checked>.
definieren eine begrenzte Anzahl von gültigen Werten sowie einen Default, der verwendet wird, wenn kein Wert angegeben ist, aber das Attribut verwendet wird.
können für jedes Element verwendet werden; sind aber nicht immer sinnvoll.[3]
Globale HTML Attribute sind Z. B. id, class, data-*, autofocus, role, lang, style, popover, tabindex.
Event Handler Attribute: onclick, onclose, ...
Boolsche Attribute sollten in JavaScript durch hinzufügen bzw. löschen gesetzt werden (und nicht die Manipulation des Attributwertes).
const checkbox = document.getElementById("the-checkbox");
checkbox.removeAttribute("checked");
checkbox.setAttribute("checked");Der Wert eines Attributs kann über mehrere Zeilen gehen solange diese keine Anführungszeichen enthalten. Zeilenumbrüche und Einrückungen (mit Tabulatoren (⇥)) werden dabei automatisch gefiltert.
Zum Beispiel kann der content-Wert des meta-Elements wie folgt geschrieben werden:
<meta name="author" content="
⇥ ⇥Michael Eichberg
⇥ ⇥ Professor
">Dies ist äquivalent zu:
<meta name="author" content="Michael Eichberg Professor">verwendet, um ein Element eindeutig zu identifizieren
(Welches man in CSS oder JavaScript per Selektor referenzieren kann.)
als Ziel von Hyperlinks (<a href="#id">)
im Rahmen der Unterstützung von Barrierefreiheit
der Wert ist case-sensitive
Best Practice: Kleinbuchstaben und Bindestriche verwenden (Unterstriche sind erlaubt aber im Zusammenhang mit CSS nicht optimal).
das class-Attribut ermöglicht es Elemente mit CSS und JavaScript anzusprechen
dient keinem anderen Zweck in HTML
wird sehr häufig von Frameworks und Bibliotheken verwendet
Das style-Attribut ermöglicht die (ad-hoc) Anwendung von Inline-Styles auf das entsprechende Element (nicht empfohlen).
Das data-*-Attribut ermöglicht es, benutzerdefinierte Daten an das Element zu binden, die von JavaScript verwendet werden können. * kann ein beliebiger Name sein, aber nicht xml oder : enthalten.
<p>Inhalt</p>
<blockquote> und <q> (für kurze Zitate innerhalb eines Absatzes)
Das Inline-Zitat-Element <q> fügt der Sprache entsprechende Anführungszeichen hinzu.
Beispiel
Ein Zitat (deutsch)
A quote (englisch)<q lang="de">Ein Zitat</q>
<q lang="en">A quote</q><em> (emphasized) und <strong>
<small> - für Randbemerkungen und Kleingedrucktes (d. h. small steht nicht für unwichtige(re)n Text oder die Schriftgröße)
<s>
<cite> - für den Titel eines Werkes oder einer Publikation
<dfn [title="der definierte Begriff"]> - für die Definition eines Begriffs
<abbr title="HyperText Markup Language">HTML</abbr> - für Abkürzungen
<time datetime="2021-10-01">1. Oktober 2021</time> - für Zeitangaben
<code> - für Code; für das Darstellen von Code-Beispielen wird code häufig mit <pre> kombiniert; die Sprache des Codes wird dann über ein class Attribute spezifiziert (z. B. <pre><code class="language-java">...</code></pre>)
<var> - für Variablen in mathematischen oder Programmierkontexten
<kbd> - für Tastatureingaben oder andere Benutzereingaben
Drücken Sie <kbd>cmd</kbd> + <kbd>c</kbd> zum Kopieren.<sup> und <sub> - für Hoch- und Tiefstellung, die nicht typographisch Zwecken dient, sondern inhaltlichen Zwecken.
H<sub>2</sub>O steht für Wasser.<i> - Text, der von normaler Prosa abweicht wie z. B. eine taxonomische Bezeichnung, ein technischer Begriff, ...
Brot besteht aus <i>Mehl</i>.<b> - Text, der erhöhte Aufmerksamkeit erfordert, aber nicht unbedingt betont werden muss; z. B. Schlüsselwörter in einem Artikel.
<p>Das <b>Wetter</b> ist heute schön.</p><mark> - Text, der hervorgehoben werden soll, z. B. Suchergebnisse.
Es gibt weitere Elemente, die für spezielle Anwendungsfälle verwendet werden können. Siehe WHATWG.
<pre>...</pre> - für Text, der so angezeigt werden soll, wie er geschrieben wurde)
<br> - für Zeilenumbrüche, die inhärenter Teil der Daten sind wie zum Beispiel bei Adressen. D. h. sollte nicht innerhalb von Text verwendet werden!
<wbr> (word break opportunity`) - ein optionaler Zeilenumbruch
(Beispiel: <p>Er schrie: <q lang="de">Lasst<wbr>Mich<br>In<wbr>Ruhe!</q></p>)
<span> und <div> sind generische Container-Elemente, die verwendet werden, um Text oder andere Elemente zu gruppieren.
<span> ist ein Inline-Element
<div> ist ein Block-Element
beide werden häufig verwendet, um CSS-Klassen zuzuweisen, um den Inhalt zu gruppieren oder um den Inhalt zu manipulieren.
Das data-Element ermöglicht es, maschinenlesbare Date an ein Element zu binden, die dann von JavaScript verwendet werden können.
Die maschinenlesbaren Daten werden im value Attribut gespeichert.
<data value="8">Acht</data>Hyperlinks werden mit dem <a> Element erstellt.
Der href-Attribut enthält die Adresse des Ziels (innerhalb des gleichen Dokuments, auf einer anderen Webseite, per E-Mail, ...)
1<a href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>2<a href="#teachers">Unsere Lehrenden</a>3<a href="mailto:michael.eichberg@dhbw.de">Email: Michael Eichberg</a>
Externer Link
Interner Link (link fragment identifier) auf ein Element mit der ID teachers
E-Mail Link - kann ergänzt werden durch subject und body Parameter innerhalb des href Attributs.
Das target-Attribut ermöglicht die Definition des Browsing-Kontextes für die Link-Navigation (und die Formularübermittlung).
1<a target="_blank" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>2<a target="_self" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>3<a target="_top" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>4<a target="_parent" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>5<a target="dhbw" href="https://www.dhbw-mannheim.de">DHBW Mannheim</a>
Öffnet den Link in einem neuen Fenster oder Tab
Öffnet den Link im gleichen Browsing-Kontext
Öffnet den Link im obersten Browsing-Kontext
Öffnet den Link im übergeordneten Browsing-Kontext
Öffnet den Link im Browsing-Kontext mit dem Namen dhbw (Beispiel: DHBW Mannheim)
_self, _top und _parent sind relativ zum aktuellen Browsing-Kontext und unterscheiden sich nur, wenn die Seite in einem Frame oder einem iframe angezeigt wird.
Das rel-Attribut legt die Art des Links fest und definiert die Beziehung zwischen dem aktuellen Dokument und der Ressource, auf die der Hyperlink verweist. (Z. B. rel="license", rel="author" oder rel="noopener"; siehe MDN rel attribute)
Durch die Zuweisung zu einem Browsing-Kontext kann verhindert werden, dass die selbe Seite X mal geöffnet wird, wenn ein Nutzer auf den Link klickt.
Drei Arten von Listen werden unterstützt, die beliebig verschachtelt werden können:
Definitionslisten: <dl>
<dl>
<dt>Erster Begriff</dt>
<dd>Erklärung des 1. Begriffs</dd>
<dt>Zweiter Begriff</dt>
<dd>Erklärung des 2. Begriffs</dd>
</dl>geordnete Listen: <ol [reversed] [start=<NO>]>
<ol start="0">
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
<li value="10">Dritter Punkt</li>
</ol>ungeordnete Listen: <ul>
<ul>
<li>Erster Punkt</li>
<li>Zweiter Punkt</li>
</ul>Das <nav> Element wird verwendet, um Navigationslinks zu gruppieren.
Insbesondere für Screenreader und die Suchmaschine relevant.
Beispiel
<nav id="ld-menu">
<button type="button"
id="ld-slides-button"
aria-label="show slides"></button>
<button type="button"
id="ld-slides-with-nr-button"
aria-label="show slides with numbers"></button>
<button type="button"
id="ld-help-button"
aria-label="show help"></button>
</nav>Verwendet für die Darstellung von tabellarischen Daten mit Zeilen und Spalten.
Aufbau von Tabellen:
<table>
<caption>Logische Operation</caption>
<thead>
<tr><th>not xor</th><th>1</th><th>0</th></tr>
</thead>
<tbody>
<tr><th>1</th><td>1</td><td>0</td></tr>
<tr><th>0</th><td>0</td><td>1</td></tr>
</tbody>
<tfoot></tfoot>
</table>| not xor | 1 | 0 |
|---|---|---|
| 1 | 1 | 0 |
| 0 | 0 | 1 |
Zellen, die über mehrere Spalten oder Zeilen gehen können mit Hilfe von colspan und rowspan Attributen definiert werden.
Spalten und Zeilen können mit Hilfe von <col> und <colgroup> Elementen definiert werden.
Bilder werden mit dem <img> Element eingebunden.
<img src="path/filename" alt="descriptive text" />Das src-Attribut enthält die Adresse des Bildes.
Das alt-Attribut enthält eine Beschreibung des Bildes, die angezeigt wird, wenn das Bild nicht geladen werden kann.
Das width und height-Attribut können und sollten verwendet werden, um die Größe des Bildes festzulegen.
Lazy loading ist durch die Verwendung des loading Attributs möglich (loading="lazy").
Folgende Bildformate werden breit unterstützt: jpg, png, gif, svg und webp.
Responsive Images werden über das srcset Attribut unterstützt:
<img src="images/dhbw.png" alt="Logo der DHBW"
srcset="images/dhbw.png 400w, images/dhbw-xl.jpg 800w"
sizes="(max-width: 800px) 400px, 800px" />Weitere Responsive Features) werden mittels CSS ermöglicht. Um zum Beispiel zu verhindern, dass ein Bild größer als eine Textzeile wird, kann folgendes CSS definiert werden:
img {
max-inline-size: 100%;
block-size: auto;
}Formulare werden mit dem <form> Element erstellt.
action enthält die Adresse, an die die Formulardaten gesendet werden.
method definiert die Methode, die zum Senden der Daten verwendet wird (GET oder POST).
name setzt den Namen des Formulars.
target enthält den Namen des Browsing-Kontexts, in dem die Antwort angezeigt wird.
autocomplete ermöglicht das automatische Ausfüllen von Formularen.
novalidate verhindert die Validierung der Formulardaten durch den Browser.
accept-charset definiert die Zeichencodierung, die zum Senden der Formulardaten verwendet wird.
Formularelemente werden mit dem <input> Element erstellt.
type definiert den Typ des Formularelements.
name definiert den Namen des Formularelements.
value definiert den Wert des Formularelements.
placeholder definiert den Platzhaltertext des Formularelements.
required definiert, ob das Formularelement erforderlich ist.
disabled definiert, ob das Formularelement deaktiviert ist.
autofocus definiert, ob das Formularelement den Fokus erhält.
Beispiel
<form method="GET"
name="Folienauswahl">
<label for="slide">Folie:</label>
<select name="ld-slide-no" id="slide">
<option value="8">Elemente</option>
<option value="10">Attribute</option>
<option value="29">Formulare</option>
</select>
<input type="submit" value="Submit">
</form>Für weitere Informationen bzgl. Formulare siehe MDN Web Docs oder Web.dev.
HTML unterstützt verschiedene interaktive Elemente:
Anzeigen von optionalen Details mit Hilfe des <details> Elements.
<details [open]>
<summary>Abstract</summary>
<p>Password guessing ...</p>
</details>
Geschlossen - Details werden erst nach einem Klick angezeigt:
Password guessing ...
Abstract
Offen - Details werden direkt angezeigt:
Password guessing ...
Abstract
Dialoge werden mit Hilfe des <dialog> Elements erstellt. Dialoge sind spezielle Fenster, die den Fokus auf sich ziehen und die Interaktion mit dem Rest der Seite unterbrechen - falls diese modal sind.
Beispiel[4]:
<dialog>
<h1>Dialog</h1>
<p>Dialog Inhalt</p>
<button formmethod="dialog">
OK
</button>
<button autofocus>Abbrechen</button>
</dialog>Ausgewählte Zeichen können (in manchen Kontexten) nur durch HTML Entities dargestellt werden:
< durch < oder < (<)
> durch: > oder > (>)
& durch: & oder & (&)
" durch: " oder " (")
␣ durch: ( )
Die numerischen Werte sind Unicode Code Points (d.h. #60 ist der Unicode Code Point von <).
Das <iframe> Element ermöglicht das Einbetten von Webseiten in Webseiten:
<iframe src="https://www.dhbw-mannheim.de"
width="600"
height="400">
iframes are not supported</iframe>
<iframe srcdoc="
<h1>HTML</h1>
<p>HTML is a markup language.</p>"
width="600"
height="400">
iframes are not supported
</iframe>Hinzufügen von Meta-daten (<meta name="" content="">)
class Attribute
„Custom Elements“ (z. B. <my-element>)
Autoren können APIs mit Hilfe des JavaScript-Prototyping-Mechanismus erweitern
keine border Attribute auf img Elementen
keine charset Attribute auf script Elementen (utf-8 ist gefordert)
keine language Attribute auf script Elementen (JavaScript ist der Standard)
kein type Attribute auf style Elementen (text/css ist der Standard)
Nicht mehr unterstützte Elemente (Auswahl):
big
blink
center
font
marquee
nobr
tt
menuitem
...
Nicht mehr unterstützte Attribute (Auswahl):
align bei h1 bis h6 Elementen
bgcolor bei body Elementen
charset bei a und link Elementen
name bei img, option, ... Elementen
[...] Webseiten, Onlineshops, Apps, Onlinebuchungs- und Ticketdienste, Fahrkartenautomaten, Selbstbedienungs- und Zahlungsterminals, Telefon- und Messenger-Dienstleistungen sowie E-Book-Reader ab Juni 2025 barrierefrei sein müssen. Denn am 28. Juni 2025 tritt das Barrierefreiheitsstärkungsgesetz (BFSG)[5] in Kraft. [...]
[...] Diese [die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0)] regelt, wie Behörden und Ministerien Webseiten gestalten müssen. In Paragraf 3 Absatz 2 ist festgelegt, dass diese dann als barrierefrei anzusehen sind, wenn sie Normen erfüllen, die im Amtsblatt der EU genannt werden – beispielsweise die EN 301 549 oder die Web Content Accessibility Guidelines 2.1 (WCAG) des World Wide Web Consortiums.
[...] Verstöße gegen das Barrierefreiheitsstärkungsgesetz [...] muss mit einem Bußgeld bis zu 100.000 Euro rechnen. [...]
—Sept. 2024; Golem.de - Deutsche Webseiten sind versetzungsgefährdet
Einige Anforderungen[6]:
„Harte“ Kriterien
die Schrift auf einer Website wenigstens 16 Pixel groß und
Zeilen nicht mehr als 80 Zeichen lang sein sollen.
Der Abstand dazwischen soll das 1,5-Fache ihrer Höhe betragen.
Um einen ausreichenden Kontrast zu erzeugen, muss die Schrift wenigstens 4,5-mal dunkler sein als der Hintergrund.
Klickflächen schließlich müssen wenigstens 44 x 44 Pixel groß sein.
„Weiche“ Kriterien
Starke Animationen sind auf barrierefreien Seiten tabu.
das Layout der Seite außerdem einfach, logisch und auf jeder Unterseite einheitlich aufgebaut sein.
Erzeugen Sie ein HTML Dokument, das wie das Dokument auf der rechten Seite aussieht.
Nutzen Sie den HTML Validator, um zu verifizieren, dass Ihr Dokument valide ist.
Achten Sie auf eine korrekte Strukturierung des Dokuments und verwenden Sie semantische Elemente, wo immer dies sinnvoll ist. Denken Sie auch grundlegend an die Barrierefreiheit.