Web Accessibility Training
Toronto, Montreal, Ottawa and worldwide via Webex More

Accessible Name and Accessible Description Calculator

Instructions:

  • For interactive elements (buttons, links, fields etc.) just drop the code in and hit paste. RESULTS window will calculate the focused element as you tab through (or click on) on interactive elements in the Rendered content field
  • For a static element (h1, h2, nav, div etc.): You have to identify which node to test. Add data-id="p1" to it and hit paste. RESULTS will show the calculated value for that element.
NOTE: You can test lots of interactive elements and one static element after pasting the code. The Results on paste will calculate the (static) element with data-id="p1" then tab through the interactive elements for their calculated name and desciption.

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 data-id="p1" title="Happy day">Heading 1 with title </h1>
<label>foo <input type="text" aria-describedby="p2"></label><br>
<span id="p2">Some error messages</span><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


All Blog Articles


CONTACT US

For a quote or just to chat about your organization's needs


EMAIL

help at can hyphen adapt dot com, (spoken phonetically to trick spam bots)

PHONE

six one three, eight zero six, nine zero zero five

SOCIAL MEDIA