Search | People | Departments

 

Location: UMD > ITSS > Training > Online Training >Web Design References > Tools

Tools

Accessibility Tools

• aDesigner - Eclipse "aDesigner is a disability simulator that helps designers ensure that their content and applications are accessible and usable by the visually impaired.
• A-Prompt (Accessibility Prompt) - A tool developed to assist Web authors in improving the accessibility and usability of HTML documents. It is made available through a joint collaboration between the Adaptive Technology Resource Centre at the University of Toronto and the TRACE Center at the University of Wisconsin.
• ATutor - "ATutor is an Open Source Web-based Learning Content Management System (LCMS) designed with accessibility and adaptability in mind. Administrators can install or update ATutor in minutes, and develop custom templates to give ATutor a new look. Educators can quickly assemble, package, and redistribute Web-based instructional content, easily retrieve and import prepackaged content, and conduct their courses online. Students learn in an adaptive learning environment."
  • ATalker add-on for ATutor - "ATalker is a Web-based text-to-speech add-on for ATutor, based on the Festival text-to-speech system. Using synthesized speech, ATalker can read text out loud over the Web. With the ATalker Theme installed, the ATutor interface and feedback messages can be read out loud. ATalker can currently produce English and Spanish voices. The potential for many other languages is available through the Mbrola Project."
• aViewer Beta - Updated - Steve Faulkner "...Here at TPG we have been working on a new tool to inspect elements on a web page and be able to view the HTML code, ARIA attributes (if any) and the information being conveyed by the browser to accessibility APIs, all in one neatish interface. We have given it the catchy moniker 'AViewer' and a beta version is available for download...Runs on Windows only."
• Accessible Form Builder - Ian Lloyd. "A new version of the form builder tool, this time with more advanced features, including the option of selecting what type of input you need."
• AccessibleTwitr - Dennis Lembree. "Web accessibility for the Twitter web application..."
• Form Element Generator - Ian Lloyd. "Lets you easily build individual form elements that are accessible."
• Accessible Table Builder - Ian Lloyd. "Create an accessible table using scope, header and id attributes using a wizard to guide you through the process".
• AccProbe: The Accessibility Probe - IBM / Open A11y. "The Accessibility Probe (AccProbe) is a standalone, Eclipse Rich-Client Product (RCP) application that provides a view of the Microsoft Active Accessibility (MSAA) or IAccessible2 hierarchy of a currently running application or rendered document and of the properties of the accessible objects of that application or document. It can also serve as an event monitor for tracking the events fired by these accessible objects. It is meant to combine the functionality of tools like Microsoft's Inspect32, AccExplore, and AccEvent into one easy-to-use application for accessibility testing and debugging."
• Accessibility Extension Examining WAI-ARIA - Gez Lemon. " ...this Firefox extension examines WAI-ARIA's Live Regions (this functionality will eventually be incorporated into a WAT for Firefox extension). The live regions extension is currently available in a toolbar with the latest versions of the colour contrast analyser and table inspector extensions. Updates include not only Landmark Roles but all WAI-ARIA Roles and all WAI-ARIA Properties.
• Acrobot - Ian Lloyd. "converts all your acronyms/abbreviations using the <acronym> and <abbr> tag".
• ARIA Slider Generator - Ian Lloyd."This tool is reverse-engineered from this ARIA slider example by the Paciello Group. I'm not convinced about its usefulness - it was an experiment, more than anything - but I'm keen to produce some more tools which may make the process of creating ARIA-compliant page elements/features more simple. If you have an idea for an ARIA tool that I could build, please drop me a line."
• Caption Tube "CaptionTube is a utility for adding closed captions to YouTube videos. After you import a video, you play the video and add captions as needed. When you are done, you export the captions and then upload to YouTube. CaptionTube provides improved precision with a scaleable timeline. You can also make changes to captions and preview them immediately. It also allows you to create multiple language tracks."
• CC for Flash - National Center for Accessible Media. "NCAM has developed a Flash component that can be used to display captions in a Flash video player. These captions are read from external files formatted in the W3C's DFXP format which can be created with MAGpie, NCAM's free captioning application. CC for Flash also imports Apple's QTtext format for use within the application. QTtext files can be created by professional caption authoring tools, or as an output from CaptionKeeper or MAGpie. Any content can display captions in Flash using the CC for Flash component with a QTtext file or a DFXP file."
• Clear Language and Effectiveness Tool - Based on the Simple Measure Of Gobbledegook (SMOG) readability formula and developed by the Toronto East End Literacy Project. This tool asks a series of questions then using client-side scripting calculates a reading level.
• CLiCk, Speak - Charles L. Chen. "CLiCk, Speak is an open source, freely available extension for the Firefox web browser. It is part of the CLC-4-TTS Suite of products, it features a mouse driven interface, and it reads web pages - hence its name. Unlike Fire Vox which is designed for visually impaired users, CLiCk, Speak is designed for sighted users who want text-to-speech functionality. It doesn't identify elements or announce events - two features that are very important for visually impaired users but very annoying for sighted users. It also has a simplified, mouse driven interface that is designed to be easy for users familiar with point-and-click graphical user interfaces. Like Fire Vox, CLiCk, Speak works on Windows, Macintosh, and Linux; and Fire Vox has multilingual support, making it great for users who are trying to learn a foreign language and need to hear foreign language web sites read out to them for practice."
• Complex Table Inspector favelet - Gez Lemon. Gez has written a favelet that reveals accessibility attributes for complex tables.
• Community Captioner - Project Possibility. "Our project concept is an open source, community-driven online video closed captioning tool..."
  • Table Inspector Mozilla/Firefox Extension - Gez Lemon
• Cynthia - HiSoftware, ICDRI and The Internet Society Disability Chapter. "Cynthia is a web content accessibility validation solution, it is designed to identify errors in design related to Section 508 standards and the W3C WCAG guidelines. It is also designed to educate web site developers in the development of Web Based content so that is accessible to all."
• Easy SlideShare - Chris Heilmann. "Easy SlideShare is an alternative way of reading SlideShare presentations. We wanted to make sure that everybody who wants to read your presentations on-line can do so - regardless of age, ability and web proficiency."
• Easy YouTube - Chris Heilmann. "The Easy YouTube Player is an alternative way of watching YouTube videos. Instead of simulating YouTube we wanted to make sure that everybody who wants to see videos on-line can do so - regardless of age, ability and web proficiency..."
• Easy YouTube Caption Creator - A Very Rough Rirst 'Build' - Ian Lloyd. "...I've put together a little tool that lets me create a caption file - suitable for YouTube - in what I think is a quite easy manner..."
• Evaluating Web Sites for Accessibility - Web Accessibility Initiative
• Excesskey - Charles McCathieNevile. "The project is to improve the usability of accesskeys, and version 1.1 actually works (although there are a lot of improvements I want to make)."
• Fangs: The Firefox Screen Reader Emulator Extension - Joseph Lindsay. "I get a lot of questions on how certain pages appear in a screen reader. That is why I have started developing a Mozilla Firefox extension that emulates the output of a modern screen reader."
• Firefox Web Browser - Besides being a great browser, firefox has many useful add-ons/extensions like:
  • Accessibility Extensions for Mozilla/Firefox - Center for Instructional Technology Accessibility. "The Mozilla/Firefox Accessibility Extension makes it easier for people with disabilities to view and navigate web content. A toolbar provides easy access to navigation, styling, and keyboard enhancement functionality. Developers can use the extension to check their structural markup from the browser window to verify that it matches the page content. The Accessibility Extension helps authors to meet these kinds of accessibility practices that are so important for the browsing experience of all users and vital to those with special needs."
  • Colorzilla - "It assists web developers and graphic designers with color related tasks - both basic and advanced. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program."
  • Fangs - The Firefox Screen Reader Emulator Extension
  • HTML Validator for Firefox and Mozilla (based on Tidy) - Marc Gueury. "HTML Validator is an Mozilla extension that adds HTML validation to Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page."
  • Longdesc - Patrick H. Lauke. Adds view long description to the image context menu.
  • Longdesk 0.1, FireFox Extension - Anthony Ricaud. "A simple add-on that adds a link to the longdesc under images that provides one...
  • Table Inspector - Gez Lemon's extension reveals accessibility attributes for complex tables.
  • Total Validator Extension - Andy Halford. "Perform multiple validations and take screen shots in one go rather than using separate tools. This 5-in-1 validator uses the online Total Validator service. Provides true HTML validation using the official DTDs. So you no longer have to put up with mistakes in the W3C validator and tools such as Tidy which interpret the standards incorrectly. Also performs accessibility validation, checks for broken links, spell checking, and takes screen shots so you can validate your pages with different browsers."
  • Twitter Focus - Gez Lemon. "Considering the standard Twitter website is so basic, it's surprising it is so inaccessible. This Focus Twitter Greasemonkey script puts the favourite, reply and delete links into the keyboard tab order to make it easier for keyboard-only users to use Twitter."
  • ViewSourceWith - Davide Ficanco. "This is a extension, compatible with most mozilla applications, that allows you to open source pages with your preferred editor, useful for programmer and web designer. Tested under Windows and Linux (from version 0.0.6 works on MacOSX)."
• Firefox 1.5 Accessible Widgets - Gez Lemon. "Firefox 1.5 supports dynamic web content accessibility to help the advancement of Rich Internet Web Applications. To help illustrate how this, I've developed a simple keyboard accessible colour selection widget. The widget only works with Firefox 1.5 with scripting enabled, as the purpose is to demonstrate the accessibility features of Firefox 1.5."
  • Keyboard Accessible Colour Selection Widget - Gez Lemon
• Functional Accessibility Evaluator - Center for Instructional Technology Accessibility. "The Functional Accessibility Evaluator (FAE), formerly called the Web Accessibility Management Tool (WAMT), analyzes web resources for markup that is consistent with the use of CITES/DRES HTML Best Practices for development of functionally accessible web resources that also support interoperability."
• formArchitect - Eric Smith. "Create complex html forms without using tables for layout..."
• IBM Accessibility Internet Browser for Multimedia (aiBrowser) - The IBM Accessibility Internet Browser for Multimedia (aiBrowser) is an Internet browser for visually impaired users that provides multimedia control features and alternative user interfaces with external metadata.
• Header Ordering Checker - University of Durham. "This header levels checker linearized each page and checks the order of headers. It will give a warning for each improperly ordered header. It is advisable to make sure that your page validates before using this utility, as improperly matched headers, or headers within headers could cause problems.
• KeyTitle Opera Extension - Charles McCathieNevile. "It's an (Opera) extension so you can navigate a page by keyboard, and have the title tooltips shown just as they would if you mouseover something with a tooltip. This is another step to bing keyboard use to match what happens when people are working with a mouse, and vice versa..."
• Lynx Viewer - See how pages rendered with text-browser Lynx. It generates an HTML page that indicates how much of the content of a web page would be available to Lynx, which is a text-only browser. In addition to showing how useful a site would be for a visually-impaired person, it is also a good indicator for anyone with older technology.
• Lynx Viewer by Yellow Pipe - "The Lynx Viewer allows webmasters to see what their pages will look like when viewed with Lynx, a text-mode web browser. It is also presumably, how search engines see your site."
• Macaw - whitanderson.com. Macaw is a free Macintosh application that creates QuickTime text tracks.
• MAGpie - MAGpie is a free tool available for download from the National Center for Accessible Media. This software lets you add captions to RealVideo, QuickTime, and Windows Media files.
• Net-guide.co.uk - David Poehlman. This is a search engine that gives an accessibility rating for the websites returned for any query entered.
• NVDA (Non Visual Desktop Access) - a free and open source screen reader for Windows
  • NVDA - A Free, Open Source Screen Reader - Roger Johansson. "Testing your work with a screen reader, especially if you're building something that is more advanced than a basic info website, is likely to help you create a more accessible website..."
• ObjectDescription - Vlad Alexander. "ObjectDescription is a service that lets anyone write a description for any non-textual object (such as an image) on the Web."
• OATS (Open Source Assistive Technology Software) - "OATSoft is dedicated to improving Assistive Technology and computer accessibility through the power of Open Source development techniques. OATSoft makes the best Open Source Assistive Technology Software (OATS) easy to find. Users and developers meet at OATSoft to create better software."
• Online Accessibility Check - etre. "Check the compliance of your website with a number of leading accessibility guidelines using our automated online page check.".
• Opera - A free, fast, highly standards-compliant Web browser that allows you to toggle images, style sheets, scripting, and tables on and off with a single mouse click. These features allow designers to check alt-text, see how tables linearize, and ensure that pages work with style sheets turned off.
• Photosensitive Epilepsy Analysis Tool (PEAT) - Trace Center. "PEAT can help authors determine whether animations or video in their content are likely to cause seizures. Not all content needs to be evaluated by PEAT, but content that contains video or animation should be evaluated, especially if that content contains flashing or rapid transitions between light and dark background colors...(Windows Vista, or Windows XP with some restrictions)"
• Quick Page Accessibility Test - Ian Lloyd. "Here's a handy little tool that uses a bookmarklet/favelet to give a quick analysis of any web page, highlighting definite issues, warning about possible issues and also highlighting areas that could benefit from some ARIA enhancements."
• Ruby Accessibility Analysis Kit (Raakt) - Peter Krantz. "The Ruby Accessibility Analysis Kit (Raakt) is a toolkit to find accessibility issues in HTML documents. Raakt can be used as part of a an automatic test procedure or as a standalone module for mass validation of an entire site."
• Readability analyser - readability.info. "Find out for yourself where your writing style places your prose compared to other Web pages and writing samples..."
• Readability Test - Gez Lemon. "Gunning Fog, Flesch Reading Ease, and Flesch-Kincaid are reading level algorithms that can be helpful in determining how readable your content is. Reading level algorithms only provide a rough guide, as they tend to reward short sentences made up of short words. Whilst they're rough guides, they can give a useful indication as to whether you've pitched your content at the right level for your intended audience."
• Skip Navigation Builder - Ian Lloyd"...This tool lets you quickly create one or more skip links on a page, generating all the necessary markup, CSS and JavaScript (unfortunately this does require JavaScript for the effect to work, as there are still many versions of Internet Explorer in use that do not allow us to apply a focus pseudo class in CSS..."
• SpokenText - Mark McKay Bruce Tsuji, and Robert Biddle. "This site allows you to upload text (.txt), Acrobat (.pdf) or Word (.doc) files and have them converted to spoken audio. We also let you record emails, text from a website or enter the text you need converted directly."
• STEP508 - section508.gov. "STEP508, the Simple Tool for Error Prioritization for Section 508 compliance, is an electronic tool that: Prioritizes the repairs you should make to ensure that your Web site is compliant with the accessibility requirements of Section 508."
• Subtitle Horse 2.0: Online Subtitle/Captions Editor - subtitle-horse. "Subtitle Horse is a online subtitle editor to translate flash videos (FLV) and get the subtitle-code in different formats, like TimedText or SRT. A timedText file (which is supported by the JW FLV Player and Adobe FLV playback component) can be generated online..."
  • A Web Based DFXP Captioning Tool - Roberto Ellero
• Tablin: an HTML Table linearizer - from w3.org. HTML Tables, whether used for layout or for real data, can create problems for people reading the Web line-by-line (e.g. columned text read across the page out of order: reading sentences on the same row from different columns as one sentence).
• Helen Toolbar Application Download - American Foundation the Blind
• TellMeMore Opera Extension - Charles McCathieNevile. "Find things that have more description available, and show them on demand. Where images (or something else) have a longdesc attribute, the extension notifies by changing its icon and title, and enables the user to see a list of the descriptions available, in its popup. When the user selects an item in the popup, a new window opens with the description in it."
• Thunder - screenreader.net. "At ScreenReader.net we have freeware for blindness and visual impairment special needs throughout the world. It is free only to individual blind people for their personal use at home: it is not free to organisations...Download the Thunder ScreenReader talking software and your modern XP or Vista computer will be immediately usable by someone who can't see to read the screen."
• VideoCritter - Ken Meyering. "A Simple Free Online YouTube Video Captions Creator Easily create subtitles and closed-captioning that can be translated into other languages."
• Viewable with any Browser
• Image Analyser - Gez Lemon: "This service examines all images found on a web page to check for any accessibility issues. The width, height, alt, and longdesc attributes are examined for appropriate values..."
• WAI-ARIA Landmarks - David Todd "This repository contains a Firefox extension that enables keyboard navigation of WAI-ARIA landmarks."
• WCAG 2.0 Audio Contrast Tool Help For Success Criteria 1.4.7 - eramp.
  "WCAG 2.0, Success Criteria 1.4.7 is a guideline for accessible audio files on the internet. The goal is to help people who are hard of hearing understand the speech (foreground). This is done by making sure that any background music or noise is very quiet. Background music (or sound) should be at least 20dB lower than the foreground speech."
• WAVE - helps people perform design tasks that require human judgment (e.g. "Does this ALT text provide a functional equivalent for this image?" "Does this reading order make sense?"). The Wave displays the ALT text of images and areas on the page for comparison with the images, provides numbered arrows to show the linearized reading order, and shows the HTML equivalent (if any) provided for applets. WAVE features that help users compare visual and textual representations are not directly useful to people who are blind; but the output is accessible so people who are blind can check the output for completeness.
  • Introducing WAVE 4.0 - Jared Smith
  • WAVE Dreamweaver Extension - WebAIM
• WaiZilla - Tim Roberts. WaiZilla will be an open source accessibility checking tool. It will integrate with Mozilla browsers (like Netscape 7) and provide instant checks on local and online web pages; it will also work on Windows, Mac and Linux. It will check against WCAG 1.0 and in future Section 508 and WCAG 2 when it arrives.
• WAEX: Web Accessibility Evaluator in a single XSLT file - Vicente Luque Centeno. "It evaluates many WCAG conditions and also some XHTML restrictions not yet formalized in the XHTML DTD (but in the prose of the specification)."
• Web Accessibility Inspector - Fujitsu. "Web Accessibility Inspector can (help) check the accessibility of a website automatically and efficiently on W3C WCAG 1.0 and Fujitsu Web Accessibility Guidelines."
• Web Accessibility - Toolbar (For Opera) - Web Accessibility Tools Consortium. "WAT for Opera a version of the popular testing tool, the Web Accessibility Toolbar, that can be installed on the Opera web browser."
• Web Accessibility Tools Consortium - "The Web Accessibility Tools Consortium [WAT-C] provides a collection of free tools to assist both developers and designers in the development and testing of accessible web content. The consortium is a collaboration of some of the world's leading accessibility practitioners, founded by Accessible Information Solutions (Australia), Infoaxia (Japan), The Paciello Group (USA), Wrong HTML (Japan), and Juicy Studio (UK). Our goals are to develop new tools, improve current tools and expand the range of browsers, operating systems and languages in which our tools are available."
• WebAnywhere - WebInSight. "A web-based screen reader to provide blind web users equal access to the web from any computer without requiring the installation of special, expensive software."
• WebbIE - Alasdair King. "WebbIE is a web browser for blind and visually-impaired people, especially those using screen readers. The Accessible programs let you access news and audio on the Internet in a simple and accessible way, allowing you to use podcasts, listen to the radio and read RSS and news with your screen reader or other access solution. Together they provide a way to access websites and other great things online"
• Web Page Backward Compatibility Viewer - delorie.com
• Worldspace FireEyes - deque. "...web accessibility tool that ensures both static and dynamic content within a web portfolio are compliant with standards such as Section 508, WCAG 1.0, and WCAG 2.0..."]
• Yes/No List Creator - Ian Lloyd. "What is this? It's a tool for quickly generating accessible, XHTML-compliant yes/no radio button choices from a list, that's what. Another time-saver I put together 'cos I got fed up with hand coding all this nonsense. Try it out, hombre."

Color Tools

• 4096 color wheel - Jemima Pereira
• Accessibility Tools for Quality Assurance: Color Contrast - Martin Kliehm
• CheckMyColours "a tool for checking foreground and background color combinations of all DOM elements and determining if they provide sufficient contrast when viewed by someone having color deficits. All the tests are based on the algorithms suggested by the World Wide Web Consortium..."
• Color Blender - Eric A. Meyer and Steven Champeon
• Colorblind Web Page Filter - Type in your site's URL, select the filter you would like to use and click the Fetch and Filter button.
• Colour Blindness Simulator - Etre. "Use our Colour Blindness Simulator to reveal how your images may appear to users with a variety of colour blindness conditions. Upload a JPEG image of no more than 1000 pixels x 1000 pixels (100 KB filesize or less) to see how colour blind users may see it."
• ColorBrewer! "ColorBrewer is an online tool designed to help people select good color schemes for maps and other graphics. It is free to use, although we'd appreciate it if you could cite us if you decide to use one of our color schemes."
• Colour Contrast Analyser - Gez Lemon. This tool can help determine if foreground and background colour combinations provide sufficient color contrast. Updated for WCAG 2.0 acceptable minimum color contrast ratios.
• Contrast Analyser - Paciello Group. "It is primarily a tool for checking foreground & background color combinations to determine if they provide good color visibility. It also contains functionality to create simulations of certain visual conditions such as color blindness..."
• Colour Contrast Analyser Firefox Extension (New and Improved) - Gez Lemon. "The Juicy Studio Colour Contrast Firefox Extension has been updated to match the latest version of the draft Web Content Accessibility Guidelines 2.0, and includes a patch that checks for contrast for input elements."
• Color Contrast Analyser: An Alternative Analyser - Mel Pedley. "Why 'alternative'? Because I believe that the standard analyzers that apply the W3C thresholds place too much emphasis on high contrasts. Why is high contrast a problem? It can make pages difficult to read for many people with dyslexia. So, what's different about this Analyser? As well as using the W3C thresholds, it uses the Hewlett Packard Color Difference threshold which, at 400, is 20% lower than the corresponding W3C figure. It also provides a 'high contrast' warning if the colour difference exceeds 600."
• Colour Contrast Analyser for MAC - Cedric Trevisan of the Paciello Group (Europe) and the Web Accessibility Tools Consortium. "A MAC version of the Contrast Analyser has been developed by Cedric Trevisan (TPG). The interface is similar to the windows version...at this stage the CCA MAC does not have the image simulation features found in the windows version."
• Color Contrast Checker - Jared Smith. "Simply select or enter a foreground and background color in RGB hexadecimal format (e.g., #fd3 or #f7da39). Select the lighten and darken options to modify the colors slightly. You can use the color picker to change colors or change luminosity..."
• Colour Contrast Visualiser - stainlessvision. "This tool allows you to visualise good colour combinations on a Photoshop style colour picker. It's primary use is finding acceptable colours from an existing inaccessible combination - while maintaining the aesthetic appeal of the original."
• Color Chart Pickers - Marie. To use, just click on the button color you wish to view. The background color of this page will change to that color.
• Colour Check - etre. "Our online Colour Check determines the colour difference and contrast between any two colours to maximize readability."
• Colour Contrast Analyser By Vision Australia. "It is a tool for checking foreground and background colour combinations to determine if they provide good colour visibility. Determining 'colour visibility' is based on algorithms suggested by the World Wide Web Consortium (W3C)"
• Colour Contrast Check Tool - Jonathan Snook. "The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast 'when viewed by someone having color deficits or when viewed on a black and white screen'".
• Colours and Contrast - Tommy Olsson. "This tool computes the colour brightness difference and the colour difference between a background colour and a foreground colour."
• Color Contrast Comparison - Joe Dolson
• Contrast Luminosity Analyzer (Updated) By Gez Lemon. Updated for WCAG 2.0 acceptable minimum color contrast ratios.
• Color Contrast Verification Tool - Hewlett-Packard
• Color Contrast Test - Joe Dolson
• Color Conversion Calculator - Autopedia.com
• Color Designer - Kasper J. Jeppesen."A quick and easy to use tool to design color sets...released as a free (as in free beer) application for MacOS X."
• Color Doctor - Fujitsu. "Color Doctor is a tool that checks accessibility from the aspect of color. It converts any images displayed on screen such as browsers or Microsoft PowerPoint presentations into gray scale or colors that persons with color vision deficiency can see...for Windows XP only."
• ColorMatch 5K
• Colour Matcher - Jemima Pereira
• Color Oracle "Color Oracle takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see. Color Oracle applies a full screen color filter to art you are designing - independently of the software that you are using..."
• Color Palette Creator v1.6 - Steve Chipman. "This tool...will create 10 shades of the base color, located top-left, at varying degrees of opacity. The top row emulates opacity over a white background, the bottom over black (or colors of your choosing as of v1.4). The opacity values are 100% opaque, 75%, 50%, 25% and 10% on the top row. The bottom row begins at 85% rather than 100% and continues on as the first."
• Color Scheme Picker - Petr Stanicek.This tool lets you chose base colors and complements, split complements, double contrast, monochromatic, and analogic. After that you can refine the scheme by clicking on the hex color to the right. Additionally it allows you to select regular vision as well as the various types of color blindness.
• Color Schemer by Colorschemer.com
• Color Scheme Generator 2 - Petr Stanic ek (pixy). "Generator of color schemes and palettes to create good-looking and well balanced and harmonic web pages. This is the new version of the previous color generator."
• Color Selector - Fujitsu. "Color Selector can check the background-color and character-color combination by people with cataracts or color blindness."
• Color Wizard - webwhirlers. "The Colour Wizard lets you type in the value of your colour and get an automatic return of that colour's complementary colour, split complementary colours, analogous colours, chromatic variations, shade and tint variation and saturation variation."
• Colorzilla - "ColorZilla is an extension for Mozilla Firefox and the Mozilla Suite. It assists web developers and graphic designers with color related tasks - both basic and advanced. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program."
• ColorSelector - Fujitsu.com. "ColorSelector is a powerful tool for developers to help determine the most accessible combinations of background colors and text colors in real time."
• Combo Tester - Gremillion Consulting . A tool "that allows web developers to see how different color combinations work together on the screen."
• CSS Color Chart - Shailesh N. Humbad
• GrayBit - Jona Fenocchi and Mike Cherim. "GrayBit is an online accessibility testing tool designed to visually convert any full-color web page into a grayscale rendition for the purpose of visually testing the page's perceived contrast."
• Hex Color Picker by Jesper - "Lets you get and edit hexadecimal HTML color codes in the standard Mac OS X color panel."
• Hex Color Picker by wafflesoftware. "Lets you get and edit hexadecimal HTML color codes in the standard Mac OS X color panel."
• Infohound Color Schemer - Jonathan Hedley
• moreCrayons - Kirk Franklin
• Luminosity Contrast Ratio Algorithm - Gez Lemon. "Guideline 1.4 of the draft version of the Web Content Accessibility Guidelines (WCAG) 2.0 requires that it is easy to distinguish foreground information from background images or sounds. The guideline suggests a luminosity contrast ratio algorithm to help determine the contrast between foreground and background colours. To help understand the algorithm, I have provided a Luminosity Contrast Ratio Analyser (Beta), along with example luminosity contrast ratios."
• Sim Daltonism - Michel Fortin. "Sim Daltonism is a color blindness simulator for Mac OS X. It filters in real-time the area around the mouse pointer and display the result in a floating palette."
• Test Your Color IQ - Drag and drop the colors in each row to arrange them by hue order.
• The Color Palette Creator - S.G. Chipman
• Vischeck - Vischeck is a way of showing you what things look like to someone who is color blind. You can use it on a single image or on a web page. You can also download programs to let you run it on your own computer.

Cascading Style Sheet Tools

• Analysing IDs - Christian Heilmann. This is an online tool that analyzes a web page for IDs. It will list all of them on a page and tell alert you to any that are used more than once
• BBEdit CSS Syntax Checker - John Gruber. "If you work on CSS using either of Bare Bones Software’s text editors, you might be interested in my latest project: CSS syntax checking scripts for BBEdit and TextWrangler. They’re a combination of Perl and AppleScript that allows you to syntax-check CSS files using the W3C’s CSS Validation Service. Errors and warnings from the validation service are displayed in a results browser, very similar in effect to BBEdit’s built-in HTML syntax checker."
• BoxShadows - thany.nl - "Use this page to see the differences in various box-shadow declarations across browsers."
• Browser CSS3 Rule Generator - Paul Irish and Jonathon Neal. "This element will receive inline changes as you edit the CSS rules on the left."
• Class Scanner Tool Set a.k.a. Drew made me do it - Chris Heilmann. "For an upcoming Microformats related project, Drew McLellan asked me to come up with a small script that includes all the tasks you need to deal with classes."
• Clean CSS - Jeff Finley. "CleanCSS is a powerful CSS optimizer and formatter. Basically, it takes your CSS code and makes it cleaner and more concise."
• Conditional-CSS - "Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers."
• CSS SuperScrub - isnoop. "This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names..."
• css3-mediaqueries-js - Wouter van der Graaf. "A JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support"
• CSS3, Please! The Cross-Browser CSS3 Rule Generator - Paul Irish and Jonathan Neal. "You can edit the underlined values in this css file, but don't worry about making sure the corresponding values match, that's all done automagically for you. Whenever you want, you can copy the whole or part of this page and paste it into your own stylesheet."
• CSS 3.0 Maker - css3maker
• CSS3 Playground - Mike Plate. "Use this web application to experiment and learn about new css3 capabilities. The styles applied when changing the different settings should follow the principles of progressive enhancements and will work in all browsers that support the setting. Just change the settings and see how the rectangular box changes according to your changes..."
• CSS Accessibility Analyser - Gez Lemon.
• CSSCheck - Web Design Group validation service for checking the syntax of your style sheets.
• CSS Creator - Douglas Livingstone. This is a is a" CSS generator, which you can use to create styles and test them on your site. If you are learning CSS have a look and see how changes will affect your site and generate the styles".
• CSS Editors - css-discuss Wiki. Huge listing of CSS editors.
• CSS Editor Bookmarklet for IE - Steve Faulkner. "For times when CSS styles need to be tested, on the fly, in Internet Explorer, the CSS editor bookmarklet can come in handy. It was originally developed from the test styles bookmarklet by Jesse Ruderman. When Internet Explorer 7 came along it ceased to work, but after much fiddling around I was able to get it working in IE 7. The CSS editor has the same functionality as the 'test styles' function on the Web Accessibility Toolbar."
• CSS Frame Generator - lab.xms.pl "Put your XHTML code below, we will grab it and send over to one of our scientists. He will do his voodoo and in return you will get a corresponding CSS frame."
• CSS Generator - By westciv. This tool provides a GUI that generates code for CSS gradients, shadows and transforms.
• cssdocs.org - Pete Freitag. "I have just launched another documentation shortcut site, this time for CSS: cssdocs.org. It allows you to get to CSS documentation from the url, for instance type in: cssdocs.org/text-decoration to go to the W3C documentation for the text-decoration property."
• CSS Love Child - Cameron Adams. "...My little bit of Perl scripting lets you take the HTML from one page, add the styles of another, and end up with a hideously mutated beast that can sometimes be amusing, sometimes be revealing, but most of the time looks like a fourth generation hillbilly..."
• CSS Optimiser - cssoptimiser.com. "Online CSS Optimizer is a web tool for reducing the file size of cascading style sheets. In order to save more space optimized files would be messy even so you may output it as a file. Non-valid or hacked (for certain browsers) CSS files may result in error."
• Color Oracle - Bernhard Jenny. "Color Oracle is a colorblindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see..."
• CSS Redundancy Checker - Google. A tool for checking your markup for outdated CSS rules that don't match any of your HTML.
• CSS Rounded Box Generator (Beta) - neuroticweb.
• CSS SuperScrub - isnoop.net. Reduces the size and complexity of your CSS by "programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names".
• CSS Sprite Generator - Ed Eliot and Stuart Colville. An automated Generator for CSS Sprites. Upload a zip of graphics and it will spit out a single image and a block of CSS.
• CSSTidy - Florian Schmitz. "CSSTidy is an open source CSS parser and optimizer. It is available as executable file (available for Windows, Linux and OSX) which can be controlled per command line and as PHP script (both with almost the same functionality)."
• CSS Type Set - By csstypeset.com. "CSS Type Set is a hands-on typography tool allowing designers and developers to interactively test and learn how to style their web content...The site serves as a hands-on tool for beginning designers and developers to interactively experiment with CSS in a WYSIWYG fashion. While similar concepts have been done before, our main focus was delivering a unique, easy-to-understand interface with instant CSS preview and output. When using the style controls, users are able to visually see how their entered text is affected and what code is used to achieve this specific look."
• Firdamatic: the Design Tool for the Uninspired Webloggers - "Firdamatic is an online tableless layout generator that allows you to create and customise layouts easily only by completing forms, making creating skins for your Firdamatic-based layout a breeze."
• How z-index Works - Thierry Koblentz. "This page is to demonstrate how elements stack."
• iPhoney - M. Onyschuk. "iPhone Browser Simulator provides an iPhone sized web view with which to test your iPhone targeted apps, all in a pretty iPhone-inspired package."
• Learning To Let Go (Styleswitcher on steroids) - Chris Heilmann. This tool "...is a PHP based solution that enables you as the designer to offer various Style Sheets, and enable the user to change colours, layout and font sizes. The data entered will be stored in a cookie and you do NOT need any PHP knowledge."
• Jello Generator - Mike Purvis. "This tool allows you to specify exactly how you would like your customized Jello Mold to behave. You specify a maximum and minimum width for your site, and then you can also specify the exact browser width at which the maximum width is first reached."
• List-o-matic - Ian Lloyd. This online wizard generates and formats navigation menus via CSS and semantically correct XHTML. It creates inline unordered lists with title attributes and then allows you to choose have vertical or horizontal CSS styles to them. A great time saver.
• List-o-Rama Dreamweaver Extension - George Petrov
• mediaQuery Bookmarklet - Rob Tarr. "...I figured that if we had a tool that would show us exactly what size the viewport was, we would know what media queries would be active. Taking it one step further, I thought why shouldn't the tool just tell me which media query just fired? So, I wrote this little bookmarklet. It parses the included CSS files of the current page and creates an array of media query declarations. It then sets up listeners using the matchMedia method to trigger events when media queries change..."
• Modernizer "Modernizr is a javascript library which detects your browsers' support for the latest CSS and HTML5 features. Essentially it tells you how modern your browser is."
• MRI - John Allsopp. "MRI is a free cross browser tool that lets you test selectors with any web page. Selectors, particularly complex ones can be difficult to get exactly right - MRI lets you experiment with them on any web page (local or online, static or dynamic)."
• ProCSSor - Advanced CSS Prettifier ProCSSor is a web-based service helps format CSS. It has unique formatting styles and several customizable options."
• rendr 2 - greg taff. "I've been tinkering with a rapid html prototyping tool for sometime and have finally fixed a critical bug that was making it a pain to use for large bits of markup. I now feel its good enough to share."
• Respond.js - Scott Jehl. "Fast CSS3 Media Queries for Internet Explorer 6-8 and more..."
• Selector Builder Preview Version - Daniel Glazman. "I am releasing a v0.1 standalone version of the CSS3 Selector builder through Disruptive Innovations. It's available here and it allows you to write a CSS3 selector in a human-friendly way. Warnings: 1.) Tristan Nitot reported problems using Deer Park; please use Firefox 1.0.6. 2.) The code is not free, and you're not allowed to copy the code elsewhere w/o prior written authorization. 3.) Yes, I know, some CSS3 simple selectors are missing. 4.) There's no sanity control on the textboxes. Enjoy."
• Selectoracle - Find out what a particularly complex CSS selector really means. This tool translates cascading style sheets 2 and 3 selectors.
• Sky CSS Tool - "Online CSS authoring tool allows you to create CSS classes almost without using manuscript code. JavaScript compatible browser is needed for the proper functioning."
• Spanky Corners - Alex Walker. "'Spanky Corners' is an experimental technique for using only CSS to produced 'round-cornered content boxes' with semantically pure markup. It does not require JavaScript to work."
• Styleneat Styleneat "organizes and standardizes your CSS - selectors, sub-selectors and properties - in a structure that makes it easier to define page areas and see how they relate to each other..."
• W3C CSS Validation Service - Philippe Le Hegaret, Sijtsche de Jon
  • W3C CSS Validator FAQ.
• Webucator - A CSS reference that allows you to test your CSS code.
• XHTML / CSS Style Guide - Ross Johnson. "...If you are one of the many developers who use some sort of CSS reset, and/or provide content management systems to clients then your should really consider using this style guide to make sure the most common HTML elements have proper styling and flow with your design. Often it is easy to forget to style an HTML element only to find a client has used it on a page and the design simply doesn't fit."
• XRAY - John Allsopp. "XRAY is a bookmarklet for Safari, Firefox, Camino or Mozilla. Use it to see the box model for any element."
• Xylescope - Jurgen Schweizer. "Xylescope has been designed and developed for looking underneath the surface of web pages as you surf the web - it couldn't be easier. Using Xylescope you can look forward to analyzing complex CSS designs with incredible ease and experimenting with third-party sites, without having to download them onto your own computer first...System Requirements: Mac OS X 10.3.9 or later."

HTML Validators, Lints & Viewers

• AnyBrowser.com - HTML and link lint, search engine tools, and other browser compatibility tests. Also tools relevant for accessibility include viewing in various screen sizes, view with images are replaced by ALT text.
• Browser Emulator - dejavu.org.
• CSE HTML Validator Lite - "Clean up your site with CSE Lite! CSE HTML Validator Lite is an award winning free HTML editor and basic HTML syntax checker for Microsoft Windows." - htmlvalidator.com.
• Evolt Browser Archive.
• Feng GUI - "Find out how people View your website or image and which areas are getting most of the attention. The ViewFinder Heatmap service, is an artificial intelligence service which simulates human visual attention and creates an attention heatmap."
• HTML Lint - Marko Mrdjenovic et al. "HTML Lint is a tool that makes sure your code looks good. While XHTML was very strict with syntax HTML 5 is more lenient like previous versions of HTML, which means keeping consistent code styles will become more difficult. Validating is not good enough anymore..."
• HTML Validator Extension for Google Chrome - Robert Nyman
• HTML Validator for Firefox and Mozilla (based on Tidy) - Marc Gueury. "HTML Validator is an Mozilla extension that adds HTML validation to Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page."
• LogValidator - "Log Validator is a web server log analysis tool with focus on the quality of Web documents. Thanks to a modular, extensible design, the Log Validator can help Web authors find the most popular content on their web site that matches a particular criteria...This tool is here to make your life as a webmaster, web designer, web developer even easier, by telling you which documents you should fix in priority."
• Lynx Viewer - See how pages rendered with text-browser Lynx. It generates an HTML page that indicates how much of the content of a web page would be available to Lynx, which is a text-only browser. In addition to showing how useful a site would be for a visually-impaired person, it is also a good indicator for anyone with older technology.
• Page Valet - a validator, originally for HTML but now expanded to support other SGML and XML document types.
• Nu Markup Validation Service - W3C Pilot - Michael(tm) Smith. - "An experimental implementation of missing-alt error-reporting in a pilot version a validator.nu-based next-generation W3C markup-validation service."
• rel-lint - Drew McLellan. "This is a lint tool (like a non-authoritative validator) for XFN, rel-tag and other microformats that make use of the rel attribute of links. It takes the form of a bookmarklet you can add to your browser and then run against any page. rel-lint will check for known XFN values, flag values it doesn't recognize (even though they may well be correct) and display the tag values for rel-tagged links."
• Real HTML Validation - This part of Liam Quinn's site details the difference between validators and lints. It has links to each major validator and lint.
• SafariTest - snugtech.com. "How does your website look on Apple Safari? Enter your URL in the box above and click View. SafariTest will return a screenshot of your page as viewed with Safari."
• Screen Size Tester
• Table Integrity Checker - Henri Sivonen."I am working on a conformance checking service for (X)HTML5. The service is grammar-based for the most part with RELAX NG as the schema language. Some extra-grammatical constraints are expressed as Schematron assertions. Currently, as a Mozilla Foundation grantee, I am working on writing checkers (in Java) for spec features that cannot (practically or at all) be checked using RELAX NG or Schematron."
• Tablin: an HTML Table linearizer - from w3.org. HTML Tables, whether used for layout or for real data, can create problems for people reading the Web line-by-line (e.g. columned text read across the page out of order: reading sentences on the same row from different columns as one sentence).
• TIDY - Tidy is a free lint utility to check and clean up badly formed HTML. It is useful as a first-pass for helping to fix bad HTML. It also offers a means to convert existing HTML content into well-formed XML, for delivery as XHTML. A great tool! But please note: Tidy is not a validator. It is not a substitute for the W3C HTML Validator which verifies that your code meets the W3C standards. Tidy is highly recommended for any time you have to fix a truly awful mess or if you are a beginner, and find validator reports confusing or incomprehensible.
  • HTML Tidy Online by Jonathan Hedley - Online version of Dave Raggett's HTML Tidy.
  • HTML Validator (with Tidy) - Marc Gueury. This is a tidy extension for Firefox that "adds HTML validation to the View Page Source of the browser. The validation is done by Tidy from W3c". It works on Windows with Mozilla 1.7.x, 1.8.x and Firefox 0.9.x, 1.0PR.
  • Safari Tidy plugin - Kasper Nauwelaerts. "The Safari Tidy plugin is a small plugin that lets you validate the webpages you browse for (x)html compliance. The actual validation is done by Tidy. This plugin was modeled after a similar plugin for Firefox..."
  • Tidybot - Leo Breebaart. "Tidybot is a cross-platform batch XHTML syntax-checker and report-generator. It traverses a directory tree of XHTML files on your hard disk, and generates a web page listing all the errors and warnings it encounters. Tidybot can be used in two ways: from the command-line, or through a user-friendly GUI application. The output will be identical in either case."
  • Tidy Service - Scott Ahten. "Tidy Service is a simple OS X Service that cleans up markup using the popular HTML Tidy library originally created by Dave Raggett.".
  • Tidy your HTML by Dan Connolly - Online version of Tidy.
  • Validator Donation Program: Day 2 - Olivier Thereaux. Yesterday, W3C launched a new donation and sponsorship program offering Web-people and Organizations a chance to show their support for Web Standards and Open source: the Validator Donation Program.
• Tidy for HTML5 - "This repo is a fork of the code from tidy.sourceforge.net. This source code in this version supports processing of HTML5 documents. The changes for HTML5 support started from a patch developed by Bjorn Hohrmann."
• Total Validator (online) Andy Halford. Free online tool. "Perform multiple validations and take screen shots in one go rather than using separate tools. Provides true HTML validation using the official DTDs. So you no longer have to put up with mistakes in the W3C validator and tools such as Tidy which interpret the standards incorrectly. Also performs accessibility validation, checks for broken links, spell checking, and takes screen shots so you can validate your pages with different browsers."
• Unicorn - W3C's Unified Validator - W3C. "Unicorn combines a number of popular tools in a single, easy interface, including the Markup validator, CSS validator, mobileOk checker, and Feed validator, which remain available as individual services as well."
• Validator.nu - Henri Sivonen.
• Validator S.A.C. (Stand Alone Complex) - Habilis, A stand-alone, easy to install, version of the W3C's HTML / XHTML Markup Validator for Mac OS X.
• Validators - Daniel Tobias' explanation of what a validator and a linter are, what the difference between the two is, and how they can be used to help you improve your Web development. He also has links to major validators and lints.
• Viewable with any Browser
• W3C HTML Validator - Hugo Haas. Checks HTML documents for conformance to W3C HTML and XHTML recommendations and other HTML standards.
  • W3C Launches New Markup Validation Service - W3C
  • Installing the W3C Markup Validator on Mac OS X - Roger Johansson "...Several (many) years ago I posted a Quicklink about a document on Apple's Developer site called Installing the W3C HTML Validator on Mac OS X, which obviously is useful for those of us who use Mac OS X. That document is still online, but the instructions there don't seem to be quite up-to-date. Instead of following them, here's what I did to get the W3C Markup Validator running on Mac OS X 10.6..."
• WDG HTML Validator - From the Web Design Group. It uses the same engine as the W3C HTML Validator (David Clark's nsgmls) but produces easier to understand error messages. It also supports a wider variety of character encodings than the W3C validator.
• Web Page Backward Compatibility Viewer - delorie.com
• Web Page Purifier - Removes non-standard HTML features from a page and shows what the result looks like.
• Web Site Test Tools and Site Management Tools
• Web Site Viewer - AnyBrowser.com

Information Architecture Tools

• CardZort - Jorge A. Toro. "CardZort is a computer application that runs card sorting exercises. Its main purpose is to offer a complete computer-aided system that allows the fast creation and execution of card sorting exercises, and the analysis of the resulting groups via cluster analysis." It is free for academic purposes but runs only on the Windows platform.
• I.A. Tools - aifia.org.
• OmniGraffle - omnigroup.com. Bundled with the latest Macs, OmniGraffle is a diagramming and charting tool that is simple, elegant, and easy to use. A good tool for information architecture chores.
  • IA Stencils for Omnigraffle - paperplane.net. "These stencils are free for download and use have been created for use with OmniGraffle. They're optimized for version 3.0 and up, but will also work with version 2.0 onwards - just replace the '.gstencil' in the filename with '.graffle'".
  • Omnigraffle Stencils - Userfocus "Designed for use with Omnigroup visual communication software for Mac OS/X, these two Omnigraffle stencils were created to help communicate user-centered design activities and proposals to clients and development teams."
• swipr "...a toolset that allows information architects to create an integrated and interactive deliverable from standard Visio files."
• tree.pl sitemap script - "tree.pl walks through a directory and builds a HTML list of all files. The files' title tags are taken as the linked text, and if there is no title tag, the filename is used."
• The Pencil Project - Duong Thanh. Firefox 3 wireframing tool extension.
• WebCAT - National Institute of Standards and Technology (NIST).

Link Checkers

• Back Links Analyzer - Aaron Wall. "A free link popularity / link analysis tool. It shows what anchor text is linking into a page or site...System Requirements: Backlink Analyzer currently is a Windows only application. Going forward I am hoping to make it system independent."
• Link Checker - Webmaster Toolkit. "Our Link Checker will read the page you specify, extract the links from it and test the status of each one. If any errors are found (broken links) these are reported."
• LinkLint - James B. Bowlin. "Linklint is an Open Source Perl program that checks links on web sites."
• Link Valet - an online link checker that will recursively spider a site and report broken, redirected or updated links.
• W3C Link Checker (Online version)
• W3C Link Checker (Standalone version)
• Xenu Link Sleuth - Link Sleuth is a free windows based link checker.

Miscellaneous Tools

• 10 Excellent Tools for Responsive Web Design - Jason Gross. "...Tools have started to spring up to provide us with shortcuts and helpers for common responsive web design tasks. Let's take a look at just few that I find the most useful..."
• Accessible Media Player 2.0 - Nomensa. "User experience design agency Nomensa celebrates 10 years in the industry by releasing the source code of their accessible media player to the public..."
• Adobe Shadow - Adobe. "Adobe Shadow is a new inspection and preview tool that allows front-end web developers and designers to work faster and more efficiently by streamlining the preview process, making it easier to customize websites for mobile devices..."
• Browser Size - Ates Goral. "Browser size related resources for web designers" includes "a nifty online tool for setting your browser size while doing Web design".
• Browsershots - Provide a URI and it will take real screenshots in different browsers of that page.
• Button Maker - Chris Coyier. "...to use this Button Maker thing, you just adjust the settings until you have a nice looking button, then press the button and it will give you the CSS. Copy and paste at your leisure. Now you can use the class name 'button' on HTML elements to make them look like buttons. The CSS isn't formatted real pretty. If someone has an idea on how to make that better, please do let me know."
• Categorizr - Brett Jankord. "Categorizr is a modern device detection script that helps categorize different web capable devices into 3 categories, desktop, tablet, or mobile. It take's traditional device detection and flips it on it's end, assuming devices are mobile first, unless otherwise detected as tablet or desktop..."
• Check a PDF Document - eGovMon project. "The eAccessibility Checker is part of the eGovMon project. It offers three different services."
• Comprehensive Review Of Usability And User Experience Testing Tools - Cameron Chapman. "Usability and user experience testing is vital to creating a successful website, and only more so if it's an e-commerce website, a complex app or another website for which there's a definite ROI. And running your own user tests to find out how users are interacting with your website and where problems might arise is completely possible..."
• Content-Type Proxy - Ian Hickson. "A script to serve a remote resource with a different content type."
• Code Formatter - Ed Eliot. "Prepares code snippets for inclusion in a blog post. Code is formatted with line numbers, indentation is preserved and special characters are replaced with entities where necessary."
• ConvertIcon! " import ICO, PNG, GIF, and JPEG formats and export to high-quality PNG or ICO files."
• Create Diff Between HTML Pages - Dominique Hazael-Massieux. "...Every once in a while, we provide new services to make the life of our collaborators easier, and offer them to the public at large as much as possible; our latest toy in this category is an htmldiff service, which out of two online HTML documents will create a new document highlighting the differences between the two documents..."
• Customer Focus Calculator - futurenowinc "...analysis tool that counts certain words on your site that are key indicators of whether your focus is on the customer or not. As you use it, keep in mind this is nothing more than a handy, but rough guide that will help you focus on something important. There are lots of variables and also remember there are no shortcuts to writing great copy." Also, Customer Focus Calculator: Test your Copy
• DOMTool - Stuart Colville. "Online tool that takes "HTML as an input and output the correct DOM methods for inserting that content into a document..."
  • DOMTool Related Blog Post
  • Basic DOMTool Tutorial
  • DOM Tool: Mr T Edition - Muffin Research Labs. Mr. T talks to you about your bad syntax. "...Let us hope it encourages developers to pay more attention. In order to trigger an error try using inline style or event handlers (or use <a style="color:red" onclick="foo();" href="#">link</a>). While Stu, must remain the default Mr T is available in the options. Any suggestions for more characters? Perhaps the hair of Christian Heilmann might make an appearance."
• dot Mobi Emulator Allows you to see your page as it would look on either a Sony K750 or a Nokia N70.
• DTD Mapper - Cameron Adams. "Using the DTD Mapper all you have to do is paste in the URL of the DTD that your pages are meant to be validating to (that URL in the weird DOCTYPE line at the top of your source code), and you'll get a nice, collapsible list of all valid elements, with their attributes, possible child elements and possible parent elements."
• Dynamic Dummy Image Generator - Russell Heimlic
• Em Calculator - Piotr 'Riddle' Petrus. Online tool calculates em size equivalent to px size.
• Favikon - favikon.com. Upload images, crop them, and create favicons.
• FireBug - Joe Hewitt. "Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page."
  • Firebug - Part 1: The What and Why - Estelle Weyl.
• FirePHP - Christoph Dorn. Firefox extension and PEAR package for debugging PHP apps.
• Font Tester - fonttester.com. "Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them..."
• GetWebKit / Swift (Run Safari on Windows) - "Welcome to GetWebKit, the home of the first and only WebKit based Windows web browser. Featuring the excellent rendering engine used in popular Macintosh web browsers Safari and Shiira, GetWebKit offers a free, powerful, and open-source internet experience."
• Greeking Machine - Duck Island.com. "Our Greeking Machine will produce up to 50 random paragraphs of actual Latin text in Lorem Ipsum style. Lorem Ipsum is the style preferred most by typesetters and designers who create print design and layout compositions. Lorem Ipsum and Greeking, or Greeked text can be produced as well as, several other pseudo languages including Hillbilly and Metropolitan. Greeking is the method whereby Lorem Ipsum style text is created to fill a composition. Greeking replaces actual structured sentences with false text which is considered less distracting."
• Favelet Suite - Steve. G. Chipman
• FireBug - Firefox Extension - Joe Hewitt. "FireBug is a tool that aids with debugging Javascript, DHTML, and Ajax. It is like a combination of the Javascript Console, DOM Inspector, and a command line Javascript interpreter."
• Google PageRank Report - top25web.com
• Google Rank Calculator - Cameron Adams
• hCard Creator - Tantek Celik. "This user interface, and the code behind it, is provided as an example for the benefit of microformat open standards developers, and to demonstrate the clear one to one correspondence between microformat fields and microformat code. The code generated by this interface may be used for semantic web pages, structured blogging, or any other application that requires markup that is simultaneously human presentable and machine readable."
• hCalendar Creator
• hReview Creator
• HTML 5 Outliner - Geoffrey Sneddon. Tool for testing structure in HTML5. It tests the outline algorithm.
• HTML5 test - How Well Does Your Browser Support HTML5? - Niels Leenheer. - "The HTML5 test score is only an indication of how well your browser supports the upcoming HTML5 standard. It does not try to test all of the new features offered by HTML5, nor does it try to test the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying the level of support users and web developers will get an idea of how hard the browser manufacturers work on improving their browsers and the web as a development platform..."
• HTML Entity Character Lookup - leftlogic. "Using HTML entities is the right way to ensure all the characters on your page are validated. However, often finding the right entity code requires scanning through 250 rows of characters. This lookup allows you to quickly find the entity based on how it looks..."
• HTML Escape Tool - htmlescape
• i18n checker - Richard Ishida. "This page looks for character encoding and language declarations in the HTTP headers or the head element of an (X)HTML page. NOTE: This tool is still in the early stages of development. It is guaranteed to contain bugs and lack features you'd like..."
• iPhone Emulator
• iPad2 simulator - alexw.me
• Insta-Select - Ian Lloyd. "A web developer's time-saver - lets you paste in a list of words/phrases (separated by carriage returns) and converts to an XHTML-compliant <select> list."
• Inline Javascript Console - Oliver Steele. A lightweight Javascript debugging tool with a clean and simple UI. If you just need to pop in an expression here and there before adding it to your project, it's a handy tool.
• JavaScript Crunchinator - Mike Hall. "This utility can be used to reduce the size of JavaScript source code in a file. It uses some simple parsing and regular expressions to remove comments and unnecessary white space in the script code. Depending on your style of coding, it can produce significant savings in terms of file size."
• JSLint The Javascript Code Quality Tool - Douglas Crockford
• manifestR - John Allsopp. "With HTML5 it is easy to provide an offline version for a website by creating a cache manifest. The manifest is a file that contains a list of all the assets that makes the website accessible offline. There are several tools that help you build this manifest file and among those is manifestR, an easy to use bookmarklet that can quickly generate the cache manifest."
• Meazure - C Thing Software. Here is a free windows program that "measures, magnifies and captures the screen by providing a battery of features in a cohesive user interface".
• Miro Video Converter - "A super simple way to convert almost any video to MP4, WebM (vp8), Ogg Theora, or for Android, iPhone, and more..."
• Mobile Emulators and Simulators -The Ultimate Guide - Maximiliano Firtman. "I've mixed all this information to create this ultimate guide to 37 download resources for hundreds of emulators and simulators."
• Mobilizer "Preview mobile websites, design mockups, and local HTML on Mac or PC." Requires Adobe Air.
  http://www.springbox.com/mobilizer/
• Obtrusive JavaScript Checker - Robert Nyman
• Operator - Michael Kaply. Operator is an extension for Firefox that adds the ability to interact with semantic data on web pages, including microformats, RDFa and eRDF.
• OpTool - Martin Larsen. This is a handy (and free) Windows tool which will let you press a key combo and have a menu popup which will offer to open the current page in other browsers.
• PHPform - Create HTML Form in Seconds - appnitro. "Create a HTML form in seconds."
• Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS "This is a source code beautifier (source code formatter), similar to indent. Please make a backup before you replace your code. Paste your source here..."
• Quality Assurance Tools for HTML5 - Simon Pieters.
• 'Quick' and dirty JSON Editor - "Click one of the sample buttons to load a JSON sample into the textarea, next..."
• Quick Highlighter - Veign. "...create a webpage from your source code."
• Quick Thumbnail - "The fastest way to resize your pictures and images. Choose an image file, select some resize options, and hit Resize it. Your image will be uploaded to the server and resized, and then any or all of the resized images will be provided in a single convenient view. Not only can you get simultaneous generation of different sizes but you can enlarge your images too."
• Responsive Design Testing in the Browser - Matt Kersley
• responsivepx - Remy Sharp. "Enter the url to your site - local or online: both work - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design..."
• ResizeMyBrowser - Chen Luo. A web app that snaps your browser's width and height to a selected resolution.
• ROR Sitemap Generator - rorweb.com. "This free tool will crawl your website and generate a ROR Sitemap with up to 1,000 URLs for ALL search engines, not just Google..."
• S5 project: A Simple Standards-Based Slide Show System - Eric A. Meyer
• Screenshot Settings - Bruce Phillips. "This application is a GUI method for changing the screenshot (screen capture) settings in Mac OS X v10.4 (Tiger). Note that you can also drag-n-drop a folder onto this application to change the default location."
• ScreenGrab - Andy Mutton. Free Firefox extension. "Screengrab saves entire webpages as images."
• Screen Size Tester
• Search Engine Position Checker - Webmaster Toolkit. "The Search Engine Position Checker tool will automatically query the search engines you specify and check if your URL appears in the first 50 results for your chosen keywords. If the URL is present, it will output what position it occupies. As an additional feature, the tool also informs you if any other URLs from your domain appear in the search results. The tool queries the following engines: Altavista, Excite, Google, HotBot, MSN, WiseNut, All the Web, and Teoma.".
• Selenium - Jason Huggins, Paul Gross and Jie Tina Wang. "Selenium is a test tool for web applications. Selenium tests run directly in a browsers, just as real users do. And they run in Internet Explorer, Mozilla and Firefox on Windows, Linux and Macintosh."
• Semantic data extractor - Dominique Hazael-Massieux. "This tool, geared by an XSLT stylesheet, tries to extract some information from a HTML semantic rich document. It only uses informations available through a good usage of the semantics defined in HTML. The aim is to show that providing a semantically rich HTML gives much more value to your code: using a semantically rich HTML code allows a better use of CSS, makes your HTML intelligible to a wider range of user agents (especially search engines bots). As an aside, it can give clues to user agents developers on some hooks that could be interesting to add in their product."
• Semantic HTML Graphs - Joe Dolson. "The output of this Java applet has very limited accessibility. If you are using a screen reader or mobile device without Java support, you will not be able to make use of the information. If you are color blind, the value will be limited..."
• SiteReportCard - SiteReportCard.com. "SiteReportCard provides free website analysis and optimization reports."
• Sizer - brianapps. "Sizer is a freeware utility that allows you to resize any window to an exact, predefined size. This is extremely useful when designing web pages, as it allows you to see how the page will look when viewed at a smaller size. The utility is also handy when compiling screen-shots for documentation, using Sizer allows you to easily maintain the same window size across screen grabs."
• Smush it - Stoyan Stefanov and Nicole Sullivan. "Smushit.com is a service that goes beyond the limitations of Photoshop, Fireworks and Company. It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images - without changing their look or visual quality. You'll get a report of how many bytes you can save by optimizing your images and all the changed images as a single zip for download."
• SnapShot - compete. "SnapShots are smart profiles of the websites we visit. Simply enter a domain (e.g. amazon.com) and SnapShot will provide traffic history, a trust assessment and a list of all available coupon codes."
• Tails (Firefox Extension) - Calvin Yu. "Tails is a Firefox extension that will display the presence of microformats on a webpage."
• Ten Tools to Ensure Website Accessibility - Webmaster Format
• Test iPhone Simulator This is a web browser based simulator for quickly testing your iPhone web applications. This tool has been so far tested and working using Internet Explorer 7, FireFox 2 and Safari 3.
• Textile - Alex Shiels. "Textile takes plain text with *simple* markup and produces valid XHTML."
• TextWrangler - Barebones
• The Eater of Meaning - Leonard Richardson's handy online tool will convert the text on a web page into random text. This is similar to providing greeked mock-up web pages or mock-up web pages with the real text substituted with "lorem ipsum" Latin. The "eat in Latin" option uses "lorem ipsum" text as a source for words.
• The GIMP -The GIMP is an "Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages."
• The PHP Function Index for Mac OS X - ARTIS Software. "The PHP Function Index (PHPfi) is a simple browser to quickly look up any PHP function. Its search offers realtime-filtering of the function list and its AppleScript interface lets you look up functions easily from within your favorite editor (like BBEdit or any other scriptable app)."
• Video
  • Freemake Video Converter 3.0 for Windows
  • HandBrake Video Converter for Mac
  • Zamzar Online video converter
• W3C Tool Kit 1.2 - bonAveo. "A nifty little Widget with fast access to the W3C Markup and CSS Validator as well as their Link Checker."
• The Typetester - Marko Dugonjic. "The Typetester is an online application for comparison of the fonts for the screen. It's primary role is to make web designer's or web developer's life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated."
• W3C Mobile Web Best Practices Checker - Dominique Hazael-Massieux.
• Web 2.0 Validator - 30 Second Rule. Automated web tool that scores your site based on a 'set of Web 2.0 characteristics'. Hilarious.
• Web Developer - Chris Pederick. "The Web Developer extension for Mozilla Firefox and Mozilla adds a menu and a toolbar to the browser with various web developer tools."
• Web Developer Toolbar and Menu for Opera - "The web developer toolbar is a menu and toolbar setup for Opera which brings together functions related to web development, validation services and links to standards and other documentation..."
• Web Page Analyzer - Andrew B. King. Web Page Analyzer is a free online tool. It will tally the weight of your markup, images, CSS and JavaScript. Then it offer advice on how to improve download and display time.
• Websites as Graphs - a HTML DOM Visualizer Applet - Sala Aharef. An online tool that helps you visualize the density of a website, with color-coded indications of link, table, div, img, form, and other elements.
• Website Spell Check - Andrew B. King. "Our new free spell checking service scans your site for spelling and grammatical errors and sends you a free report. We've teamed up with TextTrust to offer webmasters this free trial of their website scanning service. To demonstrate the new service we provide a sample report of a spell-checked WhiteHouse.gov site."
• Ye Olde Lorem Ipsum Generator - Marek Moehling. "116 words of the original 16th century Lipsum plus 384 additional words, carefully chosen from Cicero's very own 'De Finibus', bonded by superior scripting and utmost linguistic accuracy guarantee for the web's most random ... ah, randomness - 500 times sheer bliss for the typographically inclined. Ipso facto."
  • Lorem Ipsum - The Motherlode - Marek Moehling. Mark's new tool provides randomly generated typographic filler text in many languages and charsets (both ascii and unicode) with various options. It is a bare bones approach which might suit typographers needs better.

Usability Tools

• Euterpe - Vrije Universiteit. "Euterpe is a Task Analysis tool developed at the Vrije Universiteit Amsterdam. It is based on an ontology for describing the task world in a structured way. The theory behind it is based of GTA. Euterpe helps to build task trees, object hierarchies and other important concepts such as event and roles. Templates allow detailed information to be specified and multimedia can be attached to concepts to clarify their nature. Documentation can be generated on paper and as HTML pages."
• Usability Test Data Logger - Todd Zazelenchuk. "Most people use Microsoft Excel to analyst the results of usability tests, but did you know you can use it to collect the data too? This spreadsheet allows you to measure task completion rates, analyze questionnaire data, and summarize participant comments. It even includes a timer so you can measure time-on-task."
• Usability Testing Tools and Templates - Usability.gov. Materials include planning documents, testing forms, and test report templates.
• Usability Toolkit
• Uzilla - The Uzilla suite is a software solution for web based usability testing. It's aim is to decrease the time and effort required to do usability testing while also increasing the accuracy and power of the data collected.
  • uzReview - Andy Edmonds

XML Tools

• Apache XML Project
• John Cowan's XML index
• Markup Maker - XHTML Templates at the Touch of a Button - Ian Lloyd
• RDFaCE - Ali Khalili and Soren Auer. "RDFaCE is an RDFa Content Editor based on TinyMCE. It supports different views for semantic content authoring and uses existing Semantic Web APIs to facilitate the annotation and editing of RDFa contents..."
• RSS Tools
  • FEED Validator - Mark Pilgrim and Sam Ruby
  • W3C Feed Validation Service - W3C. "This is the W3C Feed Validation Service, a free service that checks the syntax of Atom or RSS feeds. The Markup Validation Service is also available if you wish to validate regular Web pages."
• Tool for Checking HTML Compatibility Guidelines in XHTML - Olivier Thereaux. "I am happy to announce the first release of a library/tool which helps web authors check for issues of compatibility with legacy HTML agents..."
• XForms Validator - XForms Institute
• XML Nanny - Todd Ditchendorf
• XML Schema Validator - Christoph Schneegans
• XML Syntax Checker - Frontier Userland
• XML Validator - Brown University

Contact ITSS

About ITSS

© 2012 University of Minnesota Duluth
The University of Minnesota is an equal opportunity educator and employer.
Last modified on 05/10/12 06:15 AM

University of Minnesota Campuses
Crookston | Duluth | Morris
Rochester | Twin Cities | Other Locations