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

34
slides/223015c/assets/demos/input-date-frame.html Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Preview: Input Date</title>
<style>
:root {
--hl: #d63384;
--dark: #0f0f23;
--chrome: #1a1a2e;
--muted: #4a4a6a;
}
html, body { margin: 0; padding: 0; background: var(--dark); font-family: system-ui, -apple-system, sans-serif; }
.browser { box-sizing: border-box; width: 100vw; min-height: 100vh; padding: 18px; }
.window { background: #fff; border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.35); overflow: hidden; border: 2px solid var(--hl); }
.chrome { background: var(--chrome); border-bottom: 2px solid var(--hl); padding: 10px 14px; display: flex; align-items: center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 50%; opacity: 0.9; }
.r { background: #ff5f56; } .y { background: #ffbd2e; } .g { background: #27c93f; }
.url { flex: 1; margin-left: 12px; background: var(--dark); border: 1px solid var(--hl); border-radius: 6px; padding: 5px 10px; font: 12px/1.3 ui-monospace, "SF Mono", Menlo, monospace; color: var(--hl); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
</style>
</head>
<body>
<div class="browser">
<div class="window">
<div class="chrome">
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
<span class="url">file:///beispiel/input.html</span>
</div>
<iframe src="./input-date.html"></iframe>
</div>
</div>
</body>
</html>

73
slides/223015c/assets/demos/input-date.html Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Input Date</title>
<style>
body { font-family: system-ui, -apple-system, sans-serif; padding: 1.4rem; margin: 0; background: #fff; }
label { display: block; font-size: 0.95rem; color: #374151; margin-bottom: 8px; font-weight: 600; }
input[type=date] {
font: 1.15rem system-ui, sans-serif;
padding: 10px 12px;
border: 1.5px solid #d1d5db;
border-radius: 6px;
background: #fff;
box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.15);
border-color: #d63384;
margin-bottom: 16px;
}
.picker {
width: 320px;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
overflow: hidden;
font-size: 0.9rem;
}
.picker-head {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 14px;
border-bottom: 1px solid #e5e7eb;
font-weight: 600;
}
.picker-head button {
border: 0; background: transparent; font-size: 1rem; padding: 4px 8px; cursor: pointer; color: #6b7280;
}
.dow, .grid {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
padding: 6px 10px;
}
.dow { font-size: 0.75rem; color: #6b7280; font-weight: 600; text-align: center; padding-bottom: 2px; }
.grid { padding-top: 0; padding-bottom: 14px; }
.grid div {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 50%; font-variant-numeric: tabular-nums;
}
.grid .muted { color: #d1d5db; }
.grid .today { background: #fce7f3; color: #d63384; font-weight: 700; }
.grid .sel { background: #d63384; color: #fff; font-weight: 700; }
.grid div:hover:not(.muted):not(.sel) { background: #f3f4f6; }
</style>
</head>
<body>
<label for="d">Geburtsdatum</label>
<input type="date" id="d" value="2026-04-21" />
<div class="picker" aria-hidden="true">
<div class="picker-head">
<button>‹</button>
<span>April 2026</span>
<button>›</button>
</div>
<div class="dow"><div>Mo</div><div>Di</div><div>Mi</div><div>Do</div><div>Fr</div><div>Sa</div><div>So</div></div>
<div class="grid">
<div class="muted">30</div><div class="muted">31</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
<div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div>
<div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div>
<div>20</div><div class="sel">21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div>
<div>27</div><div>28</div><div>29</div><div>30</div><div class="muted">1</div><div class="muted">2</div><div class="muted">3</div>
</div>
</div>
</body>
</html>

BIN
slides/223015c/assets/demos/input-date.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 66 KiB

8
slides/223015c/assets/demos/tag-attribut.html
View File

@@ -3,8 +3,14 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Tag mit Attribut</title> <title>Tag mit Attribut</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; margin: 0; font-size: 1.1rem; line-height: 1.5; }
.wichtig { color: #d63384; font-weight: 700; font-size: 1.3rem; background: #fce7f3; padding: 8px 12px; border-left: 4px solid #d63384; border-radius: 4px; }
p { margin: 0 0 16px 0; }
</style>
</head> </head>
<body> <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> </body>
</html> </html>

BIN
slides/223015c/assets/demos/tag-attribut.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 38 KiB