Do you put your content first in the code for an accessible website?

**jag5311** · Feb 14, 2005 17:03

I am curious about something.

Even when building xhtml and css websites, I typically follow the same page structure in terms of code.

Whether the menu is horizontal across the top or down the left hand side, typically the main navigation falls first in my code contained within a div named "menu or leftnav", and then the content usually falls in the right hand side of the page and last in the code.

I guess I can just start reversing my css rules and move my code around to fix the solution, but I was curious what type of plan you accessibility experts AND SEO experts.

Am I just doing it all wrong. Shouid I be focusing on getting the content to appear first in the code, and then worry about the navigation?

Usually my pages consist of 3 elements. A header include file, the content of the page, and then the footer include file.

Usually the menu falls inside the header include file.

Maybe I should start putting my navigation in the footer AFTER the content div.

Just curious what you guys do?

Thanks

**maxor** · Feb 14, 2005 18:07

Let's say that you're using CSS to layout your page. It is possible to place your navigation after the content. You can acheive this by floating your navigation and content containers.

Traditionally the navigation comes first in the actual HTML. To make this type of design more accessible, it is common to see a link which reads "Skip Navigation" that will take you straight to the content. Usually this is the first element on the page which gives the user the option to skip all of the header and navigational elements.

Consider the following example...

HTML Code:

<body>
<a href="#content">Skip Navigation</a>
<div id="header">
<h1>Your header</h1>
</div>

<div id="nav>
<ul>
  <li><a href="#">Links Here</a></li>
  <li><a href="#">Links Here</a></li>
  <li><a href="#">Links Here</a></li>
</ul>
</div>

<div id="content">
<h2>Your content</h2>
<p>Yay for content!</p>
</div>
</body>

This will allow the person to 'skip' the header and navigation and go straight to your content.

Assuming your header and navigation is light weight and simple (e.g. not a mess of javascript, place holder images, image maps etc) you'll be fine from an accessibility standpoint whether your put the content before or after the navigation.

**jag5311** · Feb 14, 2005 18:22

Thanks Maxtor.

Actually, I am fully aware of everything you just mentioned

(look at absolutebica in my signature). Thats my design and development portfolio which I have tried to make as accessible as possible.

My code is clean and I use only javascript in certain situations (sifr, popup windows)

I guess I am thinking from a SEO advantage. On some of my sites, the navigation is quite extensive so sometimes the content doesn't get seen for quite a while and it would suck for someone to travel through all those links on a screen reader, even if there is a skip navigation.

I guess left or right hand navigation wouldn't be a problem, but top navigation definitly would be a weird situation with floating elements simply because the content DOES come after that in the code.

Absolute positioning is out of the question because I hate doing that.

**realestate** · Feb 14, 2005 18:24

Important content in the middle. Sides for decorative figures, or links. Important links on the left, navigation at the top and bottom. Unimportant things at the bottom.

**will_** · Feb 14, 2005 18:41

The problem with putting your content first in the markup is that if you have too much of it, the search engine might not ever get to your menu. Then it won't crawl the links to your other pages.

I think maxor's suggestion about the Skip Nav link is the best solution.

**Egor** · Feb 14, 2005 19:29

I normally have the main navigation right up the top, then followed by the smaller column(s) as that's the frequently updated stuff.

Includes normally used are for the <head> section apart from the title, header, footer.

**redux** · Feb 14, 2005 19:44

Originally Posted by realestate

Important content in the middle. Sides for decorative figures, or links. Important links on the left, navigation at the top and bottom. Unimportant things at the bottom.

aeh...we're talking about the order in the markup (i.e. the unstyled version, which text only browsers, screenreaders, search engines, etc "see"), not the visual layout.

**theharmonyguy** · Feb 14, 2005 20:20

I've never really heard for sure if source-ordering gives a big enough SEO advantage to be worth the effort it sometimes requires (like on more complicated layouts).

Accessibility is another issue where I think there'd be more benefit. And while some may wonder why a developer should think about text-only browsers, as a mobile Web user I can attest that source-ordering can be really nice. I have a PalmOS smartphone, and several browsers that I have don't support CSS. When navigation links are on top, it can result in a good bit of waiting and scrolling.

If you do use source-ordering, a "Skip to Nav" link is a good idea.

**dc dalton** · Feb 14, 2005 20:54

Just my two cents but if you use a clean non table laden design layout and make sure to include a skiplink of any nav area you really dont have to worry about the old "content at the top" trick.

I used to do this before I became "aware" of the tableless CSS driven design ideas (notable found here ... credit due where credit is due) but now that Im away from that old mentality I dont much see it as an issue.

I will also say we have our content in the "traditional" place and after going tableless our ranking soared ....... so I think if you code is clean you shouldnt have to play games with where exactly the content on the page is placed.

Funny Im 3/4 of the way through Zeldman's book and when you think about what he says and REALLY apply it to your everyday work all the games become just that, games!

**polvero** · Feb 14, 2005 22:33

This is how I would typically set up a website. I like to consider targeting the small screen

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<h1><a href="#">Website Name</a></h1>
			<h2>Tag Line Hoobla</h2>
		</div>
		<div id="body">
			<div id="nav">
				<ul>
					<li class="h"><a href="#content">Skip to Content</a></li>
					<li><a href="#">Nav Item 1</a></li>
					<li><a href="#">Nav Item 2</a></li>
					<li><a href="#">Nav Item 3</a></li>
				</ul>
			</div>
			<div id="content">
				<h2>Content header</h2>
				<p>This is my content Hoobla</p>
			</div>
			<div id="sidebar">
				<h3>Sidebar Stuff 1</h3>
				<ul>
					<li><a href="#">Link 1</a></li>
					<li><a href="#">Link 2</a></li>
				</ul>
				<h3>Sidebar Stuff 2</h3>
				<p>Text text text</p>
			</div>
		</div>
		<div id="footer">
			<p>Footer Text Hoobla</p>
		</div>
	</div>
</body>
</html>

For small screen users, I like to serve them a nav menu first, however with the option to skip right past it to the content if needed. the class="h" would be styled as this

Code:

.h {
display:none;
}

**jag5311** · Feb 14, 2005 23:32

thanks for the comments.

It seems the resounding sentiment is that just make sure your code is clean and make sure to use a skip navigation link, and you are good to go whether its accessibility or SEO, right?

Well, that makes me feel better about the situation.

**jag5311** · Feb 14, 2005 23:33

on another note, does skip navigation really only work in the cases of disabled users who may be using screen readers. I know my site, as well as others, have the skip navigation visible to everyone.

However, some sites have it very faint and others have it invisible, yet its there in the code.

what do you prefer?

**maxor** · Feb 15, 2005 03:07

I prefer to just make it visible to everyone, most people who don't use it don't notice it and it will save you the trouble of hiding it.

**redux** · Feb 15, 2005 05:23

Originally Posted by jag5311

on another note, does skip navigation really only work in the cases of disabled users who may be using screen readers.

it also benefits users with mobility impairment who use keyboard or other alternative input devices, rather than a mouse.

and for them, it obviously needs to be visible somehow. you could use a bit of css trickery to make it only visible on focus/hover e.g. http://www.splintered.co.uk/experiments/21/

**vgarcia** · Feb 15, 2005 05:35

Originally Posted by polvero

This is how I would typically set up a website. I like to consider targeting the small screen

...
For small screen users, I like to serve them a nav menu first, however with the option to skip right past it to the content if needed. the class="h" would be styled as this

Code:

.h {
display:none;
}

Wow, that looks almost identical to the code I'm using on the company website at work. Add a search form in the header and it's almost exactly the same!

**mgyth** · Feb 15, 2005 13:42

Originally Posted by jag5311

Absolute positioning is out of the question because I hate doing that.

A bit off topic but is there anything wrong with absolute positioning, or is it just you'r personal preference? Just wondering....

**Musicbox** · Feb 15, 2005 17:15

if you really wanted to update your website content very easily then use php and use the include statement.

You can update your website content very easily.

**Matt_Machell** · Feb 16, 2005 03:55

Originally Posted by redux

you could use a bit of css trickery to make it only visible on focus/hover e.g. http://www.splintered.co.uk/experiments/21/

Nice solution, and not one I've seen before.

-Matt

**jag5311** · Feb 16, 2005 07:37

I personally dislike using absolute positioning unless its called for via a drop down menu method, but rarely for layout purposes. It might be great for left alignment for the layout, but if you get into centering the layout, man that can be a doozy after a while.

But its personal preference.

all dynamic languages can use the include statement, in their own way. I use coldfusion MX mostly, its <cfinclude />

**vgarcia** · Feb 16, 2005 07:44

Originally Posted by mgyth

A bit off topic but is there anything wrong with absolute positioning, or is it just you'r personal preference? Just wondering....

Absolute positioning has some bugs when it comes to selecting text in some browsers like IE/Windows. It's not a major issue, but it's enough to keep some people from using it.

**jag5311** · Feb 16, 2005 08:15

I know dreamweaver and frontpage are at least doing some code in div's, but it absolute positions them especially when working in design views.

Left alignment never seens to be a problem, but its centering an alignment that can be a pain.

I did a CSS Zengarden design and still have to fix a couple issues with it, because its hard to use CSS for a site without touching the xhtml. real hard IMO, because there are times you want to throw an extra pair of div's in there to make things right, etc...

**polvero** · Feb 16, 2005 18:47

Originally Posted by vgarcia

Wow, that looks almost identical to the code I'm using on the company website at work. Add a search form in the header and it's almost exactly the same!

ROFLOL!!

that's what standards is about. you know you're following them when your code is starting to look like everyone elses.

It's all about the style sheet baby!

That's what makes a website

The xhtml I posted is almost nearly idential on all of our clients websites. Basically I set up a nice xhtml template, and whet ZenGarden on it!

**jag5311** · Feb 16, 2005 20:33

at my job, I am mostly the "buildout guy" though I am doing some design stuff now, but I custom code every single website we do, unless we are using admin tools where a login or whatever is needed, then I will not reinvent the wheel with those

, but since every design we make might be different, I have to custom code each site, and I love it

**polvero** · Feb 17, 2005 15:47

well custom code is fine. I was just mentioning that there need not be much 'customization' for the xhtml since really, your style sheet should be what is most uniquely custom.

our websites always have a header, a nav, a content area, a sidebar (per sé), and a footer.

I'll also throw in a couple of extraDiv's (much similar to cssZenGarden), and voila, hardly ever a need to customize your xhtml from site to site.

**linkstoyou** · Feb 17, 2005 20:15

Originally Posted by jag5311

I am curious about something.

Even when building xhtml and css websites, I typically follow the same page structure in terms of code.

Whether the menu is horizontal across the top or down the left hand side, typically the main navigation falls first in my code contained within a div named "menu or leftnav", and then the content usually falls in the right hand side of the page and last in the code.

I guess I can just start reversing my css rules and move my code around to fix the solution, but I was curious what type of plan you accessibility experts AND SEO experts.

Am I just doing it all wrong. Shouid I be focusing on getting the content to appear first in the code, and then worry about the navigation?

Usually my pages consist of 3 elements. A header include file, the content of the page, and then the footer include file.

Usually the menu falls inside the header include file.

Maybe I should start putting my navigation in the footer AFTER the content div.

Just curious what you guys do?

Thanks

Always put content first using CSS. Navigation can be on the left but the code should be behind the content. Also (if you have it) place AdSense AFTER the content code

User Tag List

Thread: Do you put your content first in the code for an accessible website?

Thread Tools

Display

Do you put your content first in the code for an accessible website?

target the small screen

Bookmarks

Bookmarks

Posting Permissions