public/uni
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a11y folien feinschliff, input-date demo, tag-attribut demo update, synonyme

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-21 23:32:30 +02:00
parent 67857b9bfd
commit 80786cb040
6 changed files with 131 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
slides/223015c/01-geschichte-grundlagen-html.md
View File

@@ -1202,9 +1202,10 @@ Formattierungssprache
```html
<html>
<head>
<title>Im Browsertab als Überschrift sichtbar</title>
<meta name="description" content="" />
<title>HdM Webseite - Hochschule der Medien</title>
<meta name="description" content="Studieren. Wissen. Machen." />
<meta name="og:image" content="https://...." />
...
</head>
...
</html>
@@ -1263,7 +1264,8 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
```html
<body>
<p class="wichtig">Das ist ein Absatz.</p>
<p class="wichtig">Das ist ein wichtiger Absatz.</p>
<p>Das ist ein gewöhnlicher Absatz.</p>
</body>
```
@@ -1271,12 +1273,14 @@ Steuert die Vorschau beim Teilen auf Mastodon, LinkedIn, Signal, MS Teams, Slack
|------|-------------|
| `<p>` | Opening Tag (öffnendes Tag) |
| `class="wichtig"` | Attribut |
| `Das ist ein Absatz.` | Inhalt |
| `Das ist ein wichtiger Absatz.` | Inhalt |
| `</p>` | Closing Tag (schließendes Tag) |
---
# HTML-Tags und Attribute (selbst-schließend)
# HTML-Tags und Attribute (selbst-schließend)
![bg right:35%](./assets/demos/input-date.png)
```html
<input type="" />
@@ -1371,12 +1375,14 @@ Accessibility ist eingebaut
# Beispiel: Details/Summary
<small>*Akkordion · Accordion · Aufklappmenü · Collapsible · Collapsable · Expandible*</small>
![bg right:35%](./assets/demos/details-closed.png)
```html
<details>
<summary>Klick mich!</summary>
<p>Dieser Text war versteckt.</p>
<p>Dieser Text ist versteckt.</p>
</details>
```
@@ -1429,6 +1435,8 @@ Accessibility ist eingebaut
# Beispiel: Dialog
<small>*Modal · Modales Fenster · Popup · Popup-Fenster · Overlay · Dialogfenster*</small>
![bg right:35%](./assets/demos/dialog.png)
```html
@@ -1506,11 +1514,6 @@ Accessibility ist eingebaut
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->
# Wie nutzen Menschen das Web?
| Eingabe | Nutzungsweise |
@@ -1543,9 +1546,10 @@ PRÜFUNGSRELEVANT: Arten von Einschränkungen, Screenreader-Beispiele, WCAG
---
<!-- _class: erklaerung -->
<!-- _class: "erklaerung klausur" -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->
# Web-Zugänglichkeit – Vertiefung
@@ -1570,11 +1574,6 @@ Screenreader lesen den DOM sequenziell – semantisches HTML (`<nav>`, `<main>`,
---
<!-- _class: klausur -->
<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _backgroundColor: #fce4ec -->
# Warum "Barrierefreiheit"?
**Rechtlich:**
@@ -1769,11 +1768,7 @@ div-Button braucht JavaScript für Enter/Space
---
<!-- _class: erklaerung -->
<!-- _header: '' -->
<!-- _footer: '' -->
# Barrierefreiheit testen – Vertiefung
# Barrierefreiheit testen
Automatisierte Tests finden nur ~30% der Barrierefreiheitsprobleme. Der Rest erfordert manuelles Testen und idealerweise echte NutzerInnen mit Behinderungen.