1'use strict'; 2(globalThis.webpackChunk_nl_design_system_website = globalThis.webpackChunk_nl_design_system_website || []).push([ 3 [17240], 4 { 5 18439(e, n, t) { 6 t.d(n, { R: () => l, x: () => r }); 7 var a = t(30758); 8 const i = {}, 9 o = a.createContext(i); 10 function l(e) { 11 const n = a.useContext(o); 12 return a.useMemo( 13 function () { 14 return 'function' == typeof e ? e(n) : { ...n, ...e }; 15 }, 16 [n, e], 17 ); 18 } 19 function r(e) { 20 let n; 21 return ((n = e.disableParentContext ? ('function' == typeof e.components ? e.components(i) : e.components || i) : l(e.components)), a.createElement(o.Provider, { value: n }, e.children)); 22 } 23 }, 24 19472(e, n, t) { 25 t.d(n, { L: () => o }); 26 var a = t(20201), 27 i = t(86070); 28 const o = ({ id: e, title: n, ...t }) => (0, i.jsx)(a.Ay, { lazyLoad: !0, adNetwork: !1, announce: 'Bekijk', cookie: !1, containerElement: 'div', id: e, title: n, poster: 'maxresdefault', ...t }); 29 }, 30 20201(e, n, t) { 31 t.d(n, { Ay: () => r }); 32 var a = t(86070), 33 i = t(30758); 34 const o = { default: 120, mqdefault: 320, hqdefault: 480, sddefault: 640, maxresdefault: 1280 }; 35 function l(e, n, t, a, i) { 36 const o = { '@context': 'https://schema.org', '@type': 'VideoObject', name: i?.name || n, thumbnailUrl: [i?.thumbnailUrl || t], embedUrl: i?.embedUrl || `${a}/embed/${e}`, contentUrl: i?.contentUrl || `https://www.youtube.com/watch?v=${e}`, ...(i?.description && { description: i.description }), ...(i?.uploadDate && { uploadDate: i.uploadDate }), ...(i?.duration && { duration: i.duration }) }; 37 return JSON.stringify(o); 38 } 39 const r = i.forwardRef(function (e, n) { 40 const [t, r] = i.useState(!1), 41 [s, d] = i.useState(e.alwaysLoadIframe || !1), 42 c = encodeURIComponent(e.id), 43 u = 'string' == typeof e.playlistCoverId ? encodeURIComponent(e.playlistCoverId) : null, 44 p = e.title, 45 h = e.poster || 'hqdefault', 46 m = e.announce || 'Watch', 47 g = !e.alwaysLoadIframe || (e.autoplay && e.muted), 48 k = i.useMemo(() => { 49 const n = new URLSearchParams({ ...(e.muted ? { mute: '1' } : {}), ...(g ? { autoplay: '1' } : {}), ...(e.enableJsApi ? { enablejsapi: '1' } : {}), ...(e.enableJsApi && typeof window < 'u' ? { origin: window.location.origin } : {}), ...(e.playlist ? { list: c } : {}) }); 50 return ( 51 e.params && 52 new URLSearchParams(e.params.startsWith('&') ? e.params.slice(1) : e.params).forEach((e, t) => { 53 n.append(t, e); 54 }), 55 n 56 ); 57 }, [e.muted, g, e.enableJsApi, e.playlist, c, e.params]), 58 j = i.useMemo(() => (e.cookie ? 'https://www.youtube.com' : 'https://www.youtube-nocookie.com'), [e.cookie]), 59 f = i.useMemo(() => (e.playlist ? `${j}/embed/videoseries?${k.toString()}` : `${j}/embed/${c}?${k.toString()}`), [e.playlist, j, c, k]), 60 b = !e.thumbnail && !e.playlist && 'maxresdefault' === h, 61 v = e.webp ? 'webp' : 'jpg', 62 y = e.webp ? 'vi_webp' : 'vi', 63 w = b 64 ? ((e, n, t, a = 'maxresdefault') => { 65 const [l, r] = (0, i.useState)(''); 66 return ( 67 (0, i.useEffect)(() => { 68 const i = `https://img.youtube.com/${n}/${e}/${a}.${t}`, 69 l = `https://img.youtube.com/${n}/${e}/hqdefault.${t}`, 70 s = o[a], 71 d = new Image(); 72 ((d.onload = () => { 73 d.width < s ? r(l) : r(i); 74 }), 75 (d.onerror = () => r(l)), 76 (d.src = i)); 77 }, [e, n, t, a]), 78 l 79 ); 80 })(e.id, y, v, h) 81 : null, 82 x = i.useMemo(() => e.thumbnail || w || `https://i.ytimg.com/${y}/${e.playlist ? u : c}/${h}.${v}`, [e.thumbnail, w, y, e.playlist, u, c, h, v]), 83 C = e.activatedClass || 'lyt-activated', 84 S = e.adNetwork || !1, 85 z = e.aspectHeight || 9, 86 E = e.aspectWidth || 16, 87 $ = e.iframeClass || '', 88 R = e.playerClass || 'lty-playbtn', 89 P = e.wrapperClass || 'yt-lite', 90 D = i.useCallback(e.onIframeAdded || function () {}, [e.onIframeAdded]), 91 _ = e.rel ? 'prefetch' : 'preload', 92 L = e.containerElement || 'article',
93 M = !1 !== e.noscriptFallback, 94 I = () => { 95 s || d(!0); 96 }; 97 return ( 98 i.useEffect(() => { 99 s && (D(), e.focusOnLoad && 'object' == typeof n && n?.current && n.current.focus()); 100 }, [s, D, e.focusOnLoad, n]), 101 i.useEffect(() => { 102 if (!s || !e.enableJsApi || !(e.onReady || e.onStateChange || e.onError || e.onPlay || e.onPause || e.onEnd || e.onBuffering || e.onPlaybackRateChange || e.onPlaybackQualityChange)) return; 103 let t = !1, 104 a = !1; 105 const i = (a) => { 106 if ('https://www.youtube.com' !== a.origin && 'https://www.youtube-nocookie.com' !== a.origin) return; 107 let i; 108 try { 109 i = 'string' == typeof a.data ? JSON.parse(a.data) : a.data; 110 } catch { 111 return; 112 } 113 switch (i.event) { 114 case 'onReady': 115 t || ((t = !0), e.onReady && e.onReady({ videoId: e.id, title: p })); 116 break; 117 case 'infoDelivery': 118 if (void 0 !== i.info?.playerState) { 119 const t = i.info.playerState; 120 switch ((e.onStateChange && e.onStateChange({ state: t, currentTime: i.info.currentTime, duration: i.info.duration }), t)) { 121 case 1: 122 e.onPlay?.(); 123 break; 124 case 2: 125 e.onPause?.(); 126 break; 127 case 0: 128 (e.onEnd?.(), e.stopOnEnd && 'object' == typeof n && n?.current?.contentWindow && n.current.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')); 129 break; 130 case 3: 131 e.onBuffering?.(); 132 } 133 } 134 (void 0 !== i.info?.playbackRate && e.onPlaybackRateChange?.(i.info.playbackRate), void 0 !== i.info?.playbackQuality && e.onPlaybackQualityChange?.(i.info.playbackQuality)); 135 break; 136 case 'onStateChange': 137 if (void 0 !== i.info?.playerState) { 138 const t = i.info.playerState; 139 switch ((e.onStateChange && e.onStateChange({ state: t, currentTime: i.info.currentTime, duration: i.info.duration }), t)) { 140 case 1: 141 e.onPlay?.(); 142 break; 143 case 2: 144 e.onPause?.(); 145 break; 146 case 0: 147 (e.onEnd?.(), e.stopOnEnd && 'object' == typeof n && n?.current?.contentWindow && n.current.contentWindow.postMessage('{"event":"command","func":"stopVideo","args":""}', '*')); 148 break; 149 case 3: 150 e.onBuffering?.(); 151 } 152 } 153 break; 154 case 'onError': 155 if (i.info && 'errorCode' in i.info) { 156 const n = i.info.errorCode; 157 e.onError && e.onError(n); 158 } 159 break; 160 case 'onPlaybackRateChange': 161 void 0 !== i.info?.playbackRate && e.onPlaybackRateChange?.(i.info.playbackRate); 162 break; 163 case 'onPlaybackQualityChange': 164 void 0 !== i.info?.playbackQuality && e.onPlaybackQualityChange?.(i.info.playbackQuality); 165 } 166 }; 167 window.addEventListener('message', i); 168 const o = [], 169 l = () => { 170 'object' == typeof n && n?.current?.contentWindow && n.current.contentWindow.postMessage('{"event":"listening","id":"' + c + '"}', '*'); 171 }, 172 r = () => { 173 a || 174 ((a = !0), 175 l(), 176 [100, 300, 600, 1200, 2400].forEach((e) => { 177 o.push(setTimeout(l, e)); 178 })); 179 }; 180 return ( 181 'object' == typeof n && n?.current 182 ? (n.current.addEventListener('load', r), 'complete' === n.current.contentDocument?.readyState && r()) 183 : [200, 500, 1e3, 2e3, 3e3].forEach((e) => { 184 o.push(setTimeout(l, e)); 185 }), 186 () => { 187 (window.removeEventListener('message', i), o.forEach(clearTimeout), 'object' == typeof n && n?.current && n.current.removeEventListener('load', r)); 188 } 189 ); 190 }, [s, e.enableJsApi, e.onReady, e.onStateChange, e.onError, e.onPlay, e.onPause, e.onEnd, e.onBuffering, e.onPlaybackRateChange, e.onPlaybackQualityChange, e.stopOnEnd, e.id, c, p, n]), 191 (0, a.jsxs)(a.Fragment, { 192 children: [ 193 !e.lazyLoad && (0, a.jsx)('link', { rel: _, href: x, as: 'image' }), 194 (0, a.jsx)(a.Fragment, { children: t && (0, a.jsxs)(a.Fragment, { children: [(0, a.jsx)('link', { rel: 'preconnect', href: j }), (0, a.jsx)('link', { rel: 'preconnect', href: 'https://www.google.com' }), S && (0, a.jsxs)(a.Fragment, { children: [(0, a.jsx)('link', { rel: 'preconnect', href: 'https://static.doubleclick.net' }), (0, a.jsx)('link', { rel: 'preconnect', href: 'https://googleads.g.doubleclick.net' })] })] }) }), 195 e.seo && !e.playlist && (0, a.jsx)('script', { type: 'application/ld+json', dangerouslySetInnerHTML: { __html: l(e.id, p, x, j, e.seo) } }), 196 M && !e.playlist && (0, a.jsx)('noscript', { children: (0, a.jsxs)('a', { href: `https://www.youtube.com/watch?v=${e.id}`, 'aria-label': `Watch ${p} on YouTube`, children: ['Watch "', p, '" on YouTube'] }) }), 197 (0, a.jsxs)(L, { 198 onPointerOver: () => { 199 t || r(!0); 200 }, 201 onClick: I, 202 className: `${P} ${s ? C : ''}`, 203 'data-title': p, 204 role: s || e.lazyLoad ? void 0 : 'img', 205 'aria-label': s ? void 0 : `${p} - YouTube video preview`, 206 style: { ...(!e.lazyLoad && { backgroundImage: `url(${x})` }), '--aspect-ratio': (z / E) * 100 + '%', ...(e.style || {}) }, 207 children: [e.lazyLoad && !s && (0, a.jsx)('img', { src: x, alt: `${p}
207 - YouTube thumbnail`, className: 'lty-thumbnail', loading: 'lazy' }), e.playlist && !s && (0, a.jsx)('div', { className: 'lty-playlist-icon', 'aria-hidden': 'true' }), !(e.hideButtonOnActivate && s) && (0, a.jsx)('button', { type: 'button', className: R, 'aria-label': `${m} ${p}`, 'aria-hidden': s || void 0, tabIndex: s ? -1 : 0, onClick: I, children: (0, a.jsx)('span', { className: 'lty-visually-hidden', children: m }) }), s && (0, a.jsx)('iframe', { ref: n, className: $, title: p, width: '560', height: '315', allow: 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', allowFullScreen: !0, src: f, referrerPolicy: e.referrerPolicy || 'strict-origin-when-cross-origin' })], 208 }), 209 ], 210 }) 211 ); 212 }); 213 }, 214 56672(e, n, t) { 215 t.d(n, { Ay: () => r, RM: () => o }); 216 var a = t(86070), 217 i = t(18439); 218 const o = [{ value: 'Over deze richtlijnen', id: 'over-deze-richtlijnen', level: 2 }]; 219 function l(e) { 220 const n = { a: 'a', em: 'em', h2: 'h2', p: 'p', ...(0, i.R)(), ...e.components }; 221 return (0, a.jsxs)(a.Fragment, { children: [(0, a.jsx)(n.h2, { id: 'over-deze-richtlijnen', children: 'Over deze richtlijnen' }), '\n', (0, a.jsxs)(n.p, { children: ['Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in ', (0, a.jsx)(n.em, { children: 'beta' }), '.'] }), '\n', (0, a.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, a.jsx)(n.a, { href: 'https://github.com/nl-design-system/documentatie/issues', children: 'Open een issue op GitHub' }), ' en deel je mening.'] })] }); 222 } 223 function r(e = {}) { 224 const { wrapper: n } = { ...(0, i.R)(), ...e.components }; 225 return n ? (0, a.jsx)(n, { ...e, children: (0, a.jsx)(l, { ...e }) }) : l(e); 226 } 227 }, 228 70869(e, n, t) { 229 (t.r(n), t.d(n, { assets: () => c, contentTitle: () => d, default: () => h, frontMatter: () => s, metadata: () => a, toc: () => u })); 230 const a = JSON.parse('{"id":"richtlijnen/content/tekstopmaak/language","title":"De juiste taal instellen","description":"Geef aan welke taal wordt gebruikt in de pagina of als deze anders is voor een deel van de pagina.","source":"@site/docs/richtlijnen/content/tekstopmaak/language.mdx","sourceDirName":"richtlijnen/content/tekstopmaak","slug":"/richtlijnen/content/tekstopmaak/taal","permalink":"/richtlijnen/content/tekstopmaak/taal","draft":false,"unlisted":false,"editUrl":"https://github.com/nl-design-system/documentatie/tree/main/docs/richtlijnen/content/tekstopmaak/language.mdx","tags":[],"version":"current","frontMatter":{"title":"De juiste taal instellen","hide_title":true,"hide_table_of_contents":false,"sidebar_label":"De juiste taal instellen","pagination_label":"De juiste taal instellen","description":"Geef aan welke taal wordt gebruikt in de pagina of als deze anders is voor een deel van de pagina.","slug":"/richtlijnen/content/tekstopmaak/taal","keywords":["semantiek","tekstopmaak","structuur","tekststructuur","taal"]},"sidebar":"richtlijnen","previous":{"title":"Koppen","permalink":"/richtlijnen/content/tekstopmaak/koppen"},"next":{"title":"Toegankelijke linkteksten","permalink":"/richtlijnen/content/tekstopmaak/linkteksten"}}'); 231 var i = t(86070), 232 o = t(18439), 233 l = t(19472), 234 r = t(56672); 235 const s = { title: 'De juiste taal instellen', hide_title: !0, hide_table_of_contents: !1, sidebar_label: 'De juiste taal instellen', pagination_label: 'De juiste taal instellen', description: 'Geef aan welke taal wordt gebruikt in de pagina of als deze anders is voor een deel van de pagina.', slug: '/richtlijnen/content/tekstopmaak/taal', keywords: ['semantiek', 'tekstopmaak', 'structuur', 'tekststructuur', 'taal'] }, 236 d = 'De juiste taal instellen', 237 c = {}, 238 u = [{ value: 'Voorbeeld van taalwisseling met een screenreader', id: 'voorbeeld-van-taalwisseling-met-een-screenreader', level: 3 }, { value: 'Taal van de pagina', id: 'taal-van-de-pagina', level: 2 }, { value: 'Een stukje tekst in een andere taal', id: 'een-stukje-tekst-in-een-andere-taal', level: 2 }, { value: 'Als je het niet kunt instellen', id: 'als-je-het-niet-kunt-instellen', level: 2 }, { value: 'Hoe te testen', id: 'hoe-te-testen', 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 }, ...r.RM]; 239 function p(e) { 240 const n = { a: 'a', h1: 'h1', h2: 'h2', h3: 'h3', header: 'header', li: 'li', p: 'p', ul: 'ul', ...(0, o.R)(), ...e.components }; 241 return (0, i.jsxs)(i.Fragment, { children: ['\n', '\n', '\n', (0, i.jsx)(n.header, { children: (0, i.jsx)(n.h1, { id: 'de-juiste-taal-instellen', children: 'De juiste taal instellen' }) }), '\n', (0, i.jsx)(n.p, { children: 'Voor de toegankelijkheid van je content is het belangrijk dat de gebruikte taal goed is ingesteld. Dat geldt voor de hele pagina \xe9n stukken tekst in een andere taal.' }), '\n', (0, i.jsxs)(n.p, { children: ['Het instellen van de juiste taal is belangrijk omdat hulptechnologie\xebn, zoals ', (0, i.jsx)(n.a, { href: '/woordenlijst/#screenreader', children: 'screenreaders' }), ' of vertaalhulpmiddelen, afhankelijk zijn van die informatie.'] }), '\n', (0, i.jsx)(n.p, { children: 'Als de taal niet goed is ingesteld:' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'spreekt een screenreader woorden verkeerd uit;' }), '\n', (0, i.jsx)(n.li, { children: 'worden automatische vertalingen onduidelijk of fout;' }), '\n', (0, i.jsx)(n.li, { children: 'is de inhoud minder toegankelijk voor mensen die de taal niet vloeiend beheersen.' }), '\n'] }), '\n', (0, i.jsx)(n.p, { children: 'Door de taal goed aan te geven, help je dus mensen die je content anders niet goed kunnen gebruiken of begrijpen.' }), '\n', (0, i.jsx)(n.h3, { id: 'voorbeeld-van-taalwisseling-met-een-screenreader', children: 'Voorbeeld van taalwisseling met een screenreader' }), '\n', (0, i.jsx)(n.p, { children: 'In deze video hoor je hoe de screenreader VoiceOver wisselt van stem en taal voor teksten waarvan de taal is
241ingesteld.' }), '\n', (0, i.jsx)(l.L, { id: '2UAjJ_5nxqw', title: 'Voorbeeld van taalwisseling met een screenreader' }), '\n', (0, i.jsx)(n.h2, { id: 'taal-van-de-pagina', children: 'Taal van de pagina' }), '\n', (0, i.jsx)(n.p, { children: 'Elke webpagina heeft een hoofdtaal. Die moet overeenkomen met de taal waarin de tekst op die pagina is geschreven.' }), '\n', (0, i.jsx)(n.p, { children: 'In sommige CMS\u2019en kun je de paginataal zelf instellen \u2014 bijvoorbeeld via de pagina-instellingen of bij het aanmaken van een nieuwe pagina. In andere gevallen is die vooraf ingesteld of wordt automatisch bepaald.' }), '\n', (0, i.jsx)(n.h2, { id: 'een-stukje-tekst-in-een-andere-taal', children: 'Een stukje tekst in een andere taal' }), '\n', (0, i.jsx)(n.p, { children: 'Gebruik je in je tekst een woord of zin in een andere taal dan de rest van de pagina? Geef dan aan dat dit stukje tekst in een andere taal is geschreven. Bijvoorbeeld bij Engelse termen (call to action), Franse citaten of Duitstalige namen.' }), '\n', (0, i.jsx)(n.p, { children: 'Stel alleen een taalwissel in als het woord nog niet is ingeburgerd in de hoofdtaal. Voor woorden die wel onderdeel zijn geworden van de hoofdtaal (denk bijvoorbeeld aan \xfcberhaupt, enfin en management) hoef je geen taalwissel in te stellen.' }), '\n', (0, i.jsx)(n.p, { children: 'In sommige CMS\u2019en kun je dit instellen via een opmaakoptie of een taalkeuze bij een tekstblok.' }), '\n', (0, i.jsx)(n.h2, { id: 'als-je-het-niet-kunt-instellen', children: 'Als je het niet kunt instellen' }), '\n', (0, i.jsx)(n.p, { children: 'Kun je de paginataal of de taal van een tekstblok niet vinden in je CMS? Ga dan na of je CMS deze mogelijkheid biedt. Is dat niet zo, of kun je het niet zelf aanpassen? Dan kun je uitzoeken wie dat w\xe9l kan of dit aankaarten b
241ij de partij die het CMS beheert of levert.' }), '\n', (0, i.jsx)(n.h2, { id: 'hoe-te-testen', children: 'Hoe te testen' }), '\n', (0, i.jsx)(n.p, { children: 'Lees je pagina rustig door en let op of er stukken tekst zijn in een andere taal dan de rest. Controleer het volgende:' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Is de juiste taal ingesteld voor de hele pagina?\nBekijk de pagina-instellingen in het CMS. Klopt de gekozen taal met de hoofdtaal van de inhoud?' }), '\n', (0, i.jsx)(n.li, { children: 'Staan er woorden of zinnen in een andere taal?\nBijvoorbeeld Engelse termen, Franse uitdrukkingen of citaten in een andere taal. Vraag jezelf bij elk geval af:\nIs dit als andere taal gemarkeerd in het CMS?' }), '\n'] }), '\n', (0, i.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, i.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, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: (0, i.jsx)(n.a, { href: '/wcag/3.1.1/', children: 'Succescriterium 3.1.1 Taal van de pagina' }) }), '\n', (0, i.jsx)(n.li, { children: (0, i.jsx)(n.a, { href: '/wcag/3.1.2/', children: 'Succescriterium 3.1.2 Taal van onderdelen' }) }), '\n'] }), '\n', (0, i.jsx)(r.Ay, {})] }); 242 } 243 function h(e = {}) { 244 const { wrapper: n } = { ...(0, o.R)(), ...e.components }; 245 return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(p, { ...e }) }) : p(e); 246 } 247 }, 248 }, 249]);
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.