Web Do's & Don'ts » Do’s

Specify unique values for the accesskey attribute

Bojan — Wed, 16 Jun 2010 08:05:01 +0000

If you use accesskeys, make sure the value of the accesskey attribute is unique. If two or more elements share the same accesskey value, browsers will not interpret it consistently.

Use CSS for generating purely presentational content

Siniša — Wed, 09 Jun 2010 11:42:09 +0000

The content property was introduced in CSS 2.1 to add generated content to the :before and :after pseudo-elements. Given that IE 8 also now supports content, we really are getting to the point where can use this CSS feature in our production work. Just be sure to use it only in appropriate circumstances, and be mindful of the accessibility implications that generated content still has.

Remove the outline from links on :active only

Bojan — Mon, 17 May 2010 09:32:52 +0000

Web developers sometimes hide the outline of image replaced links, but then keyboard users have no way of seeing them when they are tabbing through the page. The trick is simple-remove the outline from links on :active only. By doing this, keyboard users still get the default outline when they tab to a link and activate the :focus state.

Specify HTML document’s language

Bojan — Mon, 19 Apr 2010 10:21:22 +0000

Use the language attribute(s) on the html tag to indicate the language of a HTML document, unless the content is aimed at speakers of more than one language.

Make sure your site works with and without the www prefix

Bojan — Wed, 31 Mar 2010 09:11:01 +0000

Many websites make the mistake of not making sure the site works without the www prefix. So for instance, if you type sitename.com in your browser, you end up at a dead end. You should make sure the site works with and without the prefix by redirecting traffic.

Use progressive enhancement instead of graceful degradation

Siniša — Wed, 24 Mar 2010 21:08:49 +0000

It can be said that both progressive enhancement and graceful degradation try to do the same thing: keep our products useful to every user. Progressive enhancement is a more sophisticated and at the same time stable way of assuring that but it takes more time and effort. Graceful degradation can be used more easily as a patch for an already existing product; it means harder maintenance later on, but requires less initial work.

Use the CSS cascade

Bojan — Tue, 16 Mar 2010 09:33:58 +0000

Many website coders do not make good use of the cascade, ending up with more complicated code. Learn how to use the cascade properly and define the importance of individual styles.

Specify a text colour for img elements

Bojan — Wed, 03 Mar 2010 08:59:09 +0000

Some browsers display the alt text when an img element is not displayed. The alt text can sometimes be invisible or hard to read, if the color of the text is similar to the background color. Therefore, specify the color(s) and check how it looks in the browser.

Plan the absence of Javascript

Siniša — Mon, 15 Feb 2010 19:38:05 +0000

The fact is that some of your website’s visitors will have JavaScript disabled. Should hidden content remain hidden even if JavaScript is disabled? Should all content be available to screen readers and search engines? If a piece of content becomes visible only after an AJAX call, how do you adequately fill that space when JavaScript is disabled?

Always provide an alt text in img elements

Bojan — Wed, 03 Feb 2010 09:24:11 +0000

The alt attribute is a textual replacement for the image which is not being displayed. It must always be used, even if the image in question is purely decorative–in that case, the alt attribute should be an empty string.