HTML 使用 JAWS 的标签阅读顺序

Question

我有一个 Web 应用程序，其中页脚不在 html 文件的末尾，但我想最后使用 JAWS 17.0 阅读它。

我怎样才能做到这一点？是否有任何解决方案来指定 reader 的阅读顺序？

    <div data-app-constraint="left" id="webnykApp_leftsidebar" style="visibility: visible;">
    <div data-app-constraint="center" id="webnykApp_index" style="visibility: visible; display: none;"></div>
    <div data-app-constraint="top" id="webnykApp_overlay" style="visibility: visible;">
    <div data-app-constraint="bottom" id="webnykApp_footer" style="visibility: visible;">
       <footer id="footer" class="footer">
            <ul class="footer__links">
                <li class="footer__link"><a href="http://nav.gov.hu/nav/kapcsolat" target="_blank">kapcsolatfelvétel</a></li>
                <li class="footer__link"><a href="http://nav.gov.hu/nav/adatvedelem/adatvedelem.html" target="_blank">adatvédelmi tájékoztató</a></li>
                <li class="footer__link"><a href="http://nav.gov.hu/nav/impresszum/impresszum.html" target="_blank">Impresszum</a></li>
            </ul>
        </footer>
    <div data-app-constraint="center" id="webnykApp_login" style="visibility: visible;">

"webnykApp_login" 内容已在页脚后阅读。

Answer 1

简短回答：您唯一的选择是将源代码顺序中的 <footer> 移动到您希望屏幕阅读的位置 reader。最好在 <main> 或具有 role="main" 的东西之外（否则无法通过地标导航到达）。

更长的答案：如果您的框架确实不允许您控制 HTML 的源顺序，那么考虑在页面处理后使用脚本将元素移动到您想要的位置（例如最后一个按源顺序）。

更长的、错误的答案：CSS Flex 允许您使用 order 属性覆盖页面源代码中的内容。 Sort of。这由不同的浏览器以不同的方式处理并且可能会改变。

更长，也有问题的答案：tabindex。不要使用 tabindex 来尝试解决这个问题。屏幕 reader 用户不使用 Tab 键作为导航页面的唯一方式。

更长、不受支持的答案：aria-flowto。喜欢tabindex、aria-flowto is intended to provide an alternate route for keyboard导航。但它没有实际支持，并且会为 SR 用户带来与 tabindex.

相同的问题

HTML 使用 JAWS 的标签阅读顺序

HTML tag reading order with JAWS

html

wai-aria

jaws-screen-reader