From ca388d68f519b30c98b4c5e7a760bef30415612b Mon Sep 17 00:00:00 2001
From: Rohan Kumar <seirdy@seirdy.one>
Date: Sun, 7 Aug 2022 17:52:35 -0700
Subject: [PATCH] Add section "against focusable containers"

Explain why making sectioning content focusable ruins tab order.
---
 assets/p/focus-container.avif            | Bin 0 -> 4159 bytes
 assets/p/focus-container.png             | Bin 0 -> 9291 bytes
 assets/p/focus-container.webp            | Bin 0 -> 5744 bytes
 assets/p/focus-container_dark.png        | Bin 0 -> 7686 bytes
 assets/p/focus-container_dark.webp       | Bin 0 -> 4424 bytes
 content/posts/website-best-practices.gmi |  17 +++++-
 content/posts/website-best-practices.md  |  65 +++++++++++++++--------
 7 files changed, 58 insertions(+), 24 deletions(-)
 create mode 100644 assets/p/focus-container.avif
 create mode 100644 assets/p/focus-container.png
 create mode 100644 assets/p/focus-container.webp
 create mode 100644 assets/p/focus-container_dark.png
 create mode 100644 assets/p/focus-container_dark.webp

diff --git a/assets/p/focus-container.avif b/assets/p/focus-container.avif
new file mode 100644
index 0000000000000000000000000000000000000000..33870ec1c2f99a2d5f395b012c570f8c5f18221c
GIT binary patch
literal 4159
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

literal 0
HcmV?d00001

diff --git a/assets/p/focus-container.png b/assets/p/focus-container.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8654111b6d77ec362c2c878242e5410da3e1802
GIT binary patch
literal 9291
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

literal 0
HcmV?d00001

diff --git a/assets/p/focus-container.webp b/assets/p/focus-container.webp
new file mode 100644
index 0000000000000000000000000000000000000000..fab8bd8f52161124dd3484cb78932163b8874022
GIT binary patch
literal 5744
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

literal 0
HcmV?d00001

diff --git a/assets/p/focus-container_dark.png b/assets/p/focus-container_dark.png
new file mode 100644
index 0000000000000000000000000000000000000000..bb0e3d69ece2a7b387c75a3a8c0ee8844cbb6593
GIT binary patch
literal 7686
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
aKjzBspBqU(5;==qke!Xw*$-A%AO9OYU|+)k

literal 0
HcmV?d00001

diff --git a/assets/p/focus-container_dark.webp b/assets/p/focus-container_dark.webp
new file mode 100644
index 0000000000000000000000000000000000000000..97f6844f08af24362fcb7c9d5ea93ca79d4b2059
GIT binary patch
literal 4424
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
OU+>_TDc3vr4bTWKu8*Do

literal 0
HcmV?d00001

diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi
index 8938220..f23f35d 100644
--- a/content/posts/website-best-practices.gmi
+++ b/content/posts/website-best-practices.gmi
@@ -814,6 +814,22 @@ The background region of the visible issue is interactive, and so are its conten
 
 Someone using the GitHub issues interface for the first time will struggle to identify interactive regions and discern whether they trigger navigations or different actions.
 
+### Against focusable containers
+
+Screen readers like iOS VoiceOver fail to follow in-page links whose targets are not focusable. Designers often work around this by annotating link targets with the `tabindex="-1"` HTML attribute. This is a good idea when a link target is a heading or piece of phrasing content.
+
+=> https://html.spec.whatwg.org/dev/dom.html#phrasing-content Phrasing content defined by the HTML Living Standard
+
+Unfortunately, making large containers focusable ruins keyboard-navigability.
+
+Normally, if you select some text in a page and press Tab, the tab-focusable element after the selected text will receive focus. However, if the selectable text is inside a focusable container—even a container with a negative tabindex—pressing Tab will move focus to the start of the container. If you’re reading this on a desktop browser, you can experience this first-hand: select some text in this paragraph and press Tab. Then, do the same in this snapshot of an excellent Smashing Magazine article:
+=> https://web.archive.org/web/20220808163715/https://www.smashingmagazine.com/2022/06/voice-control-usability-considerations-partially-visually-hidden-link-names/ Smashing Magazine: Voice Control Usability Considerations For Partially Visually Hidden Link Names (Wayback Machine snapshot)
+
+=> gemini://seirdy.one/misc/focus-container.png Two screenshots of an article byline above a title. First, the title has selected text; then, the byline is focused.
+This image shows two screenshots of the aforementioned Smashing Magazine article after I selected the title text, before and after pressing Tab. The focus moves backwards to the start of the container because the container is focusable. The focus should have moved to an element after the selected text.
+
+This behavior is particularly frustrating on long pages. Imagine if pressing Tab took you to the start of this article!
+
 ## Image optimization
 
 Some image optimization tools I use:
@@ -1528,7 +1544,6 @@ This article is, and will probably always be, an ongoing work-in-progress. Some
 * Ways to support non-mainstream and older browsers by supporting subsets of specifications and using progressive enhancement.
 * Avoiding "_blank" targets in URLs unless absolutely necessary.
 * Spatial navigation
-* Why in-page links should generally point to phrasing content rather than sections (pointing to sections messes with tab order).
 * The principle of redundant coding
 * Ways to improve comprehension by readers who struggle to understand non-literal language (certain manifestations of cognitive disabilities, non-native speakers unfamiliar with idioms, etc.). I might wait until this WAI- draft specification matures and its vocabularies gain adoption before going in depth:
 => https://www.w3.org/TR/adapt-help/ WAI-Adapt: Help and Support Module
diff --git a/content/posts/website-best-practices.md b/content/posts/website-best-practices.md
index eaee189..32fed1f 100644
--- a/content/posts/website-best-practices.md
+++ b/content/posts/website-best-practices.md
@@ -887,6 +887,23 @@ Screenshot of the <a href="https://github.com/nihui/waifu2x-ncnn-vulkan/issues">
 
 Someone using the GitHub issues interface for the first time will struggle to identify interactive regions and discern whether they trigger navigations or different actions.
 
+### Against focusable containers
+
+Screen readers like iOS VoiceOver[^22] fail to follow in-page links whose targets are not focusable. Designers often work around this by annotating link targets with the `tabindex="-1"` HTML attribute. This is a good idea when a link target is a heading or piece of [phrasing content](https://html.spec.whatwg.org/dev/dom.html#phrasing-content). Unfortunately, making large containers focusable ruins keyboard-navigability.
+
+Normally, if you select some text in a page and press <kbd>Tab</kbd>, the tab-focusable element _after_ the selected text will receive focus. However, if the selectable text is inside a focusable container---even a container with a negative `tabindex`---pressing <kbd>Tab</kbd> will move focus to the _start_ of the container. If you're reading this on a desktop browser, you can experience this first-hand: select some text in this paragraph and press <kbd>Tab</kbd>. Then, do the same in [this snapshot of an excellent _Smashing Magazine_ article](https://web.archive.org/web/20220808163715/https://www.smashingmagazine.com/2022/06/voice-control-usability-considerations-partially-visually-hidden-link-names/).[^23]
+
+{{<image-figure id="focus-container">}} {{<picture name="focus-container" alt="Two screenshots of an article byline above a title. First, the title has selected text; then, the byline is focused.">}}
+
+<figcaption itemprop="caption">
+
+Two screenshots of [the aforementioned _Smashing Magazine_ article](https://web.archive.org/web/20220808163715/https://www.smashingmagazine.com/2022/06/voice-control-usability-considerations-partially-visually-hidden-link-names/) after I selected the title text, before and after pressing <kbd>Tab</kbd>. The focus moves _backwards_ to the start of the container because the container is focusable. The focus should have moved to an element after the selected text.
+
+</figcaption>
+{{</image-figure>}}
+
+This behavior is particularly frustrating on long pages. Imagine if pressing <kbd>Tab</kbd> took you to the start of this article!
+
 Image optimization {#image-optimization}
 ------------------
 
@@ -906,7 +923,7 @@ Some image optimization tools I use:
 : The reference WebP encoder; has dedicated lossless and lossy modes. Lossy WebP compression isn't always better than JPEG, but lossless WebP consistently beats PNG.
 
 `avifenc`
-: The reference AVIF encoder, included in [libavif](https://github.com/AOMediaCodec/libavif).[^22] AVIF lossless compression is typically useless, but its lossy compression is pretty unique in that it leans towards detail removal rather than introducing compression artifacts. Note that AVIF is not supported by Safari or most WebKit-based browsers. It also seems unsupported in Microsoft Edge.[^23]
+: The reference AVIF encoder, included in [libavif](https://github.com/AOMediaCodec/libavif).[^24] AVIF lossless compression is typically useless, but its lossy compression is pretty unique in that it leans towards detail removal rather than introducing compression artifacts. Note that AVIF is not supported by Safari or most WebKit-based browsers. It also seems unsupported in Microsoft Edge.[^25]
 
 I put together [a quick script](https://git.sr.ht/~seirdy/dotfiles/tree/3b722a843f3945a1bdf98672e09786f0213ec6f6/Executables/shell-scripts/bin/optimize-image) to losslessly optimize images using these programs. For lossy compression, I typically use [GNU Parallel](https://www.gnu.org/software/parallel/) to mass-generate images using different options before selecting the smallest image at the minimum acceptable quality. Users who'd rather avoid the command line while performing lossy compression can instead check out [Squoosh](https://squoosh.app/), a JavaScript app that bundles Web&shy;Assembly-compiled encoders; I've heard good things about it.
 
@@ -1024,7 +1041,7 @@ The first or second heading in the DOM, and the highest heading level, should be
 
 Remember that not all landmarks are announced by screen readers; for instance, many screen readers don't announce the ending of a `<header>` element in an article. An `<hr>` element is a good way to force the ending of a landmark to be visible: it introduces a thematic break between sections that is visible to assistive technologies and user-agents that don't support CSS.
 
-Consider adding a "skip link" if some pages require many <kbd>Tab</kbd> keystrokes to reach the main content.[^24] Visually-impaired users generally prefer navigating by headings or landmarks, but screen reader beginners and motor-impaired users still benefit from a skip link. Skip links are especially helpful when pure heading- and landmark-based navigation isn't optimal.
+Consider adding a "skip link" if some pages require many <kbd>Tab</kbd> keystrokes to reach the main content.[^26] Visually-impaired users generally prefer navigating by headings or landmarks, but screen reader beginners and motor-impaired users still benefit from a skip link. Skip links are especially helpful when pure heading- and landmark-based navigation isn't optimal.
 
 If your skip link toggles visibility states when focused, ensure that it doesn't move any existing content; see [the "Layout shifts" section](#layout-shifts) for more details. If it appears over existing content, it needs to have a solid background; if you set the background color, set a foreground color too as described in [the "About custom colors" section](#about-custom-colors).
 
@@ -1034,7 +1051,7 @@ Users of <abbr title="assistive technology">AT</abbr>s such as screen readers pr
 
 Try using a tool to view a list of all your link names. Just about every screen reader and some browser extensions should offer this functionality. Minimize links with ambiguous names, and ensure that identical link names have identical destinations.
 
-Think twice before placing important content immediately after skippable content such as nested landmarks, long code snippets, figures, and large lists. AT users who wish to skip content may jump directly to the next heading, glossing over anything between the skippable content and subsequent heading; this is especially common on mobile devices.[^25] When it makes sense to do so, place skippable content in its own sections and/or at the end of its parent section.
+Think twice before placing important content immediately after skippable content such as nested landmarks, long code snippets, figures, and large lists. AT users who wish to skip content may jump directly to the next heading, glossing over anything between the skippable content and subsequent heading; this is especially common on mobile devices.[^27] When it makes sense to do so, place skippable content in its own sections and/or at the end of its parent section.
 
 ### Single-column layout
 
@@ -1123,7 +1140,7 @@ Users employing machine translation will not benefit from your soft hyphens, so
 
 Where long inline `<code>` elements can trigger horizontal scrolling, consider a scrollable `<pre>` element instead. Making a single element horizontally scrollable is far better than making the entire page scrollable in two dimensions. Hard-wrap code blocks so that they won't horizontally scroll in most widescreen desktop browsers.
 
-Be sure to test your hyphens with NVDA or Windows Narrator: these screen readers' pronunciation of words can be disrupted by poorly-placed hyphens. Balancing the need to adapt to narrow screens against the need to sound correctly to a screen reader is a complex matter.[^26] The best place to insert a hyphen is between compound words. For example, splitting "Firefighter" into "Fire-fighter" is quite safe. Beyond that, try listening to hyphenated words in NVDA to ensure they remain clear.
+Be sure to test your hyphens with NVDA or Windows Narrator: these screen readers' pronunciation of words can be disrupted by poorly-placed hyphens. Balancing the need to adapt to narrow screens against the need to sound correctly to a screen reader is a complex matter.[^28] The best place to insert a hyphen is between compound words. For example, splitting "Firefighter" into "Fire-fighter" is quite safe. Beyond that, try listening to hyphenated words in NVDA to ensure they remain clear.
 
 ### Keeping text together
 
@@ -1383,7 +1400,7 @@ On one hand, users who need enhanced focus visibility may override the default f
 
 The WCAG [Success Criterion 2.4.12](https://w3c.github.io/wcag/guidelines/22/#focus-appearance-enhanced) recommends making focus indicators 2&nbsp;px thick. While this success criterion is only AAA-level, it's easy enough to meet and beneficial enough to others that we should all meet it.
 
-You can use `:focus` and `:focus-visible` to highlight selected and keyboard-focused elements, respectively. Take care to only alter styling, not behavior: only keyboard-focusable elements should receive outlines. Modern browser stylesheets use `:focus-visible` instead of `:focus`; old browsers only support `:focus` and re-style a subset of focusable elements. Your stylesheets should do the same, to match browser behavior.[^27]
+You can use `:focus` and `:focus-visible` to highlight selected and keyboard-focused elements, respectively. Take care to only alter styling, not behavior: only keyboard-focusable elements should receive outlines. Modern browser stylesheets use `:focus-visible` instead of `:focus`; old browsers only support `:focus` and re-style a subset of focusable elements. Your stylesheets should do the same, to match browser behavior.[^29]
 
 {{<codefigure>}}
 
@@ -1461,7 +1478,7 @@ Screen readers on touch screen devices are also quite different from their deskt
 
 Screen reader implementations often skip punctuation marks like the exclamation point ("!"). Ensure that meaning doesn't rely too heavily on such punctuation.
 
-Screen readers have varying levels of verbosity. The default verbosity level doesn't always convey inline emphasis, such as `<em>`, `<code>`, or `<strong>`. Ensure that your meaning carries through without these semantics.[^28]
+Screen readers have varying levels of verbosity. The default verbosity level doesn't always convey inline emphasis, such as `<em>`, `<code>`, or `<strong>`. Ensure that your meaning carries through without these semantics.[^30]
 
 Default verbosity does, however, convey symbols and emoji. Use symbols and emoji judiciously, since they can get pretty noisy if you aren't careful. Use `aria-labelledby` on symbols when appropriate; I used labels to mark my footnote backlinks, which would otherwise be read as <samp>right arrow curving left</samp>. If you have to use a symbol or emoji, first test how assistive technologies announce it; the emoji name may not communicate what you expect.
 
@@ -1490,7 +1507,7 @@ No matter how simple a page is, I don't think simplicity eliminates the need for
 
 Automated tests---especially accessibility tests---are a supplement to manual tests, not a replacement for them. Think of them as time-savers that bring up issues for further research, containing both false positives and false negatives.
 
-These are the tools I use regularly. I've deliberately excluded tools that would be redundant.[^29]
+These are the tools I use regularly. I've deliberately excluded tools that would be redundant.[^31]
 
 
 [Nu HTML checker](https://validator.nu/)
@@ -1503,7 +1520,7 @@ These are the tools I use regularly. I've deliberately excluded tools that would
 : An auditing tool by Google that uses the DevTools protocol in any Chromium-based browser. Skip the "Access&shy;ibility" category, since it just runs a subset of axe-core's audits. The most useful audit is the tap target size check in its "SEO" category. Note that your `sandbox` CSP directive will need to include `allow-scripts` for it to function.
 
 [Webhint](https://webhint.io/)
-: Similar to Lighthouse. Again, you can ignore the accessibility audits if you already use axe-core. I personally disagree with some of its hints: the "unneeded HTTP headers" hint ignores the fact that the CSP can have an effect on non-hypertext assets, the "HTTP cache" hint has an unreasonable bias against caching HTML, and the "Correct `Content-Type` header" recommends charset attributes a bit too agg&shy;ressively.[^30]
+: Similar to Lighthouse. Again, you can ignore the accessibility audits if you already use axe-core. I personally disagree with some of its hints: the "unneeded HTTP headers" hint ignores the fact that the CSP can have an effect on non-hypertext assets, the "HTTP cache" hint has an unreasonable bias against caching HTML, and the "Correct `Content-Type` header" recommends charset attributes a bit too agg&shy;ressively.[^32]
 
 [IBM Equal Access Accessibility Checker](https://www.ibm.com/able/toolkit/verify/automated/)
 : Has a scope similar to axe-core. Its "Sensory Characteristics" audit seems unique.
@@ -1533,7 +1550,7 @@ These tests begin reasonably, but gradually grow absurd. Once again, use your ju
 
 1. Test in all three major browser engines: Blink, Gecko, and WebKit.
 
-2. Evaluate the heaviness and complexity of your scripts (if any) by testing with your browser's <abbr title="just-in-time">JIT</abbr> compilation disabled.[^31]
+2. Evaluate the heaviness and complexity of your scripts (if any) by testing with your browser's <abbr title="just-in-time">JIT</abbr> compilation disabled.[^33]
 
 3. Test using the Tor Browser's safest security level enabled (disables JS and other features).
 
@@ -1561,7 +1578,7 @@ These tests begin reasonably, but gradually grow absurd. Once again, use your ju
 
 15. Try printing out your page in black-and-white from an unorthodox graphical browser.
 
-16. Download your webpage and test how multiple word processors render and generate PDFs from it.[^32]
+16. Download your webpage and test how multiple word processors render and generate PDFs from it.[^34]
 
 17. Combine conversion tools. Combine an HTML-<wbr />to-<wbr />EPUB converter and an EPUB-<wbr />to-<wbr />PDF converter, or stack multiple article-extraction utilities. Be creative and enjoy breaking your site. When something breaks, examine the breakage and see if it's caused by an issue in your markup, or a CSS feature with an equivalent alternative.
 
@@ -1613,8 +1630,6 @@ This article is, and will probably always be, an ongoing work-in-progress. Some
 
 * Spatial navigation
 
-* Why in-page links should generally point to phrasing content rather than sections (pointing to sections messes with tab order).
-
 * The [principle of redundant coding](https://w3c.github.io/Mobile-A11y-TF-Note/#provide-clear-indication-that-elements-are-actionable)
 
 * Other accessible writing tips, maybe after I get a copy of <span class="h-cite" itemprop="mentions" itemscope="" itemtype="https://schema.org/Book">{{<cited-work name="Writing Is Designing" url="https://rosenfeldmedia.com/books/writing-is-designing/">}} by {{<indieweb-person first-name="Michael" last-name="Metts" url="https://mjmetts.com/" itemprop="author">}} and {{<indieweb-person first-name="Andy" last-name="Welfe" url="https://www.andy.wtf/" itemprop="author">}}</span>. A relevant excerpt on writing accessibly is [on A List Apart](https://alistapart.com/article/standards-for-writing-accessibly/).<!--Hugo does something weird when I use my mention-work shortcode here.-->
@@ -1771,27 +1786,31 @@ A special thanks goes out to GothAlice for the questions she answered in <samp>#
 
     I find <cite>Practical Typography</cite> quite useful for printed works, and incorporated a more moderate version of its advice on soft-hyphens into this page. With a few such exceptions, I generally find it to be poor advice for Web content.
 
-[^22]: libavif links against libaom, librav1e, and/or libsvtav1 to perform AVIF encoding and decoding. libaom is best for this use-case, particularly since libaom can link against libjxl to use its Butteraugli distortion metric. This lets libaom optimize the perceptual quality of lossy encodes much more accurately.
+[^22]: I can't confirm if this is also an issue on VoiceOver for macOS, because I haven't borrowed the hardware required to test it.
 
-[^23]: I find it quite odd that Microsoft Edge doesn't support AVIF. Chromium has supported AVIF for a long time, and Edge is based on Chromium. AVIF is a royalty-free format; I don't know why Microsoft would remove support for it, especially since Microsoft allows adding AVIF support to Windows. I think Edge also removed Chromium's experimental, off-by-default support for JPEG-XL.
+[^23]: I linked to a snapshot from the Wayback Machine in hopes that the live version of the Smashing Magazine site will get fixed.
 
-[^24]: I say that a skip link is useful to reduce the amount of <kbd>Tab</kbd> keystrokes required, but I don't know a good "threshold number" to signify "too many keystrokes". If it takes ten keystrokes to reach the main content, it's probably time to add a skip-link.
+[^24]: libavif links against libaom, librav1e, and/or libsvtav1 to perform AVIF encoding and decoding. libaom is best for this use-case, particularly since libaom can link against libjxl to use its Butteraugli distortion metric. This lets libaom optimize the perceptual quality of lossy encodes much more accurately.
 
-[^25]: ATs typically let users navigate by headings, landmarks, paragraphs, and links. Most users prefer skipping article content with heading-based navigation. Keyboard users can bind different keys to different modes of navigation, but mobile users can only access one navigation mode at a time.
+[^25]: I find it quite odd that Microsoft Edge doesn't support AVIF. Chromium has supported AVIF for a long time, and Edge is based on Chromium. AVIF is a royalty-free format; I don't know why Microsoft would remove support for it, especially since Microsoft allows adding AVIF support to Windows. I think Edge also removed Chromium's experimental, off-by-default support for JPEG-XL.
+
+[^26]: I say that a skip link is useful to reduce the amount of <kbd>Tab</kbd> keystrokes required, but I don't know a good "threshold number" to signify "too many keystrokes". If it takes ten keystrokes to reach the main content, it's probably time to add a skip-link.
+
+[^27]: ATs typically let users navigate by headings, landmarks, paragraphs, and links. Most users prefer skipping article content with heading-based navigation. Keyboard users can bind different keys to different modes of navigation, but mobile users can only access one navigation mode at a time.
 
     Mobile users wishing to temporarily switch modes have to stop, change their navigation mode, perform a navigation gesture, and switch back. Mobile users trying to skim an article don't always find this worth the effort and sometimes stick to heading-based navigation even when a different mode would be optimal.
 
-[^26]: At least, it will be until [NVDA bug 9343](https://github.com/nvaccess/nvda/issues/9343) gets resolved.
+[^28]: At least, it will be until [NVDA bug 9343](https://github.com/nvaccess/nvda/issues/9343) gets resolved.
 
-[^27]: If you'd like to learn more, {{<mention-work itemtype="BlogPosting">}}{{< cited-work name="A guide to designing accessible, WCAG-compliant focus indicators" url="https://www.sarasoueidan.com/blog/focus-indicators/" extraName="headline" >}} by {{< indieweb-person url="https://www.sarasoueidan.com/" first-name="Sara" last-name="Soueidan" url="https://www.sarasoueidan.com/" itemprop="author">}}{{</mention-work>}} has far more details on making accessible focus indicators.
+[^29]: If you'd like to learn more, {{<mention-work itemtype="BlogPosting">}}{{< cited-work name="A guide to designing accessible, WCAG-compliant focus indicators" url="https://www.sarasoueidan.com/blog/focus-indicators/" extraName="headline" >}} by {{< indieweb-person url="https://www.sarasoueidan.com/" first-name="Sara" last-name="Soueidan" url="https://www.sarasoueidan.com/" itemprop="author">}}{{</mention-work>}} has far more details on making accessible focus indicators.
 
-[^28]: Screen readers aren't alone here. Several programs strip inline formatting: certain feed readers, search result snippets, and textual browsers invoked with the `-dump` flag are some examples I use every day.
+[^30]: Screen readers aren't alone here. Several programs strip inline formatting: certain feed readers, search result snippets, and textual browsers invoked with the `-dump` flag are some examples I use every day.
 
-[^29]: I excluded PageSpeed Insights and GTMetrix since those are mostly covered by Lighthouse. I excluded Security Headers, since its approach seems to be recommending headers regardless of whether or not they are necessary. It penalizes forgoing the <code>Permissions-<wbr />Policy</code> header even if the CSP blocks script loading and execution; see [Security Headers issue #103](https://github.com/securityheaders/securityheaders-bugs/issues/103). I personally find the <code>Permissions-<wbr />Policy</code> header quite problematic, as I noted in August 2021 on [webappsec-permissions-policy issue #189](https://github.com/w3c/webappsec-permissions-policy/issues/189#issuecomment-904783021).
+[^31]: I excluded PageSpeed Insights and GTMetrix since those are mostly covered by Lighthouse. I excluded Security Headers, since its approach seems to be recommending headers regardless of whether or not they are necessary. It penalizes forgoing the <code>Permissions-<wbr />Policy</code> header even if the CSP blocks script loading and execution; see [Security Headers issue #103](https://github.com/securityheaders/securityheaders-bugs/issues/103). I personally find the <code>Permissions-<wbr />Policy</code> header quite problematic, as I noted in August 2021 on [webappsec-permissions-policy issue #189](https://github.com/w3c/webappsec-permissions-policy/issues/189#issuecomment-904783021).
 
-[^30]: My site caches HTML documents for ten minutes and caches the RSS feed for several hours. I disagree with webhint's recommendations against this: cache durations should be based on request rates and how often a resource is updated. I also disagree with some of its `content-type` recommendations: you don't need to declare UTF-8 charsets for SVG content-type headers if the SVG is ASCII-only and called from a UTF-8 HTML document. You gain nothing but header bloat by doing so.
+[^32]: My site caches HTML documents for ten minutes and caches the RSS feed for several hours. I disagree with webhint's recommendations against this: cache durations should be based on request rates and how often a resource is updated. I also disagree with some of its `content-type` recommendations: you don't need to declare UTF-8 charsets for SVG content-type headers if the SVG is ASCII-only and called from a UTF-8 HTML document. You gain nothing but header bloat by doing so.
 
-[^31]: Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnerabilities. In Firefox, navigate to <samp>about:<wbr />config</samp> and toggle some flags under <code>javascript<wbr />.options</code>.
+[^33]: Consider disabling the JIT for your normal browsing too; doing so removes whole classes of vulnerabilities. In Firefox, navigate to <samp>about:<wbr />config</samp> and toggle some flags under <code>javascript<wbr />.options</code>.
 
     <figure itemprop="hasPart" itemscope="" itemtype="https://schema.org/SoftwareSourceCode">
     <figcaption>
@@ -1807,6 +1826,6 @@ A special thanks goes out to GothAlice for the questions she answered in <samp>#
 
     In Chromium and derivatives, run the browser with `--js-flags='--jitless'`; in the Tor Browser, set the security level to "Safer".
 
-[^32]: LibreOffice can also render HTML but has extremely limited support for CSS. OnlyOffice seems to work best, but doesn't load images. If your page is CSS-optional, it should look fine in both.
+[^34]: LibreOffice can also render HTML but has extremely limited support for CSS. OnlyOffice seems to work best, but doesn't load images. If your page is CSS-optional, it should look fine in both.