a11y folien feinschliff, input-date demo, tag-attribut demo update, synonyme
This commit is contained in:
@@ -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,13 +1273,15 @@ 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
|
||||
<input type="" />
|
||||
```
|
||||
@@ -1371,12 +1375,14 @@ Accessibility ist eingebaut
|
||||
|
||||
# Beispiel: Details/Summary
|
||||
|
||||
<small>*Akkordion · Accordion · Aufklappmenü · Collapsible · Collapsable · Expandible*</small>
|
||||
|
||||
|
||||
|
||||
```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>
|
||||
|
||||
|
||||
|
||||
```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.
|
||||
|
||||
|
||||
34
slides/223015c/assets/demos/input-date-frame.html
Normal file
34
slides/223015c/assets/demos/input-date-frame.html
Normal 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
73
slides/223015c/assets/demos/input-date.html
Normal 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
BIN
slides/223015c/assets/demos/input-date.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
@@ -3,8 +3,14 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<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>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 38 KiB |
Reference in New Issue
Block a user