fmaury/seirdy.one
1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 21:02:09 +00:00
Code Issues Projects Releases Wiki Activity

Emphasize current section in navbar

Browse source 
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:
Rohan Kumar 2022-04-18 19:54:40 -07:00
parent 1391b93dd0
commit 83b4f32d0b
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 17 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/css/main.css
View file

@ -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 */ * in a way beyond font-face; at least two visual distinctions needed */
a[aria-current="page"],
kbd { kbd {
font-weight: bold; font-weight: bold;
} }
@ -207,13 +205,21 @@ a:focus,
outline: 3px solid; 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 { .skip {
position: absolute; position: absolute;
top: -2em; top: -2em;
left: .25em; 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; color: #00e;
background-color: #fff; background-color: #fff;
} }
.skip:focus { .skip:focus {
top: .5em; top: .5em;
} }

10
layouts/partials/header.html
View file

@ -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> <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> </li>
{{ range .Site.Menus.main -}} {{ range .Site.Menus.main -}}
{{ $isCurrent := false }}
<li itemscope itemtype="https://schema.org/SiteNavigationElement"> <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 -}}> <a href="{{ .URL }}" itemprop="url" {{- if or (eq $currentPage.RelPermalink .URL) ($currentPage.HasMenuCurrent "main" .) -}}{{- $isCurrent = true -}} aria-current="page"{{- end -}}>
<span itemprop="name">{{- .Name -}}</span></a> {{- if or $isCurrent (eq $currentPage.Section .Title) -}}
<strong itemprop="name">{{- .Name -}}</strong>
{{- else -}}
<span itemprop="name">{{- .Name -}}</span>
{{- end -}}
</a>
</li> </li>
{{- end }} {{- end }}
</ul> </ul>