Support
HelpDoku für Befüller:innen
  1. Dokumentation
  2. Widgets
  3. Barrierefreiheit

    Barrierefreiheit

    Unser  Barrierefreiheits-Widget hilft dabei, die Nutzung der Website für alle Besucher*innen einfacher und zugänglicher zu gestalten. Mit einer Vielzahl von Anpassungs- und Bedienmöglichkeiten bietet es eine optimale Unterstützung für Menschen mit besonderen Bedürfnissen.
    Das Widget ist kostenpflichtig und kann unter support@bakehouse.at schnell und unkompliziert bestellt werden.

    Einbindung und Installation

    Script-Code für die Installation

    Dieses Script muss im HTML-Dokument inkludiert werden, im Head-Bereich.

    HTML
    <script> (function (w,d,id,c) { const s = d.createElement("script"); s.src = "https://resource.bakehouse.at/widget/accessibility/?id=" + id; s.async = true; d.head.appendChild(s); w.bhAccessibility = {id, ...c}; })(window, document, 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', { accessibilityInfoUrl: 'https://www.example.com', language: 'nl' }); </script>
    AttributTypeBeschreibungRequired
    accessibilityInfoUrlstringDie URL zur Barrierefreiheitserklärung.false
    languagestringDas Sprachkürzel (de, en, usw.). Wenn nicht angegeben, wird die Sprache automatisch über html > lang ausgelesen.false
    hideSitemapboolGibt an ob die Navigationshilfe über die Sitemap ausgeblendet werden soll.false
    hideSummaryboolGibt an ob die AI gestützte Kurzzusammenfassung ausgeblendet werden soll (z.B. bei Intranet oder Admintools).false
    disabledFunctionsstring | string[]Optionaler Schalter um beliebige Funktionen zu deaktivieren. Unterstützte Werte: summarizeContent, sitemap, greyscale, highContrast, invertColors, reduceBrightness, reduceTransparency, blackText, fontDyslectic, fontSystem, markHeadlines, markLinks, hideImages, cursorBig, reduceMotion.false

    HTML-Code für Template Integration

    Das Widget wird standardmäßig rechts unten fixiert angezeigt. Wenn das Widget an einer anderen Stelle eingebunden werden soll, kann das Element selbst in das Template integriert werden.

    HTML
    <div id="bh-accessibility-widget" data-position-vertical="bottom" data-position-horizontal="right" data-position-mode="fixed" data-color-primary="#fd8919"> </div>
    AttributTypeBeschreibungRequired
    idstringbh-accessibility-widget
    Darf nicht bearbeitet werden!    		true
    data-position-verticalstringDie vertikale Position:
    top, center oder bottom
    		false
    data-position-horizontalstringDie horizontale Position:
    left, center oder right
    		false
    data-position-mode
    		string
    		Der Modus bzw. die Platzierung der Position:
    fixed oder inline    		false
    data-color-primary
    		hex-colorPrimär-Farbe in hexadezimaler Schreibweise (Syntax)
    		false

    Optische Anpassung und Positionierung

    Das Widget kann mit folgenden Variablen angepasst und positioniert werden:

    CSS
    #bh-accessibility-widget { /* Primärfarbe */ --accessibility-color-primary: #000000; /* Abstand zum Rand */ --accessibility-offset-vertical: 20px; --accessibility-offset-horizontal: 20px; /* Transform zum Ausblenden ("Scrolled-State") */ --accessibility-transform-hidden-vertical: calc(100% + var(--accessibility-offset-vertical)); --accessibility-transform-hidden-horizontal: 0px; /* z-index für Overlay-Toggler */ --accessibility-toggler-z-index: 200; }
    Tipp

    Individuelle Positionierung

    Sollten die Positionierungsmöglichkeiten des Widgets nicht ausreichen, kann das Widget mit data-position-mode="inline" in ein eigenes Element eingebaut werden. Damit kann das eigene Element dann frei positioniert werden.

    Individueller Overlay-Toggler

    Das Overlay des Widgets kann nicht nur über den standardmäßigen Toggler geöffnet werden, sondern auch über individuelle Elemente wie Buttons.
    Dazu müssen diese Elemente die CSS-Klasse bh-accessibility-widget-custom-toggler besitzen. Jedes Element mit dieser Klasse fungiert als zusätzlicher Auslöser und ermöglicht so eine flexible Integration des Widgets an beliebigen Stellen innerhalb der Anwendung oder Website.