Accessible Name and Accessible Description Calculator
Instructions:
- For interactive elements (buttons, links, fields etc.) just drop the code in and hit paste. RESULTS will update to show the calcaltion for the focused element as you tab through (or click on) the Rendered content field
- For a static element: (h1, h2, nav, div etc.) add id="test" to the element you want to test and hit paste. RESULTS will show the calculated value for element with id="test".
Drop code in the box below
Rendered content will appear here
RESULTS: Calculation Accessible Name and Description
Here's some example code to drop in to test
<h1 id="test" title="Happy day">Heading 1 with title </h1>
<label>foo <input type="text"></label><br>
<label>boo <input type="text"></label><br>
<label>hoo <input type="text"></label><br>
Project download:
Authored by Bryan Garaventa, refactoring contributions by Tobias Bengfort, layout and conceptual tweaks by David MacDonald
https://github.com/WhatSock/w3c-alternative-text-computation
There is also a cool plugin for Chrome
David MacDonald is a veteran WCAG member, co-editor of Using WAI ARIA in HTML5 and HTML5 Accessibility Task Force Member. Opinions are my own.
Feel free to comment on Twitter @davidmacd
CONTACT US
For a quote or just to chat about your organization's needs
