I am trying to sort through the most accessible way of structuring the navigation links and skip-links on a page. Consider a page with top-nav/header, content, and bottom-nav/footer. Since we can move things around with CSS, there are a a few ways of structuring the source order:
- Put the content at the start of the page and put the navigation links at the end. Put a skip-to-navigation link at the top. Use CSS to move the top-nav to the top.
- Put the navigation links at the start of the page and put the content at the end. Put a skip-to-content link at the top. Use CSS to move the bottom-nav to the bottom.
- Have the source order match the visual display: top-nav, content, bottom-nav. Put a skip-to-content link at the top. That part is easy. Now:
- How do we make sure screen reader users can find the bottom nav? Will they assume all the nav in at the top?
- Should there be a skip-to-bottom-nav link somewhere? Where?
- Are there headers, title attributes, or ARIA attributes I can use to ensure screen reader users will be able to find the navigation and content?
I am interested in hearing others' experiences of skip-links in action, in particular from screen reader users. What designs work well for you?
I had an idea for possible solution: What if the page started with a some text, not visible, but available to screen readers, saying, "This page has a header, content, and footer", with those being links to the main parts of the page, a sort of page map? It could also be worded, "Skip to… header, content, footer", again with those as links.
It would be important for the page map to contain just the few key sections of the page otherwise it would be so long that people would want to be able to skip the page map.
It seems to me that a better solution would be if the key parts of the page could be labelled as such and a screen reader user would be told about the page structure automatically by the screen reader. Perhaps @aria-labelledby, @aria-label, and @role do this; I don't know how these properties actual get used by screen readers in the real world.