Page (and heading) structure conundrum

[adh32]

I really don't think putting the h1 before the accessibility menus is a big deal -- it's ONE MALFING LINE. Hoody-hoo!

You have an obnoxious attitude. Do you respond to everyone like that, including fellow pros, colleagues, and clients; or is it just an attitude that is reserved for hobbyists and novices? Way to put people off asking questions.

To answer your question: it is primarily about figuring out how to position the H1 in visual relation to the content division in which it currently resides, if it ends up not actually being in there. Such things as this are still open to development. It should be in there, to my mind. I don't want two navigation lists in between the H1 and its sub-heading: that just seems odd and messy. And I hate messy.

Though, just to rag on you a bit (not entirely serious -- not sure if those are placeholders or if you'll have them in the final code) if the accessibility menu going to be a UL, why have the DIV? If the main menu is going to be a UL, why have the DIV? Both are perfectly good block-level containers so don't waste a div on them for NOTHING -- especially the one you won't display for screen/print.

In the case of the main nav list, it is a way to conveniently/reliably position a list AND a heading together in a particular part of the page. Which is to the left of the content in this case, as I already mentioned. If I don't use a heading above the main nav, then I won't need to use the div and I might remove it.

In the case of the skip links list, the div contains, or will eventually contain, a logo and/or website title. Again, it might be removed later if the design doesn't need it. But at the end of the day, if I want to use a div, I will.

Which is what I assumed OP was asking about... and why the 'screen reader' part of it made little if any sense.

Don't assume. If you were not sure what I meant, you could have taken the time to ask.

[adh32]

Stomme poes: you mentioned that only some browsers can use links that point to IDs. Can you elaborate a bit about that? I thought that all browsers can do this. The ones that I've tried so far can.

[Stormrider]

You have an obnoxious attitude. Do you respond to everyone like that, including fellow pros, colleagues, and clients; or is it just an attitude that is reserved for hobbyists and novices? Way to put people off asking questions.

Don't take it personally... DS deals with everyone on the forum in the same way unfortunately!

[adh32]

Don't take it personally... DS deals with everyone on the forum in the same way unfortunately!

Yes, I've noticed. Sitepoint is too soft on that kind of thing.

[Stomme poes]

Stomme poes: you mentioned that only some browsers can use links that point to IDs. Can you elaborate a bit about that? I thought that all browsers can do this. The ones that I've tried so far can.

Safari. Try it. If you have Windows, Safari-for-Windows is the same.
The visual focus will move!
But the next "tab" you make will have you starting back where you were, not where you skipped to.
This actually kinda makes sense. How do other browsers bring focus "down" somewhere on a page when there's no element for that browser to focus on? But somehow most browsers get it right. Safari doesn't.

Arg, I can't find the WebAim PDF, it's somewhere on their site: they have a WWF smackdown-style comparison of some screen readers. They have VoiceOver failing skip links, but it's really because of Safari, not VO.

[adh32]

Thanks, Stomme poes. I haven't tested Safari yet (mostly because I installed it once, hated it as a browser, and promptly got rid of it). Regarding the Voice Over skiplink issue: is that anything to do with specifying a height of 0? Hiding Content for Accessibility - Snook.ca mentions that.

[deathshadow60]

Safari. Try it. If you have Windows, Safari-for-Windows is the same.
The visual focus will move!
But the next "tab" you make will have you starting back where you were, not where you skipped to.
This actually kinda makes sense. How do other browsers bring focus "down" somewhere on a page when there's no element for that browser to focus on? But somehow most browsers get it right. Safari doesn't.

I'm trying to wrap my head around what you are saying, and failing MISERABLY; what the devil does tabbing around have to do with hash-links... tabs are for anchors and form elements, not going between on-page ID's...

OH, you're calling something I consider annoying (empty anchors showing up in the tab list) a feature... That's one of the reasons I don't use empty anchors anymore as they aren't something I want recieving focus!

The behavior you are describing I think is present in EVERY browser too, not just Safari. ID's can't recieve focus, and just act as a scrollto -- that's WHY I use them!

I think that's why I was having trouble understanding your last two posts - I kept thinking "why the devil would you WANT them to recieve focus? How does a DIV or H# even RECEIVE focus?!?"

Arg, I can't find the WebAim PDF, it's somewhere on their site: they have a WWF smackdown-style comparison of some screen readers. They have VoiceOver failing skip links, but it's really because of Safari, not VO.

That sounds handy - I'd like to see that.

[deathshadow60]

Off Topic:

You have an obnoxious attitude. Do you respond to everyone like that, including fellow pros, colleagues, and clients; or is it just an attitude that is reserved for hobbyists and novices? Way to put people off asking questions.

I think it's a regionalism -- several years ago I was working in an office where a little granola Californian started working as a secretary, and she started screaming at everyone "you can't talk to people like this" --- we were all staring at each-other like she had five heads. "Like what?"

Depends on how you are used to business being done -- It's like when people start flaming on what *** Simon Cowell or Gordon Ramsey are; when to me they act like every professional businessmen I've ever dealt with in New England.

While when I went to work in Georgia for six months it was like oil and vinegar. Ok, oil vs. piss and vinegar. Everyone had this bizarre "status quo for the win" lackadaisical attitude where it was forbidden to say anything negative EVER -- of course that's why the company I worked for kept rotating people from up north through that office... I was the fourth person sent down and when the boss got back a report that I was "shaking things up too much" I told him on a conference call "Look, just shut down this entire office or replace EVERYONE with staff from up there. We can't get anyone here to show the work ethic we do up there."

I was taught you see something bad, you call it bad - "if you can't say anything nice" being a cop-out for thin-skinned lazy people who are afraid of progress, or those who as Ghandi would put it "to put on the cloak of nonviolence to cover impotence."

Having traveled the world, I've seen it all over the place -- an attitude that's acceptable in New England will get you slapped in Florida. An attitude that's acceptable in California will get you bullied in the midwest. An attitude that's acceptable in western Europe will get your face punched in on the streets of NY. <brooklyn>Ya got a freaking problem with that</brooklyn>

Just consider my posts the equivalent of "Ya cahnt geht theyah frum heeyah". It's a proud tradition...
We're starting a war, we're going to have to offend SOMEBODY! -- John Adams.

Well, that and it seems NOBODY has a sense of humor anymore.

[Stomme poes]

That sounds handy - I'd like to see that.

I didn't find it terribly informative... I think they made it for fun or something. Someone really wanted to have a PDF about screen readers and "wrestlers", lawlz. Anyway, the skip links section just says VoiceOver is a steaming pile of fail... but let's see it in Firefox on a Mac. Yeah, should have magically no problem with skip links then.

http://webaim.org/presentations/2011.../srfaceoff.pdf

That's one of the reasons I don't use empty anchors anymore as they aren't something I want recieving focus!

You remove it from your page's regular tab index by adding a tabindex of -1 to it. Simple. Now you're not stopped by annoying empty anchors if you're just moving straight through the page because they are no longer part of the page's tab index.

I think that's why I was having trouble understanding your last two posts - I kept thinking "why the devil would you WANT them to recieve focus? How does a DIV or H# even RECEIVE focus?!?"

The point isn't for them to receive focus; the point is that your keyboard focus is no longer at the top, but in the area where you want to go (and the area you're looking at if you jumped way down the page). After clicking a skip link, I want the next time I hit "tab" to take me to the next available anchor or form control, not remain at the top of the page.

The behavior you are describing I think is present in EVERY browser too, not just Safari. ID's can't recieve focus, and just act as a scrollto --

If that's all it does is visually scroll the page then it's worthless for actually moving your focus around the page. Luckily, IE, FF and Opera will move your focus (you use Opera, so you get this benefit if the links weren't set off-screen... with Shift+arrow instead of Tab but whatever). If I want to select a link, I don't want to tab (or Shift-down) 500 times. I want a skip link to take my focus away from the top of the page down to where I'm interested.

Chrome and Safari make your next "Tab" bring you back UP to where the skip link is (focus remained there all along and your next Tab is the next focusable thing after your skip link). If your skip link goes to a focusable destination though, then your next Tab will take you to the next focusable thing from where you skipped to, like all other browsers do.

If I want to scroll the page visually, I use arrows or pagedown... or most common, /searchterm or CTRL-F searchterm. Hitting "tab" from there doesn't take me to the next focusable thing after my search term... it takes me back to where my focus was before I searched.

So sorry, I had just web back to check on Chrome because I'd forgotten if this was a Safari thing or a webkit thing... well, it's a webkit thing because Epiphany does it too.

So webkit browsers have this issue.

And apparently some people are using Javascript to fix this which is just... ew.

[Stomme poes]

Okay now I'm pissed, because I was SURE I had the things working in Safari on my older pages by having a focusable destination. Now I'm not seeing that anywhere.

Time to dig through my old code and find the last one who worked... cause I'm really not keen on Javascripting something that should Just Work in browsers.

[deathshadow60]

Okay now I'm pissed, because I was SURE

Not something I'd bother with in the first place -- I've always thought of hash links as being like hitting page down. I don't complaint when normal scrolling with page-up/page-down or the mouse wheel doesn't change the focus... tap and drag doesn't change focus... normal arrow scrolling using the d-pad on a phone doesn't change focus...

Wouldn't even occur to me as a way to navigate a page.

[Stomme poes]

Crusty:
I also ran across Opera documentation mentioning that you can header-navigate with it too: s and w I think?

[khurram_007]

I am a web developer but not too good in seo. But i know one thing H1 only use for your main site keyword. and 99% it will be on top of the page like logo and main header text. and use h2 or h3 for other page headings.