• When the user clicks a link, they are taken to a different location in the site.
    • Either another page or even another area of the same page
  • A link can look like a big shiny button but it must be coded as <a> link

If it does something, it’s a <button>

  • Buttons cause an action to occur on the same page
    • Submit a form (even when submission takes you to a new page)
    • Open a menu
    • Launch a modal
    • Expand details
  • A button can look like a link, but it must be coded as a <button>

Code examples

Use semantic HTML with common sense names

This semantic HTML contains all accessibility features by default.

<a href="/about/">
  About
</a>
About
  • Do not use a heading with a generic link below.
  • Instead, make the heading a link or programmatically associate the link with the heading using aria-describedby.
<h3>About our coffee subscriptions</h3>
<p>Get the best coffee delivered to your door</p>
<a href="/about/">
   Learn more
</div>
<h3><a href="/about/">About our coffee subscriptions</a></h3>
<p>Get the best coffee delivered to your door</p>
<h3 id="unique-id">About our coffee subscriptions</h3>
<p>Get the best coffee delivered to your door</p>
<a href="/about/" aria-describedby="unique-id">
   Learn more
</div>
  • Do not put anything but a URI in the href
  • A link with no href will not be focusable with the keyboard without tabindex="0".
  • Add role="link" to ensure screen reader reads the role
<a tabindex="0" role="link">
  About
</a>
About

Avoid custom elements

This custom button requires extra attributes and keyboard event listeners.

<custom-element role="link" tabindex="0">
  About
</custom-element>

Repeating text links

Sometimes the design will call for multiple links with the same text label. In a case like this, aria-label can be used to name each link’s purpose.

<button>Get free coffee</button>
<a href="/free-coffee-tc/" aria-label="Free coffee terms and conditions">
  Terms &amp; Conditions
</a>
<button>Get free donuts</button>
<a href="/free-donuts-tc/" aria-label="Free donuts terms and conditions">
  Terms &amp; Conditions
</a>

Don’t duplicate the visible text name in the aria-label

Do not repeat the inner text content of a link in the aria-label.

<a href="/do-NOT-repeat-yourself/" 
   aria-label="Do NOT repeat yourself">
   Do not repeat yourself
</div>

Don’t use javascript in href

  • Do not use "href="javascript:void(0)".
  • When screen readers read the href, it becomes confusing and nonsensical
<a href="javascript:void(0)">
   Do not use javascript in href
</div>

Don’t use “#” in href

<a href="#">
   Do not use # to populate the href
</div>
  • If it’s unavoidable to have a disabled link present you’ll need these attributes for the screen reader.
<a tabindex="0" role="link" aria-disabled="true">
  Continue
</a>

Complex examples

Product Card with multiple controls

This example demonstrates an approach taken for when the card may have multiple controls within it.

mPhone Universe Max Extra Phabulous

mPhone Universe Max Extra Phabulous
  • 4.8 Stars
  • 7G
  • Monthly
    $22.00 $50.00
    For 36 months
  • Today
    $0
    down + tax
  • Full price $1,789 $1,998

Product Card as a single link

This card is a single link and does not consist of any other nested controls. Use of aria-labelledby and aria-describedby to control how the card is announced by screen readers.

15% off your next order

mPhone Universe Max Extra Phabulous

  • 4.8 Stars
  • 7G
  • Monthly
    $22.00 $50.00
    For 36 months
  • Today
    $0
    down + tax
  • Full price $1,789 $1,998 
<h2 class="h-bravo">Product Card with multiple controls</h2>
<p>This example demonstrates an approach taken for when the card may have multiple controls within it.</p>
<div class="product-list multiple-controls">
  <div class="product-list-item">
    <div class="offer-container">
      <button type="button" class="tertiary" aria-label="Save $400 with offer for mPhone Universe Max Extra Phabulous">
        Save $400 with offer
      </button>
    </div>

    <div class="link-container">
      <!-- The link DOES NOT wrap the entire description -->
      <h3 class="product-heading">
        <a class="product-link" href="/demos/">
          <span class="brand">
            mPhone
          </span>
          <span class="product-title">
            Universe Max Extra Phabulous
          </span>
        </a>
      </h3>
      <div class="product-image-container">
        <img class="product-image" src="/assets/images/products/mobile-phone.png" alt="mPhone Universe Max Extra Phabulous"/>
      </div>
      <ul id="meta" class="product-meta">
        <li class="rating">4.8 Stars</li>
        <li class="network">7G <span class="hidden">network compatibility</span></li>
      </ul>
      <div class="end-cap">
        <ul id="colors" class="product-colors">
          <li class="red"><span class="hidden">Sunset Red</span></li>
          <li class="gold"><span class="hidden">Golden Canyon</span></li>
          <li class="blue"><span class="hidden">Blue</span></li>
          <li class="gray"><span class="hidden">Graphite</span></li>
        </ul>
        <ul id="pricing" class="product-pricing">
          <li class="monthly">
            <div><strong>Monthly</strong></div>
            <strong>
              $22.00<span class="hidden">,</span>
            </strong>
            <span class="hidden">
              Original price:
            </span>        
            <s>$50.00</s>
            <div>For 36 months</div>
          </li>
          <li class="today">
            <div><strong>Today</strong></div>
            $0
            <div>down + tax</div>
          </li>
          <li class="full-price">
            <strong>Full price</strong> $1,789<span class="hidden">,</span>
            <span class="hidden">
              Original price:
            </span>        
            <s>$1,998</s>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<h2 class="h-bravo">Product Card as a single link</h2>
<p>This card is a single link and does not consist of any other nested controls. Use of <code>aria-labelledby</code> and <code>aria-describedby</code> to control how the card is announced by screen readers.</p>
<div class="product-list big-links">
  <div class="product-list-item">
    <a href="/demos/" 
      aria-labelledby="prod-0-eyebrow prod-0-name" 
      aria-describedby="prod-0-meta-rating prod-0-meta-network prod-0-colors product-0-price-monthly product-0-price-today product-0-price-full">
      <div class="offer-container">
        <svg style="display: inline-block;" role="img" aria-label="Promo" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M0 80V229.5c0 17 6.7 33.3 18.7 45.3l176 176c25 25 65.5 25 90.5 0L418.7 317.3c25-25 25-65.5 0-90.5l-176-176c-12-12-28.3-18.7-45.3-18.7H48C21.5 32 0 53.5 0 80zm112 32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg> 15% off your next order
      </div>
  
      <div class="link-container">
        <h3 class="product-heading">
            <span class="brand" id="prod-0-eyebrow">
              mPhone
            </span>
            <span class="product-title" id="prod-0-name">
              Universe Max Extra Phabulous
            </span>
        </h3>
        <div class="product-image-container">
          <img class="product-image" src="/assets/images/products/mobile-phone.png" alt=""/>
        </div>
        <ul id="meta" class="product-meta">
          <li class="rating" id="prod-0-meta-rating">4.8 Stars</li>
          <li class="network" id="prod-0-meta-network">7G <span class="hidden">network compatibility</span></li>
        </ul>
        <div class="end-cap">
          <span id="prod-0-colors" class="hidden">Four colors available</span>
          <!-- hide colors - use visually hidden text x colors avialable -->
          <!-- reduces verbosity and all colors are available on PDP -->
          <ul id="colors" class="product-colors" aria-hidden="true">
            <li class="red"></li>
            <li class="gold"></li>
            <li class="blue"></li>
            <li class="gray"></li>
          </ul>
          <ul id="pricing" class="product-pricing">
            <li class="monthly" id="product-0-price-monthly">
              <div><strong>Monthly</strong></div>
              <strong>
                $22.00<span class="hidden">,</span>
              </strong>
              <span class="hidden">
                Original price:
              </span>        
              <s>$50.00</s>
              <div>For 36 months</div>
            </li>
            <li class="today" id="product-0-price-today">
              <div><strong>Today</strong></div>
              $0
              <div>down + tax</div>
            </li>
            <li class="full-price" id="product-0-price-full">
              <strong>Full price</strong> $1,789<span class="hidden">,</span>
              <span class="hidden">
                Original price:
              </span>        
              <s>$1,998</s>
            </li>
          </ul>
        </div>
      </div>
    </a>
  </div>
</div>

Further Reading