I have a web application where the footer is not at the end of html file, but i would like to read it last with JAWS 17.0.
How can i achive this? Are there any solution to specify reading order for the 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;">
The "webnykApp_login" content has read after the footer.
Short answer: Your only option is to move the <footer>
in the source order to where you want it to be read by a screen reader. Ideally outside of the <main>
or thing that has role="main"
(otherwise it cannot be reached via landmark navigation).
Longer answer: If your framework genuinely does not allow you to control the source order of the HTML, then consider using script after the page has processed to move the element where you want it (such as last in the source order).
Longer, broken answer: CSS Flex allows you to use the order
property to override what is in the page source. Sort of. This is handled differently by different browsers and is likely to change.
Longer, also broken answer: tabindex
. Do not use tabindex
to try to resolve this. Screen reader users do not use the Tab key as the only way to navigate a page.
Longer, unsupported answer: aria-flowto
. Like tabindex
, aria-flowto
is intended to provide an alternate route for keyboard navigation. But it has no practical support and creates the same issues for SR users as tabindex
.