Citing sources

Citations

Default to Chicago Manual of Style citation styles unless another format is preferred in the field the content represents (e.g. use APA format for a psychology-oriented guide).

Do not use underlines stylistically. Underlines on the web are specifically for hyperlinks.

Rebecca Mead, The Prophet of Dystopia, New Yorker, April 17, 2017, 43.


<p>Rebecca Mead, <q>The Prophet of Dystopia</q>, <cite>New Yorker</cite>, <date>April 17, 2017</date>, 43.</p>

From Struggle to Success: Context-Aware Guidance for Screen Reader Users in Computer Use, CHI '26 Proceedings, accessed 10 July 2026, https://dl.acm.org/doi/full/10.1145/3772318.3790661.


<p><q>From Struggle to Success: Context-Aware Guidance for Screen Reader Users in Computer Use</q>, CHI '26 Proceedings, accessed <date>10 July 2026</date>, <a href="https://dl.acm.org/doi/full/10.1145/3772318.3790661">https://dl.acm.org/doi/full/10.1145/3772318.3790661</a>.</p>

Footnotes

When a web page has a significant number of citations in it, similar to an academic paper, the citations may be better consolidated in a footnotes list at the bottom of the content with reference links in the content referring to those citations. This method may also be considered when aggregating a person’s body of works on a profile page.

This method was adapted from Accessible footnotes with CSS.

To understand how some of the thoughts evolved around this design system, watch Mike Monteiro’s talk about design destroying the world, Aaron Gustafson’s presentations on performance as a user experience, Una Kravets’ image optimization presentation, Damien Senger describing readability on the web, and Dafydd Henke-Reed’s elegant accessibility presentation.


<article>
 <p>To understand how some of the thoughts evolved around this design system, watch Mike Monteiro’s talk about <a href="#f-1" id="ref-1" aria-describedby="f-label">design destroying the world</a>, Aaron Gustafson’s presentations on <a href="#f-2" id="ref-2" aria-describedby="f-label">performance as a user experience</a>, Una Kravets’ <a href="#f-3" id="ref-3" aria-describedby="f-label">image optimization</a> presentation, Damien Senger describing <a href="#f-4" id="ref-4" aria-describedby="f-label">readability on the web</a>, and Dafydd Henke-Reed’s <a href="#f-5" id="ref-5" aria-describedby="f-label">elegant accessibility</a> presentation.</p>

 <footer class="footnote">
  <h2 hidden="hidden" id="f-label">Footnotes</h2>
   <ol>
    <li id="f-1"><a href="https://vimeo.com/68470326" aria-describedby="ext-site">How Designers Destroyed the World</a>, Mike Monteiro, Webstock 2013 <a href="#ref-1" aria-label="Back to content">↩</a></li>
    <li id="f-2"><a href="https://aneventapart.com/news/post/performance-as-user-experience-by-aaron-gustafson-aea-video" aria-describedby="ext-site">Performance as User Experience</a>, Aaron Gustafson, An Event Apart 2017 <a href="#ref-2" aria-label="Back to content">↩</a></li>
    <li id="f-3"><a href="https://aneventapart.com/news/post/the-joy-of-optimizing-images-by-una-kravets-aea-video" aria-describedby="ext-site">The Joy of Image Optimization</a>, Una Kravets, An Event Apart 2017 <a href="#ref-2" aria-label="Back to content">↩</a></li>
    <li id="f-4"><a href="https://youtu.be/u1v_G1yQhTU" aria-describedby="ext-site">Readability & Web</a>, Damien Senger, Inclusive Design 24 (ID24) 2018 <a href="#ref-4" aria-label="Back to content">↩</a></li>
    <li id="f-5"><a href="https://youtu.be/mlMfynLKGXA" aria-describedby="ext-site">Elegant Accessibility (video)</a>, Dafydd Henke-Reed, Inclusive Design 24 (ID24) 2018 <a href="#ref-5" aria-label="Back to content">↩</a></li>
  </ol>
 </footer>
</article>