Reading order and html source order
Home / Site Building & Testing / Reading order and html source order
When considering the power of using CSS for layout, we are no longer constrained to the usual html sequence. We can, for example, place the main content of a page much closer to the top of the html. One would think this makes the page more accessible, since people using assisting technologies would not need to skip over the usual header and left navigation elements. They could begin immediately with the main content. As a bonus, search engines can get to the main content easier and might do a better job of indexing the material.
What reading order is really preferred? Does this proposal help or hinder?
Is this a reasonable approach, or should we just leave the html in its usual sequence, typically: header, left navigation, main content, auxiliary content?
Share: 
Hi Bob,
Your proposal is correct, and does help make pages more accessible.
The recommendation is that important information is delivered first, without style sheets. If a user agent doesn't support CSS, the visitor could be presented with the navigation, sub-navigation, adverts, sidebars, and other types of information before they get to the main content. Assuming the layout of all pages is the same, each time a visitor navigates to another page, they have to wade through all that information before they get to the main content. If you ensure that without style sheets, the important information is delivered first, you can then use style sheets to arrange the content where you want it visually. Visitors whose user agents do not support style sheets then gain access to the important information first.
Share:
This is a good question and one I've often pondered as there is a potential trade-off with search engine optimisation and accessibility.
The higher the content - especially the <h1> tag, the better for all concerned. Similarly, the sooner the nav, the more helpful to users although on the downside it can become tiresome without a Jump Nav and can affect search engine ranking.
It's one of the crux weaknesses of the current CSS implemention for me - the sooner CSS3 is adopted the better.
At the moment the current CSS climate leans towards a:
Header
Nav
Content
Sub-Nav
Footer
...layout and because of the 3 Column holy grail weaknesses with current CSS, one finds the more natural "pull" of the flow is to go with a right column sub-nav and have the main site nav running horizontally across the top of the content...almost similar to this very page.
There are ugly workarounds but I've not seen a perfect one yet.
Share:
The problem I have seen with any 3-column layout that puts content first then navigation and another bar in the HTML and then uses CSS absolute positioning, is that when the width of the browser grows small, the rightmost div overlaps or underlaps the others, obscuring the text - it gets worse the smaller the width gets._________________
Accessible: Live Departure Boards, UK Train Timetables, Odeon no more
Share:
| Matthew wrote: |
| The problem I have seen with any 3-column layout that puts content first then navigation and another bar in the HTML and then uses CSS absolute positioning, is that when the width of the browser grows small, the rightmost div overlaps or underlaps the others, obscuring the text - it gets worse the smaller the width gets. |
Yeah it will if there's any fixed width content in there like an img - You can specify image widths as em but I don't personally like that, especially if there's an image that needs hi-definition for it's content...then of course there's SVG images which I've not had much chance to play with.
Absolute positioning I don't particularly like to use though it does have it's uses, especially for search engine purposes
Share:
I was careful to avoid mentioning absolute positioning, 3 column layouts, and other css frailities. There are other good css mail lists for that. (1)
Can we get back to the read-order question? Do people using screen readers really care about the sequence of material? If we offer a couple of jump links, one to main content, another to navigation, is that enough?
Since most of the screen readers have the capability of reading the collection of head tags, is the technique of ensuring each area has a good heading another suitable alternative?
Looking for best practices (without worrying about css layout problems ).
Ref 1: http://www.css-discuss.org/...
Share:
I suppose it depends on how people use their screen readers. What suits one person may not suit everyone. Navigation could be considered the most important information, so a skip navigation link is useful. Sidebars, or other blocks of repeating text should definitely come after the main content IMO.
The use of headings is a really good point. I don't think I would rely on headings as being a means of navigating the document, but it does emphasise why they are so important. I imagine best practice would be a combination of delivering important information first, and good use of headings. It would be useful to get some feedback from people who use screen readers, and how they typically use them.
Share:
| Bob Easton wrote: |
| I was careful to avoid mentioning absolute positioning, 3 column layouts, and other css frailities. There are other good css mail lists for that.
... Looking for best practices (without worrying about css layout problems ).
|
Your original question quoted several key-words; reading order, accessibility, CSS, search engines, help & hinder. I believe that's why the discussion took the path it did.
It seems to me that CSS is an integral part of bringing accessibility and presentation together so I don't think this strayed off-topic but you have my apologies if you feel it did.
| Quote: |
| The use of headings is a really good point. I don't think I would rely on headings as being a means of navigating the document, but it does emphasise why they are so important. |
The use of headings is essential IMO not only for the purposes of search engine optimisation but as it's also a standard compliant part of document structure. It would be interesting to learn if they have any extra value so far as screen-readers are concerned though, however, as far as I know, I don't think they do at the moment.
Share:
| Quote: |
| The use of headings is essential IMO not only for the purposes of search engine optimisation but as it's also a standard compliant part of document structure. It would be interesting to learn if they have any extra value so far as screen-readers are concerned though, however, as far as I know, I don't think they do at the moment. |
JAWS and Window Eyes both have hot keys that will read all headings on a page.
Share:
Personally, I structure like so-
Explanation's of acceskey/tablink conventions
Main nav
Secondary Nav
Content
Anthing else.
_________________
--
Kev
http://www.kevinleitch.co.uk
Share:
| Bob Easton wrote: |
| [With CSS] we are no longer constrained to the usual html sequence. We can ... place the main content of a page much closer to the top of the html. One would think this makes the page more accessible, since people using assisting technologies would not need to skip over the usual header and left navigation elements. They could begin immediately with the main content. |
But how if they don't want all or any of the main content?
Many readers might, but not all. After all, navigation itself is a means of skipping what you don't want. It's a means of getting to that part of the main content that you want. Or to somewhere else entirely.
The problem for a blind user is that he has to proceed sequentially. If we put the navigation first in the X/HTML but include a "skip-nav" function, we overcome that problem.
But if we put the navigation last, this user has no choice.
Take this page:
http://www.w3.org/...
I can see no "skip-nav" in this page (but that's not the point I want to make here). Suppose someone is looking for the W3 Core styles. Someone using a good modern CSS-capable browser (i.e. not Internet Explorer) gets a nice position-fixed (therefore follows page-scrolling) navigation area on the right in which he can find it.
Someone who isn't using CSS (a user with a screen-reader?) gets to hear what the links are fairly early on; so again can find that page. However, if those links were put at the botom of the X/HTML, he'd have to hear the whole page read out before getting to them. Irksome, if it's not what he's interested in just then.
_________________
Michael
Share:
Interesting points you make, Michael. From that I would conclude, that the source order should be different on different pages.
Pages that are higher up in the hierarchie usually (maybe oversimplification) have less content, and are used to navigate to content-rich subpages. The "leaves" (pages that are lower in the hierarchy) usually have a lot of the interesting content, any people (usually) don't get there by accident, but on purpose.
- Put the nav-first on root and mostly navigational pages (usually close to the root). And put the content first on content-rich pages (leaves).
- Always provide a link to skip to the other part.
Anybody agree?
Share:
IMO, serving the content first has it's advantages no matter if it's in the "root" or on the "leaves". What I'd do is something like this:
<body>
<div id="content">
<h1>Page Title</h1>
<a href="#navigation" class="hidden">Skip to navigation</a>
[...]
</div>
<div id="navigation">
[...]
</div>
</body>
This way, the persons gets the page title read out for them. If it doesn't sound like anything they'd be interested in, they can just skip directly to navigation if they wish to. This also gives the added bonus of better Search Engine placements for *all* pages. =)
Share:
I agree that whether the content or navigation comes first, there should be a link to go past it. My personal preference is to have content at the start, something like
| Code: |
|
<ul> <li><a href="/" accesskey="m">home</a></li> <li><a href="/accessibility.php" accesskey="c">accessibility information</a></li> <li><a href="#navigation" accesskey="j">jump to navigation</a></li> </ul> <h1>Page title</h1> |
A small point of description perhaps, but I would keep the word "skip" for something you go past - as in "skip navigation"; when the link is actually going to the navigation I prefer the word "jump", so
<a href="'#content">skip navigation</a>
where the navbar comes first, or
<a href="#navigation">jump to navigation</a>
where the content comes first. Making that distinction, I think, helps to understand the nature of the link more readily.
Share:
| brothercake wrote: |
|
A small point of description perhaps, but I would keep the word "skip" for something you go past - as in "skip navigation"; when the link is actually going to the navigation I prefer the word "jump" |
Great suggestion.
Share:
All times are GMT
You cannot post new topics in this forumYou cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum