<article class="footnote__counter">
<p>To understand how some of the thoughts evolved around this design system, watch Mike Monteiro’s talk about design destroying the world,
<sup><a href="#footnote-1" class="footnote__label" id="footnote-ref-1" aria-describedby="footnote-container-label" data-reference="1"><span class="u-sr-only">Link to footnote</span></a></sup>Aaron Gustafson’s presentations on performance as a
user experience,
<sup><a href="#footnote-2" class="footnote__label" id="footnote-ref-2" aria-describedby="footnote-container-label" data-reference="2"><span class="u-sr-only">Link to footnote</span></a></sup>Una Kravets’ image optimization presentation,
<sup><a href="#footnote-3" class="footnote__label" id="footnote-ref-3" aria-describedby="footnote-container-label" data-reference="3"><span class="u-sr-only">Link to footnote</span></a></sup>Damien Senger describing readability on the web,
<sup><a href="#footnote-4" class="footnote__label" id="footnote-ref-4" aria-describedby="footnote-container-label" data-reference="4"><span class="u-sr-only">Link to footnote</span></a></sup>and Dafydd Henke-Reed’s elegant accessibility presentation.
<sup><a href="#footnote-5" class="footnote__label" id="footnote-ref-5" aria-describedby="footnote-container-label" data-reference="5"><span class="u-sr-only">Link to footnote</span></a></sup></p>
<p>Of course, there are many ways to use footnotes.<sup><a href="#footnote-6" class="footnote__label" id="footnote-ref-6" aria-describedby="footnote-container-label" data-reference="6"><span class="u-sr-only">Link to footnote</span></a></sup></p>
<footer class="footnote__container">
<h2 class="u-sr-only" id="footnote-container-label">Footnotes</h2>
<ol>
<li class="footnote__item" id="footnote-1">
<a href="https://vimeo.com/68470326" target="_blank" aria-describedby="ext-site" class="footnote__source-link" data-footnote="1">How Designers Destroyed the World</a>,
<span>Mike Monteiro, Webstock <time>2013</time></span>
<a href="#footnote-ref-1" aria-label="Back to content" class="footnote__back-link" data-back-link=1>
↩</a>
</li>
<li class="footnote__item" id="footnote-2">
<a href="https://aneventapart.com/news/post/performance-as-user-experience-by-aaron-gustafson-aea-video" target="_blank" aria-describedby="ext-site" class="footnote__source-link" data-footnote="2">Performance as User Experience</a>,
<span>Aaron Gustafson, An Event Apart <time>2017</time></span>
<a href="#footnote-ref-2" aria-label="Back to content" class="footnote__back-link" data-back-link=2>
↩</a>
</li>
<li class="footnote__item" id="footnote-3">
<a href="https://aneventapart.com/news/post/the-joy-of-optimizing-images-by-una-kravets-aea-video" target="_blank" aria-describedby="ext-site" class="footnote__source-link" data-footnote="3">The Joy of Image Optimization</a>,
<span>Una Kravets, An Event Apart <time>2017</time></span>
<a href="#footnote-ref-3" aria-label="Back to content" class="footnote__back-link" data-back-link=3>
↩</a>
</li>
<li class="footnote__item" id="footnote-4">
<a href="https://youtu.be/u1v_G1yQhTU" target="_blank" aria-describedby="ext-site" class="footnote__source-link" data-footnote="4">Readability & Web</a>,
<span>Damien Senger, Inclusive Design 24 (ID24) <time>2018</time></span>
<a href="#footnote-ref-4" aria-label="Back to content" class="footnote__back-link" data-back-link=4>
↩</a>
</li>
<li class="footnote__item" id="footnote-5">
<a href="https://youtu.be/mlMfynLKGXA" target="_blank" aria-describedby="ext-site" class="footnote__source-link" data-footnote="5">Elegant Accessibility (video)</a>,
<span>Dafydd Henke-Reed, Inclusive Design 24 (ID24) <time>2018</time></span>
<a href="#footnote-ref-5" aria-label="Back to content" class="footnote__back-link" data-back-link=5>
↩</a>
</li>
<li class="footnote__item" id="footnote-6">
<span>Footnotes also offer a chance for meta commentary or tangential details that inform the topic at hand. They do not always contain a citation.</span>
<a href="#footnote-ref-6" aria-label="Back to content" class="footnote__back-link" data-back-link=6>
↩</a>
</li>
</ol>
</footer>
</article>
<article class="footnote__counter">
<p>To understand how some of the thoughts evolved around this design system, watch Mike Monteiro’s talk about design destroying the world,
<sup><a href="#footnote-1" class="footnote__label" id="footnote-ref-1" aria-describedby="footnote-container-label" data-reference="1"><span class="u-sr-only">Link to footnote</span></a></sup>Aaron Gustafson’s presentations on performance as a user experience,
<sup><a href="#footnote-2" class="footnote__label" id="footnote-ref-2" aria-describedby="footnote-container-label" data-reference="2"><span class="u-sr-only">Link to footnote</span></a></sup>Una Kravets’ image optimization presentation,
<sup><a href="#footnote-3" class="footnote__label" id="footnote-ref-3" aria-describedby="footnote-container-label" data-reference="3"><span class="u-sr-only">Link to footnote</span></a></sup>Damien Senger describing readability on the web,
<sup><a href="#footnote-4" class="footnote__label" id="footnote-ref-4" aria-describedby="footnote-container-label" data-reference="4"><span class="u-sr-only">Link to footnote</span></a></sup>and Dafydd Henke-Reed’s elegant accessibility presentation.
<sup><a href="#footnote-5" class="footnote__label" id="footnote-ref-5" aria-describedby="footnote-container-label" data-reference="5"><span class="u-sr-only">Link to footnote</span></a></sup></p>
<p>Of course, there are many ways to use footnotes.<sup><a href="#footnote-6" class="footnote__label" id="footnote-ref-6" aria-describedby="footnote-container-label" data-reference="6"><span class="u-sr-only">Link to footnote</span></a></sup></p>
<footer class="footnote__container">
<h2 class="u-sr-only" id="footnote-container-label">Footnotes</h2>
<ol>
{% for footnote in footnotes %}
<li class="{{ footnote.classList }}" id="{{ footnote.linkId }}">
{% if (footnote.linkHref) %}
<a href="{{ footnote.linkHref }}" target="_blank" aria-describedby="{{ footnote.describedBy }}" class="footnote__source-link" data-footnote="{{ footnote.counter }}">{{ footnote.linkText }}</a>,
{% endif %}
<span>{{ footnote.text }}</span>
<a href="{{ footnote.backLinkHref }}" aria-label="{{ footnote.backLinkAriaLabel }}" class="footnote__back-link" data-back-link={{ footnote.counter}}>
{{ footnote.backLinkContent }}</a>
</li>
{% endfor %}
</ol>
</footer>
</article>
{
"footnotes": [
{
"classList": "footnote__item",
"linkId": "footnote-1",
"linkHref": "https://vimeo.com/68470326",
"describedBy": "ext-site",
"linkText": "How Designers Destroyed the World",
"text": "Mike Monteiro, Webstock <time>2013</time>",
"backLinkHref": "#footnote-ref-1",
"backLinkAriaLabel": "Back to content",
"backLinkContent": "↩",
"counter": 1
},
{
"classList": "footnote__item",
"linkId": "footnote-2",
"linkHref": "https://aneventapart.com/news/post/performance-as-user-experience-by-aaron-gustafson-aea-video",
"describedBy": "ext-site",
"linkText": "Performance as User Experience",
"text": "Aaron Gustafson, An Event Apart <time>2017</time>",
"backLinkHref": "#footnote-ref-2",
"backLinkAriaLabel": "Back to content",
"backLinkContent": "↩",
"counter": 2
},
{
"classList": "footnote__item",
"linkId": "footnote-3",
"linkHref": "https://aneventapart.com/news/post/the-joy-of-optimizing-images-by-una-kravets-aea-video",
"describedBy": "ext-site",
"linkText": "The Joy of Image Optimization",
"text": "Una Kravets, An Event Apart <time>2017</time>",
"backLinkHref": "#footnote-ref-3",
"backLinkAriaLabel": "Back to content",
"backLinkContent": "↩",
"counter": 3
},
{
"classList": "footnote__item",
"linkId": "footnote-4",
"linkHref": "https://youtu.be/u1v_G1yQhTU",
"describedBy": "ext-site",
"linkText": "Readability & Web",
"text": "Damien Senger, Inclusive Design 24 (ID24) <time>2018</time>",
"backLinkHref": "#footnote-ref-4",
"backLinkAriaLabel": "Back to content",
"backLinkContent": "↩",
"counter": 4
},
{
"classList": "footnote__item",
"linkId": "footnote-5",
"linkHref": "https://youtu.be/mlMfynLKGXA",
"describedBy": "ext-site",
"linkText": "Elegant Accessibility (video)",
"text": "Dafydd Henke-Reed, Inclusive Design 24 (ID24) <time>2018</time>",
"backLinkHref": "#footnote-ref-5",
"backLinkAriaLabel": "Back to content",
"backLinkContent": "↩",
"counter": 5
},
{
"classList": "footnote__item",
"linkId": "footnote-6",
"text": "Footnotes also offer a chance for meta commentary or tangential details that inform the topic at hand. They do not always contain a citation.",
"backLinkHref": "#footnote-ref-6",
"backLinkAriaLabel": "Back to content",
"backLinkContent": "↩",
"counter": 6
}
]
}
.footnote {
&__counter {
counter-reset: footnotes; // Initialize a `footnotes` counter on the wrapper
sup {
position: relative;
top: 5px;
left: -5px;
}
}
&__container {
margin-top: 50px;
border-top: 1px solid color(neutral, lighter);
padding-left: $base-spacing;
}
&__label {
padding-left: 5px;
counter-increment: footnotes; // Increment the counter at each new reference
&::after {
@include font-size(16);
margin-left: -6px;
cursor: pointer;
vertical-align: super;
content: '['counter(footnotes)']'; // display current state (#) of counter
}
&:focus,
&.has-focus { outline: 2px solid color(success, base); }
}
&__item {
@include font-size(18);
border-bottom: 2px solid transparent;
&:target { border-bottom: 2px solid color(success, base); } // highlight the referenced footnote
}
&__source-link,
&__back-link {
&:focus,
&.has-focus { outline: 2px solid color(success, base); }
}
ol { padding-left: 20px; }
}
const footnotes = document.querySelectorAll('[data-footnote]');
const textRefs = document.querySelectorAll('[data-reference]');
const backLinks = document.querySelectorAll('[data-back-link]');
for (let i = 0; i < textRefs.length; i++) {
const reference = textRefs[i];
// focus events
reference.addEventListener('focusin', (e) => {
e.target.classList.add('has-focus');
});
reference.addEventListener('focusout', (e) => {
e.target.classList.remove('has-focus');
});
// arrow keys
textRefs[i].addEventListener('keydown', function(e) {
if (e.keyCode == 37) {
if (this.previousElementSibling) {
this.previousElementSibling.focus();
}
} else if (e.keyCode == 39) {
if (this.nextElementSibling) {
this.nextElementSibling.focus();
}
}
// tab
if (e.keyCode == 9) {
if(textRefs[i].classList.contains('has-focus') ) {
textRefs[i].classList.remove('has-focus');
}
textRefs[i].classList.add('has-focus');
}
});
}
for (let i = 0; i < backLinks.length; i++) {
const backLink = backLinks[i];
// find link in text on click and add focus indicator class
backLink.addEventListener('click', (e) => {
let textRef = e.target.getAttribute('href').replace(/#/gi, '');
let linkToFocus = document.getElementById(`${textRef}`);
linkToFocus.classList.add('has-focus');
for (let i = 0; i < textRefs.length; i++) {
if( (textRefs[i].classList.contains('has-focus')) && (textRefs[i] !== linkToFocus) ) {
textRefs[i].classList.remove('has-focus');
}
}
});
// find link in text on Enter and add focus indicator class
backLink.addEventListener('keydown', (e) => {
if (e.keyCode === 13) {
let textRef = e.target.getAttribute('href').replace(/#/gi, '');
let linkToFocus = document.getElementById(`${textRef}`);
linkToFocus.classList.add('has-focus');
for (let i = 0; i < textRefs.length; i++) {
if( (textRefs[i].classList.contains('has-focus')) && (textRefs[i] !== linkToFocus) ) {
textRefs[i].classList.remove('has-focus');
}
}
}
});
}
Footnotes are used to cite references or to add additional information or commentary on a designed part of the text above it. Each footnote should appear at the bottom of the page in an ordered list that corresponds to its numbered in-text reference.
When acting as citations for quotes or references to other sources, footnotes should contain a link to the original source and its title.
This footnote example is adapted from Accessible Footnotes with CSS.
href attribute that matches the id on the footnote itself. These have the class .footnote__label and the attribute aria-describedby="footnote-container-label".id="footnote-container-label". This serves as a description for the footnote references in the main content.aria-describedby attribute indicating an external site.aria-label of "Back to Content". Links in the text must have an id that matches the href on the back-to-content link in the footnote so readers can return to the correct location.Tab = Move to next focusable element← → = move to next footnote link in page contentEnter or Return = Navigate to the selected linkControl + Option ← → = Navigate through content with screen readerWhen interacting with in-content links to footnotes, screen readers will announce the following:
When interacting with the footnote container, screen readers will announce the following: