Ga naar hoofdinhoud

Icon

Icon

Community

Grafisch symbool dat visueel informatie geeft over een actie, onderwerp of status.

Checklist voor toegankelijkheid

Hier beschrijven we waar de component al aan voldoet en wat je zelf nog moet doen om de component toegankelijk én gebruiksvriendelijk in te zetten.

Acceptatiecriteria bij gebruik

Een component gebruik je in de context van een pagina, website of applicatie. Hoe toegankelijk en gebruiksvriendelijk een component is, hangt daarom voor een groot deel af van context. We hebben onderstaande criteria verdeeld op rol: de developer, de designer en de contentmaker. Vanuit iedere rol kun je je steentje bijdragen om een toegankelijke en gebruiksvriendelijke ervaring te bieden aan je gebruikers.

Ik ben:
Alle onderwerpen worden getoond.
  • Informatieve icons hebben een beschrijvende alternatieve tekst.

    Een informatief icon is een visueel symbool dat ontworpen is om snel en intuïtief specifieke informatie over te brengen, zonder dat daar tekst voor nodig is.

    Als een informatief icon géén onderdeel is van een interactief component, zoals een button of link, heeft het icon een alternatieve tekst nodig.

    Dit kan bijvoorbeeld door een aria-label toe te voegen aan een svg icon met role="img".

    Gerelateerde NL Design System richtlijnen:

    developercontentmakerWCAG 1.1.1Niveau A
  • Decoratieve icons zijn verborgen voor hulpsoftware.

    Een icon is decoratief als er een beschrijvende tekst boven, naast of onder staat. Een icon is ook decoratief als het onderdeel is van een interactief component met een eigen toegankelijke naam, zoals een button of een link.

    Het is daarom niet nodig dat gebruikers die hulpsoftware gebruiken, zoals een screenreader, weten dat er een icon aanwezig is. Verberg decoratieve icons, bijvoorbeeld met aria-hidden="true" op de component.

    Gerelateerde NL Design System richtlijnen:

    developercontentmakerWCAG 1.1.1Niveau A
  • Als een icon een status aangeeft, is die informatie niet alleen afhankelijk van kleur.

    Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan kleuren zien of verandering in kleur of kleurcontrast opmerken.

    Bijvoorbeeld: geef een foutmelding niet alleen aan met een rood randje, maar ook in tekst en eventueel met een icoontje dat een foutmelding markeert.

    designerWCAG 1.4.1Niveau A
  • Gebruik geen icons om teksten te vormen.

    Een icon kan uit een afbeelding van een letter bestaan (bijvoorbeeld B voor dikgedrukte tekst). Gebruik geen icons van letters om woorden of teksten te maken.

    NL Design System richtlijnen:

    designercontentmakerWCAG 1.4.5Niveau AA
  • Bij zoom overlapt een icon niet met andere content.

    De gebruiker moet de webpagina 400% kunnen vergroten in de browser. Het gaat hierbij om alle elementen van een webpagina.

    Er mag geen inhoud buiten beeld vallen, onbereikbaar of verborgen zijn of gedeeltelijk verborgen worden door andere inhoud wanneer de gebruiker 400% inzoomt of op een buitengewoon klein scherm werkt (320 bij 256 pixels).

    Zorg ervoor dat er geen horizontale scrollbar nodig is. Uitzonderingen zijn voor onderdelen die in essentie twee-dimensionaal zijn, zoals tabellen, grafieken, video's en landkaarten.

    Definieer in de CSS een wijze om lange woorden af te breken en te laten doorlopen op de volgende regel. Gebruik hiervoor bijvoorbeeld word-break: break-word; hyphens: auto; in combinatie met text-wrap-style: pretty of text-wrap-style: balance. Zo ontstaat er geen horizontale scrollbar en wordt tekst niet onleesbaar. Doe dit bij voorkeur op :root niveau.

    designerdeveloperWCAG 1.4.10Niveau AA
  • Een informatief icon heeft een contrastratio van minimaal 3:1 met de achtergrond.

    Zorg voor voldoende kleurcontrast tussen de kleur van componenten die visueel betekenis hebben en hun directe omgeving.

    Bijvoorbeeld:

    • Een icoon dat betekenis heeft, zoals de 3 streepjes voor een menu of een pijltje naar rechts voor de volgende pagina.
    • Een icoon dat de status aangeeft van een bericht zoals een oranje driehoek voor een waarschuwing en een groen vinkje voor succes.

    Het gemeten kleurcontrast tussen het element en de achtergrond moet minstens 3:1 zijn. Dit is te controleren met de Contrast checker.

    designercontentmakerWCAG 1.4.11Niveau AA
  • Als een icon onderdeel is van een link, beschrijft de alternatieve tekst het doel van het icon.

    Icons zijn regelmatig onderdeel van een link, mét of zonder begeleidende linktekst.

    Zorg er voor dat het duidelijk is waar de link naar verwijst, in plaats van dat het uiterlijk van het icon beschreven wordt. Dit is belangrijk voor gebruikers die gebruik maken van hulpsoftware, zoals een screenreader.

    Bijvoorbeeld: Een link met een icon dat aangeeft dat een link naar een externe website verwijst heeft als beschrijving in de accessibility tree 'Gemeente Den Haag (externe website)' en niet 'Gemeente Den Haag klein vierkantje met een pijl die naar rechtsboven wijst'.

    Gerelateerde NL Design System richtlijnen:

    developercontentmakerWCAG 2.4.4Niveau A
  • Als een icon wordt gebruikt als visueel label, is het duidelijk wat de betekenis is.

    Als een icon een alternatief is voor een tekstuele kop of label, moet het voor de doelgroep duidelijk zijn wat het icon vertegenwoordigt.

    Bijvoorbeeld:

    • Een zoekfunctie gebruikt een vergrootglas icon.
    • De link naar de homepage in een broodkruimelpad is een huis icon.
    • Een knop om een dialoogvenster te sluiten gebruikt een kruis (x) icon.

    Gerelateerde NL Design System richtlijnen:

    designercontentmakerWCAG 2.4.6Niveau AA
  • Een component met dezelfde functionaliteit die op meerdere pagina's voorkomt, heeft op alle pagina's hetzelfde icon.

    Componenten of functionaliteiten die op meerdere pagina's voorkomen en die gebruik maken van icons, maken overal gebruik van dezelfde icons. Wees ook zoveel mogelijk consistent in het gebruik van icons. Als je in een component op de ene pagina gebruik maakt van een icon, doe dat dan in datzelfde component op een andere pagina ook.

    Dit is belangrijk om snel te navigeren en snel belangrijke functionaliteiten terug te kunnen vinden, zeker voor gebruikers met bijvoorbeeld een cognitieve beperking.

    Denk aan:

    • Zoekfuncties die consistent gebruik maken van een vergrootglas icon.
    • Waarschuwingen die consistent gebruik maken van een uitroepteken icon.
    • Informatie-opties, zoals bij mogelijk moeilijke termen, die consistent gebruik maken van een vraagteken icon.
    • De optie om vooruit of achteruit te gaan in een proces, die consistent gebruik maakt van pijl-icons.
    • De optie om een dialoogvenster te sluiten, maakt overal gebruik van een kruisje.
    • Bij een goed ingevuld formulierveld staat overal een vinkje.

    Gerelateerde NL Design System richtlijnen:

    developerdesignerWCAG 3.2.4Niveau AA
  • Als een icon wordt gebruikt als visueel label van een invoermogelijkheid, is het duidelijk welke invoer gevraagd wordt.

    Als een icon een alternatief is voor een tekstueel label bij een invoerveld, moet het duidelijk zijn wat de gebruiker moet doen of moet invullen.

    Bijvoorbeeld:

    • Een icon van een slot in een inlogformulier vraagt om een wachtwoord.
    • Een icon van een vergrootglas in een zoekfunctie vraagt om een zoekterm.

    Gerelateerde NL Design System richtlijnen:

    designercontentmakerWCAG 3.3.2Niveau A

Icons uit icon fonts

Gebruik je een icon font in plaats van SVG afbeeldingen? Houdt er dan rekening mee dat niet iedereen de iconen kan zien. Sommige gebruikers kiezen ervoor om altijd een eigen font te gebruiken, of schakelen web fonts uit om data te besparen. Wij raden daarom aan om SVG te gebruiken in plaats van een icon font. Als je wel een icon font gebruikt, probeer dan Unicode-karakters te gebruiken. Deze icons werken ook als de gebruiker een systeem font gebruikt.

Acceptatiecriteria van de component

Als je de NL Design System component gebruikt kun je er vanuit gaan dat onderstaande checks zijn gedaan. Maar door keuzes in de website of applicaties kan het natuurlijk zijn dat ze toch niet helemaal werken. Voor de zekerheid is het dus goed om ook op onderstaande punten te letten.

Ik ben:
Alle onderwerpen worden getoond.
  • Informatieve icons kunnen een alternatieve tekst hebben.

    Informatieve icons kunnen worden voorzien van een beschrijvende interactieve tekst, doordat het aria-label of aria-labelledby in de component gebruikt kan worden.

    Gerelateerde NL Design System richtlijnen:

    developerWCAG 1.1.1Niveau A
  • Decoratieve icons kunnen verborgen worden voor hulpsoftware.

    Decoratieve icons kunnen verborgen worden voor hulpsoftware, doordat het aria-hidden attribuut gebruikt kan worden in de component.

    Gerelateerde NL Design System richtlijnen:

    developerWCAG 1.1.1Niveau A
  • Informatieve icons hebben de rol van afbeelding in de accessibility tree.

    Informatieve icons moeten herkenbaar zijn als afbeelding voor gebruikers die hulpsoftware, zoals een screenreader, gebruiken.

    Bijvoorbeeld: een svg icon heeft role="img" als attribuut.

    Gerelateerde NL Design System richtlijnen:

    developerWCAG 1.3.1Niveau A

Richtlijnen

Iconen moeten opzettelijk gebruikt worden en waar mogelijk, met het oog op de toegankelijkheid, gekoppeld aan een tekstlabel. Iconen kunnen zowel als interactieve als statische elementen fungeren.

Grofweg zijn er twee categorieën iconen; functionele en illustratieve iconen.

Denk bij functionele iconen bijvoorbeeld aan:

  • Chevrons
  • Opslaan en download indicatoren
  • Een × om een dialoogvenster te sluiten

Functionele iconen zijn vaak abstract en hun betekenis is vaak aangeleerd, denk hierbij bijvoorbeeld aan het floppy icoon voor opslaan, of een vergrootglas om te zoeken. Illustratieve iconen zorgen in één oogopslag dat een tekstlabel verduidelijkt of een thema uitgebeeld kan worden.

Combinatie van icoon en tekst

Combineer waar mogelijk een icoon met tekst.

Het kan zijn dat een bezoeker een icoon niet helemaal goed begrijpt. Het gebruik van tekst (label) is ook een belangrijke factor in de navigatie. Een eenvoudig en duidelijk icoon met een goed omschreven label is superieur aan iconen of labels alleen.

Niet te veel iconen op een pagina

Te veel iconen gebruiken op een pagina kan een soort blindheid veroorzaken.

Let er op dat er niet te veel iconen op een pagina komen te staan en voorkom een oerwoud van plaatjes. Bij het gebruik van te veel iconen worden de iconen niets meer dan decoratie op je pagina en mist het z’n doel als navigatiehulp voor de bezoeker.

Door het aantal iconen te beperken, trekken de iconen die je wel gebruikt sneller de aandacht van de gebruiker en wordt het navigeren op de pagina eenvoudiger.

De uitstraling van iconen hebben een effect op de vormgeving van de portaal/webpagina. Let dus goed op hoe en welke iconen jullie willen gaan gebruiken.

Icoon kleuren

Icoon kleuren moeten automatisch de kleur kunnen overnemen van nabije content.

De valkuil is om hardcoded kleur waardes zoals fill="#ABCDEF te gebruiken. Gebruik in plaats daar van de CSS waarde currentColor: fill="currentColor". Dit is een handmatige aanpassing in de code van de SVG, en een essentiële. Dit principe is ook toepasbaar op andere kleur-gerelateerde eigenschappen zoals stroke.

Toegankelijkheid

Functionele iconen communiceren belangrijke functionaliteit. Hierdoor dienen deze voor iedereen toegankelijk te zijn. Zo dient de informatie die zij overbrengen tevens voor screenreaders beschikbaar te zijn en hebben ze voldoende kleurcontrast voor mensen met een visuele beperking. Puur decoratieve iconen hoeven niet aan toegankelijkheidsrichtlijnen te voldoen. Als een illustratief icoon tekst verduidelijkt, zorg dan dat deze verduidelijking tevens aangeboden wordt aan screenreaders.

Tekstlabels

Probeer zoveel mogelijk iconen van een tekstlabel te voorzien. Wanneer een (interactief) icoon zonder tekstlabel aangeboden wordt, zorg dan dat een tekstverduidelijking wel aan screenreaders aangeboden wordt.

Contrast

Zorg voor functionele iconen dat deze voldoende contrast hebben met de achtergrond en omliggende kleuren. Zie hiervoor WCAG techniek G207 en het WCAG-succescriterium 1.4.11 Contrast van niet-tekstuele content. Er dient een minimale contrastverhouding van 3:1 ten opzichte van onderliggende en aangrenzende kleuren te zijn.

Puur decoratieve iconen hoeven niet aan deze eis te voldoen.

Als iconen ondersteund worden door tekst is het niet noodzakelijk deze van een alt tekst te voorzien, een leeg alt="" attribuut is dan voldoende.

Interactieve iconen

Wanneer een interactief icoon gebruik wordt voor muisgestuurde acties, dan dient het icoon voorzien te zijn van een hover staat. Voor toetsenbordbediening dient tevens een focus staat aanwezig te zijn zodat gebruikers kunnen zien waar de focus zich op dat moment bevindt.

Zorg bij deze interactieve iconen ervoor dat interactie niet alleen gecommuniceerd wordt door middel van kleurverschil.

Het aanbieden van gevulde iconen voor geselecteerde staten waar standaard lijn-iconen gebruikt worden kan een oplossing zijn. Ook het gebruiken van een wijziging in een icoon bij een bepaalde staat kan uitkomst bieden. Een voorbeeld hiervan is een prullenbak icoon dat een volle prullenbak toont, en een geleegde wanneer deze geleegd is.

Klik en tapoppervlakte

Zorg voor voldoende klik of tapoppervlakte van interactieve iconen, zeker als deze niet vergezeld zijn van een (klikbaar) tekstueel label. Mocht er onvoldoende oppervlakte zijn van het icoon zelf, dan kan het vergoten van de interactieve marge rondom het icoon bijdragen aan het klik/tapoppervlakte. Gebruikers kunnen echter verward raken en denken dat de interactieve oppervlakte kleiner is dan ze waarnemen, en bovendien kunnen té kleine iconen onduidelijk zijn.

Hanteer voor een vrijstaand icoon een minimale oppervlakte van 44×44 dp. Zo wordt gewaarborgd dat een interactief icoon met zowel een muis als op een touchscreen voor gebruikers makkelijk te activeren is. Dit is in het bijzonder belangrijk voor gebruikers met een motorische stoornis, zoals gebruikers met Arthritis of Parkinson.

Afstanden (marge)

Zorg tevens voor voldoende ruimte tussen iconen. Iconen moeten duidelijk gescheiden zijn en zeker wanneer iconen van interactie zijn voorzien dient de gebruiker deze afzonderlijke interacties bewust te kunnen onderscheiden en uit te voeren.

Inclusiviteit

Zorg, bijvoorbeeld bij profiel iconen, dat deze gender-neutraal en cultuur-onafhankelijk zijn.

Context

In sommige contexten kunnen iconen verkeerd op gevat worden. Denk bijvoorbeeld aan het gebruiken van een prullenbak om een persoon uit een lijst te verwijderen. Ook een ‘like’ icoon van een duimpje kan in sommige contexten verkeerd opgevat worden. Biedt in dat geval meerdere iconen aan waarmee waardering gegeven kan worden, maar die niet altijd positief hoeft te zijn.

Referenties

Community implementaties

Utrecht

11 van 11 stappen gedocumenteerd op het Community Utrecht projectbord

Snel aan de slag

utrecht-icon in CSS
utrecht-icon in Web Component
utrecht-icon in React

Amsterdam

9 van 11 stappen gedocumenteerd op het Community Amsterdam projectbord

Snel aan de slag

ams-icon in CSS
ams-icon in React

Definition of Done

Help component verbeteren

We vinden het belangrijk dat de component Icon goed te gebruiken is door iedereen. Help je mee?