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

Put TOC heading inside the TOC <nav>

Browse source 
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:
Rohan Kumar 2022-04-09 08:51:10 -07:00
parent 97d9cdeb63
commit 41b66d8ceb
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
3 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
content/posts/website-best-practices.md
View file

@ -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.
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>
{{<picture name="touch_targets" alt="Phone screen with three \"touch target\" rectangles on top of each other, separated by blank sections labeled \"space\"">}}

9
layouts/partials/processed-content.html
View file

@ -1,18 +1,25 @@
{{ if .Params.footnote_heading -}}
<!--Add heading to footnotes-->
{{ $references := `(<section class="footnotes" role="doc-endnotes">
<hr>)` -}}
{{ $heading := .Params.footnote_heading -}}
{{ $referencesWithHeading := printf `<section role="doc-endnotes" aria-labelledby="note-hd">
<h2 id="note-hd">%s</h2>` ($heading) -}}
<!--Remove deprecated DPUB-ARIA role-->
{{ $endnote := `(role="doc-endnote")` }}
{{ $noEndnote := printf "" }}
<!--Add tabindex to all <pre> elements, inc. those that aren't generated by Goldmark-->
{{ $preWithoutTabIndex := `<pre>` }}
{{ $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 -}}
{{ .Content -}}
{{ end -}}

3
layouts/shortcodes/toc.html
View file

@ -1,6 +1,5 @@
<aside>
<section role="doc-toc">
<h2 id="toc">Table of Contents</h2>
{{.Page.TableOfContents}}
<h2>Table of Contents</h2>{{.Page.TableOfContents}}
</section>
</aside>