mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-24 01:42:10 +00:00
Emphasize current section in navbar
WCAG recommends telling visitors about their current place in a site's hierarchy. All pages are exactly zero or one level below a section, so simply emphasizing a member of the navigation links should be sufficient.
This commit is contained in:
parent
1391b93dd0
commit
83b4f32d0b
2 changed files with 17 additions and 5 deletions
|
@ -81,10 +81,8 @@ h1 {
|
|||
}
|
||||
}
|
||||
|
||||
/* WCAG guidelines recommend signalling the current page.
|
||||
* <kbd> should be distinguished from <code> and surrounding text
|
||||
/* <kbd> should be distinguished from <code> and surrounding text
|
||||
* in a way beyond font-face; at least two visual distinctions needed */
|
||||
a[aria-current="page"],
|
||||
kbd {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
@ -207,13 +205,21 @@ a:focus,
|
|||
outline: 3px solid;
|
||||
}
|
||||
|
||||
/* Skip link is hidden until focused.
|
||||
* Needs background color so it can appear over other elements on narrow
|
||||
* screens. If we set a background color, we must also set a foreground
|
||||
* color. System colors like Canvas and LinkText aren't supported by all
|
||||
* browsers, so we make up our own. */
|
||||
.skip {
|
||||
position: absolute;
|
||||
top: -2em;
|
||||
left: .25em;
|
||||
/* #06c is the default link color in FF, IE, and ux.redhat.com
|
||||
* #00e is the default in WebKit, Blink, and ancient FF. */
|
||||
color: #00e;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.skip:focus {
|
||||
top: .5em;
|
||||
}
|
||||
|
|
|
@ -7,9 +7,15 @@
|
|||
<a rel="home" itemprop="url" href="{{ .Site.BaseURL }}"{{- if eq $currentPage.Permalink .Site.BaseURL -}} aria-current="page"{{- end -}}><span itemprop="name">{{ .Site.Title }}</span></a>
|
||||
</li>
|
||||
{{ range .Site.Menus.main -}}
|
||||
{{ $isCurrent := false }}
|
||||
<li itemscope itemtype="https://schema.org/SiteNavigationElement">
|
||||
<a href="{{ .URL }}" itemprop="url" {{- if or (eq $currentPage.RelPermalink .URL) ($currentPage.HasMenuCurrent "main" .) -}} aria-current="page"{{- end -}}>
|
||||
<span itemprop="name">{{- .Name -}}</span></a>
|
||||
<a href="{{ .URL }}" itemprop="url" {{- if or (eq $currentPage.RelPermalink .URL) ($currentPage.HasMenuCurrent "main" .) -}}{{- $isCurrent = true -}} aria-current="page"{{- end -}}>
|
||||
{{- if or $isCurrent (eq $currentPage.Section .Title) -}}
|
||||
<strong itemprop="name">{{- .Name -}}</strong>
|
||||
{{- else -}}
|
||||
<span itemprop="name">{{- .Name -}}</span>
|
||||
{{- end -}}
|
||||
</a>
|
||||
</li>
|
||||
{{- end }}
|
||||
</ul>
|
||||
|
|
Loading…
Reference in a new issue