Why should we not skip levels (eg from H1 to H3)
Something to consider with the 'one <h1> at the beginning of the page' approach is you may find your navigation menu showing up as the default page description for every page in Google. I really need to fix that. 
I've been using that approach on sites such as National Historic Ships, but coming to the conclusion that it is, in fact, pants. For pretty much the reasons outlined above. On our 'About Us' page, for example, the most important heading is 'About Us', not the overall banner, which says 'National Historic Ships'.
Putting the content ahead of the banner in the HTML, then repositioning everything with CSS, would solve the problem of the Google page description and sort out the heading order properly too.
Share: 
EYG, similarly pedantic point: when talking about markup, "nesting" usually refers to placing one element inside the other. Because headings cannot be "nested" in the usual sense, I think a different word is needed. Perhaps "ordering" or "stepping"? Hmm, those don't seem very good either! 
Same thing happens for Calthorpe's site. If you do a realistic search of your site or a realistic search of Calthorpe, the description are fine. I guess Google just picks the first content-like lump of the document when you do a site-specific search without any keywords. Doing the same thing for Flickr would seem to support that theory, so I wouldn't worry about it.
| Johan007 wrote: |
| ...we can only mark-up content with headings. We can not mark-up site architecture's with headings. |
It may seem like a neat trick to reserve <h6> for your search box so JAWS users can skip to it quickly. However, I don't think other screen readers provide level-specific heading navigation so it may not provide as big a benefit as you think. Something I don't understand is how a user becomes aware of this shortcut in the first place. Does JAWS announce the level of each heading it encounters by default?
If you use a heading before the search form, you will probably be duplicating its text in the <legend> which would cause time-consuming repetition. Omitting the <legend> could make it harder to use the search form due to a lack of context announcements and it may not show up with such useful text in a "list of forms" dialogue. This seems like a usability lose-lose to me.
In this particular case, the use of an illogical heading structure rather than making proper use of <legend> may cause accessibility issues. These risks, caused by using markup improperly, would seem to defeat the vendor-specific usability gain which is motivating you to use this trick? A carefully chosen accesskey almost seems preferable!
Share:
Handy tip on cahoot's accessibility page. Put a <h1> at the start of your page content, and JAWS users can skip your navigation by pressing Shift+1.
JAWS users can correct me on this, but my understanding is it reads out a straight list of the page headings regardless of level, in reading order.
Share:
| twoplayer wrote: |
| An example might help my point. Say I have a two column site - the <h1> is in the second column (the main part of the page). Then I want to put contact info or something relatively important in the left-hand column. It's could be a good idea to give that a <h2> like "Contact Information" so that people are able to skip to it or find it in a consistent place on my pages.
I could use CSS to place the main content before the left-hand, or I could settle for the semantically incorrect <h2> followed by the <h1>. The only other choice I have is to design the page so that nothing of importance precedes the <h1> (in the code). I'd go for the well structured information with CSS to position it every time. IMO obviously  |
Why not place the h1 column/div before the h2 column/div in the markup and then use CSS to float both divs to the right?
This would have the effect of placing the h1 column/div to the right of the h2 column/div.
Share:
| eatyourgreens wrote: |
| Putting the content ahead of the banner in the HTML, then repositioning everything with CSS, would solve the problem of the Google page description and sort out the heading order properly too. |
Why not simply use a meta description? Google will use that for the description instead.
(If the site is listed in DMOZ, then it will default to using the listing text, but you can force Google to use your meta description by using the meta noodp tag.)
Share:
| Bill Posters wrote: |
|
Why not simply use a meta description? Google will use that for the description instead. |
Long story, but it's easier to change the <h2> tags in the template than try to generate a meta description tag for each page, particularly where the pages are being built from a database, like the ship registry listings.
Basically, the only editable field in the template <head> is <title>, due to the code design.
Share:
| Bill Posters wrote: |
| Why not place the h1 column/div before the h2 column/div in the markup and then use CSS to float both divs to the right?
This would have the effect of placing the h1 column/div to the right of the h2 column/div. |
I thought this was what you were against - I must have misunderstood.
[Steps away from the thread]
Share:
Sorry, just had another thought about meta description and google. Just that, in the Holy Spirit of Microformats, I would rather have the description on google be a bit of text that's visible on the page to the reader, than something that's hidden in the head. That's my ideal case.
Interesting that Google takes the first chunk of text after <h1> as indicative of the content of the page, in the absence of any other criteria.
Share:
| twoplayer wrote: |
| I thought this was what you were against - I must have misunderstood.
[Steps away from the thread] |
Don't do that - you made a very pertinent point about headings, accessibility and search engines.
Share:
| Johan007 wrote: |
| It is a usability enhancement aimed purely at Screen Reader users such as JAWS who would like quick access to the “site search” located in the page by assigning it a heading (as well as <label>) so it is quickly identified and an easy short cut. |
This is a technique called structural labels.
Since this is the case you could, in fact, place your search form and heading in your source where the heading makes sense to the semantic outline of your document instead of basing your decision on how easy it is to style (say, with simple floats) in support of your visual design.
Which is what I said the first time around - in less words.
Share:
| eatyourgreens wrote: | ||
Long story, but it's easier to change the <h2> tags in the template than try to generate a meta description tag for each page, particularly where the pages are being built from a database, like the ship registry listings. Basically, the only editable field in the template <head> is <title>, due to the code design. |
Debating what is best practice is largely an academic exercise when you're skewing your solutions for the sake of one, poorly-devised site with a limited CMS framework.
Certain solutions might be the best that you can hope for, but they aren't always going to have much mileage as a generalised best practice for those who aren't trying to workaround the same limitations.
| twoplayer wrote: | ||
I thought this was what you were against - I must have misunderstood. |
Just to clarify…
The left/right columnar positioning would only be one of presentation. The underlying markup would still reflect a natural, and imho, correct, info architecture/structure - i.e. the h1 would appear before the h2, etc…
| eatyourgreens wrote: |
| in the Holy Spirit of Microformats, I would rather have the description on google be a bit of text that's visible on the page to the reader, than something that's hidden in the head. That's my ideal case. |
Bear in mind that it's a 'meta' description, which means that it's supposed to be categorical information about the content, rather than actual content recited verbatim.
Ideally…
There is (read: should be) nothing to stop you inserting page-specific meta content into the meta descriptions elements. In fact, it's an advisable thing to do, for the sake of seo.
EYG, in the case of the site with the limited CMS, I'd strongly consider reworking the CMS, rather than messing about with the markup in the hope of working around its shortcomings.
Get the obstacles out of your way. 'Fix' the CMS/template now, rather than spend any more time devising workarounds which give you the outcome you want in spite of the CMS.
Share:
| Cerbera wrote: |
| In this particular case, the use of an illogical heading structure rather than making proper use of <legend> |
| Cerbera wrote: |
| ...carefully chosen accesskey almost seems preferable! |
| eatyourgreens wrote: |
| Put a <h1> at the start of your page content, and JAWS users can skip your navigation by pressing Shift+1.. |
| terrence wood wrote: |
| This is a technique called structural labels. |
Johan De Silva / Portfolio
Share:
| Johan007 wrote: |
| Exactly what I was getting at but for this technique to work it would not make sense to mark up with H1 and H2’s demoting the content to a lower heading. Putting Structural Labels as lower heading such as <h6> would be perfect if was not for the fact it fails W3C. |
I thought the entire purpose of using "structural labels" was to get a sane document outline. Why would you want to use H6?Simon Pieters
Share:
| zcorpan wrote: |
| I thought the entire purpose of using "structural labels" was to get a sane document outline. Why would you want to use H6? |
| Cerbera wrote: |
| It may seem like a neat trick to reserve <h6> for your search box so JAWS users can skip to it quickly. However, I don't think other screen readers provide level-specific heading navigation so it may not provide as big a benefit as you think. Something I don't understand is how a user becomes aware of this shortcut in the first place. Does JAWS announce the level of each heading it encounters by default? |
Johan De Silva / Portfolio
Share:
Just my 2 pence worth.
Most user research i've conducted and had feedback with is 'some' JAWS users don't use the skip to next heading level feature. They use 'skip to next heading'.
One user expected correct heading levels important if he was reading a technical manual online.
his quote
| Quote: |
| Personally I like the headings. I think that any means to jump to different parts of a webpage is useful and speeds up the process of finding what you want.
On a page like this it's not easy to tell which heading what you're looking for will come under, so on your first visit to the site you might well end up looking through all the links. However, on subsequent visits to the site you might remember that the links you're interested in all come under the "Study at UWE" link and so will be able to find them faster. The heading levels are perhaps not so important on a page like this - they come into their own in structured documents such as manuals where you can jump from one section to another, or one sub-section to another within a section. I think the only thing I would expect on a page like this is that the main content of the page starts with a h1, which it does. The fact that h1's come after h2's doesn't bother me, although I suspect it might be bothering an automatic checker, which might be what prompted your question? |
I've been having the same wranglings on a university site i help maintain
discussion here
Share: