Link
A link widget provides an interactive reference to a resource. The target resource can be either external or local, i.e., either outside or within the current page or application.
— Link Pattern, WAI ARIA Authoring Practices Guide (APG)
§ Notes
Missing.css uses the <a>
element for links.
When an <a>
tag is used to link to content on the same page, missing.css will provide the following visual context:
- Heading elements (
<h1>
,<h2>
, etc...) - A
:before
pseudo-element whose color is determined by the--accent
CSS variable. - Details elements
- On supported browsers, the
<details>
element will be opened. - Other elements (aka the current
:target
) - An outline of the element whose color is determined by the
--fg
CSS variable.
See the example below for visual reference.
Keyboard Interaction
- Enter : Executes the link and moves focus to the link target (when focused).
§ Example
Menu:
Section Heading
This is some content.
- Apples
- Mangos
- Bananas
Details Heading
This is some content.
If your browser supports ::details-content
, then clicking the link above will display this.