CODEWITHSUNDEEP
javascriptscrollkeyboardaccessibility
goltornate
goltornate

Reputation: 103

Arrow up and down navigation blocked inside iframe

I'm trying to improve the accessibility of my website for keyboard-only users. I'm blocked on arrow up and down navigation to scroll on page. Normally it works, but if I play a video inside an iframe, it stop to work (because scrolling is finite inside iframe). Is there a javascript (or jquery, or html) solution?

Upvotes: 0

Views: 933

Answers (1)

slugolicious
slugolicious

Reputation: 17543

It's great that you're trying to make things better for keyboard only users for accessibility purposes, but the way it's currently working is correct. When the iframe receives focus (or any elements in the iframe), all the events go to the iframe. If the iframe had more stuff to display than would fit in the iframe, the up/down arrows would scroll the contents of the iframe and not the main page. If you force the up/down to scroll the main page while the focus is in the iframe, you'd be causing unexpected behavior.

Now, the end user probably doesn't know or care the you're using iframes and just sees a video on your page and may wonder why they can no longer scroll the page using the up/down arrow keys. That's an unfortunate consequence of how iframes are implemented.

One thing you might try is adding a keyboard event handler on the iframe and when you get an up/down arrow key, bubble it up to the containing document. Perhaps something like this (untested):

document.getElementById("myiframe").contentDocument.addEventListener(...)

where you have

<iframe id="myiframe">

Upvotes: 1

Related Questions