jutty/blog
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add 'Skip to main content' a11y link

Browse source
This commit is contained in:
jultty 2024-06-05 11:21:14 -03:00
commit 1a9a3ecb45
3 changed files with 30 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
assets/css/style.css
View file

@ -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;

16
assets/js/main.js
View file

@ -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()
})

5
index.html
View file

@ -12,6 +12,7 @@
<script src="assets/js/main.js" defer></script>
</head>
<body>
<a id="a11y-skip" href="#main">Skip to main content</a>
<header>
<pre class="header-art"
role="img" aria-label="ASCII art with jutty.dev in a 3D, slanted font">
@ -37,7 +38,9 @@
<li><a id="nav-menu-rss" href="https://blog.jutty.dev/assets/rss/en.rss">RSS</a></li>
<li><a href="https://mastodon.bsd.cafe/@jutty">Mastodon</a></li>
</ul>
<ul id="nav-posts"></ul>
<main id="main">
<ul id="nav-posts" aria-label="Listing of all posts"></ul>
</main>
</nav>
</body>
</html>