Setup

Konfiguration

Zum Konfigurieren von Barrieren-Brecher Bary öffne im Ordner „barrierefrei“ die Datei „barrierefrei_config.js“.

In der Datei sind verschiedene Einstellungen innerhalb von „window.barrierefreiConfig“ verfügbar. Das Format muss unbedingt beibehalten werden, um Fehler zu verhindern.

langConfig

Setzt den Titel eines Elements entsprechend der eingestellten Sprache. Die Sprache wird anhand des „lang“-Attributs des HTML erkannt.

langConfig: [
    {
        "element": "#logo",
        "lang": {
            "de-DE": {
                "title": "Beispiel"
            },
            "en-EN": {
                "title": "Example"
            }
        }
    }
]

infoText

Setzt den Infotext des Tools je nach eingestellter Sprache.

infoText: [
    {
        "element": "Text",
        "lang": {
            "de-DE": {
                "text": "<strong>Info</strong>"+
                        "<p>Tastatur-Kurzbefehle</p>"
            },
            "en-EN": {
                "text": "Info"
            }
        }
    }
]

otherConfig

Die otherConfig enthält detaillierte Einstellungen für die Funktionsweise des Tools:

shortcutKeys

Definiert Tastenkombinationen zum Sprung zu definierten Elementen (Alt-Taste + definiertes Zeichen).

shortcutKeys: [
    {
        "selector": "nav[role='navigation']",
        "accessKey": "n",
        "lang": {
            "de-DE": {
                "text": "Navigation"
            }
        }
    }
]

ariaHidden

Definiert Elemente, die das Attribut aria-hidden=“true“ erhalten.

ariaHidden: [
    { selector: '[class*="hidden"]' },
    { selector: '[type="hidden"]' }
]

ariaRole

Definiert HTML-Attribute für ausgewählte Elemente.

ariaRole: [
    {
        entries: [
            { key: 'role_button|tabindex_0', selector: '.roleButton,.tabindex' },
            { key: 'role_link', selector: '.roleLink' }
        ],
        exclusions: ['#logo', 'footer']
    }
]

navKeyboard

Definiert Elemente als Navigation für Tastatur-Nutzung.

navKeyboard: [
    {
        selector: ['nav', '.nav']
    }
]

keyboardOpenElement

Macht Elemente per Tabulator erreichbar und führt dort mit Leertaste Aktionen aus.

keyboardOpenElement: [
    { selector: '.accordion dt', action: '.accordion dd', display: '' }
]

domChanges

Bestimmt Elemente zur automatischen Überprüfung bei Seitenänderungen.

domChanges: [
    {
        selector: ['.ajax', '.new']
    }
]

formLabel

Definiert Ausnahmen für automatische Titel- und Aria-Label-Setzung.

formLabel: [
    {
        exclusions: ['#exclude-id', '.exclude-class']
    }
]

vibrate

Definiert Elemente für Handy-Vibration bei Klick.

vibrate: [
    {
        entries: ['.vibrate', '#bfToggle'],
        exclusions: ['.no-vibrate']
    }
]

highlightLinks

Definiert Elemente zur Link-Hervorhebung.

highlightLinks: [
    {
        selector: ['a', 'input[type="submit"]', 'button']
    }
]

focusEvents

Definiert Elemente mit rotem Rahmen bei Fokussierung.

focusEvents: [
    {
        selector: ['input', 'button', 'select', 'textarea', 'a']
    }
]

tabindexClick

Definiert Elemente für Tabulator-Fokussierung mit Leertaste-Aktionen.

tabindexClick: [
    { selector: '.clickable', action: 'isclick' },
    { selector: '.hoverable', action: 'ishover' }
]

clickFocus

Definiert Elemente für Fokus-Weiterleitung bei Klick.

clickFocus: [
    { selector: '.opener', action: '.target' }
]

structureLink

Definiert Bereiche für die Strukturansicht des Tools.

structureLink: [
    {
        selector: ["#breadcrumb", "#no-links"],
        groupSelectors: ["nav", "main", "#footer"]
    }
]

contentTab

Definiert Elemente für die Inhalts-Baumstruktur.

contentTab: [
    {
        selector: ["header", "main", "article", "section"],
        exclusions: ["#bfToggle", "#bfPannel"]
    }
]

pauseAnimationsConfig

Zusätzlicher JavaScript-Code bei Animations-Pausierung.

pauseAnimationsConfig: [
    {
        code: function() {
            console.log("Animationen pausiert");
        }
    }
]

customCss

Zusätzlicher CSS-Code.

customCss: [
    {
        code: `
            html {
                opacity: 1;
            }
        `
    }
]