About Skip Links
For accessibility by keyboard, it's helpful to have so-called "skip links" at the top of your page that link to the main sections of your page, e.g., main content or footer navigation. That way, the reader doesn't need to browse the top navigation to start reading the content.
It's a good practice to hide those links until the visitor presses the tab key for the first time. Here's an example with TailwindCSS classes where the skip links slide down on the tab key:
<body>
<div class="fixed top-0 left-0 z-[1000]
transform -translate-y-full transition-transform
duration-200 ease-in-out focus-within:translate-y-0
bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-400
rounded-md"
>
<ul class="p-3 flex flex-col gap-2">
<li><a href="#main_content">
{% translate "Skip to main content" %}
</a></li>
<li><a href="#footer_menu">
{% translate "Skip to bottom menu" %}
</a></li>
</ul>
</div>
<header>
{% block header %}{% endblock %}
</header>
<main id="main_content" tabindex="-1">
{% block main %}{% endblock %}
</main>
<footer id="footer_menu" tabindex="-1">
{% block footer %}{% endblock %}
</footer>
</body>
Tips and Tricks Web Design Development Accessibility Django 5.2 Django 4.2 Django 3.2 HTML5 TailwindCSS
Also by me
Django Paddle Subscriptions app
For Django-based SaaS projects.
Django GDPR Cookie Consent app
For Django websites that use cookies.
