ux improvements: contrast, readability, accessibility, keyboard nav

This commit is contained in:
bronku 2026-06-10 19:44:28 +02:00
parent cd3be4eba7
commit 13b5e6d1a9
6 changed files with 96 additions and 16 deletions

View file

@ -6,8 +6,8 @@ templ Album(images []string, activePage string, pages []string) {
<section>
<div id="album-grid">
for _, img := range images {
<div>
@AvifImage("album/"+img, "album", true)
<div tabindex="0" role="button" aria-label={ img }>
@AvifImage("album/"+img, img, true)
</div>
}
</div>

View file

@ -18,7 +18,8 @@ templ layout(activePage string) {
<script defer src="/album.js"></script>
</head>
<body hx-boost="true" hx-ext="preload" preload="mouseover">
<nav>
<a href="#main-content" class="sr-only">Przejdź do treści</a>
<nav aria-label="Główna nawigacja">
<div>
<a href="/">
<img src="/images/logo.svg" alt="logo"/>
@ -32,11 +33,13 @@ templ layout(activePage string) {
<a class="btn" href="#footer">Kontakt</a>
</div>
</nav>
{ children... }
<div id="main-content" tabindex="-1">
{ children... }
</div>
<footer id="footer">
<div>
<div>
<img src="/images/logo.svg" alt="logo" style="width: 14rem"/>
<img src="/images/logo.svg" alt="" style="width: 14rem"/>
<p>Pasja, natura i domowy smak w każdym kawałku ciasta.</p>
</div>
</div>
@ -186,6 +189,9 @@ templ Link(activePage, targetPage, title string) {
href={ fmt.Sprint("/", targetPage, "/") }
}
}
if activePage == targetPage {
aria-current="page"
}
>{ title }</a>
}
@ -198,6 +204,9 @@ templ GreenLink(activePage, targetPage, title string) {
href={ fmt.Sprint("/", targetPage, "/") }
}
}
if activePage == targetPage {
aria-current="page"
}
class="btn-green"
>{ title }</a>
}
@ -206,7 +215,7 @@ templ subnavHeader(title, description string) {
<header class="subnav">
<h1>{ title }</h1>
<p>{ description }</p>
<nav>
<nav aria-label="Kategorie">
{ children... }
</nav>
</header>

View file

@ -176,29 +176,29 @@ templ WyrobyTorty() {
</header>
<div>
<div>
<h4>Karmel-jogurt-migdały</h4>
<h3>Karmel-jogurt-migdały</h3>
<p>mus z karmelizowanej białej czekolady, chrupiąca warstwa migdałowa, ganache jogurtowy</p>
</div>
<div>
<h4>Mango-marakuja-truskawka</h4>
<h3>Mango-marakuja-truskawka</h3>
<p>
spód migdałowy, galaretka mango-marakuja, żelka truskawkowa, krem diplomat
kokosowo-waniliowy
</p>
</div>
<div>
<h4>Czekolada-malina-jeżyna</h4>
<h3>Czekolada-malina-jeżyna</h3>
<p>
biszkopt jogurtowy, chrupiąca warstwa czekoladowa, żelka jeżynowa, krem malinowy, mus
czekoladowy
</p>
</div>
<div>
<h4>Whisky-mango</h4>
<h3>Whisky-mango</h3>
<p>brownie, krem mango, ganache czekoladowe , mus whisky</p>
</div>
<div>
<h4>Kawa-orzech ziemny</h4>
<h3>Kawa-orzech ziemny</h3>
<p>biszkopt, karmelizowane orzeszki ziemne, namelaka z masłem orzechowym, kawowy mus</p>
</div>
</div>