Label (CSS)

Technische opmerkingen

Het label component kent een normale en een een smalle variant (.dso-compact);
De hover state voor het Web Component is onderdeel van de werkvorm, voor de CSS versie moet deze door developers worden geimplementeerd dmv. class .dso-label-hover op de <span class="dso-label">;

Gedrag en toegankelijkheid

De kleur van een label mag geen zelfstandige betekenis hebben. Gelet op WCAG succescriterium 1.4.1 gebruik van kleur mag de kleur van een label nooit een zelfstandige betekenis hebben. Kleurverschillen mogen wel worden gebruikt als extra visuele hint, maar als kleurverschillen een betekenis hebben dan moet deze betekenis daarnaast afleidbaar zijn uit de zichtbare tekst of een andere visuele hint in combinatie met een sr-only tekst.

Voorbeeld: Op een pagina met de uitslag van een quiz wordt gemeld dat de gebruiker 4 antwoorden goed en 6 antwoorden fout heeft gekozen. We adviseren om een op zichzelf duidelijke tekst te kiezen voor het label en de groene / rode achtergrondkleur alleen decoratief te gebruiken.

Variant met verwijder kruisje

Het tekstalternatief voor een verwijder knopje in een label is: verwijder [tekst label]. De tekst van het label wordt in het verwijder knopje herhaald om te zorgen dat voor screenreader gebruikers altijd duidelijk is welk verwijder knopje bij welk label hoort. Dit stelt hen in staat sneller te werken en voorkomt het per ongeluk verwijderen van het verkeerde item.

<!-- Default -->
<span class="dso-label">

    Label (standaard)

</span>

<!-- Default Button -->
<span class="dso-label">

    Label (standaard)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Default Compact -->
<span class="dso-label dso-compact">

    Label (standaard)

</span>

<!-- Info -->
<span class="dso-label dso-label-info">

    <span class="sr-only">Opmerking: </span>

    Label (info)

</span>

<!-- Info Button -->
<span class="dso-label dso-label-info">

    <span class="sr-only">Opmerking: </span>

    Label (info)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Info Compact -->
<span class="dso-label dso-label-info dso-compact">

    <span class="sr-only">Opmerking: </span>

    Label (info)

</span>

<!-- Primary -->
<span class="dso-label dso-label-primary">

    Label (primair)

</span>

<!-- Primary Button -->
<span class="dso-label dso-label-primary">

    Label (primair)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Primary Compact -->
<span class="dso-label dso-label-primary dso-compact">

    Label (primair)

</span>

<!-- Success -->
<span class="dso-label dso-label-success">

    <span class="sr-only">Gelukt: </span>

    Label (succes)

</span>

<!-- Success Button -->
<span class="dso-label dso-label-success">

    <span class="sr-only">Gelukt: </span>

    Label (succes)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Success Compact -->
<span class="dso-label dso-label-success dso-compact">

    <span class="sr-only">Gelukt: </span>

    Label (succes)

</span>

<!-- Warning -->
<span class="dso-label dso-label-warning">

    <span class="sr-only">Waarschuwing: </span>

    Label (waarschuwing)

</span>

<!-- Warning Button -->
<span class="dso-label dso-label-warning">

    <span class="sr-only">Waarschuwing: </span>

    Label (waarschuwing)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Warning Compact -->
<span class="dso-label dso-label-warning dso-compact">

    <span class="sr-only">Waarschuwing: </span>

    Label (waarschuwing)

</span>

<!-- Danger -->
<span class="dso-label dso-label-danger">

    <span class="sr-only">Fout: </span>

    Label (fout)

</span>

<!-- Danger Button -->
<span class="dso-label dso-label-danger">

    <span class="sr-only">Fout: </span>

    Label (fout)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Danger Compact -->
<span class="dso-label dso-label-danger dso-compact">

    <span class="sr-only">Fout: </span>

    Label (fout)

</span>

<!-- Bright -->
<span class="dso-label dso-label-bright">

    Label (helder)

</span>

<!-- Bright Button -->
<span class="dso-label dso-label-bright">

    Label (helder)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Bright Compact -->
<span class="dso-label dso-label-bright dso-compact">

    Label (helder)

</span>

<!-- Bright Symbol Image -->
<span class="dso-label dso-label-bright">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vag000"></span>
    </span>

    Met symbool (image)

</span>

<!-- Bright Button Symbol Image -->
<span class="dso-label dso-label-bright">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vag000"></span>
    </span>

    Met symbool (image)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Bright Compact Symbol Image -->
<span class="dso-label dso-label-bright dso-compact">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vag000"></span>
    </span>

    Met symbool (image)

</span>

<!-- Bright Symbol Color -->
<span class="dso-label dso-label-bright">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vszt030"></span>
    </span>

    Met symbool (color)

</span>

<!-- Bright Button Symbol Color -->
<span class="dso-label dso-label-bright">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vszt030"></span>
    </span>

    Met symbool (color)

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<!-- Bright Compact Symbol Color -->
<span class="dso-label dso-label-bright dso-compact">

    <span class="dso-label-symbol">
        <span class="symboolcode" data-symboolcode="vszt030"></span>
    </span>

    Met symbool (color)

</span>

<!-- Default Hover -->
<span class="dso-label">

</span>

<!-- Default Button Hover -->
<span class="dso-label dso-label-default dso-hover">

    Hover

    <button type="button">
        <span class="sr-only">Verwijder</span>
        <dso-icon icon="times"></dso-icon>

    </button>

</span>

<span {{ className('dso-label', [status, 'dso-label-' + status], [compact, 'dso-compact'], [hover and removable, 'dso-hover']) }}>
  {% if symbol %}
    <span class="dso-label-symbol">
      {{ symbol | safe }}
    </span>
  {% endif %}
  {% if status | labelStatusMap %}
    <span class="sr-only">{{ status | labelStatusMap }}: </span>
  {% endif %}
  {{ label }}
  {% if removable %}
    <button type="button">
      <span class="sr-only">Verwijder</span>
      {% render '@icon', {icon: 'times' }%}
    </button>
  {% endif %}
</span>

/* Default */
label: Label (standaard)

/* Default Button */
label: Label (standaard)
removable: true

/* Default Compact */
label: Label (standaard)
compact: true

/* Info */
status: info
label: Label (info)

/* Info Button */
status: info
label: Label (info)
removable: true

/* Info Compact */
status: info
label: Label (info)
compact: true

/* Primary */
status: primary
label: Label (primair)

/* Primary Button */
status: primary
label: Label (primair)
removable: true

/* Primary Compact */
status: primary
label: Label (primair)
compact: true

/* Success */
status: success
label: Label (succes)

/* Success Button */
status: success
label: Label (succes)
removable: true

/* Success Compact */
status: success
label: Label (succes)
compact: true

/* Warning */
status: warning
label: Label (waarschuwing)

/* Warning Button */
status: warning
label: Label (waarschuwing)
removable: true

/* Warning Compact */
status: warning
label: Label (waarschuwing)
compact: true

/* Danger */
status: danger
label: Label (fout)

/* Danger Button */
status: danger
label: Label (fout)
removable: true

/* Danger Compact */
status: danger
label: Label (fout)
compact: true

/* Bright */
status: bright
label: Label (helder)

/* Bright Button */
status: bright
label: Label (helder)
removable: true

/* Bright Compact */
status: bright
label: Label (helder)
compact: true

/* Bright Symbol Image */
status: bright
label: Met symbool (image)
symbol: <span class="symboolcode" data-symboolcode="vag000"></span>

/* Bright Button Symbol Image */
status: bright
label: Met symbool (image)
removable: true
symbol: <span class="symboolcode" data-symboolcode="vag000"></span>

/* Bright Compact Symbol Image */
status: bright
label: Met symbool (image)
compact: true
symbol: <span class="symboolcode" data-symboolcode="vag000"></span>

/* Bright Symbol Color */
status: bright
label: Met symbool (color)
symbol: <span class="symboolcode" data-symboolcode="vszt030"></span>

/* Bright Button Symbol Color */
status: bright
label: Met symbool (color)
removable: true
symbol: <span class="symboolcode" data-symboolcode="vszt030"></span>

/* Bright Compact Symbol Color */
status: bright
label: Met symbool (color)
compact: true
symbol: <span class="symboolcode" data-symboolcode="vszt030"></span>

/* Default Hover */
_ignore: true

/* Default Button Hover */
status: default
label: Hover
removable: true
hover: true