title: What is the most accessible way to render an example hyperlink?
body: <p><em>The anchor tags in question are examples dynamically rendered when helping the user input custom language. They do not function as typical hyperlinks and should not.</em></p>
  
  <p><strong>To explain in depth,</strong> consider the following scenario.</p>
  
  <p>A site has some user input for changing the language of the way a hyperlink to resource(s) are presented: <code>Thanks for joining! Checkout these guides to get started {{resources}}!</code></p>
  
  <p>The <code>{{resources}}</code> is then replaced with a hyperlink containing the selected resource name(s). An example is then rendered to show the user what it would look like. Something like the following:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;input id="welcome-language" /&gt;
  &lt;div class="language-preview"&gt;
    Thanks for joining! Checkout these guides to get started
    &lt;a href="#faux-link" aria-label="example resource link"&gt;Membership Agreement&lt;/a&gt;
    ,
    &lt;a href="#faux-link" aria-label="example resource link"&gt;Quickstart Guide&lt;/a&gt;
    , and
    &lt;a href="#faux-link" aria-label="example resource link"&gt;Becoming a Rockstar (for power-users)&lt;/a&gt;
    !
  &lt;/div&gt;
  </code></pre>
  
  <p>Notice the links don't actually go anywhere and aren't intended to.</p>
  
  <p><strong>How can I make this accessible?</strong> Is simply adding the <code>aria-label</code> enough? Are there other attributes I could/should add?</p>