1'use strict'; 2(globalThis.webpackChunk_nl_design_system_website = globalThis.webpackChunk_nl_design_system_website || []).push([ 3 [4168], 4 { 5 14881(e, n, l) { 6 l.d(n, { K: () => c, n: () => i }); 7 var o = l(13526), 8 s = l(30758), 9 r = l(96345), 10 t = l(37168), 11 a = l(86070); 12 const i = (0, s.forwardRef)(({ as: e, className: n, children: l, ...s }, r) => { 13 const t = e || 'div', 14 i = (0, o.A)('ma-utrecht-accordion', 'utrecht-accordion', n); 15 return (0, a.jsx)(t, { ref: r, className: i, ...s, children: l }); 16 }), 17 c = ({ className: e, classNamePanel: n, label: l, heading: s, headingLevel: i, headingApperance: c, ...d }) => { 18 const m = (0, o.A)('utrecht-accordion__section', e), 19 u = (0, o.A)('utrecht-accordion__panel', n); 20 return (0, a.jsxs)('details', { className: m, ...d, children: [(0, a.jsx)('summary', { className: 'utrecht-accordion__header', children: (0, a.jsxs)('span', { className: 'nl-button nl-button--subtle', children: [(0, a.jsx)('span', { className: 'nl-button__icon-start', children: (0, a.jsx)(r.A, {}) }), (0, a.jsxs)('span', { className: 'nl-button__label', children: [s && (0, a.jsx)(t.D, { level: i, appearance: c, children: s }), l] })] }) }), (0, a.jsx)('div', { className: u, children: d.children })] }); 21 }; 22 }, 23 15762(e, n, l) { 24 (l.r(n), l.d(n, { assets: () => j, contentTitle: () => v, default: () => b, frontMatter: () => g, metadata: () => o, toc: () => y })); 25 const o = JSON.parse('{"id":"richtlijnen/formulieren/questions/why/index","title":"Leg uit waarom informatie nodig is","description":"Richtlijnen over uitleggen waarom informatie nodig is.","source":"@site/docs/richtlijnen/formulieren/questions/1-why/index.mdx","sourceDirName":"richtlijnen/formulieren/questions/1-why","slug":"/richtlijnen/formulieren/vragen/leg-uit-waarom","permalink":"/richtlijnen/formulieren/vragen/leg-uit-waarom","draft":false,"unlisted":false,"editUrl":"https://github.com/nl-design-system/documentatie/tree/main/docs/richtlijnen/formulieren/questions/1-why/index.mdx","tags":[],"version":"current","frontMatter":{"title":"Leg uit waarom informatie nodig is","title_sm":"Waarom stel je de vraag","hide_title":true,"hide_table_of_contents":false,"sidebar_label":"Waarom stel je de vraag","pagination_label":"Waarom stel je de vraag","description":"Richtlijnen over uitleggen waarom informatie nodig is.","slug":"/richtlijnen/formulieren/vragen/leg-uit-waarom","keywords":["labels","formulier","design","code"]},"sidebar":"richtlijnen","previous":{"title":"Uit te vragen informatie in een formulier","permalink":"/richtlijnen/formulieren/vragen/"},"next":{"title":"Waarom is informatie nodig","permalink":"/richtlijnen/formulieren/vragen/check-noodzaak"}}'); 26 var s = l(86070), 27 r = l(18439), 28 t = l(56672), 29 a = l(38953), 30 i = l(56528); 31 function c(e) { 32 const n = { h2: 'h2', ...(0, r.R)(), ...e.components }; 33 return (0, s.jsxs)(s.Fragment, { children: ['\n', '\n', (0, s.jsx)(n.h2, { id: 'voorbeelden', children: 'Voorbeelden' }), '\n', (0, s.jsx)(i.$, { appearance: 'do', title: 'Leg het doel uit.', description: 'Met uitleg weet de gebruiker waar die aan toe is.', children: (0, s.jsx)(a.H, { language: 'html', children: () => (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)('p', { children: (0, s.jsx)('label', { htmlFor: 'email', children: 'E-mailadres' }) }), (0, s.jsx)('p', { id: 'email-description', children: 'We hebben uw e-mailadres nodig om een afspraakbevestiging te kunnen sturen.' }), (0, s.jsx)('p', { children: (0, s.jsx)('input', { 'aria-describedby': 'email-description', autoComplete: 'email', id: 'email', type: 'email' }) })] }) }) }), '\n', (0, s.jsx)(i.$, { appearance: 'dont', title: 'Privacygevoelige informatie vragen zonder uitleg waarom deze gegevens nodig zijn.', children: (0, s.jsx)(a.H, { language: 'html', children: () => (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)('p', { children: (0, s.jsx)('label', { htmlFor: 'bsn', children: 'Burgerservicenummer' }) }), (0, s.jsx)('p', { children: (0, s.jsx)('input', { id: 'bsn', type: 'text' }) })] }) }) })] }); 34 } 35 function d(e = {}) { 36 const { wrapper: n } = { ...(0, r.R)(), ...e.components }; 37 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(c, { ...e }) }) : c(e); 38 } 39 function m(e) { 40 const n = { h1: 'h1', header: 'header', p: 'p', ...(0, r.R)(), ...e.components }; 41 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.header, { children: (0, s.jsx)(n.h1, { id: 'leg-uit-waarom-informatie-nodig-is', children: 'Leg uit waarom informatie nodig is' }) }), '\n', (0, s.jsx)(n.p, { children: 'Soms lijkt een vraag overbodig, terwijl deze informatie essentieel is voor het verwerken van de gegevens. In zulke gevallen is het een goed idee een korte uitleg toe te voegen, om bijvoorbeeld het doel te beschrijven.' }), '\n', (0, s.jsx)(n.p, { children: 'Vertel waarom je deze informatie nodig hebt en wat je ermee doet. Uitleg geeft duidelijkheid aan de gebruiker en voorkomt onzekerheid bij het invullen.' })] }); 42 } 43 function u(e = {}) { 44 const { wrapper: n } = { ...(0, r.R)(), ...e.components }; 45 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(m, { ...e }) }) : m(e); 46 } 47 function h(e) { 48 const n = { a: 'a', h2: 'h2', li: 'li', p: 'p', ul: 'ul', ...(0, r.R)(), ...e.components }; 49 return (0, s.jsxs)(s.Fragment, { children: [(0, s.jsx)(n.h2, { id: 'meer-lezen-over-gerelateerde-wcag-succescriteria-op-nl-design-system', children: 'Meer lezen over gerelateerde WCAG-succescriteria op NL Design System' }), '\n', (0, s.jsx)(n.p, { children: "Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet." }), '\n', (0, s.jsxs)(n.ul, { children: ['\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/wcag/2.4.6/', children: 'Succescriterium 2.4.6 Koppen en labels' }) }), '\n', (0, s.jsx)(n.li, { children: (0, s.jsx)(n.a, { href: '/wcag/3.3.2/', children: 'Succescriterium 3.3.2 Labels of instructies' }) }), '\n'] })] }); 50 } 51 function p(e = {}) { 52 const { wrapper: n } = { ...(0, r.R)(), ...e.components }; 53 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(h, { ...e }) }) : h(e); 54 }
55 const g = { title: 'Leg uit waarom informatie nodig is', title_sm: 'Waarom stel je de vraag', hide_title: !0, hide_table_of_contents: !1, sidebar_label: 'Waarom stel je de vraag', pagination_label: 'Waarom stel je de vraag', description: 'Richtlijnen over uitleggen waarom informatie nodig is.', slug: '/richtlijnen/formulieren/vragen/leg-uit-waarom', keywords: ['labels', 'formulier', 'design', 'code'] }, 56 v = void 0, 57 j = {}, 58 y = [{ value: 'Voorbeelden', id: 'voorbeelden', level: 2 }, { value: 'Meer lezen over gerelateerde WCAG-succescriteria op NL Design System', id: 'meer-lezen-over-gerelateerde-wcag-succescriteria-op-nl-design-system', level: 2 }, ...t.RM]; 59 function x(e) { 60 return (0, s.jsxs)(s.Fragment, { children: ['\n', '\n', (0, s.jsx)(u, {}), '\n', (0, s.jsx)(d, {}), '\n', (0, s.jsx)(p, {}), '\n', (0, s.jsx)(t.Ay, {})] }); 61 } 62 function b(e = {}) { 63 const { wrapper: n } = { ...(0, r.R)(), ...e.components }; 64 return n ? (0, s.jsx)(n, { ...e, children: (0, s.jsx)(x, { ...e }) }) : x(); 65 } 66 }, 67 18439(e, n, l) { 68 l.d(n, { R: () => t, x: () => a }); 69 var o = l(30758); 70 const s = {}, 71 r = o.createContext(s); 72 function t(e) { 73 const n = o.useContext(r); 74 return o.useMemo( 75 function () { 76 return 'function' == typeof e ? e(n) : { ...n, ...e }; 77 }, 78 [n, e], 79 ); 80 } 81 function a(e) { 82 let n; 83 return ((n = e.disableParentContext ? ('function' == typeof e.components ? e.components(s) : e.components || s) : t(e.components)), o.createElement(r.Provider, { value: n }, e.children)); 84 } 85 }, 86 28369(e, n, l) { 87 l.d(n, { M: () => c }); 88 var o = l(46447), 89 s = l(16194), 90 r = l(30758), 91 t = l(56528); 92 const a = { 93 plain: { color: 'var(--nlds-code-block-color)', backgroundColor: 'var(--nlds-code-block-background-color)' }, 94 styles: [ 95 { types: ['maybe-class-name'], style: { color: 'var(--nlds-code-block-maybe-class-name-color, var(--nlds-code-block-class-name-color))' } }, 96 { types: ['comment'], style: { color: 'var(--nlds-code-block-comment-color)', fontStyle: 'italic' } }, 97 { types: ['prolog'], style: { color: 'var(--nlds-code-block-prolog-color)', fontStyle: 'italic' } }, 98 { types: ['cdata'], style: { color: 'var(--nlds-code-block-cdata-color)', fontStyle: 'italic' } }, 99 { types: ['punctuation'], style: { color: 'var(--nlds-code-block-punctuation-color)' } }, 100 { types: ['deleted'], style: { color: 'var(--nlds-code-block-deleted-color)', fontStyle: 'italic' } }, 101 { types: ['symbol'], style: { color: 'var(--nlds-code-block-symbol-color)' } }, 102 { types: ['property'], style: { color: 'var(--nlds-code-block-property-color)' } }, 103 { types: ['tag'], style: { color: 'var(--nlds-code-block-tag-color)' } }, 104 { types: ['operator'], style: { color: 'var(--nlds-code-block-operator-color)' } }, 105 { types: ['keyword'], style: { color: 'var(--nlds-code-block-keyword-color)' } }, 106 { types: ['boolean'], style: { color: 'var(--nlds-code-block-boolean-color)' } }, 107 { types: ['number'], style: { color: 'var(--nlds-code-block-number-color)' } }, 108 { types: ['constant'], style: { color: 'var(--nlds-code-block-constant-color)' } }, 109 { types: ['function'], style: { color: 'var(--nlds-code-block-function-color)' } }, 110 { types: ['builtin'], style: { color: 'var(--nlds-code-block-builtin-color)' } }, 111 { types: ['char'], style: { color: 'var(--nlds-code-block-char-color)' } }, 112 { types: ['selector'], style: { color: 'var(--nlds-code-block-selector-color)', fontStyle: 'italic' } }, 113 { types: ['doctype'], style: { color: 'var(--nlds-code-block-doctype-color)', fontStyle: 'italic' } }, 114 { types: ['attr-name'], style: { color: 'var(--nlds-code-block-attr-name-color)', fontStyle: 'italic' } }, 115 { types: ['inserted'], style: { color: 'var(--nlds-code-block-inserted-color)', fontStyle: 'italic' } }, 116 { types: ['string'], style: { color: 'var(--nlds-code-block-string-color)' } }, 117 { types: ['url'], style: { color: 'var(--nlds-code-block-url-color)' } }, 118 { types: ['entity'], style: { color: 'var(--nlds-code-block-entity-color)' } },
119 { types: ['class-name'], style: { color: 'var(--nlds-code-block-class-name-color)' } }, 120 { types: ['atrule'], style: { color: 'var(--nlds-code-block-atrule-color)' } }, 121 { types: ['attr-value'], style: { color: 'var(--nlds-code-block-attr-value-color)' } }, 122 { types: ['regex'], style: { color: 'var(--nlds-code-block-regex-color)' } }, 123 { types: ['important'], style: { color: 'var(--nlds-code-block-important-color)', fontWeight: 'bold' } }, 124 { types: ['variable'], style: { color: 'var(--nlds-code-block-variable-color)' } }, 125 { types: ['bold'], style: { fontWeight: 'bold' } }, 126 { types: ['italic'], style: { fontStyle: 'italic' } }, 127 ], 128 }; 129 var i = l(86070); 130 function c({ lineNumber: e, syntax: n, textContent: l, trim: c }) { 131 let d = l; 132 const { title: m, type: u } = (0, r.useContext)(t.x), 133 h = (0, r.useId)(); 134 return (c && (d = d.trim()), (0, i.jsx)(s.f4, { theme: a, code: d, language: n || '', children: ({ style: n, tokens: l, getLineProps: s, getTokenProps: r }) => (0, i.jsxs)(i.Fragment, { children: [(0, i.jsxs)('span', { hidden: !0, id: h, children: ['codevoorbeeld ', u ? `\u201c${u}\u201d` : '', ' ', m ? ': ' : ' ', m] }), (0, i.jsx)(o.NG, { tabIndex: 0, role: m ? 'region' : void 0, 'aria-labelledby': h, style: n, children: l.map((n, l) => (0, i.jsxs)('span', { ...s({ line: n }), children: [e && (0, i.jsx)('span', { children: l + 1 }), n.map((e, n) => (0, i.jsx)('span', { ...r({ token: e }) }, n)), '\n'] }, l)) })] }) })); 135 } 136 }, 137 38953(e, n, l) { 138 l.d(n, { H: () => f }); 139 var o = l(28369), 140 s = l(46447), 141 r = l(13526), 142 t = l(68148), 143 a = l(9016), 144 i = l(69303), 145 c = l(91635), 146 d = l(30734), 147 m = l(30758), 148 u = l(31186), 149 h = l(65904), 150 p = l.n(h), 151 g = l(14881), 152 v = l(46847), 153 j = l(86070); 154 const y = ({ children: e }) => (0, j.jsx)(s.ui, { className: 'nlds-canvas__example-surface', children: (0, j.jsx)(s.yo, { className: (0, r.A)('utrecht-document--surface', 'nlds-canvas__example-document'), children: (0, j.jsx)(s.fz, { className: 'nlds-canvas__example-paragraph', children: e }) }) }); 155 y.displayName = 'ParagraphContainer'; 156 const x = ({ children: e }) => (0, j.jsx)(s.ui, { className: 'nlds-canvas__example-surface', children: (0, j.jsx)(s.yo, { className: (0, r.A)('utrecht-document--surface', 'nlds-canvas__example-document'), children: e }) }); 157 x.displayName = 'DocumentContainer'; 158 const b = ({ children: e }) => (0, j.jsx)(s.ui, { className: 'nlds-canvas__example-surface', children: e }); 159 b.displayName = 'SurfaceContainer'; 160 const f = globalThis.isAstro 161 ? ({ language: e, className: n, code: l = '<p>No code provided</p>', rawCode: o, copyCode: s, defaultExpandedCode: t, designTokens: a }) => { 162 const i = 'string' == typeof l ? l : o || '', 163 c = 'string' == typeof l ? p().highlight(l, p().languages[e], e) : p().highlight(o || '', p().languages[e], e); 164 return (0, j.jsxs)('div', { className: (0, r.A)('ma-canvas-astro', n), children: [(0, j.jsx)('div', { className: 'voorbeeld-theme utrecht-root', style: a, children: (0, j.jsx)('div', { className: 'ma-canvas-astro__example utrecht-html ma-flow', dangerouslySetInnerHTML: { __html: i } }) }), (0, j.jsx)(g.n, { children: (0, j.jsxs)(g.K, { label: 'Code', open: t, children: [(0, j.jsx)('pre', { className: 'language-html nl-code-block', tabIndex: 0, children: (0, j.jsx)('code', { className: 'language-html nl-code-block__code', dangerouslySetInnerHTML: { __html: c } }) }), 'allow' === s && (0, j.jsx)(v.$, { 'data-copy-code': i, purpose: 'secondary', children: 'Kopieer code' })] }) })] }); 165 } 166 : ({ code: e, copy: n = !0, defaultExpandedCode: l = !1, displayCode: h = !0, children: p, container: g = 'document', language: v, designTokens: f }) => { 167 const _ = 'function' == typeof p ? p() : p, 168 k = 'function' == typeof e ? e() : (0, m.isValidElement)(e) ? e : void 0, 169 w = 'string' == typeof e ? e : u.qV(k || _), 170 [N, A] = (0, m.useState)(w), 171 [C, z] = (0, m.useState)(l); 172 (0, m.useEffect)(() => { 173 (async () => { 174 const e = await d.Ay.format(w, { parser: v, plugins: [t.A, a.Ay, i.Ay, c.Ay], semi: !1, singleAttributePerLine: !0, embeddedLanguageFormatting: 'off', htmlWhitespaceSensitivity: 'ignore' }); 175 A(e); 176 })(); 177 }, [w]); 178 const S = (0, m.useId)(); 179 let L = m.Fragment; 180 return ( 181 'paragraph' === g ? (L = y) : 'document' === g ? (L = x) : 'surface' === g && (L = b), 182 (0, j.jsxs)('div', { 183 className: (0, r.A)('nlds-canvas'),
184 children: [ 185 _ && (0, j.jsx)('div', { className: (0, r.A)('nlds-canvas__example'), children: (0, j.jsx)('div', { className: 'voorbeeld-theme', style: f, children: (0, j.jsx)(L, { children: (0, j.jsx)(s.v$, { children: _ }) }) }) }), 186 h && 187 (0, j.jsx)('div', { 188 className: (0, r.A)('nlds-canvas__toolbar'), 189 children: (0, j.jsx)(s.$n, { 190 className: (0, r.A)('nlds-canvas__button', 'nlds-canvas__toggle-code-button'), 191 appearance: 'subtle-button', 192 onClick: () => { 193 z(!C); 194 }, 195 'aria-expanded': C, 196 'aria-controls': S, 197 children: C ? 'Verberg code' : 'Bekijk code', 198 }), 199 }), 200 h && 201 (0, j.jsxs)('div', { 202 className: (0, r.A)('nlds-canvas__code-block', !n && 'nlds-canvas__code-block--user-select-none'), 203 id: S, 204 hidden: !C, 205 children: [ 206 (0, j.jsx)(o.M, { codeBlockLabel: 'Codevoorbeeld', syntax: v, textContent: N, trim: !0 }), 207 n && 208 (0, j.jsx)('div', { 209 className: (0, r.A)('nlds-canvas__toolbar', 'nlds-canvas__toolbar--copy'), 210 children: (0, j.jsx)(s.$n, { 211 className: (0, r.A)('nlds-canvas__button', 'nlds-canvas__copy-button'), 212 appearance: 'subtle-button', 213 onClick: () => { 214 navigator.clipboard.writeText(N).catch((e) => console.error('Copy code failed', e)); 215 }, 216 children: 'Kopieer', 217 }), 218 }), 219 ], 220 }), 221 ], 222 }) 223 ); 224 }; 225 }, 226 46847(e, n, l) { 227 l.d(n, { $: () => o.$n }); 228 var o = l(50805); 229 }, 230 56528(e, n, l) { 231 l.d(n, { $: () => m, x: () => d }); 232 var o = l(4077), 233 s = l(58315), 234 r = l(46447), 235 t = l(13526), 236 a = l(94988), 237 i = l(30758), 238 c = l(86070); 239 const d = (0, i.createContext)({}), 240 m = ({ title: e, appearance: n, description: l, children: i, figure: m }) => { 241 const u = { do: 'Doen', dont: 'Niet doen' }, 242 h = m ? 'figure' : 'div', 243 p = m ? 'figcaption' : 'div', 244 g = 'string' == typeof l ? (0, c.jsx)(a.oz, { components: { a: r.N_ }, children: l }) : l; 245 return (0, c.jsxs)(h, { className: (0, t.A)('nlds-guideline', `nlds-guideline--${n}`), id: 'string' == typeof e ? e?.toLowerCase().replace(/\s/g, '-') : void 0, children: [(0, c.jsxs)(p, { className: 'nlds-guideline__description', children: ['dont' === n ? (0, c.jsxs)(c.Fragment, { children: [(0, c.jsxs)(r.fz, { className: (0, t.A)('nlds-guideline__badge', `nlds-guideline__badge--${n}`), children: [(0, c.jsx)(s.A, { 'aria-hidden': 'true', role: 'presentation', className: 'nlds-guideline__icon' }), (0, c.jsx)('span', { className: 'nlds-guideline__title', children: u.dont })] }), (0, c.jsx)(r.fz, { children: e })] }) : (0, c.jsxs)(c.Fragment, { children: [(0, c.jsxs)(r.fz, { className: (0, t.A)('nlds-guideline__badge', `nlds-guideline__badge--${n}`), children: [(0, c.jsx)(o.A, { 'aria-hidden': 'true', role: 'presentation', className: 'nlds-guideline__icon' }), (0, c.jsx)('span', { className: 'nlds-guideline__title', children: u.do })] }), (0, c.jsx)(r.fz, { children: e })] }), g] }), (0, c.jsx)('div', { className: 'nlds-guideline__example', children: (0, c.jsx)(d.Provider, { value: { title: e, type: u[n] }, children: i }) })] }); 246 }; 247 }, 248 56672(e, n, l) { 249 l.d(n, { Ay: () => a, RM: () => r }); 250 var o = l(86070), 251 s = l(18439); 252 const r = [{ value: 'Over deze richtlijnen', id: 'over-deze-richtlijnen', level: 2 }]; 253 function t(e) { 254 const n = { a: 'a', em: 'em', h2: 'h2', p: 'p', ...(0, s.R)(), ...e.components }; 255 return (0, o.jsxs)(o.Fragment, { children: [(0, o.jsx)(n.h2, { id: 'over-deze-richtlijnen', children: 'Over deze richtlijnen' }), '\n', (0, o.jsxs)(n.p, { children: ['Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in ', (0, o.jsx)(n.em, { children: 'beta' }), '.'] }), '\n', (0, o.jsxs)(n.p, { children: ['We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen?\n', (0, o.jsx)(n.a, { href: 'https://github.com/nl-design-system/documentatie/issues', children: 'Open een issue op GitHub' }), ' en deel je mening.'] })] }); 256 } 257 function a(e = {}) { 258 const { wrapper: n } = { ...(0, s.R)(), ...e.components }; 259 return n ? (0, o.jsx)(n, { ...e, children: (0, o.jsx)(t, { ...e }) }) : t(e); 260 } 261 }, 262 }, 263]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.