<!-- Intended properties of this render-hook: 1. Headings are focusable, but not from the keyboard. This allows VoiceOver to navigate to a heading from the TOC. 2. <h2> elements are followed by a section permalink, which is useful for sharing a subset of an article. 3. The page looks as similar as possible to graphical-browsers, textual browsers (e.g. Lynx), and assistive technologies. 4. Reading-mode implementations preserve headings without getting confused by the section permalinks. 5. Machine-translation works as intended with or without assistive technologies. 6. All of this applies with or without CSS. To achieve all these properties, I had to break the first rule of ARIA and misuse <aside>. I'm a markup criminal now. --> {{- $id := .Anchor | safeURL -}} {{- if eq .Level 1 -}} {{- $id = "h1" -}} {{- end -}} <h{{ .Level }} id="{{ $id }}" tabindex="-1">{{ .Text | safeHTML -}}</h{{ .Level }}> {{- if and (eq .Level 2) (.Page.Section) (ne .Page.Section "notes") -}} <!--crimes--> <aside role="none"><a href="#{{ .Anchor | safeURL }}" aria-labelledby="{{ .Anchor | safeURL }}-prefix {{ .Anchor | safeURL }}"> <span id="{{ .Anchor | safeURL }}-prefix">Permalink to section</span> </a></aside> {{- end }}