♿️ feat(a11y): add skip to content link for keyboard navigation (#552)

Co-authored-by: Awiteb <a@4rs.nl>

i18n/ar.toml

@@ -30,6 +30,7 @@ few_results = "تم العثور على $NUMBER نتائج"  # for 3 to 10 searc
 many_results = "تم العثور على $NUMBER نتيجة"  # 11 or more search results.
 
 # Navigation.
+skip_to_content = "الإنتقال إلى المحتوى"
 pinned = "مثبتة"
 jump_to_posts = "الإنتقال إلى التدوينات"
 read_more = "إقرأ المزيد"

i18n/ca.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultat"  # "1 result"
 many_results = "$NUMBER resultats"  # "3 results"
 
 # Navigation.
+skip_to_content = "Saltar al contingut"
 pinned = "Fixada"
 jump_to_posts = "Saltar als articles"
 read_more = "Llegir més"

i18n/de.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER Ergebnis"  # "1 result"
 many_results = "$NUMBER Ergebnisse"  # "3 results"
 
 # Navigation.
+skip_to_content = "Zum Inhalt springen"
 pinned = "Angeheftet"
 jump_to_posts = "Zu den Beiträgen springen"
 read_more = "Weiterlesen"

i18n/en.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER result"  # "1 result"
 many_results = "$NUMBER results"  # "3 results"
 
 # Navigation.
+skip_to_content = "Skip to content"
 pinned = "Pinned"
 jump_to_posts = "Jump to posts"
 read_more = "Read more"

i18n/es.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultado"
 many_results = "$NUMBER resultados"
 
 # Navigation.
+skip_to_content = "Saltar al contenido"
 pinned = "Fijada"
 jump_to_posts = "Saltar a las entradas"
 read_more = "Leer más"

i18n/et.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER tulemus"  # "1 result"
 many_results = "$NUMBER tulemust"  # "3 results"
 
 # Navigation.
+skip_to_content = "Hüppa sisu juurde"
 pinned = "Kinnitatud"
 jump_to_posts = "Hüppa postitusteni"
 read_more = "Loe edasi"

i18n/fa.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER نتیجه"   # "1 result"
 many_results = "$NUMBER نتیجه"  # "3 results"
 
 # Navigation.
+skip_to_content = "پرش به محتوا"
 pinned = "سنجاق‌شده"
 jump_to_posts = "پرش به نوشته‌ها"
 read_more = "ادامه مطلب"

i18n/fi.toml

@@ -24,6 +24,7 @@ one_results = "$NUMBER tulos"  # "1 result"
 many_results = "$NUMBER tulosta"  # "3 results"
 
 # Navigation.
+skip_to_content = "Siirry sisältöön"
 # Some will prefer artikkeli (=article) instead of julkaisu (=publication), but this is more general
 pinned = "Kiinnitetty"
 jump_to_posts = "Siirry julkaisuihin"

i18n/fr.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER résultat"  # "1 result"
 many_results = "$NUMBER résultats"  # "3 results"
 
 # Navigation.
+skip_to_content = "Passer au contenu"
 pinned = "Épinglé"
 jump_to_posts = "Aller aux articles"
 read_more = "Lire plus"

i18n/hi.toml

@@ -25,6 +25,7 @@ one_results = "$NUMBER परिणाम"  # "1 result"
 many_results = "$NUMBER परिणाम"  # "3 results"
 
 # Navigation.
+skip_to_content = "सामग्री पर जाएं"
 pinned = "पिन किया गया"
 jump_to_posts = "पोस्ट पर जाएं"
 read_more = "और पढ़ें"

i18n/it.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER risultato"
 many_results = "$NUMBER risultati"
 
 # Navigation.
+skip_to_content = "Salta al contenuto"
 pinned = "In evidenza"
 jump_to_posts = "Vai ai post"
 read_more = "Leggi di più"

i18n/ja.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER 結果"  # "1 result"
 many_results = "$NUMBER 結果"  # "3 results"
 
 # Navigation.
+skip_to_content = "コンテンツにスキップ"
 pinned = "固定"
 jump_to_posts = "投稿へジャンプ"
 read_more = "続きを読む"

i18n/ko.toml

@@ -27,6 +27,7 @@ one_results = "$NUMBER 결과"  # "1 result"
 many_results = "$NUMBER 결과"  # "3 results"
 
 # Navigation.
+skip_to_content = "콘텐츠로 건너뛰기"
 pinned = "고정됨"
 jump_to_posts = "게시물로 이동"
 read_more = "더 읽기"

i18n/nl.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultaat"  # "1 result"
 many_results = "$NUMBER resultaten"  # "3 results"
 
 # Navigation.
+skip_to_content = "Naar inhoud springen"
 pinned = "Vastgezet"
 jump_to_posts = "Naar berichten springen"
 read_more = "Lees meer"

i18n/or.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER ପରିଣାମ"  # "1 result"
 many_results = "$NUMBER ପରିଣାମଗୁଡ଼ିକ"  # "3 results"
 
 # Navigation.
+skip_to_content = "ବିଷୟବସ୍ତୁକୁ ଯାଆନ୍ତୁ"
 pinned = "ପିନ୍ କରାଯାଇଛି"
 jump_to_posts = "ପୋଷ୍ଟକୁ ଯାଆନ୍ତୁ"
 read_more = "ଆହୁରି ପଢ଼ନ୍ତୁ"

i18n/pt-PT.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER resultado"  # "1 result"
 many_results = "$NUMBER resultados"  # "3 results"
 
 # Navigation.
+skip_to_content = "Pular para o conteúdo"
 pinned = "Fixado"
 jump_to_posts = "Ir para as publicações"
 read_more = "Ler mais"

i18n/ru.toml

@@ -28,6 +28,7 @@ few_results = "$NUMBER результата"  # 2, 3, 4 but not 12-14
 many_results = "$NUMBER результатов"  # 5-9, 0, 11-14, and others
 
 # Navigation.
+skip_to_content = "Перейти к содержанию"
 pinned = "Закреплено"
 jump_to_posts = "Перейти к записям"
 read_more = "Читать далее"

i18n/uk.toml

@@ -33,6 +33,7 @@ few_results = "$NUMBER результати"
 many_results = "$NUMBER результатів"
 
 # Navigation.
+skip_to_content = "Перейти до вмісту"
 pinned = "Закріплено"
 jump_to_posts = "Перейти до дописів"
 read_more = "Читати далі"

i18n/zh-Hans.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER 个结果"
 many_results = "$NUMBER 个结果"
 
 # Navigation.
+skip_to_content = "跳到内容"
 pinned = "置顶"
 jump_to_posts = "跳转到文章"
 read_more = "阅读全文"

i18n/zh-Hant.toml

@@ -23,6 +23,7 @@ one_results = "$NUMBER 個結果"
 many_results = "$NUMBER 個結果"
 
 # Navigation.
+skip_to_content = "跳到內容"
 pinned = "釘選"
 jump_to_posts = "跳轉到文章"
 read_more = "閱讀全文"

sass/parts/_misc.scss

@@ -328,3 +328,28 @@ details summary {
         flex-direction: column;
     }
 }
+
+#skip-link {
+    position: absolute;
+    top: -40px;
+    left: 0;
+    transform: translateY(-100%);
+    opacity: 0;
+    z-index: 9999;
+    transition: all 0.1s ease;
+    border-radius: 0 0 5px 0;
+    background-color: var(--primary-color);
+    padding: 4px 8px;
+    color: var(--hover-color);
+    font-weight: 500;
+    font-size: 0.9rem;
+    text-decoration: none;
+}
+
+#skip-link:focus {
+    top: 0;
+    transform: translateY(0);
+    opacity: 1;
+    outline: 2px solid var(--text-color);
+    outline-offset: 2px;
+}

templates/base.html

@@ -34,8 +34,9 @@ This variable will hold all the text strings for the language #}
 {% include "partials/header.html" %}
 
 <body{% if lang in rtl_languages %} dir="rtl"{% endif %}{% if config.extra.override_serif_with_sans %} class="use-sans-serif"{% endif %}>
+    <a href="#main-content" id="skip-link">{{ macros_translate::translate(key="skip_to_content", default="Skip to content", language_strings=language_strings) }}</a>
     {% include "partials/nav.html" %}
-    <div class="content">
+    <div class="content" id="main-content">
 
         {# Post page is the default #}
         {% block main_content %}