Source Code: (back to article)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessibility Navigation Example</title>
<script>
document.addEventListener('DOMContentLoaded', function () {
const links = document.querySelectorAll('a');
let currentFocus = 0;
links[currentFocus].focus();
document.addEventListener('keydown', function(event) {
if (event.key === "ArrowDown") {
currentFocus = (currentFocus + 1) % links.length;
links[currentFocus].focus();
event.preventDefault();
}
if (event.key === "ArrowUp") {
currentFocus = (currentFocus - 1 + links.length) % links.length;
links[currentFocus].focus();
event.preventDefault();
}
});
});
</script>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<p>Use the Up and Down arrow keys to navigate between the links.</p>
</body>
</html>