0

I'm working on some accessibility stuff for a client and the site is basically in Ruby on Rails but I know this needs some JS that I'm pretty weak with. The site has three links that then trigger an iframe. So it's something like this:

<%=link_to("Alpha", "#alpha")%>
<%=link_to("Beta", "#beta")%>
<%=link_to("Gamma", "#gamma")%>
<iframe src="<%=@url%>" width="100%" height="500px;" id="myFrame" tabindex="0" title="<%=@title%>"></iframe>
<script>
 window.onload = function() {
  document.getElementById("myFrame").focus();
};
</script>

I'm testing the screen reading using ChromeVox and on page load/and reload it will read off the navigation from the top of the page. The keyboard focus is definitely on the iFrame but it reads through the entire page.

So how do I force the entire focus on the iFrame on a page reload?

Jake
  • 1,328
  • 1
  • 21
  • 51
  • This question needs improving. What is "RoR" you refer to? Also, are you referring to a screen reader when you say it reads the links? Which screen reader is it? Lastly, I don't follow the scripting laguage you've used here - it would be easier to answer if we could see the resulting HTML of the page. – andrewmacpherson Dec 05 '18 at 00:50

1 Answers1

0

This answer here seems like it may work for you. That would mean updating your code to have the aria-live attribute "assertive", such as:

<iframe src="<%=@url%>" width="100%" height="500px;" id="myFrame" aria-live="assertive" tabindex="0" title="<%=@title%>"></iframe>
Adam
  • 490
  • 7
  • 21