
Web Design References
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.
- AChecker
- This tool checks single HTML pages for conformance with
accessibility standards to ensure the content can be
accessed by everyone.
-
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 2013 - Steve Faulkner.
"Here at the paciello group we are very excited by the improvements being made to our aViewer accessibility API information inspection tool. We want to share the updated aViewer with you and in the process elicit your feedback on the new features and any bugs you may find..."
-
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."
- EasyChirp -
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.
- Accessibility Statement Generator - Nomensa
-
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."
- ChromeVox - Google.
ChromeVox is a screen reader for Chrome which brings the speed, versatility, and security of Chrome to visually impaired users.
- 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..."
- 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."
- Favelets for
Checking Web Accessibility - Jim Thatcher. Favelets,
small snippets of JavaScript embedded in a bookmark URL,
allow bookmarks in browsers to do various advanced things.
Jim has a great assortment for evaluating
accessibility.
-
Firefox Web
Browser - Besides being a great browser, firefox has
many useful add-ons/extensions such as:
-
Accessibility Evaluation Toolbar For FireFox - Jon
Gunderson. "Support web developers in testing web
resources for accessibility features."
- 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."
- Edge Inspect: Developing Mobile Sites with Accessibility in Mind -
Kathy Wahlbin.
"Adobe Edge Inspect has been around for a while but the latest accessibility upgrades will be a breath of fresh air for accessibility professionals..."
- Fangs -
The Firefox Screen Reader Emulator Extension
-
HeadingsMap Extension - By Rumoroso.
- 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.
-
Textise FireFox Extension - Ian Williams. "Creates
a text-only version of the current web-page."
-
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."
- 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.
- Hangout Captions "Hangout Captions is an app that connects live transcription services directly into a Google+ Hangout, improving accessibility for participants who are deaf or hard of hearing."
-
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.
-
HTML Table Validator - Table Usability - Web Experience
Toolkit (WET) - The Canadian Government. "This
validator would help you find any relationship error
defined in your complex table. The validation process can
be accomplished by pasting your HTML table source code
without the table element in the text field below and
clicking the button 'Analyse'..."
- 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..."
-
Longdesc Chrome Plugin By Chris Kennish. "Highlights
and provides right-click access to image long descriptions,
where provided."
- 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.
- NoCoffee Vision Simulator (Chrome extension) -
Aaron Leventhal. "NoCoffee can be helpful for understanding the problems faced by people with slight to extreme vision problems" NoCoffee Vision Simulator (Article)
-
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.".
-
PDF-Accessibility-Checker (PAC) - access-for-all
- 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."
- Readability Bookmarklet - Greg Kraus.
"This tool will show you how readable selected text is on a page. The readability guidelines are based on WCAG 2 Level AAA Conformance. Note, there is no readability requirement for WCAG 2, Level AA Conformance. The results are based on six tests..."
- RoboBraille -
The RoboBraille Consortium. "RoboBraille is an email
service which can convert digital text documents into
either Braille or audio files..." Supported input file
types are .doc, .docx, .pdf, .txt, .xml, .html, .htm, .rtf,
.epub, .mobi, .tiff, .tif, .gif, .jpg, .bmp, .pcx, .dcx,
.j2k, .jp2, .jpx, .djv and .asc RoboBraille
YouTube Video
- 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..."
- 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."
- The MotherEffingToolConfuser -
Karl Groves.
"Many academic papers dealing with web accessibility make use of automated tools as part of their research. For instance, one recently published paper did a comparative analysis of the Forbes 250. Unfortunately, the tool in use did not test the DOM of the pages it analyzed..."
- 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."
- Validating the Longdesc Attribute - Site Validator.
"We've upgraded our HTML validation server so that it now validates the recently introduced longdesc attribute for images, as defined in HTML5..."
- 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.
- 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."
-
Web Evaluation Tools Bookmarklet - NC State University
IT Accessibility Resources. "This tool will visually show
you any headings, ARIA landmarks, internal links, and
tabindex attributes present on a page. This information is
useful for examining the structure of a page as a screen
reader user would experience it, without having to actually
start up a screen reader to test it..."
- 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."
- 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 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 -
"Relying on colors to determine page visibility and
contrast can be misleading. Converting the colors to
their grayscale equivalents is a more reliable method. By
removing color's influence, you'll better find true visual
contrast...GrayBit makes it possible...GrayBit was originally
created by Mike Cherim and Jonathan Fenocchi. In April 2013,
it was purchased by Joe Dolson, who now maintains, hosts, and
is continuing the project as time allows..."
- 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.
- 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."
- 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 Gradient
Finder - aaronm67. Provides CSS gradient code from a
PNG.
- 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.
- 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."
- Restyle
Your CSS Declarations With CSScomb - Craig Buckler.
"How do you order your CSS properties? Some developers
prefer an alphabetical list. Some prefer grouping by
related types. Ultimately, it doesn't matter. There's no
'wrong' way and you should use whatever style suits you. It
will become a habit and you'll be able to shave precious
seconds when searching your own CSS code..."
-
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."
- Specificity
Calculator - Keegan Street. "A visual way to understand
CSS specificity."
- 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
- 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
- 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."
- 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."
- 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..."
- 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."
- Check a PDF
Document - eGovMon project. "The eAccessibility Checker
is part of the eGovMon project. It offers three different
services."
- 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."
-
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."
- ConvertIcon! "
import ICO, PNG, GIF, and JPEG formats and export to
high-quality PNG or ICO files."
- Convert Word
Documents to Clean HTML - Olly Cope. "Word2cleanhtml
cleans up HTML pasted from Word documents. It applies
filters to fix various things that Microsoft Office puts in
its HTML and gives you a well formatted result that you can
paste directly into a web page or content editing
system..."
- 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.
- Drupal API for Dreamweaver - xtnd.us. "Reduce tons of typing and get rid of the plain text look when editing Drupal files in Dreamweaver. If you are into Drupal and use, or want to use, Dreamweaver then you really need this extension."
-
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."
- 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."
- 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."
- 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..."
- Microsoft Gives Parallels, Windows 8 and IE10 to Mac Developers - Craig Buckler
- 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."
- 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
- 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."
- 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. 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.
- Word2cleanhtml - Olly Cope. "Word2cleanhtml cleans up HTML pasted from Word documents. It applies filters to fix various things that Microsoft Office puts in its HTML and gives you a well formatted result that you can paste directly into a web page or content editing system. "
Mobile Tools
-
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..."
-
GetMoMeter - Google. "This tool shows you how your
current site looks on a smartphone, and provides a free
report with personalised recommendations tailored to how
your business can build a more mobile-friendly experience.
To get started, fill in your URL below."
- 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.
- mobiReady - "The
mobiReady testing tool evaluates mobile-readiness using
industry best practices & standards."
-
Opera Mobile Emulator - Andreas Bovens
- Responsive
Design Bookmarklet - Victor Coulon. "a handy tool for
responsive design testing"
- Responsive
Web Design Testing Tool - Matt Kersley. This tool has
been built to help with testing your responsive websites
while you design and build them..."
- Viewport
Resizer - a Better Responsive Web Design Bookmarklet -
Craig Buckler "If you're manually resizing your browser
window to test responsive designs, you're making life
unnecessarily difficult for yourself! A Responsive Design
View tool appeared in Firefox 15 and there's a Responsive
Web Design Bookmarklet which works in most browsers."
- W3C Mobile
Web Best Practices Checker - Dominique
Hazael-Massieux
Usability Tools
- UCDmanager -
jordisan. "UCDmanager is a web application aimed to manage
and document different User-Centered Design and usability
techniques, in an integrated manner: user roles, personas,
heuristic evaluations, usability user testing, etc."
- 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.