Add a "Skip to content" link that's first in the tab order

[pradyunsg]

Discussed in #436

[ailin-nemui]

Here could be one possible implementation:

diff --git a/src/furo/theme/furo/page.html b/src/furo/theme/furo/page.html
index 4b7ed04e..5da0ecbe 100644
--- a/src/furo/theme/furo/page.html
+++ b/src/furo/theme/furo/page.html
@@ -4,6 +4,10 @@
 {{ super() }}
 {% include "partials/icons.html" %}
 
+<div>
+  <a href="#start-of-content" class="skip-to-content-link">Skip to content</a>
+</div>
+
 <input type="checkbox" class="sidebar-toggle" name="__navigation" id="__navigation">
 <input type="checkbox" class="sidebar-toggle" name="__toc" id="__toc">
 <label class="overlay sidebar-overlay" for="__navigation">
@@ -87,7 +91,7 @@
             <i class="icon"><svg><use href="#svg-toc"></use></svg></i>
           </label>
         </div>
-        <article role="main">
+        <article role="main"><a id="start-of-content"></a>
           {% block content %}{{ body }}{% endblock %}
         </article>
       </div>

Then add this CSS:

.skip-to-content-link {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    padding: 16px !important;
    background-color: var(--color-highlighted-background) !important;
    color: var(--color-highlighted-text) !important;
}

.skip-to-content-link:focus {
    z-index: 50;
    width: auto;
    height: auto;
    clip: auto;
}

[pradyunsg]

Resolved with 9450148