The ultimate guide on making sure your website is standards compliant, and accessible to everyone. This includes making sure that the markup of your pages is semantically correct.
Nowadays everyone and their dog has a website, which makes it increasingly harder to find sites with good rich content. With new laws being passed for public domain and comercial sites to be accessible according to WCAG and Section 508, it is becoming essential that websites can conform to these standards, and also as a way of quality assurance. Though it is not just accessibility that should be a concern when designing a site, but also the semantics of the site.
ALT tag would be to say "White iPod displayed at an angle with artistic picture of a human wearing earphones behind" rather than "iPod"Images, and describing them
One of the earliest stages in making a site accessible is to make sure that all images at the least have ALT tags. The reason for this is that people using screen readers can still understand what the image is, even if they can't see it. The screen reader will read out the ALT tag for them; for images that need larger descriptions LONGDESC should be used. In addition to these tags, Width and Height SHOULD be specified, and any further styles should be done from a style sheet. An example of this can be seen on the news page of this site, where I have used a container DIV for the image to create a shadowed effect on each image used, with additional styles applied to the image contained within.
Example
<img src='some/image.jpg' alt='description of image'
title='description of image' width='10' height='20' />As can be seen in the above example, it is also possible to add a "title" tag to an image - although this doesn't help accessibility is good to add as it will act as the ALT text on mouse over in Firefox.
To style this it is also possible to attach an id or a class, either of which can be used as usual for assigning styles to it. When assigning styles to images, as with all page elements, cross-browser and platform dependance should be taken into consideration as a page should look the same in all browsers.
Although not really a semantic or accessibility guideline, some developers may decide that they want to block images from being hotlinked on external sites. If this is an intention, then it is worth mentioning that all AOL users are left behind cached proxies and so must also be accounted for. To effect this outcome, the creation, or modification of a .htaccess folder in the root is required.
RewriteEngine on
RewriteCond %{HTTP_REFERER} .
RewriteCond %{HTTP_REFERER} !^http://(www\.)?newearthonline\.co\.uk [NC]
RewriteRule ^.*\.(gif|jpe?g|png|bmp)$
http://www.newearthonline.co.uk/art/interface/stolen_image.png [R,NC,L]In the above example, the .htaccess file is set to allow images to be displayed when accessed over proxy, and by the domain http://www.newearthonline.co.uk. If any other referer tries to access any files with the extensions PNG, JP(E)G, GIF, or BMP, then the stolen images logo will appear. If some folders should allow hotlinking, then a seperate .htaccess file can be used with the following text to override the original rule.
RewriteEngine on
RewriteRule ^.*$ -The workings of this .htaccess file will be explained in more detail in the Apache rewrite guide. Similarly, images can also be blocked from Google Images crawler by using the following code in your robots.txt file.
User-agent: Googlebot-Image
Disallow: /
