@utrecht/form-fieldset-css
v1.2.0
Published
Form fieldset component for the Municipality of Utrecht based on the NL Design System architecture
Downloads
76
Keywords
Readme
Fieldset
States
disabled
Een veldengroep waar alle velden disabled
zijn.
invalid
Een veldengroep die niet valide is. Gebruik deze voor veldengroepen de als geheel gevalideerd worden, bijvoorbeeld een radio group of een checkbox group. Gebruik invalid
niet voor veldengroepen waar één los onderdeel invalide is, bijvoorbeeld: als één van de vragen nog niet beantwoord is.
HTML
In HTML kun je de <fieldset>
en <legend>
elementen gebruiken, die worden automatisch gekoppeld aan radio buttons en checkboxes.
Voor een radio button group gebruik je <fieldset role="radiogroup">
, dat maakt het extra duidelijk voor screen reader gebruikers. <fieldset>
heeft als default role="group"
en daarom hoef je nooit <fieldset role="group">
te gebruiken.
De bijzondere browser default stylesheet voor <fieldset>
en <legend>
maken het erg moeilijk om CSS te gebruiken voor deze elementen, maar voor toegankelijkheid is het echter zeker de moeite waarde deze elementen toch te gebruiken. Gebruik de reset CSS voor fieldset en legend om geen default styles te gebruiken.
Gebruik een extra <div>
om je <fieldset>
zodat het mogelijk wordt een background-color
of border
in te stellen, door de browser default stylesheet is dat voor <fieldset>
niet goed mogelijk.
HTML attributen
Deze attributen moet je kunnen gebruiken in de fieldset component van een framework:
class
disabled
hidden
: om een conditional fieldset te maken moet je hethidden
attribuut kunnen gebruikenrole
: het moet mogelijk zijnrole="radiogroup"
in te stellenaria-describedby
: gebruik bij voorkeur<legend>
aria-invalid
Deze attributen willen mensen soms ook gebruiken:
aria-label
: gebruik bij voorkeur<legend>
aria-labelledby
: gebruik bij voorkeur<legend>
aria-disabled
: gebruik bij voorkeurdisabled
, behalve als je client-side form validation gebruikt omaria-disabled
te maken.form
name
CSS
De tokens voor background-color
en border
werken niet goed als alleen een <fieldset>
wordt gebruikt. Voor goed resultaat is een extra div
nodig. De HTML component heeft daarom geen goede ondersteuning voor background-color
en border
.
Relevante WCAG regels
- WCAG eis 1.3.5
- voor een radio group en checkbox group is fieldset een goede manier het doel van de groep aan te geven