Web Accessibility Checklist

MARKUP

• Separate structure from presentation and use proper markup for that structure. For example, mark up lists as lists (<ul>, <ol>, <dl>) rather than text with a <br> tag after each list item.

• headings (e.g. <h1>) are very helpful for blind users.

HTML Properly mark up the sections of a page and body copy with headings rather than something such as a <p> tag with CSS    HTML styling that makes it look like a heading.

• Give pages meaningful and accurate titles using the <title> tag.

• Indicate the primary human language of the document using the lang  attribute in the <html> tag, and indicate any passages in a secondary language using the lang attribute on other tags wrapping the relevant text (e.g. “<span lang=”es”>Hola</span>means Hello”).

• Provide “Skip to content” links at the top of the markup order in pages with large numbers of navigational links before the main content.

• Always indicate headers in data tables using <th> tags, and  associate all data cells with their header.

• Be sure tab order is logical using tabindex, if necessary. (If your HTML is in the proper order, then using tabindex isn’t necessary.)

VISUAL APPEARANCE & CONTENT

• Be sure your page is still usable when images are turned off. (is  may include making sure that contrast is still sufficient if you happen to be using a background image and that image is removed.)

• Be sure pages remain usable when users enlarge text up to twice its original size.

• Be sure each element on a page is reachable and can be manipulated via the keyboard.

• Whenever possible, write descriptive headings and link textswhich can be understood when read out of context (e.g. no “click here” links).

• For color-blind and low-vision users, be sure your content and  background have sufficient contrast.

• Do not use content that flashes or blinks more than three times a second.

• Do not hide the focus indicator. When a user uses the keyboard to tab from element to element, it should always be apparent where they are.

• Do not require users to perceive font, color, or other styling changes in order to understand meaning. For instance, don’t say,“e highlighted word in the previous paragraph is the most important,” or “Items marked in red are errors and need to be corrected,” unless the word or items are indicated in some other way.

IMAGES & MULTIMEDIA

Be sure all images have an alt attribute, leaving the text for decorational images blank (e.g. alt=””).

• Always add alt text when images are also links.

• In general, be brief with alt text (e.g. “Notre Dame Cathedral”),but provide detail when it conveys meaning (e.g. “Son standing at his father’s graveside with mother in arms”).

• Provide a transcript, captions, and/or sign language translation for all audio and video with speech.

• Provide a “described” version of a video when description is necessary for unsighted users to understand content. (e described audio track can either be distributed with the video  content, or as an audio only file.)

• Be sure that all videos, if they don’t autoplay, have, at the very least, an accessible Play control.

• When text can be rendered just as well by the browser as it can in an image, avoid using images for text. (Image replacement techniques are often an acceptable alternate, but also consider translation requirements when using text in or as images.)

• Avoid CAPTCHA s unless you have no other choice, and even then they should be avoided. However, if you must use them, provide an audio CAPTCHA alternative.

FORMS

• Always label all form fields with the <label> tag. If a form field  has no specific text label on the page, add one, and hide it with CSS or use the title attribute.

• Use fieldsets (<fieldset>) with legends (<legend>) to associate prompts with radio buttons and check boxes. For instance, a form  asks “Gender:” and offers radio buttons that say “Male” or “Female”. en “Gender:” should be enclosed in a <legend> tag, and all three elements (<legend> and the two radio buttons with  their label text) should be enclosed in a <fieldset> tag.

• Identify all input errors in text (in addition to any images or icons), and place the error notification either next to the affected field or in a prominent location such as the top of the page with

an anchor link to the affected field.

• Provide help links or inline instructions for completing fields  when necessary.

• Do not permit users to complete important actions without a confirmation or a way to undo.

• Avoid using HTML elements in nonstandard ways (e.g. form elements for navigation, links for form submission, etc.).

Advertisements

1000 most-visited sites on the web

You can see a list of the largest 1000 sites worldwide, based on Unique Visitors (users), as measured by Ad Planner. This list is updated monthly as new Ad Planner datasets are released. The list defines sites as top-level domains.

For each site on the list, you’ll be able to see:

  • The site category
  • Unique Visitors (users)
  • Page Views
  • Whether the site has ads

Keep in mind that the list excludes adult sites, ad networks, domains that don’t have publicly visible content or don’t load properly, and certain Google sites.

The 1000 most-visited sites on the web

Rank Site Category Unique Visitors (users) Reach Page Views Has Advertising
1 poput icon The 1000 Most Visited Sites on the Web facebook.com Social Networks 540,000,000 35.2% 570,000,000,000 Yes
2 poput icon The 1000 Most Visited Sites on the Web yahoo.com Web Portals 490,000,000 31.8% 70,000,000,000 Yes
3 poput icon The 1000 Most Visited Sites on the Web live.com Search Engines 370,000,000 24.1% 39,000,000,000 Yes
4 poput icon The 1000 Most Visited Sites on the Web wikipedia.org Dictionaries & Encyclopedias 310,000,000 20% 7,900,000,000 No
5 poput icon The 1000 Most Visited Sites on the Web msn.com Web Portals 280,000,000 18.1% 11,000,000,000 Yes
6 poput icon The 1000 Most Visited Sites on the Web microsoft.com Software 230,000,000 14.8% 3,300,000,000 Yes
7 poput icon The 1000 Most Visited Sites on the Web blogspot.com Blogging Resources & Services 230,000,000 14.7% 4,400,000,000 Yes
8 poput icon The 1000 Most Visited Sites on the Web baidu.com Web Portals 230,000,000 15% 27,000,000,000 Yes
9 poput icon The 1000 Most Visited Sites on the Web qq.com Email & Messaging 170,000,000 11.1% 25,000,000,000 Yes
10 poput icon The 1000 Most Visited Sites on the Web mozilla.com Internet Clients & Browsers 140,000,000 9.2% 2,100,000,000 No
11 poput icon The 1000 Most Visited Sites on the Web sina.com.cn Web Portals 130,000,000 8.4% 3,600,000,000 Yes


See Full List: http://www.google.com/adplanner/static/top1000/

Best Open Source Tools for Web Designers

Many open source tools have features comparable to expensive applications, and also free. This can save money and you can accomplish everyday tasks with having all the equipment and applications. In this article I want to share information about 10 best open source tools for web designers.

Introduction

Open source applications and tools are excellent alternatives for web designers. There are many open source applications that can help you are as a web designer. Many open source tools have features comparable to expensive applications, and also free. This can save money and you can accomplish everyday tasks with having all the equipment and applications. In this article I want to share information about 10 best open source tools for web designers.

  • Aptana Studio

    Aptana is a web development tool with many features for HTML, CSS and javascript. Aptana is also equipped with thousands of additional plugins created by the community.
  • Quanta Plus

    Quanta Plus is an IDE for web development. Quanta has a strong ability to run custom scripts, but that he also has an excellent visual CSS editor and auto-completion of syntax.
  • jEdit

    jEdit is a text editor for programmers. jEdit can run on Mac, Windows, and Linux and has syntax highlighting for HTML, XML, CSS, JavaScript.
  • GIMP

    GIMP is an open source project the most popular. For those who love the photoshop interface you can include GIMPShop extension interface that mimics the style of photoshop.
  • Krita

    Krita is a graphics application and also image-editing software application for KOffice.
  • WinSCP

    WinSCP is an open source (S) free FTP client and FTP client for Windows users. With simple navigation and easy, too easy to make in the use WinSCP.
  • KompoZer

    KompoZer is a complete web authoring system that has integrated FTP client and easy to use WYSIWYG web page editing.
  • CSSED

    CSSED is a small developer editor and validator, that tries to ease the CSS editing. cssed haved some support for HTML (with embbeded Javascript), XML, Javascript, Java, PHP, JSP, C, C++, Apache configuration files, .htaccess, Python, Perl, SQL, SH and other languages so it can serve quite well as multi-purpose editor.
  • Open Bexi HTML Builder

    Open BEXI HTML Builder is a browser open source application for creating HTML web pages. It also has a CSS color picker built into the interface and a have simple project management option.
  • CamStudio

    CamStudio is a popular open source to the screen-capturing

Integrate Digg Button

The Digg button, also known as the “Digg This” button, is for website and blog publishers that want to encourage their audience to submit content to Digg or Digg their content. Join thousands of sites that have already added the Digg button and have seen their content exposed to the Digg community!

While we support both a Smart Digg button and a static Digg button, we recommend using the Smart Digg button, as it displays a real-time Digg count and is more customizable.

I. Smart Digg Button

The Smart Digg button is available in 4 different predefined sizes: Medium, Large, Compact, and Icon

DiggThis DiggThis DiggThis DiggThis
Medium Large Compact Icon

The implementation of all Smart Digg buttons requires that a single <script> tag be included on your page as well as <a> tags for each button you would like to appear. To have multiple buttons on a page, just add an additional <a> tag where you would like each button. You do not need to include the <script> tag more than once per page. The script will find these <a> tags and replace them with the appropriate markup for the button.

1. Medium Smart Digg Button

To add a medium Smart Digg button you will need to place the following <script> tag somewhere on your page:

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>

The <script> tag may be placed anywhere in your page but we recommend placing it in the <head> tag. This will allow the script to find your <a> tags as quickly as possible.

With the script included insert the following <a> tag into your page in the location you would like the button to appear:

<a></a>

2. Large Smart Digg Button

To add a large Smart Digg button you will need to place the following <script> tag somewhere on your page:

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>

The <script> tag may be placed anywhere in your page but we recommend placing it in the <head> tag. This will allow the script to find your <a> tags as quickly as possible.

With the script included insert the following <a> tag into your page in the location you would like the button to appear:

<a></a>

3. Compact Smart Digg Button

To add a compact Smart Digg button you will need to place the following <script> tag somewhere on your page:

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>

The <script> tag may be placed anywhere in your page but we recommend placing it in the <head> tag. This will allow the script to find your <a> tags as quickly as possible.

With the script included insert the following <a> tag into your page in the location you would like the button to appear:

<a></a>

4. Icon Smart Digg Button

To add an icon Smart Digg button you will need to place the following <script> tag somewhere on your page:

<script src="http://widgets.digg.com/buttons.js" type="text/javascript"></script>

The <script> tag may be placed anywhere in your page but we recommend placing it in the <head> tag. This will allow the script to find your <a> tags as quickly as possible.

With the script included insert the following <a> tag into your page in the location you would like the button to appear:

<a></a>

Delicious Save Buttons

With a “Bookmark this on Delicious” link, you can provide your site visitors an easy way to save it to Delicious. Here is an example (with an image added before the link):

Delicious Bookmark this on Delicious

The best way to accomplish this is by including some javascript which pops up a post window. If javascript is off, it will navigate to the post page. Here is the code:

<img src=”http://static.delicious.com/img/delicious.small.gif&#8221; height=”10″ width=”10″ alt=”Delicious” /> <a href=”http://delicious.com/save&#8221; onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=’+encodeURIComponent(location.href)+’&title=’+encodeURIComponent(document.title), ‘delicious’,’toolbar=no,width=550,height=550′); return false;”> Bookmark this on Delicious</a>

Blog templates

A quick word of advice: Don’t do this unless you are a geek.

WordPress

To place this on your front page, go to Presentation -> Theme Editor -> Main Index Template. You may place the following code where you wish:

<img src=”http://static.delicious.com/img/delicious.small.gif&#8221; height=”10″ width=”10″ alt=”Delicious” /> <a href=”http://delicious.com/save&#8221; onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=’+encodeURIComponent(‘&lt;?php the_permalink() ?>’)+’&title=’+encodeURIComponent(‘<?php the_title() ?>’),’delicious’, ‘toolbar=no,width=550,height=550’); return false;”> Bookmark this on Delicious</a>

Movable Type

In your Main Index and Individual Archive templates, after </MTIfAllowComments>, add:

<img src=”http://static.delicious.com/img/delicious.small.gif&#8221; height=”10″ width=”10″ alt=”Delicious” /> <a href=”http://delicious.com/save&#8221; onclick=”window.open(‘http://delicious.com/save?v=5&noui&jump=close&url=’+encodeURIComponent(<$MTEntryPermalink$&gt;)+’&title=’+encodeURIComponent(<$MTEntryTitle$>),’delicious’, ‘toolbar=no,width=550,height=550’); return false;”> Bookmark this on Delicious</a>

Browser Buttons

If you’re looking to install the browser toolbar buttons for saving bookmarks to Delicious, here’s where to go: the Firefox buttons, Internet Explorer buttons, or bookmarklet buttons for any browser.

TweetMeme Button

The Retweet button is for website and blog publishers that want to encourage their audience to retweet their content on twitter.

We have made our button really smart, with one simple piece of JavaScript we can give you up to date tweet counts and shorten your title and link for the retweets. Best of all it will work on any web page, anywhere!

The Code

Copy and paste the following code where you want the button to be displayed.

<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Options

When the URL is different from the current URL

The button will automatically grab the URL of the page it is placed on. However if you want to place the button on more than one page or would like it in your feed, you will need to override the URL.

<script type="text/javascript">
tweetmeme_url = 'http://yoururl.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Just replace http://yoururl.com with the URL of the page you want to retweet. The URL must be the final destination URL, not an alias, such as a link using a shortening service (eg. Bit.ly).

Changing the size of the button – Compact Button

The Compact=
The Compact Button

We also offer a compact version of the TweetMeme button, with the same options as the larger button.

<script type="text/javascript">
tweetmeme_style = 'compact';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>


Changing the @username who is tweeted

By default the retweet button will be in the format of “RT @tweetmeme <title> <link>”. You can, however change the button to retweet your user account. By specifying the ‘tweetmeme_source’ parameter in the JavaScript you can change the format to “RT @yourname <title> <link>”.

<script type="text/javascript">
tweetmeme_source = 'tweetmeme';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

The example above would retweet in the format of “RT @tweetmeme <title> <link>”.

Changing the URL Shortener used

We have also added the ability to use a URL shortener of your choice instead of our default one.  If you would like to do this then you need to include the “tweetmeme_service” parameter as shown below:

<script type="text/javascript">
tweetmeme_service = 'bit.ly';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Note: tweetmeme_service should be set to the name of the service you want to use.  For some services you also need to include the service API – Please see the example below for this.

<script type="text/javascript">
tweetmeme_service = 'awe.sm';
service_api = '12345678910';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

Code to Create Custom Share Buttons for Facebook, Twitter, LinkedIn and Delicious

Interested in sharing your content on Facebook, Twitter, LinkedIn or delicious? Do multi-option social media sharing tools such as ShareThis seem like overkill?

That was our conclusion after researching the social media sites on which readers are most likely to share content from our blog focused on solutions to a wide range of business challenges, What Works for Business. We decided that Facebook, LinkedIn, delicious, and Twitter were the sites on which our target business audience is most likely to share business-related content. Rather than using the ShareThis widget which provides many more options (many confusing options for most of our readers), we decided to create custom share buttons.

To add custom share buttons automatically to each post in a WordPress blog, add the following code to single.php, the file which renders the individual post (note that you must be using WordPress.org, the self-hosted version of WordPress, to be able to customize the php files). See an example of how this looks.

Facebook Share Button Code

Here is the Facebook share code, which can also be found at http://www.facebook.com/share_partners.php/.

<script>function fbs_click() {u=location.href;t=document.title;window.open(’http://www.facebook.com/sharer.php?u=’+encodeURIComponent(u)+’&t=’+encodeURIComponent(t),’sharer’,’toolbar=0,status=0,width=626,height=436′);return false;}</script><a href=”http://www.facebook.com/share.php?u=<url>” onclick=”return fbs_click()” target=”_blank”><img src=”ADD_IMAGE_URL_HERE” alt=”Share on Facebook” /></a>

Twitter Share Button Code

Here is the Twitter share code, which can also be found at http://www.jhuskisson.com/code-tidbits/share-on-twitter-link.

<a href=”http://twitter.com/home?status=Currentlyreading <?php the_permalink(); ?>” title=”Click to share this post on Twitter””><img src=”ADD_IMAGE_URL_HERE” alt=”Share on Twitter”></a>

LinkedIn Share Button Code

Here is the LinkedIn share code, which can also be found at http://www.linkedin.com/static?key=developers_widget_shareonlinkedin.

<a href=”http://www.linkedin.com/shareArticle?mini=true&url=<?phpthe_permalink(); ?>&title=<?php the_title(); ?>&source=ADD_YOUR_BLOG_URL_HERE”><img src=”ADD_IMAGE_URL_HERE”></a>

delicious Share Button Code

Here is the delicious share code, which can also be found at http://delicious.com/help/savebuttons.

<a href=”http://delicious.com/save” onclick=”window.open(’http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=’+encodeURIComponent(’<?php the_permalink() ?>’)+’&amp;title=’+encodeURIComponent(’<?php the_title() ?>’),’delicious’, ‘toolbar=no,width=550,height=550′); return false;”><img src=”ADD_IMAGE_URL_HERE” height=”20″ width=”20″ alt=”Delicious” /></a>