diff --git a/assets/css/style.css b/assets/css/style.css
index 74b366a..e4180f9 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -15,6 +15,16 @@ html {
color: #888
}
+#a11y-skip {
+ position: absolute;
+ left: -1000%;
+}
+
+#a11y-skip:focus {
+ display: inline;
+ left: 5%;
+}
+
#nav-menu li {
display: inline-block;
margin-left: 20px;
diff --git a/assets/js/main.js b/assets/js/main.js
index 4b4d791..88a404b 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -38,22 +38,38 @@ function localize_menu() {
}
}
+function localize_navigation() {
+ const skip = document.getElementById('a11y-skip')
+ const post_list = document.getElementById('nav-posts')
+
+ if (lang == 'pt') {
+ skip.innerText = 'Saltar para o conteúdo principal'
+ post_list.ariaLabel = 'Listagem de todas as postagens'
+ } else {
+ skip.innerText = 'Skip to main content'
+ post_list.ariaLabel = 'Listing of all posts'
+ }
+}
+
const en_lang_swapper = document.getElementById('lang-swap-en')
const pt_lang_swapper = document.getElementById('lang-swap-pt')
en_lang_swapper.addEventListener("click", () => {
lang = 'en'
populate_posts()
+ localize_navigation()
localize_menu()
})
pt_lang_swapper.addEventListener("click", () => {
lang = 'pt'
populate_posts()
+ localize_navigation()
localize_menu()
})
document.addEventListener('DOMContentLoaded', () => {
populate_posts()
+ localize_navigation()
localize_menu()
})
diff --git a/index.html b/index.html
index dc60268..c31784b 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
+ Skip to main content