1'use strict'; 2(globalThis.webpackChunk_nl_design_system_website = globalThis.webpackChunk_nl_design_system_website || []).push([ 3 [2592], 4 { 5 13582(e, n, l) { 6 (l.r(n), l.d(n, { assets: () => r, contentTitle: () => s, default: () => h, frontMatter: () => t, metadata: () => a, toc: () => d })); 7 var a = l(84041), 8 i = l(86070), 9 o = l(18439); 10 const t = { title: 'De toegankelijke naam van een link op een logo in de header', slug: 'toegankelijke-naam-link-logo-header', authors: [{ key: 'Rian Rietveld', title: 'Specialist webtoegankelijkheid' }], tags: ['link', 'logo', 'toegankelijke naam'], image: 'https://raw.githubusercontent.com/nl-design-system/documentatie/assets/blog-toegankelijke-naam-link-logo.png', hide_table_of_contents: !1, date: new Date('2025-02-11T00:00:00.000Z') }, 11 s = void 0, 12 r = { authorsImageUrls: [void 0] }, 13 d = [ 14 { value: 'Optie 1: De toegankelijke naam in het alt-attribuut van een afbeelding', id: 'optie-1-de-toegankelijke-naam-in-het-alt-attribuut-van-een-afbeelding', level: 2 }, 15 { value: 'Optie 2: De toegankelijke naam in een aria-label bij de link.', id: 'optie-2-de-toegankelijke-naam-in-een-aria-label-bij-de-link', level: 2 }, 16 { value: 'Bij een afbeelding', id: 'bij-een-afbeelding', level: 3 }, 17 { value: 'Bij een inline SVG', id: 'bij-een-inline-svg', level: 3 }, 18 { value: 'Discussie', id: 'discussie', level: 2 }, 19 { value: 'Heb ik het woord 'logo' nodig? Is dat niet overbodig, zoals het woord 'afbeelding' of 'foto'?', id: 'heb-ik-het-woord-logo-nodig-is-dat-niet-overbodig-zoals-het-woord-afbeelding-of-foto', level: 3 }, 20 { value: 'Is dit geen overtreding van 2.5.3 Label in naam?', id: 'is-dit-geen-overtreding-van-253-label-in-naam', level: 3 }, 21 ]; 22 function g(e) { 23 const n = { a: 'a', code: 'code', h2: 'h2', h3: 'h3', li: 'li', p: 'p', pre: 'pre', strong: 'strong', ul: 'ul', ...(0, o.R)(), ...e.components }; 24 return (0, i.jsxs)(i.Fragment, { children: [(0, i.jsxs)(n.p, { children: ['Hoe geef je een link op een logo in de header een goede toegankelijke naam? We geven twee opties voor het toevoegen van de toegankelijke naam: via het ', (0, i.jsx)(n.strong, { children: 'alt-attribuut' }), ' van een afbeelding of via een ', (0, i.jsx)(n.strong, { children: 'aria-label' }), ' op de link. Welke optie je kiest is afhankelijk van het framework, CMS, of Design System dat je gebruikt.'] }), '\n', (0, i.jsx)(n.p, { children: 'Het is een veelvoorkomend patroon om een logo in de header te gebruiken als een link naar de homepage. Maar wat moet de toegankelijke naam van de link zijn? "Gemeente Voorbeeld", "homepage" of "Logo gemeente Voorbeeld"? Maakt het \xfcberhaupt uit?' }), '\n', (0, i.jsxs)(n.p, { children: ['De toegankelijke naam wordt voorgelezen door ', (0, i.jsx)(n.a, { href: '/woordenlijst/#screenreader', children: 'screenreaders' }), ' zodat blinde en slechtziende bezoekers ook weten waar de link naartoe gaat.'] }), '\n', (0, i.jsxs)(n.p, { children: ['Het probleem met het linken van een logo is dat het ', (0, i.jsx)(n.strong, { children: 'twee doelen' }), ' dient:'] }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'een logo, dat aangeeft welke site je bezoekt;' }), '\n', (0, i.jsx)(n.li, { children: 'een link, die naar de homepage leidt.' }), '\n'] }), '\n', (0, i.jsx)(n.p, { children: "Leg dus uit dat dit een logo is en waar de link naartoe leidt: \"Sitenaam logo, naar de homepage.\"\nJe kunt er ook voor kiezen 'homepage' te wijzigen in 'voorpagina'." }), '\n', (0, i.jsxs)(n.p, { children: [(0, i.jsx)(n.strong, { children: 'Let op' }), ': Begin de toegankelijke naam altijd met de zichtbare tekst, zodat de link gemakkelijker te selecteren is voor mensen die spraakherkenningssoftware gebruiken.'] }), '\n', (0, i.jsx)(n.h2, { id: 'optie-1-de-toegankelijke-naam-in-het-alt-attribuut-van-een-afbeelding', children: 'Optie 1: De toegankelijke naam in het alt-attribuut van een afbeelding' }), '\n', (0, i.jsx)(n.p, { children: 'Gebruik je een afbeelding zoals een .gif, .png, .jpg of .svg, dan kun je het alt-attribuut gebruiken om de link een toegankelijke naam te geven. De inhoud van het alt-attribuut, de alt-tekst van een afbeelding binnen een link, wordt dan toegevoegd aan de linktekst.' }), '\n', (0, i.jsx)(n.p, { children: 'Laten we NL Design System als voorbeeld nemen.' }), '\n', (0, i.jsx)(n.p, { children: 'In de code (vereenvoudigd):' }), '\n', (0, i.jsx)(n.pre, { children: (0, i.jsx)(n.code, { className: 'language-html', children: '<a href="https://nldesignsystem.nl/">\n <img alt="NL Design System logo, naar de homepage" src="logo-nlds.svg" />\n</a>\n' }) }), '\n', (0, i.jsx)(n.p, { children: 'Gegenereerde HTML:' }), '\n', (0, i.jsx)('a', { href: 'https://nldesignsystem.nl/', class: 'navbar-logo', children: (0, i.jsx)('img', { alt: 'NL Design System logo, naar de homepage', src: 'https://raw.githubusercontent.com/nl-design-system/documentatie/9e5331b623e1bbd5bea950c934a20459e13b64bf/logo.svg', width: '315', height: '129' }) }), '\n', (0, i.jsx)(n.p, { children: 'Hoe lezen screenreaders dit voor?' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: "VoiceOver in Safari: 'Link, afbeelding, NL Design System logo, naar de homepage'." }), '\n', (0, i.jsx)(n.li, { children: "NVDA in Firefox : 'NL Design System logo, naar de homepage, afbeelding, link'." }), '\n'] }), '\n', (0, i.jsx)(n.p, { children: 'Alle informatie is aanwezig.' }), '\n', (0, i.jsx)(n.p, { children: 'Er is een voordeel van het gebruik van het alt-attribuut in plaats van een aria-label oplossing. Wanneer de verbinding traag is, zal de alt-tekst al verschijnen voordat de afbeelding wordt geladen en informeert het alle gebruikers al over de naam van de site en het linkdoel. Het is behoorlijk robuust.' }), '\n', (0, i.jsx)(n.h2, { id: 'optie-2-de-toegankelijke-naam-in-een-aria-label-bij-de-link', children: 'Optie 2: De toegankelijke naam in een aria-label bij de link.' }), '\n', (0, i.jsx)(n.h3, { id: 'bij-een-afbeelding', children: 'Bij een afbeelding' }), '\n', (0, i.jsxs)(n.p, { children: ['Wanneer de toegankelijke naam met een ', (0, i.jsx)(n.code, { children: 'aria-label' }), ' in het ', (0, i.jsx)(n.code, { children: '<a>' }), '-element staat, overschrijft dit alle inhoud binnen de link, dus de inhoud van het alt-attribuut van de afbeelding wordt ook niet voorgelezen. Geef de afbeelding zelf wel een goede alt-tekst mee, zeker als je de afbeelding vaak hergebruikt op de website.'] }), '\n', (0, i.jsx)(n.p, { children: 'In de code (vereenvoudigd):' }), '\n', (0, i.jsx)(n.pre, { children: (0, i.jsx)(n.code, { className: 'language-html', children: '<a aria-label="NL Design System logo, naar de homepage" href="https://nldesignsystem.nl/">\n <img alt="NL Design System logo" src="logo-nlds.svg" />\n</a>\n' }) }), '\n', (0, i.jsx)(n.h3, { id: 'bij-een-inline-svg', children: 'Bij een inline SVG' }), '\n', (0, i.jsxs)(n.p, { children: ['Het voordeel van een ', (0, i.jsx)(n.code, { children: 'aria-label' }), ' bij de SVG gebruiken in plaats van ', (0, i.jsxs)(n.a, { href: 'https://www.tpgi.com/using-aria-enhance-svg-accessibility/', children: [(0, i.jsx)(n.code, { children: '<title>' }), ' en ', (0, i.jsx)(n.code, { children: 'aria-labelledby' })] }), ', is dat er geen tooltip verschijnt als je over het logo hovert met de muis.'] }), '\n', (0, i.jsxs)(n.p, { children: ['Ook hier: logo moet op zichzelf kunnen staan als het herbruikbaar is en krijgt daarom een ', (0, i.jsx)(n.code, { children: 'role="img"' }), ' mee en ', (0, i.jsx)(n.code, { children: 'aria-label="NL Design System logo"' }), ' als toegankelijke naam. Begin hier weer met de zichtbare tekst.'] }), '\n', (0, i.jsx)(n.p, { children: 'In de code (vereenvoudigd):' }), '\n', (0, i.jsx)(n.pre, { children: (0, i.jsx)(n.code, { className: 'language-html', children: '<a aria-label="NL Design System logo, naar de homepage" href="https://nldesignsystem.nl/">\n <svg aria-label="NL Design System logo" role="img">[...]</svg>\n</a>\n' }) }), '\n', (0, i.jsx)(n.p, { children: 'Gegenereerde HTML:' }), '\n', (0, i.jsx)('a', { href: 'https://nldesignsystem.nl/', 'aria-label': 'NL Design System logo, naar de homepage', class: 'navbar-logo', children: (0, i.jsxs)('svg', { role: 'img', 'aria-label': 'NL Design System logo', width: '315', height: '129', viewBox: '0 0 945 387', fill: 'none', xmlns: 'http://www.w3.org/2000/svg', children: [(0, i.jsx)('path', { d: 'M427.673 72.8504C427.673 60.2885 426.643 38.4554 425.603 23.1531L428.353 22.813C433.164 36.055 440.215 53.2475 445.036 63.209L466.009 103.955H498.843V0.799805H475.98V32.6145C475.98 44.8163 476.84 62.8789 478.04 77.8311L475.29 78.1712C471.159 65.7994 464.288 48.0868 457.757 35.3649L439.705 0.809801H404.63V103.965H427.663V72.8504H427.673Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M448.836 126.168H404.84V229.323H448.496C481.501 229.323 501.104 209.201 501.104 176.536C501.104 143.871 485.121 126.158 448.836 126.158V126.168ZM446.596 209.04H429.573V146.631H445.726C467.559 146.631 476.33 154.702 476.33 176.546C476.33 198.389 468.079 209.04 446.586 209.04H446.596Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M550.951 231.554C574.154 231.554 583.616 220.892 587.236 206.79L567.634 201.459C565.573 207.65 562.303 212.811 551.131 212.811C539.959 212.811 533.939 206.96 532.568 193.898H587.757C588.097 189.598 588.277 186.337 588.277 182.897C588.277 160.373 576.415 145.591 551.311 145.591C524.837 145.591 509.545 162.094 509.545 190.288C509.545 218.482 526.397 231.554 550.971 231.554H550.951ZM550.611 163.134C561.093 163.134 566.423 169.325 566.763 182.047H532.728C533.929 168.635 540.12 163.134 550.611 163.134Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M635.023 215.221C624.882 215.221 619.371 210.581 617.311 201.639L596.338 205.94C598.578 220.722 606.999 23
241.724 634.503 231.724C659.077 231.724 669.579 222.092 669.579 206.28C669.579 193.558 663.388 185.137 637.944 179.806C623.342 176.886 621.101 173.615 621.101 169.145C621.101 164.334 624.882 161.754 632.613 161.754C641.034 161.754 644.825 165.014 646.705 173.445L667.508 169.145C664.588 154.872 656.167 145.591 633.123 145.591C610.08 145.591 598.908 154.872 598.908 170.525C598.908 184.447 606.469 191.838 628.823 196.659C643.785 199.579 647.045 202.329 647.045 207.32C646.875 212.651 642.925 215.221 635.013 215.221H635.023Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M706.354 119.887H681.95V136.74H706.354V119.887Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M705.854 147.821H682.47V229.313H705.854V147.821Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M800.048 233.984V233.964C800.048 220.722 791.797 212.821 773.744 212.821C769.593 212.821 765.243 212.951 760.812 213.071C756.251 213.201 751.631 213.331 747.1 213.331C741.939 213.331 739.879 212.121 739.879 209.201C739.879 207.82 740.569 206.28 741.429 204.73L742.799 202.499C746.75 203.36 751.391 203.88 756.391 203.88C779.255 203.88 792.147 195.108 792.147 181.526C792.147 172.075 783.555 168.284 773.414 166.404L773.584 164.514C780.115 165.204 785.276 165.374 789.226 165.374H798.157V147.841H756.901C733.698 147.841 719.946 157.983 719.946 176.206C719.946 188.928 726.657 197.519 738.849 201.479L732.838 204.57C726.127 207.49 722.516 211.621 722.516 216.262C722.516 221.932 726.297 226.233 735.078 227.443V228.473C724.067 230.714 715.985 235.694 715.985 243.085C715.985 253.227 724.747 259.588 755.871 259.588C788.876 259.588 800.058 250.987 800.058 233.974L800.048 233.984ZM756.381 165.534C767.553 165.534 772.364 170.515 772.364 177.056C772.364 183.597 768.073 188.577 756.381 188.577C744.69 188.577 740.739 183.597 740.739 177.056C740.739 170.515 745.21 165.534 756.381 165.534ZM733.528 235.344C733.528 231.384 737.819 227.953 745.04 227.953H772.724C779.265 227.953 782.015 230.704 782.015 234.654C782.015 240.325 777.024 243.256 757.441 243.256C737.859 243.256 733.538 240.845 733.538 235.354L733.528 235.344Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M833.073 183.927C833.073 173.795 839.434 166.744 849.395 166.744C857.986 166.744 861.777 172.415 861.777 180.666V229.323H885.15V174.135C885.15 156.423 877.239 145.601 861.607 145.601C848.885 145.601 838.914 153.862 834.103 169.665H832.553V147.831H809.689V229.323H833.073V183.927Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M450.536 295.863C430.253 292.253 427.333 287.962 427.333 281.941C427.333 275.41 432.494 271.63 443.485 271.63C455.867 271.63 459.988 276.96 462.388 287.452L486.972 282.641C484.051 264.929 472.87 252.377 444.675 252.377C416.481 252.377 402.899 263.899 402.899 283.321C402.899 300.344 411.661 311.516 440.205 315.986C459.808 319.247 464.448 323.037 464.448 330.258C464.448 336.789 458.777 340.57 447.256 340.57C434.534 340.57 425.773 334.899 423.362 322.517L399.809 327.498C402.049 345.381 413.221 360.163 446.226 360.333C476.48 360.333 489.382 348.301 489.382 328.518C489.382 313.566 482.501 301.524 450.536 295.853V295.863Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M546.82 306.875C545.46 312.626 543.81 318.987 542.1 325.558C541.21 328.968 540.3 332.449 539.419 335.919H536.499C534.979 330.078 533.359 324.047 531.778 318.227V318.207C530.678 314.096 529.588 310.115 528.598 306.345L520.517 276.43H494.903L525.507 356.892C521.727 365.493 517.426 367.034 509.175 367.034C505.744 367.034 502.124 366.524 498.693 365.824L495.253 385.586C499.553 386.277 502.984 386.797 508.665 386.797C529.118 386.797 539.439 378.195 547.341 358.262L579.495 276.42H554.392L546.83 306.855L546.82 306.875Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M623.152 308.425C608.55 305.495 606.309 302.224 606.309 297.754C606.309 292.943 610.1 290.362 617.831 290.362C626.252 290.362 630.033 293.623 631.923 302.054L652.726 297.754C649.806 283.481 641.384 274.2 618.341 274.2C595.298 274.2 584.136 283.481 584.136 299.134C584.136 313.056 591.697 320.457 614.05 325.268C629.013 328.188 632.273 330.938 632.273 335.929C632.103 341.26 628.153 343.83 620.241 343.83C610.1 343.83 604.599 339.19 602.529 330.248L581.556 334.549C583.796 349.331 592.207 360.343 619.721 360.343C644.295 360.343 654.796 350.711 654.796 334.899C654.796 322.177 648.605 313.756 623.162 308.425H623.152Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M704.114 338.319C697.063 338.319 694.652 335.069 694.652 328.528V295.003H716.135V276.43H694.652V255.457H671.269V276.43H661.297V295.003H671.269V332.309C671.269 347.791 679.18 360.333 698.083 360.333C707.024 360.333 711.145 359.123 717.346 357.242
24L714.765 336.269C711.675 337.299 707.714 338.329 704.104 338.329L704.114 338.319Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M766.883 274.19C740.409 274.19 725.107 290.693 725.107 318.887C725.107 347.081 741.959 360.153 766.533 360.153C789.736 360.153 799.198 349.491 802.818 335.389L783.215 330.058C781.155 336.249 777.885 341.41 766.703 341.41C755.521 341.41 749.51 335.569 748.14 322.497H803.318C803.668 318.197 803.838 314.936 803.838 311.496C803.838 288.972 791.977 274.19 766.883 274.19ZM748.31 310.645C749.51 297.233 755.701 291.733 766.193 291.733C776.684 291.733 782.005 297.924 782.345 310.645H748.31Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M920.216 274.16V274.19C906.814 274.19 897.542 282.621 893.052 298.604H891.161C890.131 283.301 883.08 274.19 868.638 274.19C855.746 274.19 845.945 282.451 841.304 298.254H839.584V276.42H816.72V357.912H840.104V312.526C840.104 302.384 846.465 295.333 856.436 295.333C864.857 295.333 868.818 301.004 868.818 309.255V357.912H892.191V312.526C892.191 302.384 898.372 295.333 908.344 295.333C916.955 295.333 920.726 301.004 920.726 309.255V357.912H944.269V302.714C944.269 285.002 936.188 274.18 920.195 274.18L920.216 274.16Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M5.2807 0.799805C2.81034 0.799805 0.800049 2.8101 0.800049 5.28046V180.466C0.800049 204.69 5.56075 228.223 14.9421 250.407C24.0035 271.81 36.9354 291.023 53.4178 307.505C69.9102 323.997 89.1131 336.939 110.506 345.991C132.689 355.382 156.233 360.133 180.467 360.133C204.7 360.133 228.234 355.382 250.437 345.991C271.83 336.939 291.033 323.987 307.525 307.505C324.008 291.033 336.94 271.82 346.001 250.407C355.392 228.233 360.143 204.69 360.143 180.466V5.28046C360.143 2.8101 358.123 0.799805 355.662 0.799805H5.2807ZM161.934 24.4433H161.924L161.934 24.4333C169.205 24.3533 175.766 27.2137 180.497 31.8144C185.247 27.2037 191.808 24.3533 199.099 24.4333C222.143 24.6733 233.544 52.0373 217.252 68.0497L182.857 101.895C182.777 101.985 182.697 102.055 182.617 102.135C181.987 102.665 181.257 102.915 180.507 102.905C179.776 102.905 179.036 102.675 178.406 102.135C178.316 102.055 178.246 101.985 178.156 101.905L143.761 68.0597C127.479 52.0374 138.86 24.6733 161.914 24.4433H161.934ZM180.457 299.644C113.407 299.644 59.0686 246.286 59.0686 180.466V106.385C59.0686 103.955 61.0789 101.985 63.5393 101.985H108.756C144.181 101.985 173.616 127.228 179.416 160.393C179.506 160.853 179.896 161.213 180.376 161.243C180.927 161.293 181.397 160.923 181.487 160.393C187.288 127.228 216.722 101.985 252.157 101.985H297.364C299.844 101.985 301.844 103.965 301.844 106.385V180.466H301.854C301.854 246.286 247.506 299.644 180.457 299.644Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { 'fill-rule': 'evenodd', 'clip-rule': 'evenodd', d: 'M5.2807 0.799805H355.662C358.123 0.799805 360.143 2.8101 360.143 5.28046V180.466C360.143 204.7 355.392 228.243 346.001 250.417C336.939 271.83 324.008 291.033 307.525 307.515C291.033 323.997 271.83 336.939 250.437 346.001C228.234 355.392 204.7 360.133 180.467 360.133C156.233 360.133 132.689 355.392 110.506 346.001C89.113 336.939 69.9102 324.007 53.4178 307.515C36.9353 291.033 24.0034 271.82 14.9421 250.417C5.56071 228.223 0.800049 204.69 0.800049 180.466V5.28046C0.800049 2.82009 2.81034 0.799805 5.2807 0.799805ZM161.934 24.4333L161.924 24.4433H161.914C138.86 24.6733 127.479 52.0374 143.761 68.0597L178.156 101.905C178.201 101.945 178.241 101.982 178.281 102.02C178.321 102.057 178.361 102.095 178.406 102.135C179.036 102.675 179.776 102.905 180.507 102.905C181.257 102.915 181.987 102.665 182.617 102.135C182.643 102.108 182.67 102.083 182.697 102.057C182.75 102.006 182.804 101.955 182.857 101.895L217.252 68.0497C233.544 52.0373 222.143 24.6733 199.099 24.4333C191.808 24.3533 185.247 27.2037 180.497 31.8144C175.766 27.2137 169.205 24.3533 161.934 24.4333ZM59.0686 180.466C59.0686 246.286 113.407 299.644 180.457 299.644C247.506 299.644 301.854 246.286 301.854 180.466H301.844V106.385C301.844 103.965 299.844 101.985 297.364 101.985H252.157C216.722 101.985 187.288 127.228 181.487 160.393C181.397 160.923 180.927 161.293 180.376 161.243C1
2479.896 161.213 179.506 160.853 179.416 160.393C173.616 127.228 144.181 101.985 108.756 101.985H63.5393C61.0789 101.985 59.0686 103.955 59.0686 106.385V180.466Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M425.603 23.1531C426.643 38.4554 427.673 60.2885 427.673 72.8504H427.663V103.965H404.63V0.809801H439.705L457.757 35.3649C464.288 48.0868 471.159 65.7994 475.29 78.1712L478.04 77.8311C476.84 62.8789 475.98 44.8163 475.98 32.6145V0.799805H498.843V103.955H466.009L445.036 63.209C440.215 53.2475 433.164 36.055 428.353 22.813L425.603 23.1531Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M540.25 81.7818H584.426V103.965H515.486V0.799866H540.25V81.7818Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { 'fill-rule': 'evenodd', 'clip-rule': 'evenodd', d: 'M448.836 126.168H404.84V229.323H448.496C481.501 229.323 501.104 209.201 501.104 176.536C501.104 143.871 485.121 126.158 448.836 126.158V126.168ZM446.586 209.04H429.573V146.631H445.726C467.559 146.631 476.33 154.702 476.33 176.546C476.33 198.389 468.079 209.04 446.586 209.04Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { 'fill-rule': 'evenodd', 'clip-rule': 'evenodd', d: 'M587.236 206.79C583.616 220.89 574.157 231.551 550.961 231.554C526.393 231.551 509.545 218.478 509.545 190.288C509.545 162.094 524.837 145.591 551.311 145.591C576.415 145.591 588.277 160.373 588.277 182.897C588.277 186.337 588.097 189.598 587.757 193.898H532.568C533.939 206.96 539.959 212.811 551.131 212.811C562.303 212.811 565.573 207.65 567.634 201.459L587.236 206.79ZM566.763 182.047C566.423 169.325 561.093 163.134 550.611 163.134C540.12 163.134 533.929 168.635 532.728 182.047H566.763Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M635.018 215.221C624.88 215.22 619.371 210.579 617.311 201.639L596.338 205.94C598.578 220.722 606.999 231.724 634.503 231.724C659.077 231.724 669.579 222.092 669.579 206.28C669.579 193.558 663.388 185.137 637.944 179.806C623.342 176.886 621.101 173.615 621.101 169.145C621.101 164.334 624.882 161.754 632.613 161.754C641.034 161.754 644.825 165.014 646.705 173.445L667.508 169.145C664.588 154.872 656.167 145.591 633.123 145.591C610.08 145.591 598.908 154.872 598.908 170.525C598.908 184.447 606.469 191.838 628.823 196.659C643.785 199.579 647.045 202.329 647.045 207.32C646.875 212.65 642.926 215.22 635.018 215.221Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M681.95 119.887H706.354V136.74H681.95V119.887Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M705.854 147.821H682.47V229.313H705.854V147.821Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { 'fill-rule': 'evenodd', 'clip-rule': 'evenodd', d: 'M773.744 212.821C791.797 212.821 800.048 220.722 800.048 233.964V233.984L800.058 233.974C800.058 250.987 788.876 259.588 755.871 259.588C724.747 259.588 715.985 253.227 715.985 243.085C715.985 235.694 724.067 230.714 735.078 228.473V227.443C726.297 226.233 722.516 221.932 722.516 216.262C722.516 211.621 726.127 207.49 732.838 204.57L738.849 201.479C726.657 197.519 719.946 188.928 719.946 176.206C719.946 157.983 733.698 147.841 756.901 147.841H798.157V165.374H789.226C785.276 165.374 780.115 165.204 773.584 164.514L773.414 166.404C783.555 168.284 792.147 172.075 792.147 181.526C792.147 195.108 779.255 203.88 756.391 203.88C751.391 203.88 746.75 203.36 742.799 202.499L741.429 204.73C740.569 206.28 739.879 207.82 739.879 209.201C739.879 212.121 741.939 213.331 747.1 213.331C751.631 213.331 756.251 213.201 760.812 213.071L761.995 213.039H762L762.002 213.039L762.014 213.038C766.029 212.929 769.969 212.821 773.744 212.821ZM772.364 177.056C772.364 170.515 767.553 165.534 756.381 165.534C745.21 165.534 740.739 170.515 740.739 177.056C740.739 183.597 744.69 188.577 756.381 188.577C768.073 188.577 772.364 183.597 772.364 177.056ZM745.04 227.953C737.819 227.953 733.528 231.384 733.528 235.344L733.538 235.354C733.538 240.845 737.859 243.256 757.441 243.256C777.024 243.256 782.015 240.325 782.015 234.654C782.015 230.704 779.265 227.953 772.724 227.953H745.04Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M833.073 183.927C833.073 173.795 839.434 166.744 849.395 166.744C857.986 166.744 861.777 172.415 861.777 180.666V229.323H885.15V174.135C885.15 156.423 877.239 145.601 861.607 145.601C848.885 145.601 838.914 153.862 834.103 169.665H832.553V147.831H809.689V229.323H833.073V183.927Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M427.333 281.941C427.333 287.962 430.253 292.253 450.536 295.863V295.853C482.501 301.524 489.382 313.566 489.382 328.518C489.382 348.301 476.48 360.333 446.226 360.333C413.221 360.163 402.049 345.381 399.809 327.498L423.362 322.517C425.773 334.899 434.534 340.57 447.256 340.57C458.777 340.57 464.448 336.789 464.448 330.258C464.448 323.037 459.808 319.247 440.205 315.986C411.661 311.516 402.899 300.344 402.899 283.321C402.899 263.899 416.481 252.377 444.675 252.377C472.87 252.377 484.051 264.929 486.972 282.641L462.388 287.452C459.988 276.96 455.867 271.63 443.485 271.63C432.494 271.63 427.333 275.41 427.333 281.941Z', fill: 'var(--nlds-logo-color, #111111)' }
24), (0, i.jsx)('path', { d: 'M546.82 306.875C545.46 312.626 543.81 318.987 542.1 325.558L541.946 326.147C541.105 329.368 540.249 332.648 539.419 335.919H536.499C534.979 330.078 533.359 324.047 531.778 318.227V318.207C531.388 316.748 530.999 315.306 530.615 313.884L530.581 313.759L530.576 313.738C529.892 311.203 529.225 308.732 528.598 306.345L520.517 276.43H494.903L525.507 356.892C521.727 365.493 517.426 367.034 509.175 367.034C505.744 367.034 502.124 366.524 498.693 365.824L495.253 385.586C499.553 386.277 502.984 386.797 508.665 386.797C529.118 386.797 539.439 378.195 547.341 358.262L579.495 276.42H554.392L546.83 306.855L546.82 306.875Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M606.309 297.754C606.309 302.224 608.55 305.495 623.152 308.425H623.162C648.605 313.756 654.796 322.177 654.796 334.899C654.796 350.711 644.295 360.343 619.721 360.343C592.207 360.343 583.796 349.331 581.556 334.549L602.529 330.248C604.599 339.19 610.1 343.83 620.241 343.83C628.153 343.83 632.103 341.26 632.273 335.929C632.273 330.938 629.013 328.188 614.05 325.268C591.697 320.457 584.136 313.056 584.136 299.134C584.136 283.481 595.298 274.2 618.341 274.2C641.384 274.2 649.806 283.481 652.726 297.754L631.923 302.054C630.033 293.623 626.252 290.362 617.831 290.362C610.1 290.362 606.309 292.943 606.309 297.754Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M704.114 338.319C697.063 338.319 694.652 335.069 694.652 328.528V295.003H716.135V276.43H694.652V255.457H671.269V276.43H661.297V295.003H671.269V332.309C671.269 347.791 679.18 360.333 698.083 360.333C707.024 360.333 711.145 359.123 717.346 357.242L714.765 336.269C711.675 337.299 707.714 338.329 704.104 338.329L704.114 338.319Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { 'fill-rule': 'evenodd', 'clip-rule': 'evenodd', d: 'M725.107 318.887C725.107 290.693 740.409 274.19 766.883 274.19C791.977 274.19 803.838 288.972 803.838 311.496C803.838 314.936 803.668 318.197 803.318 322.497H748.14C749.51 335.569 755.521 341.41 766.703 341.41C777.885 341.41 781.155 336.249 783.215 330.058L802.818 335.389C799.198 349.491 789.736 360.153 766.533 360.153C741.959 360.153 725.107 347.081 725.107 318.887ZM766.193 291.733C755.701 291.733 749.51 297.233 748.31 310.645H782.345C782.005 297.924 776.684 291.733 766.193 291.733Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M920.216 274.16V274.18L920.195 274.18L920.216 274.16Z', fill: 'var(--nlds-logo-color, #111111)' }), (0, i.jsx)('path', { d: 'M920.216 274.18C936.195 274.189 944.269 285.009 944.269 302.714V357.912H920.726V309.255C920.726 301.004 916.955 295.333 908.344 295.333C898.372 295.333 892.191 302.384 892.191 312.526V357.912H868.818V309.255C868.818 301.004 864.857 295.333 856.436 295.333C846.465 295.333 840.104 302.384 840.104 312.526V357.912H816.72V276.42H839.584V298.254H841.304C845.945 282.451 855.746 274.19 868.638 274.19C883.08 274.19 890.131 283.301 891.161 298.604H893.052C897.542 282.621 906.814 274.19 920.216 274.19V274.18Z', fill: 'var(--nlds-logo-color, #111111)' })] }) }), '\n', (0, i.jsx)(n.p, { children: 'Hoe lezen screenreaders dit voor?' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: "VoiceOver in Safari: 'Link, afbeelding, NL Design System logo, naar de homepage'." }), '\n', (0, i.jsx)(n.li, { children: "NVDA in Firefox : 'NL Design System logo, naar de homepage, link'." }), '\n'] }), '\n', (0, i.jsx)(n.h2, { id: 'discussie', children: 'Discussie' }), '\n', (0, i.jsxs)(n.p, { children: [(0, i.jsx)(n.strong, { children: 'Disclaimer' }), ': Dit artikel gaat alleen over het ', (0, i.jsx)(n.strong, { children: 'toekennen van de toegankelijke naam' }), '. Bij de implementatie op een website komt meer kijken, zoals de weergave van de focus-stijl, de exacte locatie en het toekennen van ', (0, i.jsx)(n.code, { children: 'aria-current="page"' }), ' of het verwijderen van de link op de voorpagina.'] }), '\n', (0, i.jsx)(n.h3, { id: 'heb-ik-het-woord-logo-nodig-is-dat-niet-overbodig-zoals-het-woord-afbeelding-of-foto', children: "Heb ik het woord 'logo' nodig? Is dat niet overbodig, zoals het woord 'afbeelding' of 'foto'?" }), '\n', (0, i.jsx)(n.p, { children: 'Ja, in dit geval geeft het feit dat dit een logo is belangrijke informatie.' }), '\n', (0, i.jsx)(n.p, { children: "Niet alleen voor blinde gebruikers, maar voor alle screenreadergebruikers. Als je visueel beperkt bent, maar niet volledig blind, kun je de afbeelding vaag zien. Door het woord 'logo' toe te voegen, weet je ook wat de afbeelding is. Een logo is een beeldmerk, en dat voegt legitimiteit toe aan een site." }), '\n', (0, i.jsx)(n.p, { children: 'De naam van de site is vereist, maar het woord logo biedt extra context.' }), '\n', (0, i.jsx)(n.h3, { id: 'is-dit-geen-overtreding-van-253-label-in-naam', children: 'Is dit geen overtreding van 2.5.3 Label in naam?' }), '\n', (0, i.jsxs)(n.p, { children: ['Het ', (0, i.jsx)(n.a, { href: '/wcag/2.5.3/', children: 'WCAG-succescriterium 2.5.3 Label in naam' }), ' stelt: Voor bedieningselementen met een zichtbaar label, moet de zichtbare labeltekst aanwezig zijn in of overeenkomen met de toegankelijke naam.'] }), '\n', (0, i.jsx)(n.p, { children: 'Dus nee, deze constructie is geen overtreding. De zic
24htbare naam staat in de alt-tekst of in het aria-label, die de toegankelijke naam van de link wordt. Het toevoegen van extra context aan de link is gebruikelijk.' }), '\n', (0, i.jsx)(n.p, { children: 'Vergelijk dit met de beruchte "Lees meer"-link. Een veelvoorkomend patroon is om een sr-only CSS-class (of gelijkwaardig) te gebruiken met extra tekst:' }), '\n', (0, i.jsx)(n.pre, { children: (0, i.jsx)(n.code, { className: 'language-html', children: '<a href="url">\n Lees meer\n <span class="sr-only"> over de eikenprocessierups</span> </a\n>.\n' }) }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Je ziet "Lees meer".' }), '\n', (0, i.jsx)(n.li, { children: 'Je hoort "Lees meer over de eikenprocessierups".' }), '\n'] }), '\n', (0, i.jsx)(n.p, { children: 'In ons geval:' }), '\n', (0, i.jsxs)(n.ul, { children: ['\n', (0, i.jsx)(n.li, { children: 'Je ziet de naam van de site en het logo; de visuele positie geeft het linkdoel aan.' }), '\n', (0, i.jsx)(n.li, { children: 'Je hoort de naam van de site, het feit dat het een logo is, en het linkdoel.' }), '\n'] }), '\n', (0, i.jsx)(n.p, { children: 'De hele zichtbare tekst moet in de toegankelijke naam staan, maar extra informatie, zoals de betekenis van de afbeelding en het linkdoel, kan voor context worden toegevoegd. Zo wordt het doel van de link uitgelegd.' }), '\n', (0, i.jsxs)(n.p, { children: [(0, i.jsx)(n.strong, { children: 'Note' }), ':\nDeze blogpost bevat een groot deel van de inhoud van het Engelstalige artikel ', (0, i.jsx)(n.a, { href: 'https://htmhell.dev/adventcalendar/2024/1/', children: (0, i.jsx)('span', { lang: 'en', children: 'A link on a logo in the header, what should the alt-text be?' }) }), ' en is overgenomen met toestemming van de auteur.'] })] }); 25 } 26 function h(e = {}) { 27 const { wrapper: n } = { ...(0, o.R)(), ...e.components }; 28 return n ? (0, i.jsx)(n, { ...e, children: (0, i.jsx)(g, { ...e }) }) : g(e); 29 } 30 }, 31 18439(e, n, l) { 32 l.d(n, { R: () => t, x: () => s }); 33 var a = l(30758); 34 const i = {}, 35 o = a.createContext(i); 36 function t(e) { 37 const n = a.useContext(o); 38 return a.useMemo( 39 function () { 40 return 'function' == typeof e ? e(n) : { ...n, ...e }; 41 }, 42 [n, e], 43 ); 44 } 45 function s(e) { 46 let n; 47 return ((n = e.disableParentContext ? ('function' == typeof e.components ? e.components(i) : e.components || i) : t(e.components)), a.createElement(o.Provider, { value: n }, e.children)); 48 } 49 }, 50 84041(e) { 51 e.exports = JSON.parse('{"permalink":"/blog/toegankelijke-naam-link-logo-header","source":"@site/blog/2025/20250211-a11y-name-link-logo-header.md","title":"De toegankelijke naam van een link op een logo in de header","description":"Hoe geef je een link op een logo in de header een goede toegankelijke naam? We geven twee opties voor het toevoegen van de toegankelijke naam: via het alt-attribuut van een afbeelding of via een aria-label op de link. Welke optie je kiest is afhankelijk van het framework, CMS, of Design System dat je gebruikt.","date":"2025-02-11T00:00:00.000Z","tags":[{"inline":false,"label":"Link","permalink":"/blog/tags/link"},{"inline":false,"label":"Logo","permalink":"/blog/tags/logo"},{"inline":false,"label":"Toegankelijke naam","permalink":"/blog/tags/toegankelijke-naam"}],"hasTruncateMarker":true,"authors":[{"name":"Rian Rietveld","title":"Specialist webtoegankelijkheid","url":"https://www.linkedin.com/in/rianrietveld/","key":"Rian Rietveld","page":null,"socials":{}}],"frontMatter":{"title":"De toegankelijke naam van een link op een logo in de header","slug":"toegankelijke-naam-link-logo-header","authors":[{"key":"Rian Rietveld","title":"Specialist webtoegankelijkheid"}],"tags":["link","logo","toegankelijke naam"],"image":"https://raw.githubusercontent.com/nl-design-system/documentatie/assets/blog-toegankelijke-naam-link-logo.png","hide_table_of_contents":false,"date":"2025-02-11T00:00:00.000Z"},"unlisted":false,"nextItem":{"title":"Tips om in 9 stappen je A-status te halen","permalink":"/blog/tips-9-stappen-A-status-website"}}'); 52 }, 53 }, 54]);
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.