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

add html/css demos for 223015c chapter 1: html basics, widgets, a11y

Browse Source
This commit is contained in:
Michael Czechowski
2026-04-20 10:44:12 +02:00
parent 558d0e5ecd
commit a2934f1327
33 changed files with 566 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
slides/223015c/assets/demos/a11y-semantic.html Normal file
View File

@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>div vs button</title>
<style>
body { font-family: system-ui, sans-serif; padding: 1.2rem; }
h3 { margin: 0.8rem 0 0.4rem; font-size: 1rem; }
.bad { color: #b91c1c; }
.good { color: #15803d; }
.button {
display: inline-block;
background: #e5e7eb;
border: 1px solid #9ca3af;
padding: 6px 14px;
cursor: pointer;
border-radius: 4px;
}
button { font: inherit; padding: 6px 14px; }
</style>
</head>
<body>
<h3 class="bad">Schlecht (div)</h3>
<div class="button" onclick="alert('!')">Klick mich</div>
<p><small>❌ Tab überspringt, kein Enter, kein Screenreader</small></p>
<h3 class="good">Gut (button)</h3>
<button type="button">Klick mich</button>
<p><small>✅ Tastatur + Screenreader eingebaut</small></p>
</body>
</html>