apex4x
Version:
The Comprehensive ARIA Development Suite
374 lines (371 loc) • 16 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Footnotes (Internal Content) - Apex 4X Technical Style Guide</title>
<meta name="description" content="Scalable ARIA Components" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
type="text/css"
href="../../_common/css/components-style.css"
/>
<link rel="stylesheet" type="text/css" href="css/footnote.css" />
<script src="/4X/4X.js"></script>
<script src="js/setup.js"></script>
</head>
<body>
<div class="bypass">
<ul class="list-unstyled">
<li>
<a
class="skip--link"
href="javascript:void(0);"
onclick="document.getElementById('main').focus();"
>
Skip to Main Content
</a>
</li>
</ul>
</div>
<div class="outer-wrapper">
<header class="header flex-container">
<div class="logo flex-item">
<a href="https://whatsock.com">
<img
alt="WhatSock : Changing the world one step at a time"
src="../../_common/img/whatsock.svg"
/>
</a>
</div>
<div class="site-name flex-item">
<strong>Apex 4X</strong> Technical Style Guide
</div>
</header>
<div class="wrapper">
<div class="left-aside">
<nav>
<p>
<a href="/Tutorials/Beginner-Introduction.htm"
>Beginner Tutorial</a
>
</p>
<h2>Template Examples</h2>
<ul>
<li><a href="../../index.htm">Back to Components</a></li>
<li><a href="../index.htm">Back to Parent Widget</a></li>
<li><a href="index.htm" aria-current="page">Internal</a></li>
<li>
<a href="../Internal - Straylight/index.htm"
>Internal - Straylight</a
>
</li>
</ul>
</nav>
</div>
<main id="main" class="main" tabindex="-1">
<div class="demo-block flex-container">
<div class="aria-accordion component flex-item">
<h1 class="pageTitle">
Footnotes <small>Internal Content</small>
</h1>
<p>
Some say that the Azores are the legendary peaks of
<span class="aria-footnote"
>Atlantis<a aria-description="Atlantis" href="#f1"
><sup>1</sup></a
></span
>
after it was swallowed by the sea, which is easy to believe,
especially after visiting
<span class="aria-footnote"
>Furnas<a aria-description="Furnas" href="#f3"
><sup>2</sup></a
></span
>; bells ringing from church steeples, storm driven thunder
clouds over head, old manor homes with their windows sparkling
in the sunlight, wind-swept mountain ridges over crystalline
lakes, its haunting beauty is unparalleled.
</p>
<p>
"Going home" is a concept with entirely different significance
for those who have been uprooted from their home and now live
elsewhere. TO me going home is returning to the paradisiacal
island of
<span class="aria-footnote"
>Sao Miguel<a aria-description="Sao Miguel" href="#f2"
><sup>3</sup></a
></span
>, where at every corner is a discovery and a memory. The valley
of
<span class="aria-footnote"
>Furnas<a aria-description="Furnas" href="#f3"
><sup>4</sup></a
></span
>, with the exception of a few road upgrades and Wi-Fi, has
remained the same as I always remembered.
<span class="aria-footnote"
>Furnas<a aria-description="Furnas" href="#f3"
><sup>5</sup></a
></span
>
is a magical village where volcanic fumaroles, effervescent
springs, and geysers are part of the natural landscape.
Everywhere the scents of baking bread and fresh fruit mingle
with the scent of the ever breathing volcano.
</p>
<p>
The valley of
<span class="aria-footnote"
>Furnas<a aria-description="Furnas" href="#f3"
><sup>6</sup></a
></span
>
nestles within Sao Miguel's volcanic crater, venting hot mineral
springs where fresh corn is cooked in burlap sacks immersed in
boiling fumaroles; where botanical gardens are home to black and
white swans, and exotic plants and fauna from around the world.
The botanical gardens of the Hotel Terra Nostra are world
renowned for its age and the variety of species there, but to me
it is what I imagined the Garden of Eden to be.
</p>
<p>
The sounds are as magical as the sights. Countless little birds
call the tree tops home, and delight visitors with their
constant singing; various creeks murmur in tune with the
rustling foliage. The main feature of the gardens is the
swimming pool fed by a natural hot ferrous spring; it is large
enough to often be confused by tourists as a small lake.
Swimming in the pool is a mystical experience; the water is warm
and constantly pouring into the pool. Due to the minerals, one
becomes noticeably more buoyant and time ceases to have its
normal meaning. On cold days, the mist hovers and iridescent
dragon flies are easily mistaken for fairies.
</p>
<p>
AS a child, this park was my playground. I played in its caves,
climbed its trees, swam for daily eternities and could not
conceive that anyone could ever be alive and not have such a
garden to visit. As an adult returning as often as I can, this
park gives the constant assurance that, although I live
elsewhere, I still belong to the
<span class="aria-footnote"
>Azores<a aria-description="Azores" href="#f4"
><sup>7</sup></a
></span
>. Furnas is a paradise where the soft clopping of hooves on
cobbled streets, the babbling of the brook beneath the mill at
twilight, and the smell of fresh baked bread and wild
blackberries filling the crisp morning air, call to my heart
with a ceaseless whisper to come home.
</p>
<p>
<i>
(From the travel log of Ana Cristina Wallenstein-Garaventa)</i
>
</p>
<div id="footnotesDil" class="intro"> </div>
<div
role="region"
aria-label="Footnotes"
id="footnotes"
class="intro tal"
>
<p role="region" aria-label="Definition">
<a
title="Go Back"
aria-label="Go Back"
href="#"
class="footnote"
id="f1"
><span>†</span></a
>
Atlantis (in Greek, "island of Atlas") is a legendary island
first mentioned in Plato's Footnotesues Timaeus and Critias,
written about 360 BC. According to Plato, Atlantis was a naval
power lying "in front of the Pillars of Hercules" that
conquered many parts of Western Europe and Africa 9,000 years
before the time of Solon, or approximately 9600 BC. After a
failed attempt to invade Athens, Atlantis sank into the ocean
"in a single day and night of misfortune".
<a
href="https://en.wikipedia.org/wiki/Atlantis"
target="_blank"
>Atlantis - Wikipedia, the free encyclopedia</a
>
</p>
<p role="region" aria-label="Definition">
<a
title="Go Back"
aria-label="Go Back"
href="#"
class="footnote"
id="f2"
><span>†</span></a
>
São Miguel Island (Portuguese for Saint Michael),
nicknamed "The Green Island", is the largest and most populous
island in the Portuguese Azores archipelago. The island covers
759 km2 (293 sq mi) and has around 140,000 inhabitants, 45,000
of these people located in the largest city in the
archipelago: Ponta Delgada.
<a
href="https://en.wikipedia.org/wiki/S%C3%A3o_Miguel_Island"
target="_blank"
>São Miguel Island - Wikipedia, the free
encyclopedia</a
>
</p>
<p role="region" aria-label="Definition">
<a
title="Go Back"
aria-label="Go Back"
href="#"
class="footnote"
id="f3"
><span>†</span></a
>
Furnas is a civil parish in the municipality of
Povoação on the island of São Miguel in the
Azores. The population in 2001 was 1,541, its density is
44.76/km² and the area is 34.43 km². The parish is
one of the largest in the island and in the Azores. It is
located east of Lagoa and Ponta Delgada, west of
Povoação and southeast of Ribeira Grande.
<a href="https://en.wikipedia.org/wiki/Furnas" target="_blank"
>Furnas - Wikipedia, the free encyclopedia</a
>
</p>
<p role="region" aria-label="Definition">
<a
title="Go Back"
aria-label="Go Back"
href="#"
class="footnote"
id="f4"
><span>†</span></a
>
The Archipelago of the Azores is composed of nine volcanic
islands situated in the middle of the North Atlantic Ocean,
and is located about 1,500 km (930 mi) west from Lisbon and
about 3,900 km (2,400 mi) east from the east coast of North
America. The islands, and their economic exclusion zone, form
the Autonomous Region of the Azores, one of the two autonomous
regions of Portugal. Its main industries are: agriculture,
dairy farming (for cheese and butter products primarily),
minor livestock ranching, fishing and tourism, which is
becoming the major service activity in the region; added to
which, the government of the Azores employs a large percentage
of the population directly or indirectly in many aspects of
the service and tertiary sectors.
<a href="https://en.wikipedia.org/wiki/Azores" target="_blank"
>Azores - Wikipedia, the free encyclopedia</a
>
</p>
</div>
</div>
<div class="keyboard flex-item">
<h2>The footnotes are keyboard accessible:</h2>
<ul>
<li>
Press the <kbd>Tab</kbd> and <kbd>Shift</kbd>+<kbd>Tab</kbd>
keys to jump between footnotes.
</li>
<li>
Press the <kbd>Enter</kbd> key to jump to and from each
footnote.
</li>
<li>Mouse users can click the desired footnote as usual.</li>
</ul>
</div>
</div>
</main>
</div>
<footer class="footer">
<div class="flex-container-row">
<div class="flex-item">
<h2>License</h2>
<p>
Apex 4X including all template design patterns is distributed
under the terms of the Open Source Initiative OSI - MIT License,
and may be freely used for any purpose within any web technology.
</p>
</div>
<div class="flex-item">
<h2>Resources</h2>
<ul>
<li>
<a target="ext" href="https://github.com/WhatSock/apex"
>Apex 4X on GitHub</a
>
</li>
<li>
<a
target="ext"
href="https://whatsock.github.io/visual-aria/github-bookmarklet/visual-aria.htm"
>Visual ARIA Bookmarklet</a
>
</li>
<li>
<a
target="ext"
href="https://chrome.google.com/webstore/detail/visual-aria/lhbmajchkkmakajkjenkchhnhbadmhmk"
>Visual ARIA Chrome Extension</a
>
</li>
<li>
<a
target="ext"
href="https://addons.mozilla.org/en-US/firefox/addon/visual-aria/"
>Visual ARIA Firefox Extension</a
>
</li>
<li>
<a target="ext" href="https://github.com/AccDC/visual-aria"
>Visual ARIA on GitHub</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/matrices/"
>ARIA Role Conformance Matrices</a
>
</li>
<li>
<a target="ext" href="https://whatsock.com/training/"
>Accessibility Tree Training Guide</a
>
</li>
</ul>
</div>
<div class="flex-item">
<h2>Acknowledgements</h2>
<ul class="list--horizontal">
<li>
Author and developer:
<a target="ext" href="https://www.linkedin.com/in/bgaraventa"
>Bryan Garaventa</a
>
</li>
<li>
Website designer:
<a target="ext" href="https://gericci.me/">Angela Ricci</a>
</li>
<li>
Style and markup editor:
<a
target="ext"
href="https://www.linkedin.com/in/laurence-lewis-77520365/"
>Laurence Lewis</a
>
</li>
</ul>
</div>
</div>
</footer>
</div>
</body>
<script
async
src="https://api.whatsock.com/accdc-updates.js?4x=template"
></script>
</html>