24×24 Pixel Cursor Bookmarklet - Adrian Roselli
"…I have made a bookmarklet that will turn your cursor into a 24 × 24 pixel square (back in April but forgot to post it), which may help in building and testing conformance with the proposed 2.5.8 Success Criterion…"
3 Simple Design Bookmarklets - Thomas Park.
"…Grayscale to gauge contrast between light and dark, rather than by colors…Blurry to examine the composition of colors…Upside-down to get a fresh perspective on composition and balance…" Try using the Gray one to check for instances of color alone.
24×24 Pixel Cursor Bookmarklet - Adrian Roselli
"…I have made a bookmarklet that will turn your cursor into a 24 × 24 pixel square (back in April but forgot to post it), which may help in building and testing conformance with the proposed 2.5.8 Success Criterion…"
A Better Way of Presenting From Your Slide Notes (2024) - Sam Waller.
"The Cambridge Subtitles for Powerpoint tool offers a better way of presenting from your slide notes. It splits the text in your slide notes up into short subtitles, and adds these to the slide as animated text boxes. This means you can write out the presentation that you want to give, and then deliver it perfectly, without having to rely on handheld cards or excessive amounts of text on your slides…"
A Complete Guide To Accessibility Tooling - Nic Chan. "In a new short series of posts, we highlight some of the useful tools and techniques for developers and designers. Recently we've covered HTML Emails and SVG Generators. This time we look into different kinds of tools to help you streamline your accessibility testing process. Don't miss the next one…"
A Simple, Accessible Modal Dialog Web Component - Filament Group.
"This modal is built to be easy to use, dependency-free (aside from feature polyfills), and accessible. It can be opened and closed programatically or via links in a page, contains behavior to gracefully support keyboard use (including focus management, focus isolation, and closing via escape key), and is tested for optimal accessibility for assistive technology. It also supports chaining of modals, meaning that if you link to another modal from within a modal, the new modal will cause the prior modal to close when it opens…This modal is built to be easy to use, dependency-free (aside from feature polyfills), and accessible. It can be opened and closed programatically or via links in a page, contains behavior to gracefully support keyboard use (including focus management, focus isolation, and closing via escape key), and is tested for optimal accessibility for assistive technology. It also supports chaining of modals, meaning that if you link to another modal from within a modal, the new modal will cause the prior modal to close when it opens."
A11y Tools - Ian Lloyd. "A random collection of accessibility-focused tools that you might find at least partially useful…"
a11yTools Extension for Safari macOS -
Paul J. Adam.
"The extension must be installed from Safari on macOS. It creates an a11yTools Toolbar Item that displays a menu of accessibility testing tools…"
Able Player 4.0 - Terrill Thompson.
"New features include support for playlists, Vimeo, self-voicing of text-based audio description, & improved support for extended audio description, among others."
AccessiBe Gone - Stephen Clower. "…How to block the AccessiBe domains…"
Accessible Email Checker - Maarten Lierop and Jordie van Rijn. "It is the mission of Accessible-email.org to promote email marketing accessibility and usability. In that be the voice of users and the email marketing community…"
Accessibility Assessment - Nomensa. "Digital accessibility requires coordinated effort across your organisation. What's your strategy…The free assessment takes about 15 minutes to complete and your Accessibility Assessment scores will be delivered instantly…"
Accessibility alt text Bot (GitHub) - Kendall Gassner and Kate Higa. "An action to remind users to add alt text to their issue descriptions and comments…"
Accessibility Checker for EPUB (ACE) (2023) - DAISY Consortium.
"…the official graphical user interface for the EPUB accessibility checker…" (Windows, MacOS and Linux)
Accessibility in Chrome DevTools - Umar Hansa. "This article will demonstrate some useful features in DevTools which can help you improve the accessibility of your website. For many websites, things like performance and accessibility are an afterthought. But as web developers, it's best to strive to create the best possible experience we can for our users, regardless of their abilities…"
Accessibility Insights for Android - Microsoft. "Users can now download a detailed html report with the results of their automated checks.
Accessibility Insights for Web - Microsoft. "Accessibility Insights for Web is an extension for Chrome and Microsoft Edge Insider that helps developers find and fix accessibility issues in web apps and sites."
Microsoft Open Sources Accessibility Insights - Keith Ballinger.
"Today we're announcing the open sourcing of Accessibility Insights for Windows and Accessibility Insights for Web, a set of two free tools to help developers easily find and fix common accessibility issues early in the dev cycle…"
Accessibility Visualisation with Tota11y 2 - Bruce Lawson. "I've forked the splendid but dated Tota11y accessibility visualisation toolkit, added some extra stuff and corrected a bug, and my employer has let me release it for Global Accessibility Awareness Day…
Tota11y Instructions -By Bruce Lawson. "To help you do a quick check of a web page for the most common accessibility errors, we have a visual tool called Tota11y. It won't catch every problem, but it will catch the most common problems that we find on Babylon sites, and highlights them in your browser window, so you can check pages while you're editing content, before they ever go live…"
AccessLint - "AccessLint is a GitHub App that finds accessibility issues in your pull requests…"
accesslint.js - Cameron Cundiff, et al.
"Accessibility warnings for dynamic web content...accesslint.js runs assertions from the aXe-core accessibility library wherever you include the script once on page load, and again for each DOM change event. This feature gives you feedback on new content introduced via AJAX, for example, or updates to a single page app…"
aDesigner - aDesigner is a disability
simulator that helps designers ensure that their content
and applications are accessible and usable by the visually
impaired.
Access Monitor - "Test your WordPress site for accessibility compliance. Run on-demand tests or schedule a weekly accessibility check."
Accessibility Scanner - Google. "Accessibility Scanner is a tool that suggests accessibility improvements for Android apps without requiring technical skills. Just open the app you want to scan, then tap the Accessibility Scanner button to find items in the app that might benefit from accessibility improvements. You can use this app to suggest changes to developers or to make changes yourself…"
AI & Disability Inclusion Toolkit - Partnership on Employment & Accessible Technology (PEAT). "Implementing Equitable AI in the Workplace…"
AInspector WCAG for Firefox
- Jon Gunderson.
"Inspects web pages for features and issues related to WCAG 2.0 level A and AA requirements…"
Alfred WCAG Workflow (2023) - Eric Bailey. "This Alfred Workflow allows you to search through Web Content Accessibility Guidelines (WCAG) Success Criterion (SC), and then copy a link to the selected SC to your clipboard or open its Understanding page in your default browser…"
Alt Text Decide-O-Matic (2024) - David O'Brien. "This decision tree will help you understand how best to include text alternatives for image-based content…
ARC Toolkit - The Paciello Group.
"Quickly uncover accessibility issues on any web page and gain valuable accessibility insights with TPG's ARC Toolkit."
Are Ya Hidden? (Bookmarklet) - Ian Lloyd.
" Blacks out all elements on a page that have aria-hidden="true", indicating what the experience might be like for assistive technology (AT) users.
It also looks for elements that have been visually hidden and attempts to restore them visually. Why? Because sometimes elements hidden to AT have associated text that is visibly hidden, so that blacked out text may have an alternative that is not immediately obvious."
ATAG Report Tool - W3C Accessibility Education and Outreach Working Group.
"This tool helps evaluators report on the accessibility of authoring tools. It guides you through the Authoring Tool Accessibility Guidelines (ATAG) requirements, lets you record your evaluation results for each requirement, and generates a report of the authoring tool's ATAG conformance."
Alt Text Decide-O-Matic - Scottish Enterprise's Service Design Team.
"Writing alternate text for non-text can be hard. This widget can help you decide which approach to take…"
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."
Accessible Table Builder - Ian Lloyd. "Create an
accessible table using scope, header and id attributes
using a wizard to guide you through the process".
Accessible Usability Scale (AUS) - Fable Tech Labs. "The Accessible Usability Scale (AUS) is a free tool to measure the usability of a digital product for assistive technology users. Inspired by the System Usability Scale (SUS), the Accessible Usability Scale consists of ten questions administered at the end of a user experience to calculate a score…"
An Accessibility Bookmarklet for Testing 200% Text Size (2023) - Ashlee M Boyer.
"This bookmarklet can help you visually check how well a webpage handles text being resized to 200% of the base/default size. It can also help you test for loss of content when checking compliance for WCAG 2.2 Success Critierion 1.4.10 Reflow…"
Announcing the New Ace by DAISY App - Inclusive Publishing. "Following feedback from our users who found the Ace by DAISY command line tool useful but in some instances challenging to use, we are delighted to bring you the new Ace by DAISY App…"
Auditing Tools and Techniques to Improve Your Workflow (Video)(CSUN ATC 2023) - Ian Lloyd.
"…This presentation was not filmed, but this is a run through done at home, same as what was presented on the day…I hope that in this session I will be able to conjure up some tips and tricks that you can take away to improve the way that you do your audits, or whatever other processes that…"
Autocomplete Accessibility Bookmarklet (2023) - Rachele DiTullio. "I created this bookmarklet for testing WCAG success criterion 1.3.5 Identify Input Purpose (AA) which requires that if an input field requests personal information about the user, we must apply the appropriate autocomplete value to the field…"
Automatic Readability Checker -
Readability Formulas. "…takes a sample of your writing and calculates the number of sentences, words, syllables, and characters in your sample. Our program takes the output of these numbers and plugs them into seven popular readability formulas. These readability formulas (see below) will let you know the reading level and grade level of your text and help you determine if your audience can read your writing…"
aXe Chrome Extension - Deque.
"Automated tool to find Accessibility defects on your web site by using the aXe Chrome extension…"
axe for Android - Deque.
Accessibility analysis tool available for the Android platform
axe - Web Accessibility Testing for Edge Browser - Deque Systems. "Accessibility Checker for Developers in Edge Accessibility checker for WCAG 2 and Section 508 accessibility. Find accessibility defects on your website or web application by using the axe Edge extension. Drop the axe on your accessibility defects…"
AxSHammer - Jamie Teh. "I just started a new project: AxSHammer, a Firefox add-on providing tools to hammer an inaccessible website into shape. See the readme for details…"
axe Pro: Keyboard Guided Test (Video) - Deque Systems. "The keyboard guided test is designed to help raise issues around missing focus indicators, missing ARIA roles, keyboard inaccessibility, and many others."
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.
ANDI (Accessible Name & Description Inspector) - United States Social Security Administration.
" a 'favelet' or 'bookmarklet' used by web developers and testers to inspect web content for accessibility."
aXe (The Accessibility Engine) -
"...open source library is a lightweight (~100 KB), fast, portable JavaScript library that executes automated accessibility testing inside your testing framework or browser of choice…"
Bookmarklets - a Cool Personal Dev Tool - Amber Wilson. "I have just found out what bookmarklets (aka favelets - a term coined by my friend Tantek back in the early 2000s) are and I like 'em! So what are they?…"
Bookmarklet for Finding Incorrect Use of aria-owns - Ted Drake. "I created the following bookmarklet to highlight all elements on your screen that use aria-owns. To use this, drag the following link to your bookmark bar, open a page, and then press the link. It will highlight any elements that use aria-owns…"
Bookmarklets for Nu Html Checker - Steve Faulkner. Running your HTML through a conformance checker will miss any errors you may have introduced when adding to elements/attributes via JavaScript. Steve's bookmarklet that will send the HTML DOM of a page the Nu Html Checker.
Button Buddy (2024) - Stephanie Eckles. "Scroll to learn about accessible button contrast. Or skip to the generator to begin creating button styles with accessible contrast…"
Captcha Solving Chrome Extension - Oliver Edholm.
"I just wanted to announce that I'm now releasing a Chrome Extension for automatic captcha solving…"
Caption and Description Editing Tool (CADET) - National Center for Accessible Media (NCAM)
CADET from NCAM: Free Captioning Tool for Online Videos - Geoff Freed.
"CADET is free, downloadable caption-authoring software that enables anyone to produce high-quality caption files that are compatible with any media player that supports the display of captions…"
Check for accesskey and aria-keyshortcuts Bookmarklet (2024) - Steve Faulkner. "Made this to quickly check for presence of accesskey and aria-keyshortcuts attributes to help in testing WCAG 2.2 Success Criterion 2.1.4 Character Key Shortcuts…"
ChromeLens - Ng Zhi An and Jingwen.
"ChromeLens is a set of developer tools that allow developers to code websites better suited for the visually impaired…"
Collaboration Tools Accessibility User Requirements (2024) -
Jason White, Janina Sajka, and Scott Hollier, Editor. "This document outlines various accessibility-related user needs,
requirements and scenarios for both synchronous and asynchronous
web-based collaboration tools…"
Complex
Table Inspector favelet - Gez Lemon. Gez has written a
favelet that reveals accessibility attributes for complex
tables.
craptions.to.captions - Michael Lockrey a.k.a. @TheDeafGuy.
"My name is Michael Lockrey and I'm a captioning evangelist. I'm also profoundly Deaf and this means that I simply cannot watch YouTube videos when only automatic craptioning* is provided. So I decided to do something about it and nomorecraptions.com is the result."
Describler - Doug Schepers.
"Describler allows you to make your SVG images accessible and reusable. It shows you all of the text content of your SVG in an editable list, including both visible text and metadata, and makes it easy for you to add descriptive content, or change the text that's already there. And you can use the 'audio preview' feature to hear how your SVG sounds in common screenreaders."
Document Accessibility Toolbar (DAT) - Vision Australia.
"An innovation that revolutionises the ease and speed of creating accessible documents in Microsoft Word, the Document Accessibility Toolbar (DAT) supports individuals and organisations to embrace accessibility as 'business as usual' at no cost…"
Easy Chirp -
Dennis Lembrée. "Web accessibility for the Twitter web
application..."
Easy Chirp Announcement - Dennis Lembrée. "I regret to announce that the Easy Chirp app is no longer being maintained. It was a great run. Cheers, Dennis… My code on GitHub is now public…"
Editoria11y (Drupal Module) - John Jameson. "Editoria11y (editorial accessibility) is a user-friendly accessibility checker that addresses three critical needs for content authors…"
Evinced is Pushing the Limits of Automated Accessibility Testing - Marcy Sutton. "As an accessibility advocate and web developer, I've spent a lot of time using and recommending accessibility testing tools. I want the process of developing accessible websites to be as successful and encouraging as possible so we can make the internet a more inclusive place…"
Evinced Accessibility Site Scanner - Bruce Lawson. "…The system is currently in Beta and definitely needs some proper usability testing with real target users and UI love. One niggle is the inaccuracy of its knowledge base (linked from the error reports)…All in all, the ability of Evinced to identify repeated 'components' and understand the intended use of some splodge of JavaScriptted labyrinth of divs is a welcome feature and its main selling point. It's definitely one to watch when the UX is sleeker (presumably when it comes out of Beta)."
Experte Accessibility Check - Janis von Bleichert "…After entering a URL, the tool crawls the website and determines the accessibility for each subpage according to 8 categories, such as correct labeling, contrast, or ARIA attributes…"
Experimenting With Local Alt Text Generation in Firefox Nightly (2024) -
Tarek Ziad. "…Firefox 130 will introduce an experimental new capability to
automatically generate alt-text for images using a fully private
on-device AI model. The feature will be available as part of Firefox'sbuilt-in PDF editor, and our end goal is to make it available in
general browsing for users with screen readers…"
Extensions
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."
ARIA Validator Chrome Extension - Rick Brown. "Scans page for WAI-ARIA implementation issues. Not an HTML5 validtor, just ARIA and nothing else."
ChromeLens - Zhi An NG.
"ChromeLens is a Google Chrome extension that provides a suite of tools to help with web accessibility development."
ColourMap - Colour Blind Helper - Pierre Frederiksen.
"ColorMap can help colour blind users in reading maps, seating plans and other content where colour is used to convey information…"
Colorzilla -
"It assists web developers and graphic designers with
color related tasks - both basic and advanced. With
ColorZilla you can get a color reading from any point
in your browser, quickly adjust this color and paste it
into another program."
Fangs -
The Firefox Screen Reader Emulator Extension
HeadingsMap (FireFox Extension) - Jorge Rumoroso "The extension generates a documentmap or index of any web document structured with headings and/or with sections in HTML 5. It shows the headings structure, the errors in the structure (ie. incorrect levels), and it works as HTML5 Outliner tool.."
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."
Hover Contrast Bookmarklet (2024) - Joe Dolson. "A bookmarklet to trigger hover states and check the color contrast of hovered focusable elements…"
Image Describer (Chrome Extension) (2023) - Cameron Cundiff. "Describe images in a web page using the context menu for accessibility for people who are blind or who have low vision…"
Long Descriptions in Context Menu - Google. "This is an official longdesc extension for Chrome. "The HTML standard allows images to have a link to an additional file with a long description with the 'longdesc' attribute. In addition there's a proposed new ARIA attribute 'aria-describedat' that's similar. Normally these attributes are only exposed to users who have screen readers or other assistive technology installed that knows to look for these. This extension puts an item in the context menu so you can right-click on any element on the page and open its long description. It also gives you the option of adding a colored border to images with a long description so you know when one is available…"
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 Developer Tools
Accessibility Inspector (FireFox) - Mozilla
"The Accessibility Inspector provides a means to access important information exposed to assistive technologies on the current page via the accessibility tree, allowing you to check what's missing or otherwise needs attention. This article takes you through the main features of the Accessibility Inspector and how to use it…"
Focus Order Favlet
- Jonathan Avila - "Indicates focus order of the current document (excludes content inside iframes). Add the link below to your favorites or bookmarks -- in Chrome you can drag and drop it onto the bookmarks toolbar."
Force Focus Tools - Dennis Lembree. "When testing web accessibility, missing visual focus indicators is a 'violation' of 2.4.7 Focus Visible. And when it fails, it also makes other checkpoints difficult to test (for sighted testers) such as focus order. To get around this problem, here are a few tools to help force a visual indication of keyboard focus."
Form Extractor Prototype (2024) - Tim Paul and Joe Lanman.
"This tool extracts the structure from an image of a form…"
Funkify - Axess Lab. "Funkify is a brand new plugin for Chrome that helps you experience the web and interfaces through the eyes of extreme users with different abilities and disabilities…"
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."
Gifa11y - Adam Chaboryk. A customizable vanilla javascript plugin to add accessible play/pause buttons to animated GIFs.
HTML_CodeSniffer -
squizlabs.
"HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own "sniffs"…" in addition a bookmarklet is provided."
How to Get Speech Output as Text From Screen Readers (2024) - Francis Storr "Sometimes you need text, rather than voice, output from screen readers. Why? It's really useful for bug reports ('this disclosure icon is announced as 'black dash triangle dash filled dash x2 underscore final dot png' and needs alt text'). Luckily, getting this text is easy to do…"
Image Accessibility Creator (2024) - Arizona State University.
"…Designed to effortlessly generate alt text and detailed descriptions, as well as extract text from slides and images that are not accessible, our tool simplifies the creation of inclusive content. Just upload your image and hit 'Create Image Details.' Within seconds, you'll see the generated content appear on the right side of the screen. Need to tailor the descriptions further? Easily add more specifics with the 'Add Details' option and generate updated descriptions to perfectly meet your needs. This tool currently utilizes the GPT-4 vision model provided by OpenAI. We are using their API platform, which ensures the data sent is not retained or stored to improve their training or models…"
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..."
ITAG - Prioritization Guide - Big Ten Academic Alliance "To help determine the priority a particular project should receive for accessibility, submit answers to the following questions. You will receive a response indicating whether the priority level should be high, medium, or low. The questions take into account various considerations that come into play in determining where to focus resources and effort first…"
Inaccessible Twitter - Chris Johnson. "A bookmarklet to aid accessibility - See how inaccessible your Twitter feed and profile really is…"
Inclusive Dates Datepicker - Tommy Feldt. "A human-friendly and fully accessible datepicker. Currently proof-of-concept, help me improve it…"
Intro to the Accessibility Inspector Tool for iOS Native Apps - Chris McMeeking "…This tool is great because it comes with your iOS toolchain and will test for VoiceOver, switch controls, braille boards, and other alternative input devices…" …"
Isolator - Ian Lloyd. "Here's a little bookmarklet that you may find handy. It isolates a section of the page which (hopefully) makes it a little easier to interrogate/test the markup…"
JavaScript Bookmarklets for Accessibility Testing - Paul J. Adam.
"Bookmarklets for Accessibility Testing use JavaScript to highlight roles, states, and properties of accessibility elements on the page. They are accessible to screen reader users and work on any browser including mobile phones…"
Koa11y - Jared Wilcurt.
"Koa11y is a desktop app that allows you to automatically detect accessibility (a11y) issues on webpages. View sample report generated by Koa11y…"
Landmarks Extension - Matthew Tylee Atkinson. "Landmark regions broadly signpost the areas of a page (e.g. navigation, search, main content and so on). This extension allows you to navigate a web page via its landmarks, if they've been provided by its author, using the keyboard or a pop-up menu…"
Luma - Evan Levesque. -
"A powerful and accurate photosensitive epilepsy seizure triggers detection tool…"
Modaal - A Humaan Project. "Modaal is a WCAG 2.0 Level AA accessible modal window plugin…"
NerdeRegion (2024) - Ugurcan (Ugi) Kutluoglu.
"NerdeRegion is a Chrome developer tools extension for debugging live regions on a Web Page. When activated, you will see a list all active Aria live regions, and you'll be able to see the history of all changes made on the region…"
Open Product Accessibility Template (OPAT) - By OPAT Team: Daniel Mundra, Mike Gifford, Syed Azeem, and farooqzakhilwal. "Open Product Accessibility Template (OPAT) is a digital native Accessibility Compliance Report (ACR). The initial development is based on Section 508 requirements. The main goal is to be able to compare the accessibility claims of digital products and services. A structured, self-validated, machine-readable documentation will provide for this…"
Overview of Accessibility Testing Using DevTools - Microsoft Edge Team, Michael Hoffman, and Christian Heilmann. "In this article, we cover some of the features you can use in DevTools to test for accessibility problems…"
PAVE (PDF Accessibility Validation Engine) - ICT-Accessibility Lab of the Zurich University of Applied Sciences (ZHAW) in collaboration with the Swiss Federation of the Blind and Visually Impaired.
"You can use PAVE to make your PDF documents accessible and to interpret conventional reader programs correctly…"
PDFcheck Checks - Communicate Health Developer Blog. "Quickly check PDF files for accessibility red flags…" Does batch processing but extremely limited regarding the number and type of tests it runs.
Photosensitive
Epilepsy Analysis Tool (PEAT) - Trace Center. "The Trace Center's Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable resource for developers to identify seizure risks in their web content and software…"
Quick and Very Dirty Target Size Checker Steve Faulkner. "WCAG 2.2 is almost upon us, many of us have started testing the new Success Criteria for paying clients. I wanted to find a way to speed up the testing of 2.5.8 Target Size (Minimum). What I produced with the help of ChatGPT is a quick and very dirty target size bookmarklet…"
Readability Analyzer - Sarah Tyler. "Estimates the readability of a passage of text using the Flesch Reading Ease, Fog Scale Level, Flesch-Kincaid Grade Level, and other metrics."
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."
Reading Order Bookmarklet - Adrian Roselli.
"When a keyboard-only user or screen reader user comes to page that uses CSS to create a layout, there is a chance that what is on the screen does not match the flow of the page…"
Sa11y 2.0 Accessibility Quality Assurance Assistant - Adam Chaboryk et al, Ryerson University. "Sa11y is an accessibility quality assurance tool that visually highlights common accessibility and usability issues. Geared towards content authors, Sa11y indicates errors or warnings at the source with a simple tooltip on how to fix…"
Sa11y Bookmarklet (2024) - "Sa11y is available as a bookmarklet and can be used in any desktop browser. Sa11y is designed for content authors and focuses on content related issues and successes…"
Sa11y WordPress Plugin - Adam Chaboryk.
"The WordPress plugin was released April 2022. Sa11y was also integrated into Joomla as a core feature (not just a plugin) as of version 4.1 and above, known as Jooa11y. Sa11y is also available in French, Polish and Ukrainian."
ScreenReader app - Appt Foundation.
"Download the free ScreenReader app and learn how to use VoiceOver and TalkBack."
Screen Curtain Bookmarklet - Bryan Garaventa.
"The Screen Curtain Bookmarklet allows engineers, testers, educators, and students to temporarily obscure web technologies while using screen readers in order to simulate the experience of using such technologies without sight."
SEE (Chrome Extension) - Q42.
"SEE lets you view the web as a user with a visual impairment might What is it like to be visually impaired? As a well-sighted person you'll likely never fully get to understand that. But SEE helps you imagine what it's like."
Show Decorative Bookmarklet (2024) - Steve Faulkner.
"This bookmarklet modifies the attributes of <img> elements and elements with role="img" on a webpage to ensure they are accessible and labeled as decorative images. It performs the following actions…"
SkipTo.js Version 4.1 - Jon Gunderson, Nicholas Hoyt, Prem Nawaz Khan, Brian Teeman, et al. "SkipTo.js Version 4.1 is designed to replace the traditional 'Skip To Main' link on web pages with a menu of Landmark Regions and high level headings (h1-6) on a web page to provide keyboard navigation to the page content. SkipTo.js has been recently updated to use the latest ARIA best practices and is open source and free to use on your websites."
Social Visual alt Text (Chrome Extension) - Nick DeNardis. "Visually show alternative text of social media images. This extension is designed for individuals who are interested in viewing the alt text applied to images without the need to inspect each image or use a screen reader…"
Some Simple Accessibility Bookmarklets (2024) - Russ Weakley. "A bookmarklet is a web browser bookmark with JavaScript commands that add new features. These small JavaScript snippets are stored as a bookmark URL and executed when clicked…"
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."
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).
Text on Background Image a11y Check - Andrew Brandwood. "This is a guide to foreground colour accessibility on a background image. It is intended as guide for designers and developers to test if their design solution is accessible. Change the text size, colour and position. It will check the dimensions of the textarea against the background image…"
Text Prescription (TRx) - Wayne Dick. "TRx is Wayne Dick's research/tool to help people find their personal "Text Prescription". A Text Prescription is the font size, color, family, line spacing, letter spacing and word spacing that works best for a user. It outputs a user style sheet."
Text Spacing Editor (Chrome Extension) - zmrhal.j.
"A tool for editing text spacing properties on the website. WCAG conformance values included.
This extension allows you to set custom values for the following text spacing properties: Line height, letter spacing, word spacing, and paragraph spacing. You can use it also as a way of testing the WCAG success criterion 1.14.12 - Text Spacing."
Togglific - Scott Vinkle
"Toggle web animations on or off; for people with vestibular disorders, who are prone to motion sickness, or who find animations distracting…"
Tommy's Inclusive Datepicker - Tommy Feldt. "A human-friendly datepicker. Supports natural language manual input through Chrono.js. Fully accessible with keyboard and screen reader…"
Tool List - Austin Cheney. "All tools are public Github repositories primary written in HTML and/or JavaScript."
Tools from the Cambridge Engineering Design Centre - University of Cambridge. "This page links to some of the tools from the Inclusive Design Toolkit, produced by the Cambridge Engineering Design Centre. These tools can help designers, students and managers to better understand and address the needs of a wide range of users…"
Top 80 Web Accessibility Resources & Tools - Matt Ahlgren. "This collection of 80 web accessibility resources is aimed at anyone interested in learning how to design, develop and test inclusive and accessible websi tes, apps and online documents…"
Track Which Element Has Focus (in chrome) - Kayce Basques.
"Suppose that you're testing the keyboard navigation accessibility of a page. When navigating the page with the Tab key, the focus ring sometimes disappears because the element that has focus is hidden. To track the focused element in DevTools…"
Universal Design Online Content Inspection Tool - Jacob Bates. "The Universal Design Online content Inspection Tool, or UDOIT (pronounced, 'You Do It') enables faculty to identify accessibility issues in Canvas by Instructure. It will scan a course, generate a report, and provide resources on how to address common accessibility issues."
YouDescribe - The Smith-Kettlewell Video Description Research and Development Center.
"An experimental platform for adding extended audio description to YouTube videos."
YouTube Caption Auditor (YTCA) - Terrill Thompson.
"YTCA is a utility to collect stats from one or more YouTube channels. It was designed to collect data related to captioning, but could be extended to support other data collection needs…"
veraPDF - veraPDF Consortium. "Designed to meet the needs of digital preservationists, and supported by leading members of the PDF software developer community, veraPDF is a purpose-built, open source, permissively licensed file-format validator covering all PDF/A parts and conformance levels…"
Visual ARIA Bookmarklet - Bryan Garaventa. "Right click the 'Visual ARIA Bookmarklet" button' then choose Add to Favorites or Add to Bookmarks. The Visual ARIA Bookmarklet can then be run upon any webpage by choosing the bookmarklet from within your Favorites or Bookmarks menu."
WAI-ARIA
Landmarks - David Todd. "This repository contains a
Firefox extension that enables keyboard navigation of
WAI-ARIA landmarks."
WAI-ARIA Usage - Gez Lemon. "A bookmarklet to evaluate WAI-ARIA according to the ARIA in HTML specification…"
WCAG 2.0 Parsing Validation Tools
- Jon Gibbins.
"Tools that filter the results of the W3C's Nu validator to show only results that are related to accessibility according to WCAG 2.0 Success Criterion 4.1.1 Parsing…"
WAI-ARIA Usage Bookmarklet - Gez Lemon. "Add the ARIA usage bookmarklet to evaluate document conformance requirements for use of ARIA attributes in HTML and allowed ARIA roles, states, and properties."
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.
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."
We4Authors Cluster - A preparatory action funded by the European Commission. "Based on a EU-funded pilot project called We4Authors, Funka and its partners will make a joint effort to increase the level of accessibility by default in web authoring tools…"
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"
What Has Focus? (Bookmarklet) - Scott Vinkle.
"When something recieves keyboard focus via Tab key, the current element will be logged to the JavaScript console so you can determine which element currently has focus! This will come in handy when debugging accessibility issues with somebody else's code or a third-party library."
WTFocus (Bookmarklet) (2023) - Ian Lloyd. "…When you run What The Focus, it goes through every focusable element on the page and collates that information and then reveals it as you focus. So now we can see what the accessible name is, the source of that accessible name, what the element's role is, is there a description, an accessible description. Plus we also have some more information such as what the HTML element is…Now, if I reveal this information here, more details, it'll also show you various other possible naming sources and which one provided it…"
YouDescribe - Smith-Kettlewell Video Description Research and Development Center. "An experimental platform for adding extended audio description to YouTube videos. Describe your favorite YouTube videos for the benefit of blind friends and strangers alike. Choose a video, pause it to insert brief descriptions, and tell us what you see! When viewed with YouDescribe, your voice is inserted into those spots in the video. Be descriptive, be brief, be part of the solution!"
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."
Va11yS - International Business Machines (IBM).
"Va11yS, or Verified Accessibility Samples, is a repository of live working code samples that designers and developers can easily access to test with different assistive technologies and tools."
WCAGify (2023) - Craig Abbott. Craig updated WCAGify to use WCAG 2.2. "WCAGify is a simple function for people who need to reference the Web Content Accessibility Guidelines frequently and are tired of copying and pasting…"
WCAG-EM Report Tool - WAI at W3C. The Website Accessibility Evaluation Report Generator has been updated with new options for selecting all success criteria in WCAG 2.1, or only new success criteria added in WCAG 2.1
WCAG 2.1 AA Success Criteria (Filter Tool) - CANAXESS. "Understanding what constitutes a failure is the first step towards testing in a consistent way and having consistent results. These categories group the WCAG "WCAG 2.1 translated into plain language. 103 tests categorised by content type, which removes the ambiguity from understanding success criteria…"
ColorBlindSim - Koen Kivits. "Color blindness affects approximately 1 in 22 people globally. Experience the world as they do, right from your browser. ColorBlindSim will ask for your permission to use your camera…"
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..."
Color Vision Deficiency (CVD) Simulator - Andrew Somers. "Simulates several types of Color Vision Deficiency side-by-side, either with your image or one of the many preset images, to demonstrate how different types of CVD perceive colors. The main page uses the Brettel model, and there is a second page that uses a model based on the sRGB color space."
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.
Colourblind Colour Palette Maker (2024) - Christian Lawson-Perfect. "This is a thing for picking contrasting colours. I made it because I'm severely colourblind (protanopia) so need to be guided by numbers rather than just looking at colours…"
Colour Contrast Determinator -
Vision Australia.
"We've developed a new online tool to help you find colour combinations that have sufficient contrast…"
NoCoffee (FireFox Extension) - Eitan Isaacson.
"NoCoffee vision simulator. Originally written by Aaron Leventhal for Chrome."
Phoropter: A Vision Simulator - Eitan Isaacson.
"After porting Aaron's NoCoffee extension to Firefox, I thought it would be neat to make a camera version of that. Something you can carry around with you, and take snapshots of websites, signs, or print material. You can then easily share the issues you see around you…"
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."
social-visual-alt-text - Nick DeNardis. "Browser extension to visually show image alt text on social…"
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.
ButtonBuddy - Stephanie Eckles - "Accessible button contrast generator. Learn what it takes to ensure your buttons or button-styled links have accessible contrast across all states and surfaces, then use the generator to check and adjust your button palette."
Button Contrast Checker - Aditus "Enter your domain and we test if your buttons have enough contrast and are compliant with WCAG 2.1…"
ColorBox - Lyft Design.
"Colorbox is a tool to produce color sets open-sourced by Lyft's design team."
Color Contrast Tool - Shimanta Krishna Bhuyan.
"A tool to check for color contrast using APCA…"
Color.Review - Anton Robsarve.
Find, test and explore accessible colors.
Color Safe - Donielle Berg and Adrian Rapp.
"Empowering designers with beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios…"
Color Theory - Tiffany B. Brown.
"Ever want to pick a start color and then click a button to create a color scheme? Me too. So I built it."
Color Vision Deficiency Simulator - Andrew Somers. "Clinically accurate simulator of color impaired vision including achromatopsia…"
Colors-For-All - Jean-Pierre Boutherin & Alexandre Saker.
"an online application which, unlike most other competitors, enables you to easily check color contrasts and WCAG compliance (AA or AAA levels as defined by WCAG 2.0) between a range of specific colors in one shot…"
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."
HTML Color Codes -
By Alex Dixon.
"Get HTML color codes, Hex color codes, RGB and HSL values with our color picker, color chart and HTML color names…"
Link Contrast Checker - WebAIM
"This new tool makes it easy to measure the complex WCAG contrast requirements for links that are not underlined within body text."
Accessible Palette- Eugene Fedorenko. "Accessible Palette is an app for building color systems with consistent lightness and predictable contrast ratios across color levels…"
CheckMyColours - Giovanni Scala. "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 Contrast Analyzer for Chrome - Greg Kraus. "Analyze a web page or portion of a web page for conformance with WCAG 2.0 Color Contrast requirements."
Contrast Analysis Widget - Ada Rose Edwards.
"…bookmarklet so you can run it on almost any site provided the Content Security Policy allows…"
Contrast Checker - GOVUK Design System Team.
Developed to help test WCAG 2.1 Success Criterion 1.4.11: Non-text Contrast.
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 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.
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.'"
Colour Contrast Determinator - Pierre Frederiksen. "This tool is a colour contrast analyser that makes it easy to find colours with sufficient contrast. Simply type in colour values or copy and paste a value form a style sheet, then use the sliders to adjust the colour - full height on the slider means the colour has sufficient contrast."
Contrast Checker - Nick Colley.
"Check constrast with the new WCAG 2.1 requirements…" It checks text contrast with object background and object contrast with page background.
Contrast Grid - Eightshapes.
"Test many foreground and background color combos for compliance with WCAG 2.0 minimum contrast. Include one color per line, with an optional comma-separated label…"
Contrast Ratio - Lea Verou. "As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over."
Reasonable Colors - Matthew Howell. "Reasonable Colors is an open-source color system for building accessible, nice-looking color palettes…"
The Contrast Triangle - Chip Cullen. A three-way color contrast checker. "Removing underlines from links in HTML text presents an accessibility challenge. In order for a design to be considered accessible, there is now a three-sided design contraint - or what I call "The Contrast Triangle". Your text, links and background colors must now all have sufficient contrast from each other. Links must have a contrast ratio of 3:1 from their surrounding text. This is so that colorblind users can tell what pieces of text are links. By not using underlines, a design has to rely on contrast alone to achieve this. Even the default blue link color in browsers doesn't meet this contrast level. Both the text and links have to have a contrast ratio of 4.5:1, or 3:1 if it's large scale text." Related article: "Let's say you're building a site, and you're working with a designer. They come to you with some solid designs, and you're ready to go. You're also a conscientious front end developer and you like to make sure the sites you build are accessible. The designs you're working from have some body copy, but you notice that the links inside the body copy are missing underlines. You are now in The Contrast Triangle…"
WhoCanUse - Corey Ginnivan. "…It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments. The Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more accessible. Just a tiny part of making the web more accessible is accommodating for those with a form of blindness or low vision. The standard grading system is a great start, but I thought I'd try to humanize the people who are affected by the different grades…"
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."
Beautiful Accessibility with Floating Focus - Guido Bouman. "A package published by Dutch tech agency Q42 to empower the end user, while keeping the designers on your team happy…"
clamp() calculator - Chris Burnell. "Handy little tool for calculating viewport-based clamped values."
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."
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."
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 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
Redundancy Checker - Google. A tool for checking your
markup for outdated CSS rules that don't match any of your
HTML.
CSS Specificity Calculator - Polypane. "Paste in any selector from CSS Selectors Level 4 - yes, that includes those special cases :is(), :where(), :not(), etc. - and out comes the Specificity.…"
https://polypane.app/css-specificity-calculator
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 Stats - "Writing CSS is hard, especially at scale. CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency in your design, track performance of your app, and diagnose complex areas before it snowballs out of control…"
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)."
DiagnostiCSS - "Visually detect any potentially invalid or inaccessible HTML markup…"
Dust-Me Selectors - James Edwards "Dust-Me Selectors is a development tool for Firefox and Opera, that scans your website to find unused CSS selectors."
Free Live Transcript - Mark Noonan et al.
"This is an open-source exporation of creating live transcripts of speech on the web, that can be displayed (and edited) in real time on a big screen, or watched on anybody's personal device…"
Good Line-Height Calculator - Fran Pérez. "Have you ever needed to create a type scale following an 8 point baseline grid, or really any grid, and had to spend extra time figuring out what should be the right line-height for every text size in the scale? No worries! The
line-height calculates the exact number so it always fits the baseline grid…"
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..."
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)."
Parsel - Lea Verou. "A tiny, permissive CSS selector parser…Parse & traverse CSS selectors, Calculate specificity, Only 2KB and no dependencies, Supports the entire Selectors 4 syntax, Permissive enough to work with a lot of potential future syntax…"
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."
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."
Specificity Visualizer - Francesco Schwarz "A visual way to analyze the specificity of selectors in CSS."
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..."
Stylify Me - Annabelle Yoon and Michael Mrowetz - "…gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. This tool allows the designer to research sites efficiently without the need to inspect each element, in order to be aware of current design trends and inform their own design decisions…"
TestMyCSS - Luke Fender. "Optimize CSS delivery by checking for redundancy, validation errors, and following best practices…"
Tools for Auditing CSS - Silvestar Bistrović. "Auditing CSS is not a common task in a developer's everyday life, but sometimes you just have to do it. Maybe it's part of a performance review to identify critical CSS and reduce unused selectors. Perhaps is part of effort to improve accessibility where all the colors used in the codebase evaluated for contrast. It might even be to enforce consistency…"
Unused CSS - Jitbit.
"Scan your website for unused CSS selectors."
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.
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 De-Crapulator - Ian Lloyd. "This is not 100% a11y related, but it is something that anyone who audits, provides remediation can benefit from (it's precisely why I created it)…Basically, a tool to remove all the crap from markup snippets, making it easier to see the bones of it…"
HTML Notepad - Andrew Fedoniouk.
"It is a WYSIWYG editor of structured documents: texts that have hierarchical and semantically meaningful (oxymoron, no?) structure: headers, list, plaintext islands, tables and so on…"
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.
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.
Role Reverser - Ian Lloyd - "If you find yourself using the 'role' attribute to indicate to a browser what a thing on the page is, you're probably better off using something else instead. Here's something that may help you…"
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.
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 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."
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."
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.
View Source - Neatnik. "View the source of any web page on the internet. Not everyone wants to fiddle with mobile developer settings to view a page's source. This web page makes it easy to do from anywhere…"
W3C HTML
Validator - Hugo Haas. Checks HTML documents
for conformance to W3C HTML and XHTML
recommendations and other HTML standards.
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.
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.
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."
SynCaps - William Hudson. Windows-based card sorting tool.
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."
Bookmarklet: Load All GitHub Comments (2024) - Eric A. Meyer. "…if you too wish GitHub had an easy way to load all the comments without you having to search for the 'Load more…' button yourself, now there's a bookmarklet made just for you…"
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.
Build Your robots.txt (2024) - Dark Visitors.
"Maintaining a robots.txt file will help protect your website from unwanted AI agent access. The Dark Visitors list is continuously updated so you can control the behavior of all known AI agents
Can I Email - @HTeuMeuLeu and the team at Tilt Studio. "Based on the original caniuse.com by @Fyrd and designed by @Lensco. Also based on the original name and idea by @M_J_Robbins and the team at Rebel. Launched by @HTeuMeuLeu and the team at Tilt Studio …"
Classic MS Paint, Revived - Isaiah Odhner.
"A nice web-based MS Paint remake and more. …Try it out. …The goal is to remake MS Paint (including its little-known features), improve on it, and to extend the types of images it can edit. So far, it does this pretty well…"
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..."
DuckDuckGo Privacy Essentials (Chrome Extension) - DuckDuckGo."Simple and seamless privacy protection for Chrome. Tired of being tracked online? We can help. At DuckDuckGo, we believe online privacy should be simple. That's why our extension has one single purpose - protecting your privacy in Chrome…"
Favikon -
favikon.com. Upload images, crop them, and create
favicons.
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..."
Fount - Nathan Ford.
"Fount will tell you which web font in your font-stack you are actually seeing - not just what is supposed to be seen. It'll also tell you the font size, weight, and style…"
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."
GitHub and BitBucket HTML Preview - niu tech
"…Enter URL of the HTML file to preview or prepend to the URL or use this bookmarklet while browsing GitHub or BitBucket…"
Google Lighthouse (FireFox Extension) - Google. "Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps…"
Lighthouse Bookmarklet (for FireFox) - Jeremy Keith. "…I had some qualms about installing a plug-in from Google into a browser from Mozilla, particularly as the plug-in page says: 'This is not a Recommended Extension. Make sure you trust it before installing'. Well, I gave it a go. It turns out that all it actually does is redirect to the online version of Lighthouse. 'Hang on', I thought. 'This could just be a bookmarklet!' So I immediately uninstalled the browser extension and made this bookmarklet…"
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."
HTML 5
Outliner - Geoffrey Sneddon. Tool for testing structure
in HTML5. It tests the outline algorithm.
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."
Jeffrey's Image Metadata Viewer - Jeffrey Friedl. "...I wrote a little online Exif viewer to view whatever data might be encoded…"
JPEG Compressor - Riley Grace. "Resize and optimize the images including GIFs, JPEG, PNG, JPG, SVG, and WEBP…"
jQuery to JavaScript Converter (2024) - Sachin Neravath.
"Convert your jQuery scripts to efficient JavaScript directly in your browser. Receive reliable, chainable, modern JavaScript code instantly that can be used as a minimal utility library, while keeping your existing code untouched…"
Line Break Remover Tool - textfixer.
"You can remove line breaks from blocks of text but preserve paragraph breaks with this tool…"
Lorem Ipsum Generator - Alex Dixon. "Quickly generate custom placeholder text from the classic Lorem Ipsum passage."
Lorem Ipsum Generator "Tool to generate latin placeholder texts commonly used to fulfill empty areas."
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".
Operator Lookup - Josh W. Comeau. "Enter a JavaScript operator to learn more about it…"
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.
PageSpeed Insights Bookmarklet (2024) - Jeremy Keith "…Drag that up to your desktop browser's bookmarks toolbar. Press it
Quick
Highlighter - Veign. "...create a webpage from your
source code."
Refresh Your Cache - refreshyourcache.
"...Refreshyourcache.com contains step by step guides to clear your browser's cache forcing it to download all latest data from a website…"
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..."
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..."
Unrot (that) Link (2023) - Remy Sharp.
"I present to you, a gift, a gift of a service that will 'unrot' your links, cleverly named… unrot.link."
Visual Event - Allan Jardine.
"Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end I've created Visual Event to help track events which are subscribed to DOM nodes…"
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."
Sonarwhal - Stephanie Drescher.
"Sonarwhal is a linting tool, built by and for the web community. The code is open source and lives under the JS Foundation. It helps web developers and designers like me keep up with the constant change in technology while simultaneously teaching how to code better websites."
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.
Tiff - Mu Ye.
"A type diff tool that visually contrasts the differences between two fonts…"
The Disenshittify Project (2024) - John Allsopp. "While the enshittification of the Web (and beyond) might seem far greater than any individual can even make the slightest dent in-you, we, can deshittify the Web one small piece at a time…"
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)."
Turn Off AI Overview in Google Set "Web" as Default (2024) - Tonya Ugnich.
"On May 15th Google released a new "Web" filter that removes "AI Overview" and other clutter, leaving only traditional web results. Here is how you can set "Google Web" as your default search engine…"
[Work In Progress]: Vosh - a third-party screen-reader for the Macintosh (2023) - João Santos. "After getting fed up with the general neglect of MacOS accessibility from Apple, and having wanted to work on something meaningful for quite some time, I decided to attempt something that for some reason nobody seems to have tried to do before: write a completely new screen-reader for that platform…"
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."
WebPageTest - Catchpoint. "Instantly test your site's performance in real browsers, devices, and locations around the world…"
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."
What Does My Site Cost? - Tim Kadlec.
"Find out how much it costs for someone to use your site on mobile networks around the world…"
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."
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
Build a Better Mobile Input - Alex Holachek. "By properly configuring a few key input attributes, you can make web forms much easier to use on mobile devices…"
Platform for app Accessibility -
By Abra and Q42. "Appt is a new platform for app accessibility, created by Abra and Q42. Appt's goal is to empower developers and organizations to build accessible apps for everyone. This beta version with data on accessibility features, code samples, guidelines and more will be expanded in the coming months…"
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..."
Touch Bookmarklet - Louis Rémi Babé.
"Simulate touch events (swipe, rotate, pinch) with a mouse…"
The W3C Mobile Checker - W3C.
"The Mobile Checker is a tool for Web developers who want to make their Web page or Web app work better on mobile devices…"
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."
FormLinter - Thoughtbot.
"...Enter a URL. FormLinter will find a form on the page and let you know if it can be improved…"
sus-app - Jeffrey Xiong, Claudia Ziegler Acemyan, and Philip Kortum. ReactNative app to help usability researchers collect SUS (system usability scale) scores
Tools for Unmoderated Usability Testing - Kathryn Whitenton "Many platforms for unmoderated usability testing have similar features; to choose the best tool for your needs, focus on t
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."
userpoll.io - Peter Krantz. "Find out what users think about your system. The system usability survey gives you rapid feedback on the overall usability of your application. No signup required…"
RDFaCE - Ali Khalili
and Soren Auer. "RDFaCE is an RDFa Content Editor based on
TinyMCE. It supports different views for semantic content
authoring and uses existing Semantic Web APIs to facilitate
the annotation and editing of RDFa contents..."
RSS Anything (2024) - Jerome. "Transform any old website with a list of links into an RSS Feed…"
W3C Feed Validation Service - W3C. "This is the
W3C Feed Validation Service, a free service that checks
the syntax of Atom or RSS feeds. The Markup Validation
Service is also available if you wish to validate
regular Web pages."
