We try to make our sites suitable for those with sight difficulties and/or motor funtion problems. One of the ways we do this is by allowing our users to remove colour/font/style from our site web pages.
This is important because for users who use screen reading technology to browse the web a lot of the style information is surplus to their requirements. This is how we achieve our ‘no css’ to remove style from our website. We use PHP and so this is how it is described:
Within the <head> tags of each of our pages we have the following code:
[CODE]
<?php
$css = $_GET['css']; ?>
<?php
if ( $css == nocss ) {
$urlwrite = “?css=nocss”;
echo “”;
} else {
echo “<link rel=\”stylesheet\” href=\”/css/style.css\” type=\”text/css\” />
<link rel=\”stylesheet\” href=\”/css/style2.css\” type=\”text/css\” />”;
}
?>
[/CODE]
This tells the server to look for ?css=nocss in the url it recieves. For example:
http://www.hungerfordwebdesign.com/ shows the normal site
http://www.hungerfordwebdesign.com/?css=nocss OR http://www.hungerfordwebdesign.com/index.php?css=nocss shows the same site content but with no style. Click the links and see the difference.
So how do we tell our users how to access our no css version of the site and how do we make sure that every link they click remains without displaying the css:
1. we need to make a change to all of our links and add the $urlwrite string as follows:
<a title=”Home - Accesskey H” href=”/index.php<?php echo $urlwrite; ?>“>Home</a>
2. Then we add a link to the page showing users that we support a non-css version of the site (and when in non-css mode we want our users to be able to enable CSS again if they want:
[CODE]
<?php
$css = $_GET['css']; ?>
<?php
if ( $css == nocss ) {
echo “<a href=\”?css=true\”>Load CSS version</a>”;
} else {
echo “<a href=\”?css=nocss\”>Load non-CSS version</a>”;
}
?>
[/CODE]
This then results in the following chain of events:
- Page loads
- System detects that ?css is undefined so shows “Load non-CSS version” link
- User clicks “Load non-CSS version”
- ?css string is set to ‘nocss’ and all links have “?css=nocss” added to the end of them
- Any links which are accessed by the user now tell the server not to write the CSS into the page and therefore display a plain looking page without styles.
If you would like to implement a similar system on your own site and you struggle for any reason, please post a coment and I would be happy to help.
You can also use this system to offer your users the chance to change the complete look of your site at the click of a button. Usefull if you want 5 different looking websites that you only need to update once.
