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.
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:
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