Source Code:
(back to article)
Submit
Result:
Report an issue
<!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>