Web-page template

I've been spending a long time working on this template, I'd like to know if its CSS/HTML is good, and mainly if it is speedy to load, accessible, semantic and SEO friendly.

I've tested it in IE7+, Chrome, FF and Safari and am happy with the output in each.

Working URL



`/ Main Layout Elements /
body{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Verdana;
background: #EAFDE6 url(../images/background.png) repeat-x;
color:#444;
}
label{
cursor: pointer;
}
p {
margin: 0 0 20px 8px;
position:relative;
}
.news-wrapper p
{
margin: 0 0 10px 8px;
}
a{
color: #1B676B;
}
.time-ago{
float:right;
color: #1B676B;
}
.top-bar{
position:absolute;
top:0;
left:0;
background-color: #519548;
height: 30px;
border-bottom:2px solid #3E7236;
width: 100%;
z-index:1;
}
h1{
margin:0;
margin-bottom:5px;
font-size:35px;
color: #519548;
font-weight:normal;
}
h2{
margin:0;
margin-bottom:5px;
font-size:35px;
color: #519548;
font-weight:normal;
}
h3{
margin:0 0 5px 0;
font-size:22px;
color: #519548;
font-weight:normal;
}
h3 a
{
color: #519548;
text-decoration:underline;
}
h3 a:hover
{
color: #1B676B;
text-decoration:none;
}
h4{
text-shadow: black 0.1em 0.1em 0.2em;
text-transform: uppercase;
font-size: 17px;
font-weight: bold;
margin-bottom: 3px;
margin-top: 30px;
}
a.ralign{
text-align:right;
display: block;
}
.clear{
clear:both;
}

/ Sprite definitions and positioning /
.s{
background-image:url(../images/sprites.png);
background-repeat:no-repeat;
}
.facebook{
background-position: 0 0;
}
.twitter{
background-position: 0 -40px;
}
.slideshow-wrapper{
height:261px;
overflow:hidden;
-moz-box-shadow: 0px 0px 5px #555;
-webkit-box-shadow: 0px 0px 5px #555;
box-shadow: 0px 0px 5px #555;
}

.youtube{
background-position: 0 -80px;
}

/ Main Wrappers /
.content-wr

My first point is that you have no :focus style for your links. If you navigate the page with the keyboard that would really help a lot to see where you are. Take this rule for example:

h3 a:hover
{
    color: #1B676B;
    text-decoration:none;
}

Just add:

h3 a:hover, h3 a:focus
{
    color: #1B676B;
    text-decoration:none;
}

Another thing that is nice to do for people navigating with the keyboard is to place a hidden link with a text similar to "Skip to content" or something like that close to the top. This link should be a shortcut to the content and only show on :focus. The reason for that is that it takes a lot of tabbing to get through the menu otherwise.

Another tip that doesn't have to do with this question is that vertically aligning your content often creates a more resful reading experience. Indenting the paragraphs make it look more chaotic then it would be they were properly aligned.

StackExchange Code Review Q#1170, answer score: 5