DSO Component Library

Anchor: Icon 

<a href="http://www.google.nl">
    <span class="fa fa-search" aria-hidden="true"></span>
    <span class="sr-only">Zoeken</span>
</a>
 
<a href="{{ url }}">
  {{#if icon }}
    {{> '@icon' icon=icon }}
  {{/if}}
  {{#if iconOnly }}
    <span class="sr-only">{{ label }}</span>
  {{else}}
    {{ label }}
  {{/if}}
  {{#if count }}
    {{> '@badge' }}
  {{/if}}
</a>
 
label: Zoeken
url: 'http://www.google.nl'
icon: fa fa-search
iconOnly: true

There are no notes for this item.

WARNING: WCAG2AA.Principle1.Guideline1_3.1_3_1.H48

If this element contains a navigation section, it is recommended that it be marked up as a list.

<div class="container"> <!-- Start: @anchor--default --> <a href="http://www.google.nl"> Google </a> <!-- End: @anchor--default --><hr> <!-- Start: @anchor--icon --> <a href="http://www.google.nl"> <span class="fa fa-search" aria-hidden="true"></span> <span class="sr-only">Zoeken</span> </a> <!-- End: @anchor--icon --><hr> <!-- Start: @anchor--label --> <a href="http://www.google.nl"> Zoeken </a> <!-- End: @anchor--label --><hr> <!-- Start: @anchor--iconlabel --> <a href="http://www.google.nl"> <span class="fa fa-search" aria-hidden="true"></span> zoeken </a> <!-- End: @anchor--iconlabel --><hr> <!-- Start: @anchor--iconbadge --> <a href="http://www.google.nl"> <span class="fa fa-search" aria-hidden="true"></span> <span class="sr-only">zoeken</span> <span class="badge">4</span> </a> <!-- End: @anchor--iconbadge --><hr> <!-- Start: @anchor--iconlabelbadge --> <a href="http://www.google.nl"> <span class="fa fa-search" aria-hidden="true"></span> zoeken <span class="badge">4</span> </a> <!-- End: @anchor--iconlabelbadge --><hr> </div>

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<a href="http://www.google.nl"> Google </a>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Anchor

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a href="http://www.google.nl"> Google </a>