Page (and heading) structure conundrum
I want to include headings, positioned off-screen, inside major page divisions such as the navigation and footer. To me, it makes a lot of sense to improve ease of use by providing these extra "hooks" (for want of a better word) by which I know that a lot of vision-limited users navigate when they use assistive software. I imagine that it would also improve their understanding of the page structure and content. Win-win (for those users, at least).
The trouble for me is in dealing with anything that sits above the main content (and its H1) in the HTML. My current structure is simple and minimal. At the very top, I have skip links; then a position:fixed vertical menu on the left with the main content to the right of it, and nothing else except a footer:
As far as I can see, I have limited options. (a) Move the main menu to below the main content and change the skip links to suit. This would not alter its screen position but I have major reservations about this unconventional HTML layout that would not match the screen layout. And the skip links couldn't receive a heading in that case, though that might not be a huge issue. (b) Be slack with heading hierarchy and use lower-numbered headings in the divs above the content. Again, I'm not keen on that. (c) Move the H1 up in the HTML, above the skip links, and somehow work around or correct the HTML/screen order (because the H1 ideally needs to be below the skip links so that it's directly above the content: this makes much more sense to me). (d) Put a generic website title in an H1 and use an H2 for the content's title. I know that some sites do that, but I hate it: making the most important heading a generic title or logo? It just doesn't make sense to me. (e) Who knows...
<div id="skip-links">skip links in a UL</div>
<div id="navigation">main menu items in a UL</div>
and a simple footer div...
I need recommendations and counsel, please folks! How do you solve layout issues like this in a way that ticks all the boxes: semantic HTML, tidy structure, matching HTML/screen order, meaningful content, helping all users... :confused: