【问题标题】:On page reload entire focus on an id在页面上重新加载整个焦点在一个 id
【发布时间】:2018-12-03 15:31:45
【问题描述】:

我正在为客户开发一些可访问性的东西,该网站基本上是在 Ruby on Rails 中,但我知道这需要一些我很弱的 JS。该站点具有三个链接,然后触发 iframe。所以它是这样的:

<%=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>

我正在使用 ChromeVox 测试屏幕阅读,并在页面加载/重新加载时从页面顶部读取导航。键盘焦点肯定在 iFrame 上,但它会读取整个页面。

那么如何在页面重新加载时强制将整个焦点放在 iFrame 上?

【问题讨论】:

  • 这个问题需要改进。你指的是什么“RoR”?另外,当您说它读取链接时,您指的是屏幕阅读器吗?它是哪个屏幕阅读器?最后,我不遵循您在此处使用的脚本语言 - 如果我们能看到页面的结果 HTML,会更容易回答。

标签: javascript accessibility


【解决方案1】:

这个答案here 似乎对你有用。这意味着更新您的代码以具有 aria-live 属性“assertive”,例如:

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

【讨论】:

    猜你喜欢
    • 2020-05-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-18
    • 2016-04-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多