Developer Checklist — JavaScript Appendices

Correct code

JS_C_A9: Insert dynamic content into the DOM immediately following its trigger element

This example shows a link that triggers a popup layer; the layer contains a brief description of the term, and links to more information.

The popup layer is inserted into the DOM immediately after its triggering link, so that when a keyboard user presses Tab, the focus will move to the first focusable item inside the layer (the first of the two links), as the user would expect. But even if the layer didn't contain any focusable items, we would still insert it directly after the trigger, so that its content comes next in the reading order.

Live Demo

Click the structural labels link in the quote below, and a small popup layer will appear with links to more information:

Assistive technologies can derive information from their attributes and text; for example, a dynamic menu would be made using links organised into nested lists, in which the menu levels are denoted by the hierarchy, and by the use of structural labels around each top-level link.

JavaScript Code

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

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