From 09a7454479b513d24b5b7ae97576662faa693a95 Mon Sep 17 00:00:00 2001
From: Heydon Pickering <heydon@heydonworks.com>
Date: Thu, 3 Aug 2017 12:16:24 +0100
Subject: [PATCH] focusable='false'

---
 docs/index.html                               |  80 ++++--
 docs/index.xml                                |   8 +-
 docs/js/dom-scripts.js                        |   2 +-
 docs/patterns/coding/code-blocks/index.html   |  82 +++++--
 .../patterns/coding/color-palettes/index.html |  84 +++++--
 docs/patterns/coding/command-line/index.html  |  84 +++++--
 .../patterns/coding/demo-embedding/index.html |  86 +++++--
 docs/patterns/coding/file-trees/index.html    |  84 +++++--
 docs/patterns/coding/index.html               | 106 ++++++--
 docs/patterns/coding/tested/index.html        |  82 +++++--
 .../coding/writing-inline-demos/index.html    |  84 +++++--
 docs/patterns/index.html                      |  94 +++++--
 docs/patterns/index.xml                       |   4 +-
 docs/patterns/installation/index.html         |  86 +++++--
 docs/patterns/library-setup/index.html        |  92 +++++--
 .../media/including-images/index.html         |  84 +++++--
 .../media/including-videos/index.html         |  82 +++++--
 docs/patterns/media/index.html                |  86 +++++--
 docs/patterns/printing/index.html             |  86 +++++--
 docs/patterns/serving/index.html              |  84 +++++--
 .../writing/expandable-sections/index.html    |  84 +++++--
 docs/patterns/writing/index.html              | 102 ++++++--
 docs/patterns/writing/index.xml               |   4 +-
 .../writing/library-structure/index.html      |  86 +++++--
 .../writing/markdown-and-metadata/index.html  |  88 +++++--
 .../writing/notes-and-warnings/index.html     |  86 +++++--
 docs/patterns/writing/references/index.html   | 112 ++++++---
 .../writing/tables-of-contents/index.html     |  84 +++++--
 docs/print-version/index.html                 | 230 ++++++++++++------
 docs/service-worker.js                        |   2 +-
 docs/tags/markdown/index.html                 |  84 +++++--
 docs/tags/metadata/index.html                 |  84 +++++--
 themes/infusion/layouts/_default/baseof.html  |  10 +-
 themes/infusion/layouts/_default/li.html      |   4 +-
 themes/infusion/layouts/patterns/li.html      |   4 +-
 themes/infusion/layouts/patterns/single.html  |   6 +-
 .../layouts/print-version/single.html         |  16 +-
 themes/infusion/layouts/shortcodes/note.html  |   2 +-
 .../infusion/layouts/shortcodes/pattern.html  |   2 +-
 .../layouts/shortcodes/principles.html        |   4 +-
 .../infusion/layouts/shortcodes/warning.html  |   2 +-
 themes/infusion/layouts/shortcodes/wcag.html  |   4 +-
 themes/infusion/layouts/taxonomy/tag.html     |   2 +-
 themes/infusion/static/js/dom-scripts.js      |   2 +-
 44 files changed, 1887 insertions(+), 697 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 106338e..a1e1c46 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -139,7 +139,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -150,28 +150,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -183,42 +191,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -232,14 +252,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -253,49 +277,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -330,7 +368,7 @@
 </div>
 
 
-<p>To get started, take a look at <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a>.</p>
+<p>To get started, take a look at <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a>.</p>
 
   </main>
 
diff --git a/docs/index.xml b/docs/index.xml
index 4d92f88..c1d52f2 100644
--- a/docs/index.xml
+++ b/docs/index.xml
@@ -62,7 +62,7 @@ CodePen Infusion offers a couple of ways to do this. The first is by embedding C
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/library-setup/</guid>
-      <description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
+      <description>By now, you should have followed the  Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
 &amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
     </item>
     
@@ -103,7 +103,7 @@ Infusion offers another option: a special demo shortcode that allows you to writ
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/printing/</guid>
-      <description>Infusion&amp;rsquo;s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
+      <description>Infusion&amp;rsquo;s output site includes a one-page  Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
 https://yourName.github.io/your-library/print-version     Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!
   </description>
     </item>
@@ -198,7 +198,7 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/writing/references/</guid>
-      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
+      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the  Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
 I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here.  This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
     </item>
     
@@ -208,7 +208,7 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid>
-      <description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
+      <description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the  Library setup page looks something like this:
 &amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt;“Cleaning” the content folder&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt;The setup command&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt;The config file&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt;Including a logo&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt;  Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
     </item>
     
diff --git a/docs/js/dom-scripts.js b/docs/js/dom-scripts.js
index f960597..84a2f8f 100644
--- a/docs/js/dom-scripts.js
+++ b/docs/js/dom-scripts.js
@@ -69,7 +69,7 @@
       var link = document.createElement('a')
       link.setAttribute('href', '#' + id)
       link.setAttribute('aria-label', 'link for this section')
-      link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50"><use xlink:href="#link"></use></svg>'
+      link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>'
 
       container.appendChild(link)
 
diff --git a/docs/patterns/coding/code-blocks/index.html b/docs/patterns/coding/code-blocks/index.html
index c64fd39..0b1b2e5 100644
--- a/docs/patterns/coding/code-blocks/index.html
+++ b/docs/patterns/coding/code-blocks/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Code blocks
     </h1>
     
diff --git a/docs/patterns/coding/color-palettes/index.html b/docs/patterns/coding/color-palettes/index.html
index f81b429..8bae492 100644
--- a/docs/patterns/coding/color-palettes/index.html
+++ b/docs/patterns/coding/color-palettes/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Color palettes
     </h1>
     
@@ -352,7 +392,7 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>If you&rsquo;re wondering whether you need to put a space after the commas in the shortcode, don&rsquo;t worry: <code>&quot;#254f7b, #579a6d, #666666&quot;</code> and <code>&quot;#254f7b,#579a6d,#666666&quot;</code> are both accepted. Any CSS color value is acceptable, not just hex colors.</p>
diff --git a/docs/patterns/coding/command-line/index.html b/docs/patterns/coding/command-line/index.html
index e791822..e9aee0d 100644
--- a/docs/patterns/coding/command-line/index.html
+++ b/docs/patterns/coding/command-line/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Command line
     </h1>
     
@@ -338,7 +378,7 @@ npm run start
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>The <code>cmd</code> shortcode currently only supports single commands. If you want to show multiple, successive commands use separate <code>cmd</code> blocks.</p>
diff --git a/docs/patterns/coding/demo-embedding/index.html b/docs/patterns/coding/demo-embedding/index.html
index 091b652..c8b6c2f 100644
--- a/docs/patterns/coding/demo-embedding/index.html
+++ b/docs/patterns/coding/demo-embedding/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Demo embedding
     </h1>
     
@@ -371,7 +411,7 @@
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the  <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p>
@@ -415,7 +455,7 @@
 
 <h2 id="inline-demos">Inline demos</h2>
 
-<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
+<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Writing inline demos</a>.</p>
 
   </main>
 
diff --git a/docs/patterns/coding/file-trees/index.html b/docs/patterns/coding/file-trees/index.html
index 1ce3a83..7c741aa 100644
--- a/docs/patterns/coding/file-trees/index.html
+++ b/docs/patterns/coding/file-trees/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       File trees
     </h1>
     
@@ -388,7 +428,7 @@
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>The only reliable way to nest unordered lists in markdown is to indent the nested item by exactly four spaces. Using tabs or less than four spaces are unreliable methods.</p>
diff --git a/docs/patterns/coding/index.html b/docs/patterns/coding/index.html
index 3d727b5..3c20c58 100644
--- a/docs/patterns/coding/index.html
+++ b/docs/patterns/coding/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -318,7 +356,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Code blocks
     </a>
   </h2>
@@ -328,7 +368,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Demo embedding
     </a>
   </h2>
@@ -338,7 +380,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Writing inline demos
     </a>
   </h2>
@@ -348,7 +392,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Color palettes
     </a>
   </h2>
@@ -358,7 +404,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/coding/command-line/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Command line
     </a>
   </h2>
@@ -368,7 +416,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       File trees
     </a>
   </h2>
@@ -378,7 +428,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/coding/tested/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Tested using...
     </a>
   </h2>
diff --git a/docs/patterns/coding/tested/index.html b/docs/patterns/coding/tested/index.html
index 34b3e26..2db993b 100644
--- a/docs/patterns/coding/tested/index.html
+++ b/docs/patterns/coding/tested/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Tested using...
     </h1>
     
diff --git a/docs/patterns/coding/writing-inline-demos/index.html b/docs/patterns/coding/writing-inline-demos/index.html
index 5626ac1..95cd411 100644
--- a/docs/patterns/coding/writing-inline-demos/index.html
+++ b/docs/patterns/coding/writing-inline-demos/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Writing inline demos
     </h1>
     
@@ -418,7 +458,7 @@ toggle.addEventListener('click', (e) => {
 </code></pre>
 </p>
 
-<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
+<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 
   </main>
 
diff --git a/docs/patterns/index.html b/docs/patterns/index.html
index fd34389..41426f9 100644
--- a/docs/patterns/index.html
+++ b/docs/patterns/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -318,7 +356,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/installation/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Installation
     </a>
   </h2>
@@ -328,7 +368,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/library-setup/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Library setup
     </a>
   </h2>
@@ -338,7 +380,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/serving/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Serving
     </a>
   </h2>
@@ -348,7 +392,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/printing/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Printing
     </a>
   </h2>
diff --git a/docs/patterns/index.xml b/docs/patterns/index.xml
index 8cea67a..52cc61e 100644
--- a/docs/patterns/index.xml
+++ b/docs/patterns/index.xml
@@ -28,7 +28,7 @@ brew install hugo Alternatively, you can manually install Hugo from a package. Y
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/library-setup/</guid>
-      <description>By now, you should have followed the Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
+      <description>By now, you should have followed the  Installation instructions. You should have Hugo and Node installed, and a local copy of a forked version of Infusion. You should also have run npm install in the root of that codebase.
 &amp;ldquo;Cleaning&amp;rdquo; the content folder Before you can start documenting patterns, there are a few things still to do in order to get set up. At the moment, your version of Infusion is a facsimile of the original, containing all this documentation content.</description>
     </item>
     
@@ -49,7 +49,7 @@ Publishing on Github Pages Infusion creates a /docs folder containing the latest
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/printing/</guid>
-      <description>Infusion&amp;rsquo;s output site includes a one-page Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
+      <description>Infusion&amp;rsquo;s output site includes a one-page  Print version of the generated library, available at /print-version. So, if your library base URL is https://yourName.github.io/your-library, you can print the whole library — to PDF if wanted — from the following address:
 https://yourName.github.io/your-library/print-version     Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!
   </description>
     </item>
diff --git a/docs/patterns/installation/index.html b/docs/patterns/installation/index.html
index 1acc8cb..8558211 100644
--- a/docs/patterns/installation/index.html
+++ b/docs/patterns/installation/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" aria-current="page">
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Installation
     </h1>
     
@@ -394,7 +434,7 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p>
@@ -408,7 +448,7 @@
 <pre class="cmd"><code>npm install</code></pre>
 
 
-<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> pattern.</p>
+<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> pattern.</p>
 
   </main>
 
diff --git a/docs/patterns/library-setup/index.html b/docs/patterns/library-setup/index.html
index 2966766..cfb1a0d 100644
--- a/docs/patterns/library-setup/index.html
+++ b/docs/patterns/library-setup/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" aria-current="page">
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Library setup
     </h1>
     
@@ -353,7 +393,7 @@
     
     
 
-<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
+<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
 
 <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
 
@@ -361,7 +401,7 @@
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
@@ -373,7 +413,7 @@
 <pre class="cmd"><code>  npm run clean</code></pre>
 
 
-<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
+<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a>.</p>
 
 <h2 id="the-config-file">The config file</h2>
 
@@ -412,7 +452,7 @@ theme = "infusion"
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>The</p>
@@ -430,7 +470,7 @@ theme = "infusion"
 &lt;/a&gt;
 </code></pre>
 
-<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
+<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Serving</a>.</p>
 
   </main>
 
diff --git a/docs/patterns/media/including-images/index.html b/docs/patterns/media/including-images/index.html
index e330417..99bcf68 100644
--- a/docs/patterns/media/including-images/index.html
+++ b/docs/patterns/media/including-images/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Including images
     </h1>
     
@@ -344,7 +384,7 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p>
diff --git a/docs/patterns/media/including-videos/index.html b/docs/patterns/media/including-videos/index.html
index 9a067ed..dd9c6dc 100644
--- a/docs/patterns/media/including-videos/index.html
+++ b/docs/patterns/media/including-videos/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Including videos
     </h1>
     
diff --git a/docs/patterns/media/index.html b/docs/patterns/media/index.html
index f180f0a..864113b 100644
--- a/docs/patterns/media/index.html
+++ b/docs/patterns/media/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -318,7 +356,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/media/including-images/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Including images
     </a>
   </h2>
@@ -328,7 +368,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/media/including-videos/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Including videos
     </a>
   </h2>
diff --git a/docs/patterns/printing/index.html b/docs/patterns/printing/index.html
index d65269a..11ba230 100644
--- a/docs/patterns/printing/index.html
+++ b/docs/patterns/printing/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" aria-current="page">
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Printing
     </h1>
     
@@ -320,14 +360,14 @@
 
 
     
-    <p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
+    <p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
 
 <pre><code>https://yourName.github.io/your-library/print-version
 </code></pre>
 
 <p><aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!</p>
diff --git a/docs/patterns/serving/index.html b/docs/patterns/serving/index.html
index f485899..e09f125 100644
--- a/docs/patterns/serving/index.html
+++ b/docs/patterns/serving/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" aria-current="page">
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Serving
     </h1>
     
@@ -363,7 +403,7 @@
 <pre><code>[your user name].github.io/[your library repo name]
 </code></pre>
 
-<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> for more information.</p>
+<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> for more information.</p>
 
   </main>
 
diff --git a/docs/patterns/writing/expandable-sections/index.html b/docs/patterns/writing/expandable-sections/index.html
index 156fa48..f8db09e 100644
--- a/docs/patterns/writing/expandable-sections/index.html
+++ b/docs/patterns/writing/expandable-sections/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Expandable sections
     </h1>
     
@@ -423,7 +463,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>When you go to print a pattern from your library, some print styles take care of collapsible sections, making them appear expanded and like any other section.</p>
diff --git a/docs/patterns/writing/index.html b/docs/patterns/writing/index.html
index 10d1676..920c697 100644
--- a/docs/patterns/writing/index.html
+++ b/docs/patterns/writing/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -318,7 +356,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Library structure
     </a>
   </h2>
@@ -328,7 +368,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Markdown &amp; metadata
     </a>
   </h2>
@@ -338,7 +380,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Expandable sections
     </a>
   </h2>
@@ -348,7 +392,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Notes &amp; warnings
     </a>
   </h2>
@@ -358,7 +404,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/references/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       References
     </a>
   </h2>
@@ -368,7 +416,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Tables of contents
     </a>
   </h2>
diff --git a/docs/patterns/writing/index.xml b/docs/patterns/writing/index.xml
index f5c552a..8656826 100644
--- a/docs/patterns/writing/index.xml
+++ b/docs/patterns/writing/index.xml
@@ -57,7 +57,7 @@ Notes You may wish to pick out some content in your pattern&amp;rsquo;s document
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/writing/references/</guid>
-      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
+      <description>Cross-references Infusion provides an easy mechanism to cross-reference patterns, by title, using the pattern shortcode. For example, I can reference the  Notes &amp;amp; warnings pattern. Here&amp;rsquo;s what the markdown looks like, including the shortcode:
 I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} pattern here.  This saves you having to worry about pathing and decorates the generated link with a bookmark icon, identifying the link as a pattern reference visually.</description>
     </item>
     
@@ -67,7 +67,7 @@ I can reference the &amp;#x7b;{% pattern &#34;Notes &amp; warnings&#34; %}} patt
       <pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate>
       
       <guid>https://heydon.github.io/infusion/patterns/writing/tables-of-contents/</guid>
-      <description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the Library setup page looks something like this:
+      <description>Pattern pages in Infusion that have two or more subheadings — &amp;lt;h2&amp;gt;s — automatically get a table of contents: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &amp;ldquo;Table of contents&amp;rdquo; label and uses an ordered list. The table of contents markup for the  Library setup page looks something like this:
 &amp;lt;nav class=&amp;quot;toc&amp;quot; aria-labelledby=&amp;quot;toc-heading&amp;quot;&amp;gt; &amp;lt;h2 id=&amp;quot;toc-heading&amp;quot;&amp;gt;Table of contents&amp;lt;/h2&amp;gt; &amp;lt;ol&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#cleaning-the-content-folder&amp;quot;&amp;gt;“Cleaning” the content folder&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-setup-command&amp;quot;&amp;gt;The setup command&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#the-config-file&amp;quot;&amp;gt;The config file&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;li&amp;gt; &amp;lt;a href=&amp;quot;#including-a-logo&amp;quot;&amp;gt;Including a logo&amp;lt;/a&amp;gt; &amp;lt;/li&amp;gt; &amp;lt;/ol&amp;gt; &amp;lt;/nav&amp;gt;  Tables of contents are a neat way to break down the content of the page and give users a navigable overview.</description>
     </item>
     
diff --git a/docs/patterns/writing/library-structure/index.html b/docs/patterns/writing/library-structure/index.html
index dbee271..ef38329 100644
--- a/docs/patterns/writing/library-structure/index.html
+++ b/docs/patterns/writing/library-structure/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Library structure
     </h1>
     
@@ -381,7 +421,7 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p>
@@ -399,7 +439,7 @@ title = &quot;Popups&quot;
 </aside>
 
 
-<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>.</p>
+<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Markdown &amp; metadata</a>.</p>
 
   </main>
 
diff --git a/docs/patterns/writing/markdown-and-metadata/index.html b/docs/patterns/writing/markdown-and-metadata/index.html
index ef8c6fe..14bb9f8 100644
--- a/docs/patterns/writing/markdown-and-metadata/index.html
+++ b/docs/patterns/writing/markdown-and-metadata/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Markdown &amp; metadata
     </h1>
     
@@ -322,7 +362,7 @@
             
               
                 <li>
-                  <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
+                  <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
                     <use xlink:href="#tag"></use>
                   </svg>
                   <a href="https://heydon.github.io/infusion/tags/metadata">metadata</a>
@@ -333,7 +373,7 @@
             
               
                 <li>
-                  <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
+                  <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
                     <use xlink:href="#tag"></use>
                   </svg>
                   <a href="https://heydon.github.io/infusion/tags/markdown">markdown</a>
@@ -389,7 +429,7 @@ weight = 1
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p>
diff --git a/docs/patterns/writing/notes-and-warnings/index.html b/docs/patterns/writing/notes-and-warnings/index.html
index 0575201..53e7d2f 100644
--- a/docs/patterns/writing/notes-and-warnings/index.html
+++ b/docs/patterns/writing/notes-and-warnings/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Notes &amp; warnings
     </h1>
     
@@ -358,7 +398,7 @@ This is a note! It's something the reader may like to know about but is suppleme
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>
@@ -382,7 +422,7 @@ This is a warning! It's about something the reader should be careful to do or to
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>
diff --git a/docs/patterns/writing/references/index.html b/docs/patterns/writing/references/index.html
index 83f3958..8b004c9 100644
--- a/docs/patterns/writing/references/index.html
+++ b/docs/patterns/writing/references/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       References
     </h1>
     
@@ -349,7 +389,7 @@
 
 <h2 id="cross-references">Cross-references</h2>
 
-<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
+<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
 
 <pre class=" "><code  data-codeblock-shortcode>
 I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@@ -360,7 +400,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern&rsquo;s <code>title</code> metadata value and is case sensitive.</p>
@@ -435,7 +475,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           2.1.1 Keyboard</a> (level A)
         </strong>
         
@@ -519,7 +561,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           4.1.2 Name, Role, Value</a> (level A)
         </strong>
         
@@ -531,7 +575,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>You don&rsquo;t have to leave spaces after the comma separators. They are optional.</p>
@@ -604,7 +648,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           2.1.1 Keyboard</a> (level A):
         </strong>
         
@@ -691,7 +737,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           4.1.2 Name, Role, Value</a> (level A):
         </strong>
         
@@ -729,7 +777,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#be-consistent">
-            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
+              <use xlink:href="#balloon"></use>
+            </svg>
             Be consistent
           </a>:
         </strong>
@@ -750,7 +800,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#add-value">
-            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
+              <use xlink:href="#balloon"></use>
+            </svg>
             Add value
           </a>:
         </strong>
diff --git a/docs/patterns/writing/tables-of-contents/index.html b/docs/patterns/writing/tables-of-contents/index.html
index d4c11e2..9934f33 100644
--- a/docs/patterns/writing/tables-of-contents/index.html
+++ b/docs/patterns/writing/tables-of-contents/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" aria-current="page">
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,9 @@
           
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Tables of contents
     </h1>
     
@@ -320,7 +360,7 @@
 
 
     
-    <p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings — <code>&lt;h2&gt;</code>s — automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> page looks something like this:</p>
+    <p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings — <code>&lt;h2&gt;</code>s — automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> page looks something like this:</p>
 
 <pre><code class="language-html">&lt;nav class=&quot;toc&quot; aria-labelledby=&quot;toc-heading&quot;&gt;
   &lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt;
diff --git a/docs/print-version/index.html b/docs/print-version/index.html
index 9f80370..e77f97e 100644
--- a/docs/print-version/index.html
+++ b/docs/print-version/index.html
@@ -143,28 +143,36 @@
           
             <li class="pattern">
               <a href="#installation" >
-                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                  <use xlink:href="#bookmark"></use>
+                </svg>
                 <span class="text">Installation</span>
               </a>
             </li>
           
             <li class="pattern">
               <a href="#library-setup" >
-                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                  <use xlink:href="#bookmark"></use>
+                </svg>
                 <span class="text">Library setup</span>
               </a>
             </li>
           
             <li class="pattern">
               <a href="#serving" >
-                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                  <use xlink:href="#bookmark"></use>
+                </svg>
                 <span class="text">Serving</span>
               </a>
             </li>
           
             <li class="pattern">
               <a href="#printing" >
-                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                  <use xlink:href="#bookmark"></use>
+                </svg>
                 <span class="text">Printing</span>
               </a>
             </li>
@@ -176,42 +184,54 @@
                 
                   <li class="pattern">
                     <a href="#library-structure" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Library structure</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#markdown--metadata" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Markdown &amp; metadata</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#expandable-sections" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Expandable sections</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#notes--warnings" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Notes &amp; warnings</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#references" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">References</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#tables-of-contents" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Tables of contents</span>
                     </a>
                   </li>
@@ -225,14 +245,18 @@
                 
                   <li class="pattern">
                     <a href="#including-images" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Including images</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#including-videos" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Including videos</span>
                     </a>
                   </li>
@@ -246,49 +270,63 @@
                 
                   <li class="pattern">
                     <a href="#code-blocks" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Code blocks</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#demo-embedding" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Demo embedding</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#writing-inline-demos" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Writing inline demos</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#color-palettes" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Color palettes</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#command-line" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Command line</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#file-trees" >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">File trees</span>
                     </a>
                   </li>
                 
                   <li class="pattern">
                     <a href="#tested-using..." >
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">Tested using...</span>
                     </a>
                   </li>
@@ -304,7 +342,9 @@
       
         <div class="pattern-section">
           <h1 id="installation" tabindex="-1">
-            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+              <use xlink:href="#bookmark"></use>
+            </svg>
             Installation
           </h1>
           
@@ -356,7 +396,7 @@
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>If you do not have a version of the Github desktop client installed, follow the prompts after clicking <strong>Open in Desktop</strong>.</p>
@@ -370,18 +410,20 @@
 <pre class="cmd"><code>npm install</code></pre>
 
 
-<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> pattern.</p>
+<p>Now it&rsquo;s time to consult the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> pattern.</p>
 
         </div>
       
         <div class="pattern-section">
           <h1 id="library-setup" tabindex="-1">
-            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+              <use xlink:href="#bookmark"></use>
+            </svg>
             Library setup
           </h1>
           
 
-<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
+<p>By now, you should have followed the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/installation/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Installation</a> instructions. You should have Hugo and Node installed, and a local copy of a forked version of <strong>Infusion</strong>. You should also have run <code>npm install</code> in the root of that codebase.</p>
 
 <h2 id="cleaning-the-content-folder">&ldquo;Cleaning&rdquo; the content folder</h2>
 
@@ -389,7 +431,7 @@
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>If you are contributing to an existing <strong>Infusion</strong> library, do not run the following command. It will delete all of the patterns in that library. The <code>clean</code> command is just for libraries that you are starting from scratch.</p>
@@ -401,7 +443,7 @@
 <pre class="cmd"><code>  npm run clean</code></pre>
 
 
-<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a>.</p>
+<p>This will leave your <code>content</code> folder with just an <code>_index.md</code> file and a <code>patterns</code> folder containing a single demonstration pattern file. Find out more about these in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a>.</p>
 
 <h2 id="the-config-file">The config file</h2>
 
@@ -440,7 +482,7 @@ theme = "infusion"
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>The</p>
@@ -458,13 +500,15 @@ theme = "infusion"
 &lt;/a&gt;
 </code></pre>
 
-<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Serving</a>.</p>
+<p>Now that your logo&rsquo;s in place, everything should be ready. Where next? You can learn about <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/library-structure/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library structure</a> to help you get writing, or find out how to serve the library locally and on Github Pages in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/serving/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Serving</a>.</p>
 
         </div>
       
         <div class="pattern-section">
           <h1 id="serving" tabindex="-1">
-            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+              <use xlink:href="#bookmark"></use>
+            </svg>
             Serving
           </h1>
           
@@ -491,23 +535,25 @@ theme = "infusion"
 <pre><code>[your user name].github.io/[your library repo name]
 </code></pre>
 
-<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> for more information.</p>
+<p>You&rsquo;ll also need to add it to your <code>config.toml</code> file as the <code>baseURL</code> value. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> for more information.</p>
 
         </div>
       
         <div class="pattern-section">
           <h1 id="printing" tabindex="-1">
-            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+              <use xlink:href="#bookmark"></use>
+            </svg>
             Printing
           </h1>
-          <p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
+          <p><strong>Infusion</strong>&rsquo;s output site includes a one-page <a class="pattern-link" href="https://heydon.github.io/infusion/print-version/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Print version</a> of the generated library, available at <code>/print-version</code>. So, if your library base URL is <code>https://yourName.github.io/your-library</code>, you can print the whole library — to PDF if wanted — from the following address:</p>
 
 <pre><code>https://yourName.github.io/your-library/print-version
 </code></pre>
 
 <p><aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>Print styles are also provided for individual pattern pages so, if you wanted to print off a single pattern document, go ahead!</p>
@@ -522,7 +568,9 @@ theme = "infusion"
         
           <div class="pattern-section">
             <h1 id="library-structure" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Library structure
             </h1>
             
@@ -586,7 +634,7 @@ theme = "infusion"
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>Note that subfolders like <code>/popups</code> must each have an <code>_index.md</code> file. This file doesn&rsquo;t need any content except the TOML metadata defining the title (name) of that subsection:</p>
@@ -604,13 +652,15 @@ title = &quot;Popups&quot;
 </aside>
 
 
-<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Markdown &amp; metadata</a>.</p>
+<p>Now that you know where to put everything, it&rsquo;s time to talk about how to actually write individual patterns. Don&rsquo;t worry, it&rsquo;s pretty straightforward. Turn to <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Markdown &amp; metadata</a>.</p>
 
           </div>
         
           <div class="pattern-section">
             <h1 id="markdown--metadata" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Markdown &amp; metadata
             </h1>
             
@@ -653,7 +703,7 @@ weight = 1
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>The <code>weight</code> parameter should be an integer, not a string, so don&rsquo;t use scare quotes around the value!</p>
@@ -666,7 +716,9 @@ weight = 1
         
           <div class="pattern-section">
             <h1 id="expandable-sections" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Expandable sections
             </h1>
             <p>In some cases, where there is a lot of content, it&rsquo;s helpful to collapse certain sections. That way, readers get an overview of what&rsquo;s in the content and can choose where to focus in. <strong>Infusion</strong> provides a shortcode method for creating expandable sections which generates accessible markup using <code>aria-expanded</code>.</p>
@@ -772,7 +824,7 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>When you go to print a pattern from your library, some print styles take care of collapsible sections, making them appear expanded and like any other section.</p>
@@ -785,7 +837,9 @@ Here is some markdown including [a link](https://twitter.com/heydonworks). Donec
         
           <div class="pattern-section">
             <h1 id="notes--warnings" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Notes &amp; warnings
             </h1>
             
@@ -807,7 +861,7 @@ This is a note! It's something the reader may like to know about but is suppleme
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>This is a note! It&rsquo;s something the reader may like to know about but is supplementary to the main content. Use notes when something may be interesting but not critical.</p>
@@ -831,7 +885,7 @@ This is a warning! It's about something the reader should be careful to do or to
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>This is a warning! It&rsquo;s about something the reader should be careful to do or to avoid doing. Use warnings when something could go wrong.</p>
@@ -844,14 +898,16 @@ This is a warning! It's about something the reader should be careful to do or to
         
           <div class="pattern-section">
             <h1 id="references" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               References
             </h1>
             
 
 <h2 id="cross-references">Cross-references</h2>
 
-<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
+<p><strong>Infusion</strong> provides an easy mechanism to cross-reference patterns, by title, using the <code>pattern</code> shortcode. For example, I can reference the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Notes &amp; warnings</a> pattern. Here&rsquo;s what the markdown looks like, including the shortcode:</p>
 
 <pre class=" "><code  data-codeblock-shortcode>
 I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
@@ -862,7 +918,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>The title argument you supply to the shortcode must be exactly the same as the referenced pattern&rsquo;s <code>title</code> metadata value and is case sensitive.</p>
@@ -937,7 +993,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           2.1.1 Keyboard</a> (level A)
         </strong>
         
@@ -1021,7 +1079,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           4.1.2 Name, Role, Value</a> (level A)
         </strong>
         
@@ -1033,7 +1093,7 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>You don&rsquo;t have to leave spaces after the comma separators. They are optional.</p>
@@ -1106,7 +1166,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#keyboard-operation-keyboard-operable">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           2.1.1 Keyboard</a> (level A):
         </strong>
         
@@ -1193,7 +1255,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
     
       <li>
         <strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           4.1.2 Name, Role, Value</a> (level A):
         </strong>
         
@@ -1231,7 +1295,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#be-consistent">
-            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
+              <use xlink:href="#balloon"></use>
+            </svg>
             Be consistent
           </a>:
         </strong>
@@ -1252,7 +1318,9 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#add-value">
-            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
+              <use xlink:href="#balloon"></use>
+            </svg>
             Add value
           </a>:
         </strong>
@@ -1270,10 +1338,12 @@ I can reference the &#x7b;{% pattern "Notes & warnings" %}} pattern here.
         
           <div class="pattern-section">
             <h1 id="tables-of-contents" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Tables of contents
             </h1>
-            <p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings — <code>&lt;h2&gt;</code>s — automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Library setup</a> page looks something like this:</p>
+            <p>Pattern pages in <strong>Infusion</strong> that have two or more subheadings — <code>&lt;h2&gt;</code>s — automatically get a <strong>table of contents</strong>: a list of links to the main subsections for the page. This feature is made accessible as a navigation region with the &ldquo;Table of contents&rdquo; label and uses an ordered list. The table of contents markup for the <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/library-setup/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Library setup</a> page looks something like this:</p>
 
 <pre><code class="language-html">&lt;nav class=&quot;toc&quot; aria-labelledby=&quot;toc-heading&quot;&gt;
   &lt;h2 id=&quot;toc-heading&quot;&gt;Table of contents&lt;/h2&gt;
@@ -1308,7 +1378,9 @@ toc = false
         
           <div class="pattern-section">
             <h1 id="including-images" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Including images
             </h1>
             
@@ -1335,7 +1407,7 @@ toc = false
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>When you first make a copy of <strong>Infusion</strong>, <strong>Infusion&rsquo;s</strong> own logo will be included. You should replace this with your own company or project logo.</p>
@@ -1386,7 +1458,9 @@ toc = false
         
           <div class="pattern-section">
             <h1 id="including-videos" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Including videos
             </h1>
             <p><strong>Infusion</strong> has a lot of its own shortcodes, but you can still use Hugo&rsquo;s <a href="https://gohugo.io/extras/shortcodes#built-in-shortcodes">built in shortcodes</a>. These include a simple shortcode for including YouTube videos in your content. The shortcode takes just one parameter — the video&rsquo;s <code>id</code>.</p>
@@ -1402,7 +1476,9 @@ toc = false
         
           <div class="pattern-section">
             <h1 id="code-blocks" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Code blocks
             </h1>
             
@@ -1457,7 +1533,9 @@ toggle.addEventListener('click', (e) => {
         
           <div class="pattern-section">
             <h1 id="demo-embedding" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Demo embedding
             </h1>
             
@@ -1486,7 +1564,7 @@ toggle.addEventListener('click', (e) => {
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>The compiled site will output an error if your <code>config.toml</code> does not include your CodePen username (in the  <code>codePenUser</code> parameter). This is needed to construct the embed URL.</p>
@@ -1530,13 +1608,15 @@ toggle.addEventListener('click', (e) => {
 
 <h2 id="inline-demos">Inline demos</h2>
 
-<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Writing inline demos</a>.</p>
+<p><strong>Infusion</strong> also supports the ability to write inline demos directly in markdown files. See <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Writing inline demos</a>.</p>
 
           </div>
         
           <div class="pattern-section">
             <h1 id="writing-inline-demos" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Writing inline demos
             </h1>
             
@@ -1637,13 +1717,15 @@ toggle.addEventListener('click', (e) => {
 </code></pre>
 </p>
 
-<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
+<p>Along with the standard <code>figure</code> shortcodes (described in <a class="pattern-link" href="https://heydon.github.io/infusion/patterns/media/including-images/"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>Including images</a>), demo figures are numbered automatically according to their order in the page. You can use markdown syntax in the caption text value.</p>
 
           </div>
         
           <div class="pattern-section">
             <h1 id="color-palettes" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Color palettes
             </h1>
             <p>There&rsquo;s no reason why your <strong>Infusion</strong>-powered pattern library has to be all about functionality. You can include style guide-like information such as color palettes too. The <code>colors</code> shortcode makes it easy to exhibit colors and their values together. Just supply a comma-separated list of CSS color values.</p>
@@ -1678,7 +1760,7 @@ toggle.addEventListener('click', (e) => {
 
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     <p>If you&rsquo;re wondering whether you need to put a space after the commas in the shortcode, don&rsquo;t worry: <code>&quot;#254f7b, #579a6d, #666666&quot;</code> and <code>&quot;#254f7b,#579a6d,#666666&quot;</code> are both accepted. Any CSS color value is acceptable, not just hex colors.</p>
@@ -1691,7 +1773,9 @@ toggle.addEventListener('click', (e) => {
         
           <div class="pattern-section">
             <h1 id="command-line" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Command line
             </h1>
             <p>Your pattern documentation may need to include commands for installing packages or using <abbr title="command line interface">CLI</abbr>s. <strong>Infusion</strong> offers the <code>cmd</code> shortcode for making code blocks look like terminal commands.</p>
@@ -1712,7 +1796,7 @@ npm run start
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>The <code>cmd</code> shortcode currently only supports single commands. If you want to show multiple, successive commands use separate <code>cmd</code> blocks.</p>
@@ -1725,7 +1809,9 @@ npm run start
         
           <div class="pattern-section">
             <h1 id="file-trees" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               File trees
             </h1>
             <p>Representing folder/file structures is simple and accessible in <strong>Infusion</strong>. Which is just as well, because some components may need to conform to a certain folder structure.</p>
@@ -1796,7 +1882,7 @@ npm run start
 
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     <p>The only reliable way to nest unordered lists in markdown is to indent the nested item by exactly four spaces. Using tabs or less than four spaces are unreliable methods.</p>
@@ -1809,7 +1895,9 @@ npm run start
         
           <div class="pattern-section">
             <h1 id="tested-using..." tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               Tested using...
             </h1>
             <p>When you&rsquo;re an inclusive designer, it&rsquo;s pertinent to do some testing. Following specs is one thing, but you need to verify that your component works okay for users.</p>
diff --git a/docs/service-worker.js b/docs/service-worker.js
index 37a62e5..dbd6b82 100644
--- a/docs/service-worker.js
+++ b/docs/service-worker.js
@@ -37,7 +37,7 @@
 /* eslint-disable indent, no-unused-vars, no-multiple-empty-lines, max-nested-callbacks, space-before-function-paren, quotes, comma-spacing */
 'use strict';
 
-var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","1e912ddb0b5ba40924d843c204a42fb3"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","9d455af53f9c02bc76abd2bb576c164d"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","a552cc7519e0eeada8f4da7b4abff7a2"],["index.xml","62c43ef554019de6d4808768f5f4cbad"],["js/dom-scripts.js","f7e4e662f3c30e319ac30f9a6c28d0ca"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","db7fe2494bfde2c101d77d4aee481437"],["patterns/coding/code-blocks/index.html","008374cd248a69226fbeb9a5f2e08321"],["patterns/coding/color-palettes/index.html","236a8737b2b670fdce38fae8a6d3ad71"],["patterns/coding/command-line/index.html","a031c29caeb331d115de3903b095f965"],["patterns/coding/demo-embedding/index.html","497363d2a5ac7c01b407a818b2b0ebd1"],["patterns/coding/file-trees/index.html","e12eae853786f0b68544054b59e11ba5"],["patterns/coding/index.html","f2b85b8ce0aa726b0ba8aa113728a2fa"],["patterns/coding/index.xml","c8141d2e5b185b41c7c2297cbe9761a9"],["patterns/coding/tested/index.html","8e1bcb24fa0e7370f713048a869165bb"],["patterns/coding/writing-inline-demos/index.html","8fbeb23997b3756bf6f3a2c9c1a67299"],["patterns/index.html","7b47be5899ec30a3aeaf2dc7e28abbe3"],["patterns/index.xml","fef34844f84d6c8ad7e27732478291a7"],["patterns/installation/index.html","f48a577c4ace02cede7d6f66351ff775"],["patterns/library-setup/index.html","14e4a60d2fe024a0a722d9f85a528bfc"],["patterns/media/including-images/index.html","e65131871f35d80140640dfb57ce7f0a"],["patterns/media/including-videos/index.html","2ab8f61e69ad1f42de521643d82d6ba7"],["patterns/media/index.html","afbe1a8787560e95612db633ad72f7e0"],["patterns/media/index.xml","38cdadb4cc97fb22238e2342ed8d4d31"],["patterns/printing/index.html","1c9ae2485478d4c92785f14143fce173"],["patterns/serving/index.html","17ac49843cd3caea71bd6e056ce99741"],["patterns/writing/expandable-sections/index.html","1b247a43ea0939554d2467acdf47bf37"],["patterns/writing/index.html","0ebe64b64174e93af1445cb83571317a"],["patterns/writing/index.xml","7975bc05d66958e02f1433099f033636"],["patterns/writing/library-structure/index.html","7e9cf01677661439660da36dcd55c758"],["patterns/writing/markdown-and-metadata/index.html","cafe0ffe59d4b3d40075f87f3eaec2b7"],["patterns/writing/notes-and-warnings/index.html","ab545e3cf355dc1f017a7f6710476f1f"],["patterns/writing/references/index.html","d2a7ff0750bcae52574fbe04aa96ea3d"],["patterns/writing/tables-of-contents/index.html","291666b7cee3bf30fc9744a64a57fc5e"],["print-version/index.html","c09c94212f0ecb31c0da67f8e6431872"],["sitemap.xml","001c1e642c492c18a637bccfcfc2fe9d"],["tags/index.xml","5af18d25fdcb072a78c1603adacee4f6"],["tags/markdown/index.html","165c08d51fb0d5470737f5d82b979738"],["tags/markdown/index.xml","757d307cdf85883859ac95ea20527f4a"],["tags/metadata/index.html","9e96d01aeb1f18f22e2f4c6c9c198615"],["tags/metadata/index.xml","b6989e44540f4745072a2063369de173"]];
+var precacheConfig = [["browserconfig.xml","67c3113b1574fecc6015d56d774e1d38"],["categories/index.xml","0ac1d02cfbcad2fcc8c13b2c54715338"],["css/fonts/miriamlibre-bold.woff","96496f6f06535d25b3bcba876917ca35"],["css/fonts/miriamlibre-bold.woff2","668defa44d9a74dd709ce0c826a5eb11"],["css/images/arrow_effect.svg","1434d178461f70c16b77acb4bdbc51e3"],["css/images/icon-tick.svg","35d4d4728ea80d254508b2bca4109d70"],["css/images/stripe.svg","fa3f32a026b6a1bb04ee98d963432e15"],["css/prism.css","004029c8c70ed2bbaa5d9debcf14f8c7"],["css/styles.css","1e912ddb0b5ba40924d843c204a42fb3"],["images/android-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/android-icon-192x192.png","4c07782e52e0ab714074e6d3d69dc3ec"],["images/android-icon-36x36.png","3b2cd8c925a66bf84c89b68bb30e5f62"],["images/android-icon-48x48.png","45dc386eea1d8a46216a8b6de9b156c6"],["images/android-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/android-icon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/apple-icon-114x114.png","72e127d6f01dfcd2ba2340141babc536"],["images/apple-icon-120x120.png","bc7cd9e36869e66aaca78412207bf723"],["images/apple-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/apple-icon-152x152.png","567c64205576865b5e5d06c849613ca2"],["images/apple-icon-180x180.png","6b8734c446bf02ab50be598b4c01ec9c"],["images/apple-icon-57x57.png","f8c586086752c78870820b6190d6b42b"],["images/apple-icon-60x60.png","6e88df111e506bcd5501bed4ff10542e"],["images/apple-icon-72x72.png","b04c64637efed2b04fa900ddfcbfe75d"],["images/apple-icon-76x76.png","d8666e0ac256f39f8c5c628486bd71fb"],["images/apple-icon-precomposed.png","725f6cec25256abb1db10385e0724400"],["images/apple-icon.png","725f6cec25256abb1db10385e0724400"],["images/bad_design_system.png","9c0e87a34e7d842b0e2831dc947249aa"],["images/browser-Chrome-Android.svg","3100b2a9c5f0e34982c717fc2aa46d73"],["images/browser-Chrome.svg","fa39b4be6727525330e928f582fbe80a"],["images/browser-Edge.svg","9e8265ab8f6a701587a4271dd3aa6a73"],["images/browser-Firefox-Android.svg","452df7b9e83c70a07e8e03b4e8dab9c4"],["images/browser-Firefox.svg","d3093eda664be3d0cc6d791e1386420f"],["images/browser-IE.svg","13e192cf2b3fe17e7049a49b7d085caa"],["images/browser-Opera.svg","95d65630c9f7deef6a3098af8f5baf9f"],["images/browser-Safari-iOS.svg","f729e629ec998ec40d313495d7257741"],["images/browser-Safari.svg","523ee9491f5a937b8975f4d23aa77f62"],["images/favicon-16x16.png","7a99c20d6c00babddd26d03607b8721d"],["images/favicon-32x32.png","129881474a1bf130027bff7a1e89febd"],["images/favicon-96x96.png","bd9c126a4d6baf7ce442122ce0e89e11"],["images/favicon.ico","81c46feedbfcc6c6dc9495e4fd5adfad"],["images/icon-info.svg","53a6c555ce41f818556c71ab0dfc533b"],["images/icon-tag.svg","f067bbbc072941b2a0335679300bfc6c"],["images/icon-warning.svg","2a4322abbee9aed694fadb50e98a1f61"],["images/logo.svg","9d455af53f9c02bc76abd2bb576c164d"],["images/ms-icon-144x144.png","43e1f47f182b13d0dee15f510213e928"],["images/ms-icon-150x150.png","e73370837ab9060772a18d62aaacd0f0"],["images/ms-icon-310x310.png","8a7143516b929702e3309bb537a99c5c"],["images/ms-icon-70x70.png","d7c6e7368733d53b5f979546d5aa4fe9"],["images/open_in_desktop.png","e899d6679b011aa7b0e783683d90d99b"],["images/serve_from_docs.png","15ae9eac3737a21593ebe00a9312bf9e"],["index.html","f707c0fd040fe50d76c40d40e3e05cec"],["index.xml","ef29de151434be9a3d87e43f15239ba3"],["js/dom-scripts.js","d5e9b1332233181e5fe3d4ddd4d9c87b"],["js/prism.js","0c1fb8d3a69ee7c91dbf0f361ded7763"],["js/service-worker-registration.js","d60f01dc1393cbaaf4f7435339074d5e"],["js/webcomponents.js","c5f6fe397db634cde89f66c2f1bc2f62"],["manifest.json","db7fe2494bfde2c101d77d4aee481437"],["patterns/coding/code-blocks/index.html","8fb826af8c32f308ee48a2bc879aa5ab"],["patterns/coding/color-palettes/index.html","74def0130b3ed572d3b654ce86bb0818"],["patterns/coding/command-line/index.html","139d1e708035c094fcea87d3eb5b4fcd"],["patterns/coding/demo-embedding/index.html","179c084236115a5d321322dbd4561b55"],["patterns/coding/file-trees/index.html","bc53640bcc5230feffe7e502782720c6"],["patterns/coding/index.html","f94f3ecac2e9b7286dd9ed6c407eb08b"],["patterns/coding/index.xml","c8141d2e5b185b41c7c2297cbe9761a9"],["patterns/coding/tested/index.html","b255235c434af3ccd9d03833bf578d50"],["patterns/coding/writing-inline-demos/index.html","7e1a1339f57d5e4a6c4f6148d0ae5c52"],["patterns/index.html","2900c584770257d4310cddf22868c9bb"],["patterns/index.xml","9e80532fc90e93a802d19c126f144f36"],["patterns/installation/index.html","b6116678e1ff601f6807c3a22aac58b7"],["patterns/library-setup/index.html","290cd1dc549836d4b009a140073312fa"],["patterns/media/including-images/index.html","ecf3b3d6183fe1f1ca5c635702f29537"],["patterns/media/including-videos/index.html","34a871c5c1fc9cc2ba5165cf96eacc36"],["patterns/media/index.html","dfbce2f678a2823a70a8ea643661f921"],["patterns/media/index.xml","38cdadb4cc97fb22238e2342ed8d4d31"],["patterns/printing/index.html","5ab8b4530310ae09bb5d963a20d8a422"],["patterns/serving/index.html","84c57099fe75a319f4cc37170a9edbfe"],["patterns/writing/expandable-sections/index.html","6ea6dcc64f50c630732461641b9f280a"],["patterns/writing/index.html","4d01a9d8d983dacc4e7c188889362dd0"],["patterns/writing/index.xml","06262a6c511c5878cd393d5ef8d4c405"],["patterns/writing/library-structure/index.html","5645574ddb422ef0d04d0eb73854c3e1"],["patterns/writing/markdown-and-metadata/index.html","9541693801037b020978936352006617"],["patterns/writing/notes-and-warnings/index.html","466f0f11fec5705f11fbfb5ef85dcb0e"],["patterns/writing/references/index.html","e226a64a0374c39295996d5b904415f3"],["patterns/writing/tables-of-contents/index.html","81c95bc3d0bb9bd09380023e3136cedb"],["print-version/index.html","911b207b3de1c1f15b326d8d9792dfee"],["sitemap.xml","001c1e642c492c18a637bccfcfc2fe9d"],["tags/index.xml","5af18d25fdcb072a78c1603adacee4f6"],["tags/markdown/index.html","9804d93c91d9908d5b6981630b8b40b2"],["tags/markdown/index.xml","757d307cdf85883859ac95ea20527f4a"],["tags/metadata/index.html","3b93d77a7e1e17b3804636bf7ea241dc"],["tags/metadata/index.xml","b6989e44540f4745072a2063369de173"]];
 var cacheName = 'sw-precache-v3-sw-precache-' + (self.registration ? self.registration.scope : '');
 
 
diff --git a/docs/tags/markdown/index.html b/docs/tags/markdown/index.html
index 0e1db36..1297e06 100644
--- a/docs/tags/markdown/index.html
+++ b/docs/tags/markdown/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,7 @@
           
   <main id="main">
     <h1>
-      <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
+      <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
         <use xlink:href="#tag"></use>
       </svg>
       Tagged &#x201c;Markdown&#x201d;
@@ -321,7 +359,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Markdown &amp; metadata
     </a>
   </h2>
diff --git a/docs/tags/metadata/index.html b/docs/tags/metadata/index.html
index 666d876..9cf294a 100644
--- a/docs/tags/metadata/index.html
+++ b/docs/tags/metadata/index.html
@@ -136,7 +136,7 @@
             
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -147,28 +147,36 @@
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/installation/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Installation</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/library-setup/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Library setup</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/serving/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Serving</span>
                         </a>
                       </li>
                     
                       <li class="pattern">
                         <a href="https://heydon.github.io/infusion/patterns/printing/" >
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">Printing</span>
                         </a>
                       </li>
@@ -180,42 +188,54 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/library-structure/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Library structure</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Markdown &amp; metadata</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/expandable-sections/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Expandable sections</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/notes-and-warnings/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Notes &amp; warnings</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/references/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">References</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/writing/tables-of-contents/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tables of contents</span>
                               </a>
                             </li>
@@ -229,14 +249,18 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-images/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including images</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/media/including-videos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Including videos</span>
                               </a>
                             </li>
@@ -250,49 +274,63 @@
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/code-blocks/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Code blocks</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/demo-embedding/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Demo embedding</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/writing-inline-demos/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Writing inline demos</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/color-palettes/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Color palettes</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/command-line/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Command line</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/file-trees/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">File trees</span>
                               </a>
                             </li>
                           
                             <li class="pattern">
                               <a href="https://heydon.github.io/infusion/patterns/coding/tested/" >
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">Tested using...</span>
                               </a>
                             </li>
@@ -311,7 +349,7 @@
           
   <main id="main">
     <h1>
-      <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
+      <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
         <use xlink:href="#tag"></use>
       </svg>
       Tagged &#x201c;Metadata&#x201d;
@@ -321,7 +359,9 @@
           <li>
   <h2>
     <a href="https://heydon.github.io/infusion/patterns/writing/markdown-and-metadata/">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       Markdown &amp; metadata
     </a>
   </h2>
diff --git a/themes/infusion/layouts/_default/baseof.html b/themes/infusion/layouts/_default/baseof.html
index 07ead71..5d24ecc 100644
--- a/themes/infusion/layouts/_default/baseof.html
+++ b/themes/infusion/layouts/_default/baseof.html
@@ -65,7 +65,7 @@
             {{ block "nav" . }}
               <nav id="patterns-nav" class="patterns" role="navigation">
                 <button id="menu-button" aria-expanded="false">
-                  <svg viewBox="0 0 50 50" width="50" height="50">
+                  <svg viewBox="0 0 50 50" width="50" height="50" focusable="false">
                     <use xlink:href="#menu"></use>
                   </svg>
                   Menu
@@ -76,7 +76,9 @@
                     {{ range .Pages.ByWeight }}
                       <li class="pattern">
                         <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
-                          <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                          <svg class="bookmark-icon" aria-hidden="true" focusable="false" viewBox="0 0 40 50">
+                            <use xlink:href="#bookmark"></use>
+                          </svg>
                           <span class="text">{{ .Title }}</span>
                         </a>
                       </li>
@@ -88,7 +90,9 @@
                           {{ range .Pages.ByWeight }}
                             <li class="pattern">
                               <a href="{{ .RelPermalink }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
-                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                                  <use xlink:href="#bookmark"></use>
+                                </svg>
                                 <span class="text">{{ .Title }}</span>
                               </a>
                             </li>
diff --git a/themes/infusion/layouts/_default/li.html b/themes/infusion/layouts/_default/li.html
index f2c53cd..b2ec1b7 100644
--- a/themes/infusion/layouts/_default/li.html
+++ b/themes/infusion/layouts/_default/li.html
@@ -1,7 +1,9 @@
 <li>
   <h2>
     <a href="{{ .Permalink }}">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       {{ .Title }}
     </a>
   </h2>
diff --git a/themes/infusion/layouts/patterns/li.html b/themes/infusion/layouts/patterns/li.html
index f2c53cd..b2ec1b7 100644
--- a/themes/infusion/layouts/patterns/li.html
+++ b/themes/infusion/layouts/patterns/li.html
@@ -1,7 +1,9 @@
 <li>
   <h2>
     <a href="{{ .Permalink }}">
-      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+      <svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       {{ .Title }}
     </a>
   </h2>
diff --git a/themes/infusion/layouts/patterns/single.html b/themes/infusion/layouts/patterns/single.html
index 126b660..743e806 100644
--- a/themes/infusion/layouts/patterns/single.html
+++ b/themes/infusion/layouts/patterns/single.html
@@ -1,7 +1,9 @@
 {{ define "main" }}
   <main id="main">
     <h1>
-      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg> 
+      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+        <use xlink:href="#bookmark"></use>
+      </svg>
       {{ .Title }}
     </h1>
     {{ if isset .Params "tags" }}
@@ -12,7 +14,7 @@
             {{ if ne . "example tag"}}
               {{ if ne . "another tag"}}
                 <li>
-                  <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
+                  <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
                     <use xlink:href="#tag"></use>
                   </svg>
                   <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a>
diff --git a/themes/infusion/layouts/print-version/single.html b/themes/infusion/layouts/print-version/single.html
index 0fd0fa0..6c4092c 100644
--- a/themes/infusion/layouts/print-version/single.html
+++ b/themes/infusion/layouts/print-version/single.html
@@ -16,7 +16,9 @@
           {{ range .Pages.ByWeight }}
             <li class="pattern">
               <a href="#{{ .Title | urlize }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
-                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                  <use xlink:href="#bookmark"></use>
+                </svg>
                 <span class="text">{{ .Title }}</span>
               </a>
             </li>
@@ -28,7 +30,9 @@
                 {{ range .Pages.ByWeight }}
                   <li class="pattern">
                     <a href="#{{ .Title | urlize }}" {{ if eq $current.Title .Title  }}aria-current="page"{{ end }}>
-                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+                      <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                        <use xlink:href="#bookmark"></use>
+                      </svg>
                       <span class="text">{{ .Title }}</span>
                     </a>
                   </li>
@@ -44,7 +48,9 @@
       {{ range .Pages.ByWeight }}
         <div class="pattern-section">
           <h1 id="{{ .Title | urlize }}" tabindex="-1">
-            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+            <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+              <use xlink:href="#bookmark"></use>
+            </svg>
             {{ .Title }}
           </h1>
           {{ .Content }}
@@ -54,7 +60,9 @@
         {{ range .Pages.ByWeight }}
           <div class="pattern-section">
             <h1 id="{{ .Title | urlize }}" tabindex="-1">
-              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
+              <svg class="bookmark-icon" aria-hidden="true" viewBox="0 0 40 50" focusable="false">
+                <use xlink:href="#bookmark"></use>
+              </svg>
               {{ .Title }}
             </h1>
             {{ .Content }}
diff --git a/themes/infusion/layouts/shortcodes/note.html b/themes/infusion/layouts/shortcodes/note.html
index 222d70b..1cf5b9c 100644
--- a/themes/infusion/layouts/shortcodes/note.html
+++ b/themes/infusion/layouts/shortcodes/note.html
@@ -1,6 +1,6 @@
 <aside aria-label="note" class="note">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729">
+    <svg aria-hidden="true" viewBox="0 0 41.667306 41.66729" focusable="false">
       <use xlink:href="#info"></use>
     </svg>
     {{ .Inner }}
diff --git a/themes/infusion/layouts/shortcodes/pattern.html b/themes/infusion/layouts/shortcodes/pattern.html
index f740873..e1b5141 100644
--- a/themes/infusion/layouts/shortcodes/pattern.html
+++ b/themes/infusion/layouts/shortcodes/pattern.html
@@ -1 +1 @@
-{{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}<a class="pattern-link" href="{{ .Permalink }}"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>{{ .Title }}</a>{{ end }}{{ end -}}
+{{ $title := .Get 0 }}{{ range .Site.Pages }}{{ if eq .Title $title }}<a class="pattern-link" href="{{ .Permalink }}"><svg class="bookmark" aria-hidden="true" viewBox="0 0 40 50" focusable="false"> <use xlink:href="#bookmark"></use> </svg>{{ .Title }}</a>{{ end }}{{ end -}}
diff --git a/themes/infusion/layouts/shortcodes/principles.html b/themes/infusion/layouts/shortcodes/principles.html
index 061868c..3778a23 100644
--- a/themes/infusion/layouts/shortcodes/principles.html
+++ b/themes/infusion/layouts/shortcodes/principles.html
@@ -8,7 +8,9 @@
       <li>
         <strong>
           <a href="https://inclusivedesignprinciples.org#{{ .title | urlize }}">
-            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true"><use xlink:href="#balloon"></use></svg>
+            <svg class="balloon-icon" viewBox="0 0 141.73228 177.16535" aria-hidden="true" focusable="false">
+              <use xlink:href="#balloon"></use>
+            </svg>
             {{ .title }}
           </a>:
         </strong>
diff --git a/themes/infusion/layouts/shortcodes/warning.html b/themes/infusion/layouts/shortcodes/warning.html
index 339c608..cac95ae 100644
--- a/themes/infusion/layouts/shortcodes/warning.html
+++ b/themes/infusion/layouts/shortcodes/warning.html
@@ -1,6 +1,6 @@
 <aside aria-label="warning" class="note warning">
   <div>
-    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302">
+    <svg aria-hidden="true" viewBox="0 0 48.430474 41.646302" focusable="false">
       <use xlink:href="#warning"></use>
     </svg>
     {{ .Inner }}
diff --git a/themes/infusion/layouts/shortcodes/wcag.html b/themes/infusion/layouts/shortcodes/wcag.html
index 920a80a..5296911 100644
--- a/themes/infusion/layouts/shortcodes/wcag.html
+++ b/themes/infusion/layouts/shortcodes/wcag.html
@@ -7,7 +7,9 @@
     {{ if in $included .ref_id }}
       <li>
         <strong><a href="{{ .url }}">
-          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
+          <svg class="wcag-icon" viewBox="0 0 127.09899 67.763" aria-hidden="true" focusable="false">
+            <use xlink:href="#w3c"></use>
+          </svg>
           {{ .ref_id }} {{ .title }}</a> (level {{ .level }}){{ if $descriptions }}:{{ end }}
         </strong>
         {{ if $descriptions }}
diff --git a/themes/infusion/layouts/taxonomy/tag.html b/themes/infusion/layouts/taxonomy/tag.html
index 0634caf..6c722fd 100644
--- a/themes/infusion/layouts/taxonomy/tag.html
+++ b/themes/infusion/layouts/taxonomy/tag.html
@@ -4,7 +4,7 @@
 {{ define "main" }}
   <main id="main">
     <h1>
-      <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535">
+      <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false">
         <use xlink:href="#tag"></use>
       </svg>
       Tagged &#x201c;{{ .Title }}&#x201d;
diff --git a/themes/infusion/static/js/dom-scripts.js b/themes/infusion/static/js/dom-scripts.js
index f960597..84a2f8f 100644
--- a/themes/infusion/static/js/dom-scripts.js
+++ b/themes/infusion/static/js/dom-scripts.js
@@ -69,7 +69,7 @@
       var link = document.createElement('a')
       link.setAttribute('href', '#' + id)
       link.setAttribute('aria-label', 'link for this section')
-      link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50"><use xlink:href="#link"></use></svg>'
+      link.innerHTML = '<svg aria-hidden="true" viewBox="0 0 50 50" focusable="false"> <use xlink:href="#link"></use> </svg>'
 
       container.appendChild(link)