Developer Checklist — JavaScript Appendices

Correct code

JS_G_A5: Interactive content must have an associated label or short instructions about its behaviour

This example shows how interactive content must be properly labeled using ARIA.

It can also be helpful to provide short instructions for custom widgets, telling the user how the widget will behave, or what keystrokes can be used to interact with it.

Live Demo

The example below shows a button, which would be the trigger for a color-picker (although the picker isn't implemented here).

This demonstrates how the trigger is labeled using the aria-describedby to create a semantic, behavioral and programatic association between the two:

Please choose a color:

JavaScript Code

The JavaScript code for this example can be found in: JS_G_A5.js

The CSS for this example can be found in: JS_G_A5.css