Toestanden en toegankelijkheid¶
Hoe een component zich gedraagt (hover, focus, uitgeschakeld, fout, leeg, gelukt) en waaraan het moet voldoen. De kleuren en waarden zijn de tokens uit de canon. De knop-, formulier- en alertstates zijn live te zien in de UI-kit (Knoppen, Formulieren, Badges en alerts).
Toestanden¶
| Toestand | Wat er verandert | Token of regel |
|---|---|---|
| Rust | Standaardweergave | Primaire knop --atlas-color-brand-500 #1F6FE0, tekst wit |
| Hover (primair) | Lichter blauw en meer gloed | --atlas-color-brand-400 #4EA0FF, --atlas-shadow-btn-hover |
| Hover (secundair) | Donker paneel en sterkere rand | --atlas-color-panel-2, --atlas-color-border-strong |
| Focus | Zichtbare ring van 2 px in merk 400, 3 px afstand, nooit weghalen | outline: 2px solid #4EA0FF; outline-offset: 3px |
| Uitgeschakeld | Gedimd en niet klikbaar, met uitleg naast het veld | Geen eigen token in de canon. Gebruik de Bootstrap-standaard |
| Fout | Rode melding met tekst, nooit alleen kleur | --atlas-color-state-danger #FF5C7A |
| Waarschuwing | Gele melding | --atlas-color-state-warning #F1D38C |
| Gelukt | Groene melding | --atlas-color-state-success #2EE59D |
| Info | Blauwe melding | --atlas-color-state-info #77A7FF |
Wat de canon niet zelf definieert
Uitgeschakeld, laden en de statuskleuren voor alerts staan niet in de live module. De UI-kit koppelt Bootstrap aan de canon-tokens. Dat staat zo ook in UI-componenten.
Meldingen: fout, leeg, gelukt¶
Elke melding zegt wat er is, en wat de lezer nu kan doen. De toon staat in de Schrijfwijzer. De voorbeeldteksten laten alleen de vorm zien. Het zijn geen live teksten.
| Soort | Opbouw | Voorbeeld |
|---|---|---|
| Fout bij veld | Wat is mis, hoe los je het op, bij het veld zelf | "Vul een geldig e-mailadres in, bijvoorbeeld naam@bedrijf.nl." |
| Fout van het systeem | Wat mislukte, wat je nu doet | "Opslaan lukt niet. Controleer je internetverbinding en probeer het opnieuw." |
| Lege staat | Wat hier komt te staan, en de eerste stap | "Je hebt nog geen werkbonnen. Maak je eerste werkbon aan." |
| Gelukt | Wat er is gebeurd, wat er nu volgt | "Verstuurd. Je hoort binnen één werkdag van ons." |
| Waarschuwing | Wat er kan gebeuren, de keuze | "Je hebt niet-opgeslagen wijzigingen. Wil je ze eerst opslaan?" |
| Bevestiging | Zeg wat er gebeurt | "Werkbon 14 verwijderen? Dit kan niet ongedaan worden gemaakt." |
Regels: gebruik "je", geen uitroeptekens, geen verwijt en nooit alleen kleur als boodschap. Een foutmelding staat bij het veld en wordt voorgelezen (role="alert" voor fouten, aria-live="polite" voor gelukt en info).
Toegankelijkheid: de norm¶
De norm is WCAG 2.2 niveau AA. Voor focus-zichtbaarheid en doelgrootte streven we naar AAA waar het kan.
Kleurcontrast (berekend uit de tokens)¶
Normale tekst moet 4,5:1 halen, grote tekst en niet-tekst (iconen, randen) 3:1. De volledige tabel staat in 03_Kleur-en-Typografie/kleurenpalet.md. De belangrijkste paren:
| Paar | Ratio | Normale tekst AA |
|---|---|---|
| text.1 op canvas | 16.82:1 | ja |
| text.2 op canvas | 10.32:1 | ja |
| text.3 op canvas | 7.30:1 | ja |
| Merk 400 (link) op canvas | 7.44:1 | ja |
Wit op primaire knop #1F6FE0 |
4.76:1 | ja |
Wit op CTA-verloop, begin #1A6AEE |
4.84:1 | ja |
Wit op CTA-verloop, midden #2E80FF |
3.72:1 | nee, alleen voor grote of vette knoptekst |
| Merk 500 op canvas | 4.21:1 | nee, niet voor lopende tekst |
Fout #FF5C7A op canvas |
6.74:1 | ja |
| Goud op canvas | 8.66:1 | ja |
Checklist per pagina of component¶
- Tekst haalt 4,5:1 (groot 3:1), iconen en randen die iets betekenen 3:1.
- Alles is met het toetsenbord te bedienen, in een logische volgorde, en de focusring is altijd zichtbaar.
- Klikdoelen zijn minstens 24 × 24 px (WCAG 2.2 AA), liever 44 × 44 px.
- Elke afbeelding heeft een alt-tekst, of een lege alt als het decoratie is.
- Elk formulierveld heeft een zichtbaar label. Een placeholder is geen label.
- Fouten gebruiken tekst en een icoon, niet alleen kleur.
- Eén
h1per pagina, koppen in volgorde, links met een betekenisvolle tekst (niet "klik hier"). - De taal staat op
lang="nl", oflang="en"bij Engelse tekst. - Beweging respecteert
prefers-reduced-motion. - Test voor je publiceert met alleen het toetsenbord en met een schermlezer.
Toegankelijkheidsverklaring¶
Een publieke site heeft een toegankelijkheidsverklaring. Een startpunt in onze stem:
Atlas Corporation wil dat haar website voor iedereen te gebruiken is. We werken naar WCAG 2.2 niveau AA. Lukt iets niet, of kom je een barrière tegen? Mail info@atlascorporation.org of bel 085 115 5161. [TE BEVESTIGEN: reactietermijn, nalevingsstatus en datum van de laatste toets. Pas invullen na een echte toets.]
Beweer niets wat niet is getoetst.