Help?
The idea is to basically generate additional on-page anchor options (jump to here, etc.)
Yes, trying to gear content to display differently on different browsers is asking for trouble because there are “other” browsers and devices which won’t be able to handle your multiple designs appropriately. A strong usability-sensitive, web standards approach is still the best idea in any case. For example…
this is right on the money. Good solid semantics are one of the best ways to make your content functional for typical IE/FF users, while still providing excellent cross-browser compatible experiences for all users whether they are using visual browsers or even monitors. e.g. laptops for the blind are frequently half the size (or less) of a similar powered laptop because they don’t need a screen or a full keyboard, just the 7 keys of a standard braille writer and a dynamic braille display. On well-designed websites, the students in my book club (grades 6 -12), could surf the net faster than I could.
This is far and away the best alternative. Just because a user ISN’T blind doesn’t mean that they don’t need well thought out navigation. The same problems are faced by ANYONE even if they’re using a mouse or touchpad (though the problem is especially acute for keyboard users). What you want to do is put the links on the page, ideally you just want to condense it into one area of the page, though two is probably acceptable. I still put my navigation last on the page (though skip links now give you the ability to safely put it just about anywhere). I have a skip link at the beginning of the section which returns you to the H1 at the top of the page. My navigation sections include a site wide navbar and a section specific navbar for navigating through the website. I use drop down menus with both navbars to provide a less cluttered look. I also have one additional section with just 2-4 inpage links with a single sentence to provide description of the target location; this makes it easier to navigate around the page.
Can you show me what you mean by hidden image? Skip nav are usually just links that use CSS to hide them. Paste this code into a html file, open it in a browser, hit tab a few times.
ul#skip {
position: absolute;
left: -2000em;
z-index: 9999;
padding: 0;
margin: 0;
}
ul#skip a:active, ul#skip a:focus {
width: 150px;
padding: 3px;
margin: 0;
background-color: #5A2E69;
color: #FFFFFF;
font-weight: bold;
position: absolute;
height: auto;
left: 2000em;
z-index: 999;
top: 0;
right: 0;
}
<body>
<ul id="skip">
<li><a href="#nav">Jump to Navigation</a></li>
<li><a href="#mainC">Jump to Content</a></li>
</ul>
....
Lynx doesn’t obey CSS. Put the extra links on a div set to display: none and call it a day.
I’m not too keen on using several H1’s on a page. I’m still firmly in the “H1 should only be used for the title of the page” camp, so generating the screen reader links allows people like me to do both: maintain a strict page structure while providing links to areas for the visually impaired.
There’s a <title> attribute for the title of the page. If you use h1 only once then Jaws will report “There is 1 heading on this page”. Most users will assume at that point that the site isn’t compliant to the reader and give up, so it is critical that you get your head out of the sand here unless you don’t care whether your pages are accessible or not.
Well, this may stem from me not having used Jaws. I was actually viewing some sites through Lynx, and trying to navigate… and even the simplest task was horrendously difficult. I kept thinking “this would be a whole lot easier if I had a set of links that would list what’s on this page so that I could get there in one click.”
So it’s not really a main menu issue, and I don’t think it’s a semantic structure issue.
The idea is really:
“On this page, you will find: 1) The Main Topic: insert title here. 2) some additional info related to this topic that you might find interesting. 3) The comments section” etc. etc.
I’m not too keen on using several H1’s on a page. I’m still firmly in the “H1 should only be used for the title of the page” camp, so generating the screen reader links allows people like me to do both: maintain a strict page structure while providing links to areas for the visually impaired.
If you mean Jaws et al they don’t usually announce their presence in the user agent string, and that’s going to be the only way PHP can even begin to have a clue about what’s going on client side. Further, it isn’t reliable.
The intent of your question seems to be how to provide navigation for the user of a screen reader. The answer isn’t more anchor tags served up for them, it’s proper use of header tags.
<h1>Section I</h1>
<h2>Topic A</h2>
<h3>Sub Topic A</h3>
<h2>Topic B</h2>
<h2>Topic C</h2>
<h1>Section II</h1>
A screen reader reads off the h1 tags when asked, and the user can “focus” to the tag, it then starts reading the h2 tags until the user focuses to them.
CSS allows you to style these tags however you want so your sighted users don’t even need to be especially aware of their presence.
All of this can be done without any special PHP at all.
BTW, the alt property of an img tag is the text that will be read off by the reader.
Hey Ryan,
It’s number 2 on Jim Thatcher’s site:
- Hiding the skip link
(a) Unimportant image: Use an image that otherwise needs no text equivalent and place the link text as alt text on that image.
<a href=“#main”>
<img src=“spacer.gif” width=“1” height=“1” alt=“Skip Navigation”></a>
When using the tab key the link text “skip navigation” will be heard by a screen reader and without a screen reader the href can be observed in the status bar of the browser.
Which one do you think works better? The position absolute one you posted would also work perfectly.
Just remember not to set display: none or visibility: hidden on the skip links, screen readers WILL skip hidden content. 
PS: I realise you didn’t use it rguy84, I just thought it was important to mention to justify absolute positioning!
Many thanks Ryan. The hidden image approach looks like the closest solution to the one I was looking for - easy navigation for screen readers without having to create extra visual overhead for regular browser users.
thumbs up
His statement is not about this at all. XLCowBoy - ignore this advise, you meant title of the page, ie artlcle title not <title>. See my comment above
in your first and second example: JAWS will say “there are 3 headings and __ links on this page” when it initially loads a page.
This can be misleading. JAWS gives a screen reader user shortcut keys to jump from heading to heading, just like you can jump from link to link and form element by hitting the tab key. This key for JAWS is ‘h’, this cycles through all the headings in linear order of the page, not just h1. users can hit another hotkey (ins + F8 I think) to bring up a dialog of all headings on the page. They have a similar hotkey for all links, which is why you shouldn’t use click here, et al for linking text.
Again misleading, the total number of headings on a page at page load. I am sure there is a hotkey that announces this again if needed, probably within the heading dialog discussed above.
That all being said, there are no way to tell if a user is using a screen reader. However, you can make skip navigation links for users using a screen reader or the ones who use a keyboard to navigate to skip to sections of a page. You can search probably here at SP or the web on tips on how to make links. While this post isn’t relevant, it may be an interesting read for you: http://www.sitepoint.com/forums/showthread.php?t=700590
You can download NVDA, which is a free screen reader, and is similar to JAWS. I recommend reading about it before you play with it. 
Jaws reads off all non nested h1 tags it finds when the user hits ‘h’. If he hits enter while it reads a heading it then reads the h2 tags between that h1 tag and the next, and so on for the other layers.
Keep in mind it is possible to over do it - too many headers can be as bad as too few or none.
I’m not blind, but I’ve watched a blind man navigate with the program and it is enlightening to see what they go through.
On 90% of the pages of the net there might be one h1 tag for the page title, and no other headers. You can’t make Jaws go straight to your h2 tags – It parses your example like this…
“There is 1 header at this level for this document.”
<read>
“Fast Food Reviews. there are 2 more headers for this document.”
<read>
“McDonald’s Meals, Subway Meals”
And so on. Typically though they won’t dig down for one header because it is a strong indicator there are no other headers.
Whether you agree with this structure or not is largely irrelevant. It’s how Jaws parses pages and it’s how the users of Jaws tend to behave.
Behavior tenancies aside, you’re forcing them through an unnecessary repeat of the page title whenever you structure a document like that which is annoying.
Cheers Michael. That was something I wasn’t sure of (WebbIE apparently still obeys CSS, or so says their website).
There’s a <title> attribute for the title of the page. If you use h1 only once then Jaws will report “There is 1 heading on this page”. Most users will assume at that point that the site isn’t compliant to the reader and give up, so it is critical that you get your head out of the sand here unless you don’t care whether your pages are accessible or not.
Pardon the ignorance, but why not H2’s?
e.g.
H1 - page title (say, Fast Food Reviews)
H2 - entry title (McDonald’s Meals)
H2 - entry title (Subway Meals)
and in an article page
H1 - article title (say, McDonald’s Meals)
H2 - article sub-topic (Breakfast Meals)
H3 - sub-topic sub-section (McMuffins)
etc.?
Well, I’m now using a setup similar to Ryan’s suggestion of off-screen links. It’s at the very top of each page, and has “skip to nav”, “skip to content”, and a few other links that are dynamically generated depending on the content of the page, such as “skip to categories”, “skip to tag list”, “skip to comments”, etc.
Be careful cowboy, you want to overload the user. You only want to overload the user.
I hear you. I’ve dropped it down to three: skip to nav, skip to content, and skip to comments. I think that should alright now?
Looks good :tup: