ux improvements: contrast, readability, accessibility, keyboard nav
This commit is contained in:
parent
cd3be4eba7
commit
13b5e6d1a9
6 changed files with 96 additions and 16 deletions
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue