I thought I'd repost my response on the GAWDS list here for those who don't use the GAWDS mailing list (shame on you!).
The problem with headings is that nobody seems to be able to agree on which heading needs to start the page, and whether it’s OK to skip a heading or not. The problem is further compounded by automated tools which will fail you if you use more than one H1 or if you skip a heading element (say H2 to H4).
I need to make it clear that I'm not advocating sloppy structure, sites should be designed with a logical heirarchy as part of good design practice.
I’ve put something together here to try and illustrate how JAWS users use headings and why these main concerns may or may not actually be that important from a practical perspective. So if you've inherited a site or these changes are out of your control you'll be able to have a better idea of their impact.
How Screen Reader users use headings
Here are some examples (for those that haven't had the opportunity to use a screen reader like JAWS):By pressing "H" on the keyboard, the user can cycle through headings. JAWS will announce the status of each heading as it appears in the cycle e.g. "heading level 1 company name", so in this way, the user gets an indication of the order of the headings as they appear on the page and what heading level they have been given (we'll come back to that in a minute).
Another way is by bringing up the heading list dialogue (insert + f6 in JAWS), which displays a list of all the headings on the page. The user can cycle through the headings using the up and down keys, the level of each heading is also announced in this dialogue. The dialogue has controls so that the user can sort headings by alphabetical order or tab order and also only to list headings at each level. I've personally never seen these dialogues used, but different users will have different methods, and I don't spend as much time with these guys as I would like.
So in terms of what the user expects to see as a H1 or H2 is highly dependent on whether they've visited the site before as each site has a slightly different approach to how headings are used (I doubt that this will ever change) so I think the most important thing is consistency.
Consistency is the key
If you're using H1 for your site logo, article heading or navigation heading, then you need to keep using that on every page of the site. If you find yourself in the position where you don't have a logical H3 for the page, but you've consistently implemented H4 for your section headings then in my view (and I'm sure others will disagree) you should keep on using the H4. Don't feel inclined to change it to a H3 just for that page just because you don't want to skip a heading level or to pass through some automated accessibility testing robot.This is important because if you happen to have a lot of headings on the page and typically the user is looking for a certain H4, they could assume that this new page doesn't have the information they are looking for because it has been changed to H3.
There is a counter-argument to this because if you have a H2 and no H3, you may assume that the user won't look for a H4. But this is a weak hypothesis, because if the user is using the "H" key as described above, they will happen across the next headings whether it be a H3 or a H4. If they are using the headings dialogue, the same is true. If they are using the dialogue to list the H3s only and find nothing, this is also fine, because they will be looking for the H3 equivalent of what they found on another page. If there is not one, then it is logical that none are present.
I think the debate is useful and interesting in that a consensus will bring greater consistency across the web, but developers shouldn't mistake this as being a critical issue, the key (in my opinion) is to use lots of headings (as long as they are relevant) and use them consistently across all pages. And I'm aware that what I've stated may not quite be in accordance with W3C specifications (I'm not sure), but works best from a practical perspective.
I hope someone finds some of this useful.
If you're a screen reader user, I'd love to hear from you.
12 comments:
Outstanding Grant. This is always a good topic of discussion. Personally I feel h1 should only be used once per page otherwise I feel it is like giving a book two titles. That was a common practice in the 17th-18th century, but not nowadays.
Thus I tend to go for a structure like this (common for me)
h1 - Site name
h1 small - Tag line (home) or page name but still with h1
h2 - Main content heading
h3 - Content sub heading
h4 - Content Sub-sub heading
h5 - Keep drilling down if needed
h2 - Next page section/article heading
So on and so forth.
I do it this way -- this branching method -- because in my mind it just makes sense.
I'd agree that we need to consider the practical aspects of screen reader navigation here and not just implement guidelines without due thought. However, I've never come across a situation where a page's structure has been so very different from any other page on a site that I've had to consider either skipping headings or structuring the page differently.
It seems to me that, if this is happening to you regularly, you need to go back and re-examine the basic stucture you're trying to work to and re-assess whether it's the right one for this site.
Thanks Mike :)
Mel:
I don't disagree with you. I can't think of an instance where it would be logical to skip a heading either.
But this sort of scenario can feasibly be caused by certain limitations (inherited code, dodgy CMS), and I just wanted to examine what this means from a practical point of view.
Thanks for your comment though, I may amend the blog so it doesn't look like I'm advocating sloppy structural design.
Grant et al: good description of the way many screenreader users take advantage of the header element. I'd add just one thing. As discussed at last weeks WSG London meet up screenreaders use a virtual or buffer copy of a page rather than interacting with it direct, in this buffer there are a number of preset perameters (some of which are user changeable) one of which is line length. For example the default line length which Jaws applies to sites is 150 characters. If your text is more than 150 characters long Jaws wraps it on to multiple lines. If this text has a header applied then the reader hears "header #" before the text on each line. not too much of a problem for text of between 150-300 charcaters (less than 2 virtual lines) but really slows you down and winds you up if the text is longer. So, while it goes without saying for anyone with an ounce of common sense, don't mark up large chunks of text as with a header element just because it makes it look nice. someting not uncommon on a number of social authroing sites - I think it was LiveJournal who published all blogg postings in h4 text for a while - they may still do so, I tend not to read anything on there nowadays because of that.
Thanks Adrian, that's good feedback. It's amazing how markup is abused sometimes. Blockquote for indent is the classic example, but why on earth would someone use a H4 to mark up text? Bizarre.
It's really good to know this. I was practicing some CSS just the other day and I was thinking to myself, why should I even bother using the h1 function. I'll pay extra attention to heading use from now on!
Great article, Grant. I always use that mantra of "consistency is key" - although, I too can't think of a time that my heading structure has warranted skipping a heading level. It's certainly worth bearing in mind - you never know when you might end up with someone else's code.
Good point by Adrian on the misuse of heading tags around text that isn't a heading. I've seen this misused for SEO reasons - headings often being given more weight than say paragraphs. As explained, this can often lead to unsuitably long headings.
I have to completely agree with you. Although I tend to think there must be a simpler solution than simply telling people to use H4 in place of H3 when they have no H3. I'm confused by the notion that they wouldn't have an H3 because the natural order of things would generally require them to have one, wouldn't it? I don't mean to sound daft, but isn't it true that there are simpler ways to creating harmony and consistency than forcing yourself to use the exact same header typing structure on every single page? I think the problem isn't necessarily formatting because if people really knew what they were putting up for the world to see then it wouldn't be an issue of hierarchy and structure, now would it? It's really about making sure that you have the correct information and the correct amount of information to create the structure and follow it throughout your own site. If you don't have the correct amount to inherently follow the structure without any problems then perhaps you need something slightly simpler than what you have.
Excellent read! There was one time when I presented our portfolio to a client. The client saw that we had projects where we skipped the use of headings. He asked our team leader about it and we all ended up listening to his discussion about the benefits of having headings. Technically, you’re discussing about creating headings and the way it should be done. Can you also provide us with some ideas, as to which is better with or without headings.
Aston Villa rode their luck at Hull City where an 88-minute own goal from Kamil Zayatte saw them leapfrog three points clear of Arsenal and into fourth place in the Premier League wow gold with a 1-0 win.
Villa had to survive Hull penalty wotlk gold appeals for a handball against Ashley Young in time added on, television replays showing that referee Steve Bennett wow gold correctly rejected the claims after consulting a linesman.
Bennett had been involved in controversy after just five minutes when American goalkeeper Brad Friedel looked to have handed Hull the initiative and threaten Villa's return to the Champions League qualifying wow gold zone.
Friedel spilled the ball under pressure from Nick Barmby and stand-in right-back Nigel Reo-Coker turned it into his own net as he attempted to wow gold clear.
But Bennett cut short celebrations at the KC Stadium -- and let Friedel off the hook -- when he ruled out the score for an wow wotlkapparent infringement by Barmby.
Zayatte's intervention from a Young cross bound for wow gold Gabriel Agbonlahor then saw Villa leapfrog Arsenal and draw level with Manchester United on 38 points -- seven adrift of leaders Liverpool and four wow gold behind Chelsea.
Stung by an on-pitch dressing down wow gold by manager Phil Brown at Manchester City last week, Hull showed five changes and a vastly improved performance.
Promoted Hull were looking for only their second win in 11 games while wow gold Villa arrived unbeaten in seven and it looked to be heading for a goalless draw when the home side suffered a cruel late blow.
South Africa inflicted the first home series defeat on Australia in almost 16 years as they wrapped up a nine-wicket win over the world's number one ranked world of warcraft gold Test nation in Melbourne on Tuesday.
Captain Graeme Smith wow power leveling hit a fluent 75 as his side successfully passed a world of warcraft gold modest victory target of 183 on the final day at the MCG to take an wow powerleveling unassailable 2-0 lead.
It was the South African's first-ever Test series triumph in Australia and dofus kamas victory in the third and final match in Sydney will see them leapfrog the home side at the top of the global rankings.
Hashim Amla (30 not out) scored the winning runs shortly after lunch as South Africa became the first team to overcome Australia at home since the West Indies in 1992-93.
South Africa were never under any pressure in their run chase and did not lose a wicket until just before lunch when the inspirational Smith Lord of the Rings Online Gold was trapped leg before wicket by Nathan LOTRO Gold Hauritz.
Smith had flyff penya dominated a 121-run opening stand flyff money with Neil McKenzie, hitting ffxi gil 10 boundaries.
McKenzie struggled to buy ffxi gil a half century and survived strong eq2 plat lbw shouts from Brett Lee, eq2 gold who was bowling despite an injured foot that will Lord of the Rings Online gold keep him out of the Sydney Test.
South Africa's LOTRO gold victory was set up by a brilliant maiden Test century fly for fun penya from JP Duminy, who shared a stunning flyff penya 180-run ninth wicket partnership with pace bowler Dale Final Fantasy XI gil Steyn.
It gave the tourists ffxi gil a priceless 65-run lead on first innings before man of eq2 plat the match Steyn worked his magic with the ball as Australia were eq2 gold bowled out on the fourth day for 247 in their second innings.
The pugnacious Smith was virtually runescape money lost for words in his victory speech.
"It has been such a special moment runescape gold for all of us, it has been an incredible team effort," he said.
"I have been smiling non-stop wow po since we hit the winning runs.
"To be 2-0 up after this game was something wow or we only dreamt of."
South Africa won the first Test in Perth from an unlikely position, chasing 414 for victory for the loss of only four wickets.
When Wow Gold wolf finally found the wow gold cheap hole in the chimney he crawled cheap wow gold down and KERSPLASH right into that kettle of water and that was cheapest wow gold the end of his troubles with the big bad wolf.
game4power.
The next day the Buy Wow Goldlittle pig invited hisbuy gold wow mother over . She said "You see it is just as mygamegoldI told you. The way to get along in the world is to do world of warcraft gold things as well as you can." Fortunately for that little pig, he buy cheap wow gold learned that lesson. And he just k4gold lived happily ever after!.
Post a Comment