Tools For Compliance With Web Standards

My previous article was to cover the elements of web standards and usability. This one lists free and open source tools available for helping in compliance with these standards.

Wev Developer Extension

Web Developer Extension is an extension for open source Mozilla Firefox and Flock browsers. It provides two categories of utilities – one which will dissect the HTML page that has been visited – analyse each and every component, and a set of tools to test compliance to standards. Because of this combination, it provides critical value in the convenient form of a toolbar.

Disable

It allows to disable individual components like Java, JavaScript, page colors, cache. This can used to test behavior of your web site when Java, Javascript are not supported by the browser or the environment. It also lets you disable, add or view cookies.

CSS

Once a web site is visited, it lets you view and modify the CSS locally. This can enable you to view details of a style sheet (sometimes to identify tricks used) or build up on an existing style sheet.

The biggest advantage of this feature is that you can immediately see the effect of your changes in the CSS.

Information

The Information tab displays details like CSS class IDs and classes, size of blocks, response headers, tab index, link paths and JavaScript. This is typically useful to analyze an existing web site.

Images

You can display image size, paths, file size, hide background images, hide all images and find broken images. It also lets you mark images without alt or title attributes. Images should always have alt attribute – one for accessibility and secondly for better Search Engine Optimisation (SEO)

Outline

This is an impressive feature that explicitly outlines block level elements (div, p, ul, …), deprecated elements, frames, table and table cells. Just like with imgages it can also mark links without alt attributes. This can be used in investigating problems with nested block level elements or making sure that your web page does not contain any deprecated elements. It goes a step ahead to let you define a custom elemen.

More

In addition to this it lets you experiment with forms, display tab index, resize the viewport to a resolution using Resize tab and one of the most useful features – tools for testing compliance with standards. It provides you:

In addition, it lets you assess the accessibility of your web site for Section 508 and Web Accessibility Initiative (WAI)

Optimising your web page is always a challenge. The number of images, the load time, the total number of HTTP requests, size and even recommendations. You can see this in the View Speed Report.

Web Colors

Selecting colors for a web site involves not only aesthetics but also that it must be displayed by all browsers, and the color combinations should be readable by users.

Color Contrast Analyzer

Color Contrast Analyzer is a tool for checking foreground and background color combinations to determine if they provide good color visibility. Determining “color visibility” is based on algorithms suggested by World Wide Web Consortium(W3C)

It uses color difference and color brightness to analyze combination of colours. For example, pure white (#FFFFFF) on pure black (#000000) is not advisable even for normal visibility. You can download and install this application on your desktop and use it offline. It assessment for color combinations are for four different stages of color blindness – Normal, Protanopia, Deuteranopia and Tritanopia. Depending on the profile of visitors of your website, you can consider the mimimal compliance.

Color Converter

Color Converter converts colors between different color systems (RGB, CMYK and HSV) and also provides a web safe equivalent for the color.

Somre more resources are available:

There might be many more such tools available that aid web design and development. I will try to keep this list updated whenever I come across them.

Technorati tags: , , , , , , , , , mozilla firefox, , , , , , , , , wai, , , , , , , , , , , , , , , ,

Copyright Abhijit Nadgouda

3 Responses to “Tools For Compliance With Web Standards”

  1. Firefox Says:

    Tools For Compliance With Web Standards

    Good post on web standards compliance….

  2. Rahul Baji Says:

    http://www.vischeck.com/vischeck/vischeckURL.php

    A tool (under development as yet) to see how the website looks to people having color blindness

  3. Abhijit Nadgouda @ iface » Flick Animation with CSS Says:

    […] This not only ensures reduced total size of the final image files, but this is also independent of third party plugins or client side scripting. The only restriction is that the the DOCTYPE must be one of the Valid DOCTYPE list from W3C. Stu Nicholls has provided code in the article as well as you can view at the CSS and XHTML code here. You can use the Web Development Extension for Firefox to view CSS and experiment with it locally. is another site where flick animation has been demonstrated. I have tested it in Mozilla Firefox and Microsoft Internet Explorer. […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: