a11y: Skip-Link für Keyboard-Navigation (Redesign Phase D)
- Skip-Link "Zum Inhalt springen" als erstes Element im App-Shell - .sr-only:focus-visible CSS: sichtbar bei Tab-Focus, fixed top-left Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -145,6 +145,7 @@ async function renderPage(route) {
|
|||||||
*/
|
*/
|
||||||
function renderAppShell(container) {
|
function renderAppShell(container) {
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
|
<a href="#page-content" class="sr-only">Zum Inhalt springen</a>
|
||||||
<nav class="nav-sidebar" aria-label="Hauptnavigation">
|
<nav class="nav-sidebar" aria-label="Hauptnavigation">
|
||||||
<div class="nav-sidebar__logo"><span>Oikos</span></div>
|
<div class="nav-sidebar__logo"><span>Oikos</span></div>
|
||||||
<div class="nav-sidebar__items" role="list">
|
<div class="nav-sidebar__items" role="list">
|
||||||
|
|||||||
@@ -1235,3 +1235,24 @@
|
|||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* --------------------------------------------------------
|
||||||
|
* Skip-Link (sichtbar bei Keyboard-Focus)
|
||||||
|
* -------------------------------------------------------- */
|
||||||
|
.sr-only:focus-visible {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 9999;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: var(--space-2) var(--space-4);
|
||||||
|
margin: 0;
|
||||||
|
clip: auto;
|
||||||
|
white-space: normal;
|
||||||
|
overflow: visible;
|
||||||
|
background: var(--color-accent);
|
||||||
|
color: #fff;
|
||||||
|
font-size: var(--text-sm);
|
||||||
|
border-radius: 0 0 var(--radius-sm) 0;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user