mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 08:12:11 +00:00
Put TOC heading inside the TOC <nav>
Putting the heading in the navigation element makes the structure more logical and matches the behavior of most other websites. Move it before the introduction in my web best practices post.
This commit is contained in:
parent
97d9cdeb63
commit
41b66d8ceb
3 changed files with 10 additions and 4 deletions
|
@ -930,7 +930,7 @@ There's an ideal range somewhere between "cramped" and "spaced-apart" content. F
|
||||||
|
|
||||||
Excessive indentation can [make reading difficult](#indented-elements) for narrow viewports, but preserving some indentation is still useful.
|
Excessive indentation can [make reading difficult](#indented-elements) for narrow viewports, but preserving some indentation is still useful.
|
||||||
|
|
||||||
For now, I've decided to keep the indents on list elements (`<ol>`, `<dl>`, `<ul>`) since I often fill them with links (see this article's [table of contents](#toc) for an example). This indentation provides important non-interactive negative space. Readers with hand tremors [depend on this space](https://axesslab.com/hand-tremors/) to scroll without accidentally selecting an interactive element. Readers who double-tap to jump or zoom can't do so if there's no screen region that's "safe to tap".
|
For now, I've decided to keep the indents on list elements (`<ol>`, `<dl>`, `<ul>`) since I often fill them with links (see this article's [table of contents](#TableOfContents) for an example). This indentation provides important non-interactive negative space. Readers with hand tremors [depend on this space](https://axesslab.com/hand-tremors/) to scroll without accidentally selecting an interactive element. Readers who double-tap to jump or zoom can't do so if there's no screen region that's "safe to tap".
|
||||||
|
|
||||||
<figure>
|
<figure>
|
||||||
{{<picture name="touch_targets" alt="Phone screen with three \"touch target\" rectangles on top of each other, separated by blank sections labeled \"space\"">}}
|
{{<picture name="touch_targets" alt="Phone screen with three \"touch target\" rectangles on top of each other, separated by blank sections labeled \"space\"">}}
|
||||||
|
|
|
@ -1,18 +1,25 @@
|
||||||
{{ if .Params.footnote_heading -}}
|
{{ if .Params.footnote_heading -}}
|
||||||
|
|
||||||
|
<!--Add heading to footnotes-->
|
||||||
{{ $references := `(<section class="footnotes" role="doc-endnotes">
|
{{ $references := `(<section class="footnotes" role="doc-endnotes">
|
||||||
<hr>)` -}}
|
<hr>)` -}}
|
||||||
{{ $heading := .Params.footnote_heading -}}
|
{{ $heading := .Params.footnote_heading -}}
|
||||||
{{ $referencesWithHeading := printf `<section role="doc-endnotes" aria-labelledby="note-hd">
|
{{ $referencesWithHeading := printf `<section role="doc-endnotes" aria-labelledby="note-hd">
|
||||||
<h2 id="note-hd">%s</h2>` ($heading) -}}
|
<h2 id="note-hd">%s</h2>` ($heading) -}}
|
||||||
|
|
||||||
|
<!--Remove deprecated DPUB-ARIA role-->
|
||||||
{{ $endnote := `(role="doc-endnote")` }}
|
{{ $endnote := `(role="doc-endnote")` }}
|
||||||
{{ $noEndnote := printf "" }}
|
{{ $noEndnote := printf "" }}
|
||||||
|
|
||||||
|
<!--Add tabindex to all <pre> elements, inc. those that aren't generated by Goldmark-->
|
||||||
{{ $preWithoutTabIndex := `<pre>` }}
|
{{ $preWithoutTabIndex := `<pre>` }}
|
||||||
{{ $preWithTabIndex := `<pre tabindex="0">` }}
|
{{ $preWithTabIndex := `<pre tabindex="0">` }}
|
||||||
|
|
||||||
{{ .Content | replaceRE $references $referencesWithHeading | replaceRE $endnote $noEndnote | replaceRE $preWithoutTabIndex $preWithTabIndex | safeHTML -}}
|
<!--Move the Table of Contents heading *inside* the <nav> element-->
|
||||||
|
{{ $tocHeadingOutside := `<h2>Table of Contents</h2><nav id="TableOfContents">` }}
|
||||||
|
{{ $tocHeadingInside := `<nav id=TableOfContents><h2>Table of Contents</h2>` }}
|
||||||
|
|
||||||
|
{{ .Content | replaceRE $references $referencesWithHeading | replaceRE $endnote $noEndnote | replaceRE $preWithoutTabIndex $preWithTabIndex | replaceRE $tocHeadingOutside $tocHeadingInside | safeHTML -}}
|
||||||
{{ else -}}
|
{{ else -}}
|
||||||
{{ .Content -}}
|
{{ .Content -}}
|
||||||
{{ end -}}
|
{{ end -}}
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
<aside>
|
<aside>
|
||||||
<section role="doc-toc">
|
<section role="doc-toc">
|
||||||
<h2 id="toc">Table of Contents</h2>
|
<h2>Table of Contents</h2>{{.Page.TableOfContents}}
|
||||||
{{.Page.TableOfContents}}
|
|
||||||
</section>
|
</section>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
Loading…
Reference in a new issue