Most web designers limit their treatment of logos regarding accessability to adding the ALT atribute.
<a href=”index.html”><img src=”my-logo.gif” alt=”Home” /></a>
With this method most screen readers will tell a visually impared user that there is a link which is an image described as ‘Home’.
What we want to do is to simply tell the ’screen reader/visually impared’ user that there is a link called home. This can easily be done using a little HTML & CSS.
null
First i created my logo
Then we start by creating a blank HTML & CSS file. For this tutorial i’ve called these accessable-header.html & styles.css, and attach the CSS file by adding the following code to the head section of the HTML file.
<link href="styles.css" rel="stylesheet" type="text/css" />
In the HTML file create a simple text link like below:
<a title="Home" href="index.html">Home</a>
null
You should now have the something like the above image. Next we need to add the logo image. To do this we’ll use CSS. Give the link an id called say ‘logo’.
<a title="Home" id="logo" href="index.html">Home</a>
Next, go to your CSS file and create a style for the link with an ID of ‘logo’.
a#logo{ }
We now need to add the image as a background so we set this in the CSS:
a#logo{
background:url(my-logo.gif)
}
null
As you can see above, we can see only a small portion of the logo image behind the text. The link needs to expand to the dimensions of the background image.
To do this, first we set the width & height.
a#logo{
background:url(my-logo.gif);
width:200px;
height:150px;
}
But this not enough, we also need to set the ‘display’ property with a value of ‘block’:
null
So now we’re getting closer except that the original ‘Home’ text is still displayed infront of the image. Next we need to move it off the background by using the ‘line-height’ property:
null
a#logo{
background:url(my-logo.gif);
width:200px;
height:150px;
display:block;
line-height:350px;
}
Now we’ve moved it off the logo, we need to remove it altogether. To do this we’ll hide everything belonging to the link called ‘logo’ that is outside that link. This can be done by setting the ‘overflow’ property to ‘hidden’.
a#logo{
background:url(my-logo.gif);
width:200px;
height:150px;
display:block;
line-height:350px;
overflow:hidden;
}
null
A perfect accessable logo added to your website.
HTML:
<a title="Home" id="logo" href="index.html">Home</a>
CSS:
a#logo{
background:url(my-logo.gif);
width:200px;
height:150px;
display:block;
line-height:350px;
overflow:hidden;
}
conordarcy CSS, Web Design CSS, logo, Web Design, Website Design
