KPC
Kevin Powell - Community•3y ago
~MARSMAN~

use Tab key to focus on elements in specific sections

I have my website landing page-scrolling works as if it's a slider/carousel. now, all types of users can navigate through it, except for keyboard users who can't use the "Tab" key when they wanna focus on the buttons and links inside the page because I disabled it. Because it messes up the page transitions and content lol. anyway, I've tried to work around it and activate the tab only on certain slides of the page, I used the code as follows: 
document.onkeydown = function(e) {
                if (e.key === 'Tab') {
                    if (about.isActive == true){
                        $("#about-btn").focus()
                        e.preventDefault();
                    }
                    else {
                        e.preventDefault();
                    }
                }
            };
document.onkeydown = function(e) {
                if (e.key === 'Tab') {
                    if (about.isActive == true){
                        $("#about-btn").focus()
                        e.preventDefault();
                    }
                    else {
                        e.preventDefault();
                    }
                }
            };
Where the "about" is a class containing the about section and isActive variable. This only works on one focusable element per section, in sections like services, it will only focus on the first element and that's it. I tried to use loops and it didn't work as expected. instead, it looped all the a and buttons on the page and messed it up. So my question is, How can I loop the focusable elements in a section ( only when this section is in view) without messing up my page animation and content?
3 Replies
~MARSMAN~
~MARSMAN~OP•3y ago
Here's the website:
~MARSMAN~
~MARSMAN~OP•3y ago
https://marsman.pythonanywhere.com
MARSMAN Web Developer & Designer based in Cairo, Egypt.
A web developer and designer ready to shape your digital journey by building creative and impactful website experiences for passionate brands and individuals.
~MARSMAN~
~MARSMAN~OP•3y ago
Any suggestions?😬

Did you find this page helpful?