Although the big players in web design industry have been adopting HTML5 in recent years, there are not really many others using it in practical solution, mostly due to the lack of time or understanding. Chances are if a language is being promoted for certain time, there will be enthusiasts going into the troubles of eliminating your troubles by creating HTML5 template generators and frameworks.
At Hongkiat, we always want to make your development work as easy as possible, so below is the list of HTML5 template generators and frameworks that either speed up your HTML5 development, or helps you ease troubling issues like browser compatibility. By the end of the day, your HTML5 development will only get easier and happier with these generators and frameworks!
Why Framework?
Although it might takes some time to actually learn the framework, if you have the framework at ready all you need to add is the content and slight modifications according to your taste. Also don’t get worry about it, the world won’t look at you disdainfully for using an HTML5 template generator or a ready-to-use framework. Practicality comes first!
Besides, frameworks that are out there for using usually have loyal followings and support. An advantage to using frameworks is you really don’t have to worry about serious issues like cross-browser and cross-platform compatibility, somebody else has already brooded over that for you. But, of course, you can contribute to their cause, especially for open-source libraries and frameworks.
After all, it’s always good to have an extra gear in your design toolbox!
Few clicks are all it takes to generate yourself a HTML5 template. Initializr also gives you an option whether you’d want your template to include JavaScript or jQuery, server configurations, and Google analytics.
Initializr is also built on HTML5BoilerPlate, another great tool to expand your HTML5 grasp, add functionalities, and improve your whole site.
An alternative is Shikiryu.com’s HTML5 template generator. It has an additional option to include description for the website’s author, also includes options for Favicon and Apple Touch icon in case you want them to be automatically inserted into the template.
Another great HTML5 framework generator is SwitchToHTML5. Like others, it allows you to add several elements such as <section>, <mark>, <figure>, <nav>, and others. SwithToHTML5 also gives you the option whether you’d want to support Internet Explorer or not, as its version earlier than IE9 does not support HTML5 natively.
Say, I can’t be the only one who hates creating forms, right? Creating forms is a tedious task, at least for people like me, that’s why reformed was here to help people to create clean and functioning forms! reformed is an HTML5 form builder that is very lightweight and won’t cause you too much trouble, like if you do the form from scratch.
There are two versions, a web application and a standalone desktop application, although you’ll have to pay to have it work offline. Well, if you like the application, show some love!
Take advantage of HTML5 and CSS3 using Modernizr. It is an open-source JavaScript library to help developers create the best websites that incorporate HTML5 and CSS3.
Older browsers are not the issues with Modernizr, visitors will see what they ought to see no matter what version their browser is.
Technically not a generator, but a downloadable framework which expedites the development process. 52framework eliminates the hassles of HTML5 and lays out everything right in front of you, making development faster and easier.
52framework supports a large variety of browsers, making cross-browser compatibility a less issue. And the good news for developers? It even supports IE6 partially!
Since we’re already talking about services and applications that expedites development, here’s an amazing tool to help you edit your site content with xHTML5 compliant content.
Aloha Editor is an HTML5 editor, not just any editor, but a WYSIWYG editor that can modify your site content instantly, as soon as you make the changes in the editor.
Every dreamt of converting Flash animations to HTML5? Wallaby, a project by Adobe, makes the conversion of Flash animations and artworks to HTML5 possible, rendering the files editable on Dreamweaver or other editors.
A great and enjoyable book to start learning about HTML5 in a creative way of thinking, this is also a good resource that gives a fresh idea for people who already know the workings of HTML5.
An original W3C’s guide to HTML5, with focus on simplicity and practical applications for beginners, while providing detailed information for advanced web developers.
More
For now, there isn’t much to see actually. There are still, relatively, few tools for HTML5 framework and templates to use, as you may have noticed if you checked the links, most of the features for each generator/framework are similar. I may have missed tools that you are using to develop awesome HTML5 websites, so if you’d like to share feel free to post them in the comments!
Also, do check out our posts if you are willing to get more about HTML5!
Mobile browsing clearly does have its limitations, mainly from its smaller physical design, but it also limited by web sites not having a mobile version tailored for the smaller screen. Current mobile web browsing stats stands at 4.5% of total world-wide internet usage and, with the prediction for the next five years being that more users will connect to the internet over mobile devices than desktop computers, it is now time to act and make your website mobile friendly.
Of course, it does depend on the size and complexity of your site, but creating a mobile version of your site does neither have to be over-expensive nor very time-consuming, especially if your site has been built using WordPress. As everybody knows, WordPress is by far and away the most popular CMS, and with it comes a thriving community of designers and developers that constantly push its boundaries further and ever-more improving its functionality. Its community has realized for some time that the mobile phenomenon has been coming, and as such does have a multitude of themes, plugins and resources available that will help you create a mobile version of your site with the minimum of fuss.
In this article, Mobile Toolbox for WordPress, we highlight themes (free and premium), plugins and easy-to-follow tutorials that will help you create a mobile version of your site.
Despite its name iPhonsta does not exclusively only work on the iPhone, it works on most mobile devices, like Android, Palm Pre and Blackberry. The theme has a fluid layout, configures the font size automatically and is WordPress 3 compatible. iPhonsta Home →View the Demo →
This basic free theme works in conjunction with the Smooci (WordPress on Mobiles) plugin which is used to display the mobile optimised theme when your WordPress site is visited via a mobile device. Smooci 2 Home →View the Demo →
This is a minimalistic and lightweight theme that will fit perfectly with all the mobile phones resolutions. The three key features of this theme are: You can choose your own theme color from the theme options; The theme can have 100% width if you want the theme to fit on every mobile phone, or you can define a fixed width in pixels to target special users; The front page will dynamically create thumbnails for your posts. WordPress Mobile Theme Home →View the Demo →
Built with the incredible jQuery Mobile plugin, this theme is perfect for those who want to make a good looking and easy to read version of their blog. It uses most of jQuery Mobile features to guarantee an optimal ease of reading on mobile devices such as the iPhone, Blackberry or Android. jQuery Mobile Home →View the Demo →
Mobius is a feature rich free theme that is compatible with all touchscreen mobile phones (iPhone & iPod Touch, Android, BlackBerry, Windows Phone, Palm Pre, Symbian…). It comes packaged with three variations (Sky Blue, Amethyst & Rain Forest), its widget ready, native support of non-web fonts (@font-face) and also has optional Twitter and Facebook icons. Mobius Home →
The dotMobi WordPress Mobile Pack is a complete toolkit from dotMobi to help mobilize your WordPress site and blog. It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about. The dotMobi WordPress Mobile Pack →
Carrington Mobile is an elegant mobile theme with that supports advanced touch browsers (iPhone, Android, BlackBerry, Pre) and is also backward compatible with older mobile devices. Carrington Mobile Home →View the Demo →
A beautiful 4 in 1 theme (Blackboard, Wood, Leather, Nature), with 2 widget ready areas, gestures based navigation and auto-resizes images. Automatic detection if a user visits your website from an iPhone and iPod touch, thanks to its built-in plugin that comes packed with the theme. Price: $22 touchPress Home →
1stGiantLeap Mobile is a HTML5 /CSS3 template tuned to look perfect in mobile browsers. The markup is device orientation (landscape/portrait) sensitive, so when you change device orientation by rotating it 90 degrees CW or CCW this template will look nice. Price: $15 1ST Giant Leap →
WPtouch 2.0 Pro allows you to setup a feature-rich and fast version of your website for touch-mobile devices with just a few clicks. It does come packaged with a wide variety of pre-built themes, or you could build your own custom theme with WPtouch’s Skeleton theme template. It scales post images, captions and videos automatically and breaks up content with ‘Load More’ links that use ajax to make browsing easier for visitors. Price: Its FREE for the basic version, $39 for Pro, $69 for the Pro 5 pack and $199 for the full developer pack. WPtouch 2.0 Pro Home →
Mobility is an iPad-ready WordPress theme with finger sliding capabilities and a custom drag-and-drop gallery admin. Both the regular and iPad versions have seven color options and the choice between a single or three-way JavaScript slider on the homepage. The iPad version can switch between portrait and landscape mode upon rotation. Price: $30. Mobility WordPress Theme for Web and iPad Home →View the Demo →
Obox Mobile is a WordPress Mobile Theme Framework that gives your site a unique and beautiful layout which is compatible for mobile devices. Obox Mobile comes packaged with two Obox Themes (MobiLight & MobiDark) as well as WooMobile from WooThemes. We currently use Obox Mobile for Speckyboy. Price: $50. WordPress Mobile Theme Framework Home →View the Demo →
Simple Mobile is feature-rich theme that works parallel with another theme and presented to mobile users only. It comes with 8 color schemes, collapsible multi-level menu, WP 3.0 custom menus support, 43 social media icons, a slick Twitter implementation (optimized for speed) and much more. Price: $20. Simple Mobile Home →View the Demo →
PadPressed functions as a WordPress plugin and allows publishers to take their content and make it perfectly formatted for the iPad. The most important aspect of PadPressed is its 100% design for the tablet touch experience. Each skin plays to a specific touch dynamic. SwipePad focuses on swiping to advance and a swipe featured slider. It notices the orientation (portrait or landscape) of a reader’s iPad. Price: $49 for a single license and $149 for a developer license. VIDEO PadPressed Home →View the Demo →
The My Mobile Page WordPress Theme is a minimal mobile WordPress theme with a modern look and a lot of cool features. This theme can be used for personal mobile pages, web designers mobile pages, artists mobile pages and many other. The theme use automatic resolution detection so you can use for small screen resolutions and bigger resolutions. Price: $20 My Mobile Page Home →View the Demo →
This is a joint collaboration between WPtap (plugin developers) and Press75 (theme developers) to release a mobile version of the video theme On Demand, providing a fully featured video solution for mobile platforms. Price: On Demand Mobile for $49, or with On Demand iPad for $90.00 On Demand Mobile Home →View the Demo →
Tap News is an iphone-app style mobile plugin/theme package that instantly converts your wordpress site into a mobile web-application experience. It is specially designed for iPhone/iPod touch, Android, and Blackberry touch mobile device. The theme features elegant iPhone-style sliding layout, and it will truly turn your site into a mobile application. Other features include thumbnail pictures, full support for twitter, social bookmarking, and email. Price: $49 Tap News Home →View the Demo →
iBusiness is a website template designed especially for the iPhone/iPod. It comes with 9 different themes, 3 page templates, 3 widget areas, PSD source files, Twitter stream, and much more. Price: $15. iBusiness Home →View the Demo →
The Video Tube theme is specifically designed for video blogging and content sharing on your mobile site. It fully supportsthe iPhone/iPod Touch, Android, and touch-based Blackberry devices. With all WordPress features and customized insertion functions, it makes adding Youtube and MP4 videos to your mobile site exetremely easy. Price: $49. Video Theme Home →View the Demo →
Sofa iBloggr perfectly fits to the iPhones 320px wide screen without the need for screen orientation switch. You can easily turn this theme into Blog + Flickr + Twitter mashup. iBloggr supports widgets, it has a built-in Plugger system, almost everything can be controlled from theme options page – including quick translation table, image size, Post excerpt length… Price: $15. SOFA iBloggr Home →View the Demo →
The News Gallery theme is designed with the photography blogger in mind featuring frontpage slideshow, thumbnail picture and gallery style layout options. It is the perfect choice for image-centric and magazine style WordPress websites. It comes with six stylish colors designed to fit your sites’ unique profile and style. Price: $49 News Press Mobile Theme Home →View the Demo →
iWorld is a jQuery powered feature-rich mobile theme. It comes with 10 color schemes, built-in slider & contact form (including validation plugin), Twitter & Flickr widget, a selection of social icons and comes with PSD source. Price: $25. iWorld Home →View the Demo →
MobilePress – Enable The Mobile Web → MobilePress is a free open source plugin that is flexible in that it allows you to customize your mobile presence by creating your own themes, creating themes for specific mobile browsers (iPhone and generic devices) and also allowing you to decide when to display your mobile blog.
WPmob Lite → WPmob automatically transforms your WordPress blog into an iPhone application-style theme, complete with ajax loading articles and effects, when viewed from an iPhone, iPod touch, Android, Opera Mini, Palm Pre, Samsung touch and BlackBerry Storm/Torch mobile devices. The admin panel allows you to customize many aspects of its appearance, and deliver a fast, user-friendly and stylish version of your site
WP Mobile Detector → WP Mobile Detector is a simple plugin that automatically detects standard and advanced mobile devices and displays a compatible WordPress mobile theme.
Mobile Kit → MobileKit is a small WordPress plugin created to make the development of WP mobile themes and apps simple, allowing theme designers to create more immersive user experiences across platforms and devices.
BAAP Mobile Version → The BAAP Mobile Version is a complete toolkit to help mobilize your WordPress site and blog. It includes a mobile switcher to select themes based on the type of user that is visiting the site, a selection of mobile themes, extra widgets, device adaptation and a mobile administration panel to allow users to edit the site or write new posts when out and about.
BuddyPress Mobile → This is a Mobile BuddyPress theme that has been optimized for viewing onthe iPhone and iPod Touch, and will also work on Android and some Blackberry devices.
Making your WordPress Blog Android and iPhone Friendly → This article is intended for those who already have a web or WordPress background. If you don’t quite understand how to put together your own templates, this detailed tutorial may not for you.
Mobile Browser Detection → This tutorial covers everything you will need to know about mobile browser detection covering a spectrum of various options, including a WP solution and a PHP solution.
Detect Mobile Browsers – Mobile User Agent Detection → This PHP function lets you choose how to manage your mobile visitors, they can be redirected to a page built for mobiles or you can use it to decide which markup language and stylesheet to show that user.
Add a Mobile Landing Page to Your Site → This tutorial isn’t about creating an entire mobile version of your site, instead it is a means of offering a quick introduction to visitors from the mobile world before passing them through through to your main site.
The wireframing process is the straight-to-the-point and completely non-tech stage of any web project. It only requires that you define a skeletal outline of essential page elements such as headers, footers, navigation and content area and should illustrate how to cater and respond to any possible interaction from a user. It is the most important, yet underused, stage of any web or apps development.
There are several avenues you could take for sketching a wireframe, most notably pen and paper (the easiest and most cost effective way), but for the sake of this article we have focused on apps that are not only highly effective and easy to use, they are also completely free.
We have covered free wireframe apps before (here), but a year is a long time in web development – some of the apps we had previously covered are either no longer completely free or are no longer available. And as such, we felt that we should compile a new list with more detail and covering all areas of design including web pages, mobile apps and application dev. As well as showcasing a variety of free apps (11 in total), at the bottom of the post, we have also highlighted some premium wireframing services that do offer free, yet limited, options. You may like to try them.
With Lumzy, you can create mockups of how your site or application will function by adding events from the extensive list of controls on offer. As well as having great tools for creating your mockup, you can also create Message Alerts, interactive Page Navigation, add Links to external content, and much more. It does offer a great set collaboration tools for live team editing and a chat engine for deliberating over designs. All of this and it is absolutely FREE. Lumzy Homepage →View Editor →
Mockup Builder has just recenly been released and looks very promising. It is feature-rich and versatile by allowing you create various prototyping styles, including: UI mockups, interactive wireframes, website layouts, desktop software prototypes and even sitemaps & screen navigation. Of course, it does come with great collaboration tools for sharing with clients and colleagues. And yes, it is completely FREE. Mockup Builder Homepage →View Editor →
The idea behind Tiggr (currently in beta) is to give you the resources needed to create prototypes (for web, app or mobile) that look and feel like the final product. It allows you to design from a large number of components, share (via email, Twitter or Facebook), you can collaborate with any number of users and will generate an HTML/JS/CSS so that you can preview your UI mockups very quickly. A 10 second registration (email & password) is the only thing you have to go through to use this fantastic FREE tool. Tiggr Homepage →
Frame Box does not have an extensive list of features (like the web based apps above). You can drag and drop, re-size and copy/paste the UI units, but its main focus, and why we like it so much, is that it allows you to create your mockup/prototype very, very quickly by using its very easy to use drag and drop interface. Again, this app is FREE and only requires a quick registration. Frame Box Homepage →
SimpleDiagrams (free version) is a tiny Adobe Air app that helps you express your design ideas quickly and simply. Drag & drop symbols from its libraries, add images or post-notes, export as a PNG are all of its features, adding up to just just enough functionality to create a decent mockup. SimpleDiagrams Homepage →
With iPhone Mockup you have a choice of using either the Pencil styled editor (screenshot above) or the Illustration editor (screenshot below). Whichever editor you decide to use, the functionality remains the same: Its a very simple and easy to use app that allows you to create your own iPhone mockups very quickly, share them with other people at the click of a button, and any changes you make will by synced to everyone who has the mockup’s URL. iPhone Mockup Homepage →Illustration Editor →Pencil Editor →
fluidIA is a downloadable web based design tool for prototyping rich user interfaces. It allows for rapid refinement and exploration of concepts using an object-oriented approach to design. The original idea behind fluidIA is to discover whether a group of interaction designers, IA’s, UX professionals and developers can create there own prototyping tool in an open way. Progress on FluidIA has been a little bit slow recently, but the actual app works perfectly for designing a wireframe mockup. fluidIA Homepage →Fluidia (GitHub) →
Pencil Project is a free and opensource Firefox addon for designing GUI prototypes. With its built-in stencils you can create linked multi-page UI documents and finally export your mockup in either HTML, PNG, Openoffice.org document, Word document or PDF. What more would you want from a wireframing app? This truly is an essential Firefox extension that any serious developer or designer should use. Pencil Project Homepage →Screenshots →
CogTool is a FREE and powerful general purpose UI prototyping tool with a difference – it automatically evaluates your design with a predictive human performance model (a “cognitive crash dummy”). You simply create a storyboard of your design idea with sketches, images or on a canvas with CogTool’s widgets, demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks. CogTool offers a lot of support via its extensive user guides, step-by-step tutorials (video and articles), its forum and also offers example files to help you get started. CogTool Homepage →
Prototype Composer makes it possible to simulate how an application will look and function before any code is ever written. Instead of endless text entries, complex data hierarchies, or too technical UML diagrams, Serena Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high fidelity prototypes that simulate a working application. It is a tool for prototyping data, processes, activities and most importantly, user interfaces. The application also works as a fairly easy to use Project Management tool. The Community Edition is its free version which allows users to work in a sample project as well as in one user-defined project. Prototype Composer Homepage →
DUB – DENIM (Standalone Application for Win, Linux & Mac)
DENIM is a free desktop application that is available for Windows, Unix, and Mac OS X. DENIM describes itself as “an Informal Tool For Early Stage Web Site and UI Design”. It combines many of the benefits of paper-based sketching with existing electronic prototyping tools. It allows designers to quickly sketch an interface, preserving the important properties of pencil and paper: a rough drawing can be produced quickly and the medium is flexible. However, unlike a paper sketch, this electronic sketch is interactive and can easily be annotated and modified. DUB – DENIM Homepage →
Premium Wireframe/Prototype Apps with a Free Option Available
All of the Wireframe/Prototype/Mockup web-based applications below are premium services that do offer a free, yet limited, option. You may like to try them:
Drupal has perhaps one of the most misunderstood reputations within web design. It is generally thought of as an overblown and hard to learn CMS that is aimed only towards large corporate/business websites. Yes, it can handle very large and complex web sites, but the truth is Drupal can be used effectively for any type of web site, from blogs, personal portfolios, community driven sites, and, as we have already mentioned, large corporate, business and government sites as well. And, especially with its latest release (Drupal 7), it has never been easier to learn and use. It is a truly remarkable CMS.
We haven’t published anything related to Drupal in awhile, so this post is long overdue. What we have aimed to do is blow away any idea you may have had that all free Drupal themes are basic and ugly – we think we have achieved that. You will love the varied selection of beautiful themes we have for you below.
Please note that even though Drupal 7 was released last month there are currently very few compatible free themes available (we are sure that this will change in the coming months). You will find a small selection of Drupal 7 themes below, but the vast majority are only compatible with Drupal 6.
The Jackson Theme is a feature-rich, well-organized, theme based on the NineSixty (960) Theme. Its clean layout and lightweight code make it a perfecttheme for small tomedium-sized business to get up and running quickly. Download & Docs →View the Demo →
Acquia Slate is a dark, corporate styled theme with several banner photos, adjust block and sidebar widths, choose different title colors, and much more. As with all Fusion Themes, it supports fluid width and re-positionable sidebars. Download & Docs →View the Demo →
Asesor Blue is a clean and simple corporate theme that supports all default Drupal theme features; Logo, site name, search box, favicon, primary links and secondary links. Download & Docs →View the Demo →
Afterburner balances speed and search engine optimisation with a full feature set. It comes packaged with an assortment of 8 preset styles, both light and dark. Download & Docs →View the Demo →
The flexible fluid or fixed Libra can optionally include a secondary menu, site name, slogan, inline search box and primary links. Its design has a cean combination of blue sky colors and efective typography. Download & Docs →View Screenshots
Who doesn't know the WordPress theme 'The Morning After'! This is a Drupal port of the WP theme, but this one being a sub-theme, it will require the parent-theme Zen to run. It is ideal for magazine sites or blogs with heavy content. Download & Docs →View the Demo →
The beautiful Modernist theme is a minimal theme focused on great typography. Beautifully built yet transparent, it has been designed with a focus on optimal typography in order to better showcase your content: text, images and video. Download & Docs →View the Demo →
This is a free under construction theme for Drupal. It comes with a choice of 6 colors (blue (default), brown, green, orange, pink, purple) and you can customise the logo, favicon, title, add Google Analytics code. all within the themes setting page. Download & Docs →View the Demo →
The Square Grid theme has been inspired by the Square Grid CSS Framework. The concept of this theme is simple: To provide a base theme defined by the Square Grid framework, for designers and front-end developers to use as a parent theme for a Square Grid-based design. Download & Docs →Docs
MM is a minimalistic HTML5 three-column, fixed width layout theme for Drupal 7 perfect as a frameworks for developers. Its a subtheme of the excellent Boron HTML5 base theme. Download & Docs →View the Demo →
This theme has been developed to allow rapid creation of custom (sub)themes and includes basic styles and features. Compared to many existing Drupal theme frameworks it works right away, it is lightweight, and there are not many of settings to obey. Download & Docs →View the Demo →
Drupalizing is a resource that allows you to suggest (and download) your favorite WordPress themes' port to Drupal. Just visit the site, drop in the WordPress theme's link and name, and if your suggestion is appealing enough, that particular WordPress theme will be ported to Drupal by the Drupalizing guys. The only catch is that only GPL licensed themes can be ported (you know the drill, copyright issues etc.)! So far, four themes have been ported: JournalCrunch, Bluemasters, Magazeen Lite and ImpreZZ, you can view them below:
Accessibility is extremely important to your website. Simply put, what good does your website’s content do if certain people can’t see it? Sure, your fancy new design with the tiny fonts and low-contrast colors might look slick to you and your friends, but those with poorer eyesight, color blindness, and any other visual hindrance won’t be able to navigate, much less read, your website. You want to—nay, must—make your website accessible if you want the maximum amount of visitors.
But how do you go about making sure your website is accessible? Well, today is your lucky day, because your life is about to get a whole lot easier. Here are 20 tools to an accessible website:
WAVE is a free tool that helps you in the web accessibility evaluation process. Rather than giving you a complex technical report, WAVE displays your original web page with embedded icons and indicators, showing the accessibility of your page.
IDI Web Accessibility Checker checks your web pages for conformance with accessibility standards to make sure your content can be accessed by everyone.
Vischeck shows you what your web pages look like to someone who is color blind. You can use Vischeck online with either an image file or running it through your web page, or you can download and use it on your computer.
Colour Contrast Check lets you pick a foreground and a background color and see if they provide enough of a contrast when someone who has color deficits views it, or when it’s viewed on a black and white screen.
mobiReady is a testing tool that evaluates your website’s mobile-readiness using industry practices and standards. It gives you a free report that provides both a score (from 1 to 5) and in-depth analysis of your web pages to determine how well your site performs on a mobile device.
Stanford Web Accessibility Checker is a programmatic tool that can analyze your web pages and test for possible access barriers. It can check live code via URL, or you may supply a working file for evaluation. It then produces a report of all accessibility problems for your selected guidelines.
Check My Colours is a tool for checking foreground and background color combinations of all DOM elements and determining if they provide enough of a contrast when viewed by someone with color deficits.
Lynx Viewer lets you see what your web pages will look like when viewed with Lynx, a text-mode web browser. It is also shows how search engines would see your site. In addition to that, it can help determine if your web pages are accessible to people with impaired vision.
Quick Page Accessibility Tester is a bookmarklet that you can click on at any time to get a quick analysis of any of your web pages. It highlights definite issues with your page, warns about possible issues and also highlights areas on the page that could benefit from some ARIA enhancements.
GrayBit – Grayscale Conversion Contrast Accessibility Tool is an online accessibility testing tool that visually converts your full-color web pages into grayscale renditions for the purpose of visually testing the page’s perceived contrast.
Accessibility Color Wheel lets you see if a color pair is good for accessibility. Choose a foreground and background color by pointing the mouse over the wheel or the grey bar and click. If you see an ‘OK’ message then the color pair is good for accessibility. Otherwise, change one or both colors until you get an ‘OK’.
HERA is a tool for checking the accessibility of your web pages according to the specification of the Web Content Accessibility Guidelines. HERA does a set of tests on your web pages, identifies any automatically detectable errors or checkpoints that are met, and shows which checkpoints need manual verification.
Accessibility Valet displays the markup of your web pages in a normalized form. It highlights valid, deprecated and bogus markup, as well as misplaced elements. Any accessibility warnings are shown in a generated report.
Cynthia Says is a web content accessibility validation tool that identifies errors in your design that are related to Section 508 standards and the WCAG guidelines.
TAW is a tool for the analysis of your web pages, based on the W3C Web Content Accessibility Guidelines 1.0. In addition to the web-based tool, there’s a standalone download option as well.
Colour Contrast Analyser is a Firefox extension that lists color combinations used in your web pages. It lays out the colors in a table that summarises the foreground color, background color, luminosity contrast ratio, and the color and brightness difference.
Firefox Accessibility Extension is just what the name says: a Firefox extension that you can use to check your use of structural and styling markup in your web pages that support functional web accessibility. That will make it easier for people with disabilities to view and navigate your web pages.
Accessibility Favelets is a collection of bookmarklets that help with accessibility when working on your web pages. These are basically little scripts that you save (ie. bookmark in your web browser) and then use to test for accessibility when on one of your web pages.
What Are Your Most Useful Tools?
Over to you: what accessibility tools do you deem essential? Do you have any useful tips for accessibility? What glaring omissions do you know that should be on this list? Feel free to share your useful additions in the comments section below.
