ARIA Footnotes

Expected behaviors

Each footnote must be actionable using both the keyboard and the mouse, focus must move to the beginning of the definition when activated, and focus must move back to the footnote when the back link is activated.

The 4X ARIA Footnote module automatically configures all required focus handling and interaction events to ensure accessibility.

The following attributes are handled automatically by the Footnote module:

  • aria-controls
  • aria-flowto

HTML syntax

The Footnote module utilizes traditional skip link syntax, which consists of a standard link with an href attribute. The href attribute includes an id reference to the associated footnote definition, by pointing to a back link at the beginning of the definition content. 

<!-- The footnote skip link -->

[Key Word or Phrase Here] <a class="aria-footnote" href="#footnoteId1"><sup>1</sup></a>

<!-- The footnote back link -->

<a id="footnoteId1" href="#" class="footnote-back-link" aria-label="Go Back" >†</a> [Definition Content Here]

Multiple footnotes that reference the same definition are supported automatically.

JavaScript syntax

$A.setFootnotes( DOMNodeListOrCSSSelectorForFootnoteLinks , {
// Configuration key / value map
});
  • Module file: Footnote.js
  • Requires: Velocity.js, VelocityUI.js, Animate.js, SmoothScroll.js.

Parameters

  1. A DOM element or CSS selector to specify the triggering element
  2. A configuration map to customize behaviors and options

Configuration

{

// Modify the smooth scrolling animation effects.
override: {
duration: 550,
easing: "ease-in"
}

}