add contrast-levels demo, wave-tab-order image, link a11y tools, mark axe as paid/pro
This commit is contained in:
BIN
slides/223015c/assets/a11y-bahnsee.png
Normal file
BIN
slides/223015c/assets/a11y-bahnsee.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 164 KiB |
34
slides/223015c/assets/demos/contrast-levels-frame.html
Normal file
34
slides/223015c/assets/demos/contrast-levels-frame.html
Normal file
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Preview: Kontrast</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/contrast.html</span>
|
||||
</div>
|
||||
<iframe src="./contrast-levels.html"></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
97
slides/223015c/assets/demos/contrast-levels.html
Normal file
97
slides/223015c/assets/demos/contrast-levels.html
Normal file
@@ -0,0 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Kontrast-Stufen</title>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; padding: 1.2rem; margin: 0; }
|
||||
.row {
|
||||
background: #fff;
|
||||
padding: 14px 16px;
|
||||
margin-bottom: 10px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e5e7eb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 14px;
|
||||
}
|
||||
.sample {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
}
|
||||
.meta {
|
||||
text-align: right;
|
||||
font-size: 0.85rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ratio {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-weight: 700;
|
||||
font-size: 0.95rem;
|
||||
color: #1a1a2e;
|
||||
}
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 3px;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
margin-top: 4px;
|
||||
}
|
||||
.fail { background: #fee2e2; color: #991b1b; }
|
||||
.aa-large { background: #fed7aa; color: #7c2d12; }
|
||||
.aa { background: #dcfce7; color: #166534; }
|
||||
.aaa { background: #bbf7d0; color: #14532d; }
|
||||
.hint {
|
||||
margin-top: 14px;
|
||||
font-size: 0.78rem;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
text-align: right;
|
||||
}
|
||||
.hint a { color: #d63384; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #aaaaaa;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">2.3:1</div>
|
||||
<span class="badge fail">✗ Fail</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #949494;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">3:1</div>
|
||||
<span class="badge aa-large">AA Large</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #767676;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">4.5:1</div>
|
||||
<span class="badge aa">✓ AA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #595959;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">7:1</div>
|
||||
<span class="badge aaa">✓ AAA</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="background: #fff;">
|
||||
<div class="sample" style="color: #1a1a1a;">Barrierefrei lesen</div>
|
||||
<div class="meta">
|
||||
<div class="ratio">16:1</div>
|
||||
<span class="badge aaa">✓ AAA+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hint">Check: webaim.org/resources/contrastchecker</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
slides/223015c/assets/demos/contrast-levels.png
Normal file
BIN
slides/223015c/assets/demos/contrast-levels.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
BIN
slides/223015c/assets/wave-tab-order.png
Normal file
BIN
slides/223015c/assets/wave-tab-order.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
Reference in New Issue
Block a user