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