SC 2.4.2 - Wat betekent “Paginatitels”

Table Of Contents

De titel van een webpagina is vaak het eerste wat mensen zien wanneer ze een nieuw tabblad openen, zoeken in hun browsergeschiedenis of naar een zoekresultaat kijken. Voor mensen die schermlezers gebruiken of meerdere tabbladen open hebben, is een duidelijke en specifieke paginatitel essentieel om te begrijpen waar ze zijn.

Daarom zegt WCAG: geef elke pagina een duidelijke, beschrijvende titel die de inhoud correct weergeeft.

Dit heet 2.4.2 Page Titled.

Wat wordt er van websites verwacht?

  • Elke pagina moet een beschrijvende titel hebben die duidelijk maakt wat de inhoud van de pagina is.

  • De titel moet kort, maar informatief zijn en de kern van de inhoud samenvatten.

  • De titel moet in de <title>-tag van de HTML staan, zodat browsers en zoekmachines deze correct kunnen weergeven.

Kort: een goede titel vertelt meteen waar de pagina over gaat.

Veelgemaakte fouten

  • Titels die alleen de naam van de website bevatten zonder context (“Welkom” of “Home”).

  • Te lange titels die afgekapt worden in tabbladen en zoekresultaten.

  • Titels die niet overeenkomen met de inhoud van de pagina, zoals “Contact” voor een pagina met algemene informatie.

  • Geen tekst in het-element. Er wordt de URL van de pagina getoond.</p> </li> </ul> <h2 id="wat-kun-je-als-webredacteur-of-manager-doen">Wat kun je als webredacteur of manager doen?</h2> <ul> <li> <p><strong>Controleer de titels van al je pagina’s</strong>: Zijn ze beschrijven ze de inhoud goed? Beweeg de muis over het tabbald. Welke informatie wordt getoond?</p> </li> <li> <p><strong>Test met meerdere tabbladen</strong>: Kun je snel de juiste pagina vinden op basis van de titel?</p> </li> </ul> <h2 id="samenvatting">Samenvatting</h2> <p>Een goede paginatitel maakt je website duidelijker, gebruiksvriendelijker en beter vindbaar. Zorg dat elke pagina een unieke, beschrijvende titel heeft die direct duidelijk maakt waar de pagina over gaat.</p> </div> <div class="row items-start justify-between"> <div class="lg:col-6 mb-10 flex items-center lg:mb-0"> <h5 class="mr-3">Tags :</h5> <ul> <li class="inline-block"> <a class="bg-light hover:bg-primary dark:bg-darkmode-light dark:hover:bg-darkmode-primary dark:hover:text-text-dark m-1 block rounded px-3 py-1 hover:text-white" href="/tags/2-4-2/"> 2 4 2 </a> </li> </ul> </div> <div class="lg:col-6 flex items-center lg:justify-end"> <h5>Share :</h5> <div class="share-icons"> <a class="share-link share-facebook" href="https://facebook.com/sharer/sharer.php?u=https%3a%2f%2fwww.properaccess.nl%2fblog%2fsc-2-4-2-wat-betekent-paginatitels%2f" target="_blank" rel="noopener" aria-label="share facebook"> <span class="share-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z" /> </svg> </span> </a> <a class="share-link share-x" href="https://x.com/intent/tweet/?text=SC%202.4.2%20-%20Wat%20betekent%20%e2%80%9cPaginatitels%e2%80%9d&url=https%3a%2f%2fwww.properaccess.nl%2fblog%2fsc-2-4-2-wat-betekent-paginatitels%2f" target="_blank" rel="noopener" aria-label="share x"> <span aria-hidden="true" class="share-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M8 2H1l8.26 11.015L1.45 22H4.1l6.388-7.349L16 22h7l-8.608-11.478L21.8 2h-2.65l-5.986 6.886zm9 18L5 4h2l12 16z" /> </svg> </span> </a> <a class="share-link share-email" href="mailto:?subject=SC%202.4.2%20-%20Wat%20betekent%20%e2%80%9cPaginatitels%e2%80%9d&body=https%3a%2f%2fwww.properaccess.nl%2fblog%2fsc-2-4-2-wat-betekent-paginatitels%2f" target="_self" rel="noopener" aria-label="share email"> <span aria-hidden="true" class="share-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z" /> </svg> </span> </a> <span class="fediverse-share"> <a class="share-link share-fediverse" href="javascript:void(0);" onclick="toggleFediverseInput(this)" aria-label="share fediverse"> <span aria-hidden="true" class="share-icon"> <svg viewBox="-10 -5 1034 1034" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"> <g id="SVGRepo_bgCarrier" stroke-width="0"></g> <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g> <g id="SVGRepo_iconCarrier"> <path d="M539 176q-32 0 -55 22t-25 55t20.5 58t56 27t58.5 -20.5t27 -56t-20.5 -59t-56.5 -26.5h-5zM452 271l-232 118q20 20 25 48l231 -118q-19 -20 -24 -48zM619 298q-13 25 -38 38l183 184q13 -25 39 -38zM477 320l-135 265l40 40l143 -280q-28 -5 -48 -25zM581 336 q-22 11 -46 10l-8 -1l21 132l56 9zM155 370q-32 0 -55 22.5t-25 55t20.5 58t56.5 27t59 -21t26.5 -56t-21 -58.5t-55.5 -27h-6zM245 438q1 9 1 18q-1 19 -10 35l132 21l26 -50zM470 474l-26 51l311 49q-1 -8 -1 -17q1 -19 10 -36zM842 480q-32 1 -55 23t-24.5 55t21 58 t56 27t58.5 -20.5t27 -56.5t-20.5 -59t-56.5 -27h-6zM236 493q-13 25 -39 38l210 210l51 -25zM196 531q-21 11 -44 10l-9 -1l40 256q21 -10 45 -9l8 1zM560 553l48 311q21 -10 44 -9l10 1l-46 -294zM755 576l-118 60l8 56l135 -68q-20 -20 -25 -48zM781 625l-119 231 q28 5 48 25l119 -231q-28 -5 -48 -25zM306 654l-68 134q28 5 48 25l60 -119zM568 671l-281 143q19 20 24 48l265 -135zM513 771l-51 25l106 107q13 -25 39 -38zM222 795q-32 0 -55.5 22.5t-25 55t21 57.5t56 27t58.5 -20.5t27 -56t-20.5 -58.5t-56.5 -27h-5zM311 863 q2 9 1 18q-1 19 -9 35l256 41q-1 -9 -1 -18q1 -18 10 -35zM646 863q-32 0 -55 22.5t-24.5 55t20.5 58t56 27t59 -21t27 -56t-20.5 -58.5t-56.5 -27h-6z"></path> </g> </svg> </span> </a> <span class="fediverse-input-wrapper" style="display: none;"> <input type="text" placeholder="Enter Fediverse Instance URL" class="fediverse-input" onkeypress="handleFediverseShare(event, 'https:\/\/www.properaccess.nl\/blog\/sc-2-4-2-wat-betekent-paginatitels\/', 'SC 2.4.2 - Wat betekent “Paginatitels”')" /> <button class="fediverse-check-button" onclick="handleFediverseShareButton(this, 'https:\/\/www.properaccess.nl\/blog\/sc-2-4-2-wat-betekent-paginatitels\/', 'SC 2.4.2 - Wat betekent “Paginatitels”')"> Share </button> </span> </span> <button class="share-link share-copy" onclick="copyToClipboard(this, 'https:\/\/www.properaccess.nl\/blog\/sc-2-4-2-wat-betekent-paginatitels\/')"> <span class="share-icon"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-1c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 17H5V5h14v14z" /> </svg> </span> </button> </div> <script> function toggleFediverseInput(element) { const container = element.closest(".fediverse-share"); const inputContainer = container.querySelector(".fediverse-input-wrapper"); inputContainer.style.display = inputContainer.style.display === "none" ? "block" : "none"; } function handleFediverseShare(event, url, title) { if (event.key === "Enter") { const input = event.target; let instanceUrl = input.value.trim(); if (instanceUrl) { if (!instanceUrl.startsWith("https://")) { instanceUrl = `https://${instanceUrl}`; } const shareUrl = `${instanceUrl}/share?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`; window.open(shareUrl, "_blank", "noopener"); } } } function handleFediverseShareButton(button, url, title) { const input = button.previousElementSibling; let instanceUrl = input.value.trim(); if (instanceUrl) { if (!instanceUrl.startsWith("https://")) { instanceUrl = `https://${instanceUrl}`; } const shareUrl = `${instanceUrl}/share?text=${encodeURIComponent(title)}&url=${encodeURIComponent(url)}`; window.open(shareUrl, "_blank", "noopener"); } } function copyToClipboard(button, text) { navigator.clipboard.writeText(text).then(() => { const icon = button.querySelector("svg path"); const originalIconPath = "M19 3h-4.18C14.4 1.84 13.3 1 12 1s-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7-1c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 17H5V5h14v14z"; const checkIconPath = "M9 16.2l-3.5-3.5-1.4 1.4L9 19 20 8l-1.4-1.4L9 16.2z"; icon.setAttribute("d", checkIconPath); setTimeout(() => { icon.setAttribute("d", originalIconPath); }, 1000); }); } </script> </div> </div> </article> </div> </div> </section> </main> <footer class="bg-light dark:bg-darkmode-light"> <div class="container"> <div class="row items-center py-10"> <div class="lg:col-3 mb-8 text-center lg:mb-0 lg:text-left"> <a class="navbar-brand inline-block" href="/"> <img fetchpriority="high" decoding="async" class="img img-light" width="160" height="32" src="/images/logo_pa_hu_d53944e0708ca8d4.webp" alt="Proper Access " onerror="this.onerror=null;this.src='\/images\/logo_pa_hu_e7b54e5978083180.png';" /> <img fetchpriority="high" decoding="async" class="img img-dark" width="160" height="32" src="/images/logo_pa_hu_d53944e0708ca8d4.webp" alt="Proper Access " onerror="this.onerror=null;this.src='\/images\/logo_pa_hu_e7b54e5978083180.png';" /> </a> </div> <div class="lg:col-6 mb-8 text-center lg:mb-0"> <ul> <li class="m-3 inline-block"> <a href=" /algemene-voorwaarden " >Algemene voorwaarden</a > </li> <li class="m-3 inline-block"> <a href=" /privacyverklaring " >Privacy</a > </li> <li class="m-3 inline-block"> <a href=" /samenwerken-proper-access " >Samenwerken</a > </li> </ul> </div> <div class="lg:col-3 mb-8 text-center lg:mb-0 lg:mt-0 lg:text-right"> <ul class="social-icons"> <li> <a target="_blank" aria-label="github" rel="nofollow noopener" href="https://www.github.com/"> <i class="fab fa-github"></i> </a> </li> <li> <a target="_blank" aria-label="linkedin" rel="nofollow noopener" href="https://www.linkedin.com/"> <i class="fab fa-linkedin"></i> </a> </li> <li> <a target="_blank" aria-label="codepen" rel="nofollow noopener" href="https://www.codepen.io/"> <i class="fab fa-codepen"></i> </a> </li> </ul> </div> </div> </div> <div class="border-border dark:border-darkmode-border border-t py-7"> <div class="dark:text-darkmode-text-light container text-center"> <p> Developed by Proper Access </p> </div> </div> </footer> <script crossorigin="anonymous" integrity="sha256-yCBVqlqGxIKWtVMQRCQg55eSKysNeZOcci9boiLzpTI=" src="/js/script.min.c82055aa5a86c48296b55310442420e797922b2b0d79939c722f5ba222f3a532.js"></script> <script defer async crossorigin="anonymous" integrity="sha256-8w9V5+VCnGhgTHXOsnVQjFqhE3cwvfCJD4096vUhMp0=" src="/js/script-lazy.min.f30f55e7e5429c68604c75ceb275508c5aa1137730bdf0890f8d3deaf521329d.js"></script> <script> if ('serviceWorker' in navigator){navigator.serviceWorker.register("/service-worker.js");} </script> <div id="cookie-box" class="cookie-box cookie-box-hide"> We gebruiken cookies (alleen de verplichte) <button id="cookie-button" class="cookie-box-button btn btn-sm btn-outline-primary"> Oke </button> </div> <script type="application/javascript"> const cookieBox = document.getElementById('cookie-box'); const cookieButton = document.getElementById('cookie-button'); if (!Cookies.get('cookie-consent')) { cookieBox.classList.remove('cookie-box-hide'); cookieButton.onclick = function () { Cookies.set('cookie-consent', true, { expires: 60 }); cookieBox.classList.add('cookie-box-hide'); }; } </script> <style> .cookie-box { position: fixed; left: 2rem; bottom: 2rem; z-index: 9999; padding: 1.5rem; background-color: #fff; max-width: calc(100% - 4rem); width: 25rem; box-shadow: 1px 0px 10px 7px rgba(154, 154, 154, 0.11); border-radius: inherit; } .cookie-box-hide { display: none; } .cookie-box-button { display: block; margin-top: 1rem; } .dark .cookie-box { background-color: #222; } </style> </body> </html>