Dein Team für barrierefreie Webseiten

Barrierefreiheitsstärkungsgesetz (=BFSG) tritt ab Juni 2025 in Kraft. Was ändert sich für dich als Webseitenbetreiber?

Barrierefreie Inhalte (Stufe1)

Das Team von Swoop erstellt ein BFSG-konformes vierstufiges Konzept. Dabei definieren wir eine geeignete, klar gegliederte Struktur, verwenden praktikable HTML-Tags (je nach CMS müssen die Templates angepasst werden) und entwerfen leicht verdauliche Inhalte. Unsere SEO-Experten sorgen dafür, dass Eure Seite auch gut bei Suchmaschinen abschneidet. x
x
x
x

Barrierefreie Entwicklung (Stufe2)

Ein gut strukturierter Code bildet die Grundlage für ein barrierefreies Frontend und eine optimale Performance. Unser Entwicklungsteam stellt sicher, dass das Design auf allen Geräten responsiv funktioniert und dass die Seite über die Tastatur problemlos bedienbar ist.

Barrierefreies Webdesign (Stufe3)

x
x
x
x

Testtools Barrierefreiheit (Stufe4)

x
x
x
x

Profunde Kenntnisse in Barrierefreiheits-Tests, Screenreadern (JAWS und/oder NVDA) und PAC (PDF Accessibility Checker)
• Sehr gute Kenntnisse in Kontrast-Ermittlungs-Tools (CCA oder andere), BITV-Werkzeugen (z.B. Bookmarklet Textabstände), HTML und CSS
• Vorteilsweise Kenntnisse in Micro Focus ALM, Jira mit Plug-in ZephyrScale (für agiles Testmanagement) und Confluence

FAQ für barrierefreie Websites

Was bedeutet Barrierefreiheit im Web?

Barrierefreiheit im Web bedeutet, dass Websites so gestaltet sind, dass sie für alle Menschen zugänglich und nutzbar sind – unabhängig von körperlichen oder kognitiven Einschränkungen.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

Warum ist eine barrierefreie Website wichtig?

Sie stellt sicher, dass niemand ausgeschlossen wird. Außerdem kann sie rechtlichen Anforderungen entsprechen, die Reichweite erhöhen und das Nutzererlebnis für alle verbessern.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

Für wen ist Barrierefreiheit relevant?

Für Menschen mit Behinderungen – z. B. Seh-, Hör- oder Mobilitätseinschränkungen – sowie für ältere Menschen, temporär eingeschränkte Nutzer oder auch für Menschen mit langsamen Internetverbindungen.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

Gibt es rechtliche Vorgaben zur Barrierefreiheit?

Ja. In der EU gilt die Barrierefreiheitsrichtlinie (EAA), und in Deutschland z.B. das Barrierefreiheitsstärkungsgesetz (BFSG) und die BITV 2.0 für öffentliche Stellen.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

Welche Vorteile hat Barrierefreiheit für mein Unternehmen?

Sie verbessert die Benutzerfreundlichkeit, erweitert die Zielgruppe, stärkt das Image und kann sich positiv auf SEO und Conversion-Raten auswirken.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

Wie testen wir, ob eine Website barrierefrei ist?

Wir nutzen eine Kombination aus automatisierten Tools, manuellen Tests – basierend auf Standards wie WCAG 2.1.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

Muss meine bestehende Website komplett neu gestaltet werden?

Nicht unbedingt. Oft können bestehende Seiten angepasst werden. Wir analysieren den aktuellen Stand und schlagen pragmatische Maßnahmen vor.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

Was sind die WCAG-Richtlinien?

Die „Web Content Accessibility Guidelines“ sind internationale Standards, die definieren, wie Webinhalte für alle zugänglich gemacht werden sollen.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

Wie lange dauert die Umsetzung barrierefreier Maßnahmen?

Das hängt vom Umfang und der Komplexität Ihrer Website ab. Nach einem Erstcheck können wir eine realistische Zeitschätzung geben.

Zuletzt aktualisiert am 2025-05-06 von Andreas.

250K+ Codezeilen

{
  "type": "module",
  "scripts": {
    "js": "bun run _scripts/js.mjs",
    "scss:prod": "sass files_resources/scss/app.scss --style=compressed | postcss --config postcss.config.cjs -o files/assets/css/app.min.css",
    "scss": "sass files_resources/scss/app.scss files/assets/css/app.min.css --style=compressed --source-map",
    "scss:be": "sass files_resources/scss/be.contao.scss assets/css/be.contao.css --style=compressed --source-map",
    "scss:be:prod": "sass files_resources/scss/be.contao.scss --style=compressed | postcss --config postcss.config.cjs -o assets/css/be.contao.css",
    "postcss": "postcss files/assets/css/app.min.css --use autoprefixer cssnano postcss-import @tailwindcss/postcss -o files/assets/css/app.min.css",
    "svg:copy": "cpy 'files_resources/svg/**/*.{svg,SVG}' '!files_resources/svg/brands/**/*.{svg,SVG}' '!files_resources/svg/technique/**/*.{svg,SVG}' files/assets/svg",
    "svg:modify": "bun run _scripts/modify-svg.mjs",
    "img:copy": "cpy 'files_resources/img/**/*.{png,jpg,jpeg,gif,ico}' files/assets/img",
    "fonts:copy": "cpy 'files_resources/fonts/**/*' 'node_modules/@fortawesome/fontawesome-free/webfonts/*' files/assets/fonts",
    "build": "bun run js && bun run scss && bun run postcss && bun run svg:copy && bun run svg:modify && bun run img:copy && bun run fonts:copy && bun run scss:be",
    "watch": "chokidar 'files_resources/**/*.{scss,js}' -c 'bun run build'"
  }
 }

# This job runs in the deploy stage.
deploy-job:
  image: $IMAGE_DEPLOY_ONLY
  stage: deploy  # It only runs when *both* jobs in the test stage complete successfully.
  environment:
    name: production
  only:
    - main  # nur in main branch ausführen!
  #  variables:
  #    GIT_STRATEGY: none  # Git-Checkout für diese Stage verhindern, [none,fetch,clone]
  before_script:
    - mkdir -p ~/.ssh
    - echo $SSH_PRIVATE_KEY_AS_BASE_64 | base64 -d > ~/.ssh/$FILENAME_SSH
    - chmod 600 ~/.ssh/$FILENAME_SSH
    - eval $(ssh-agent -s)
    - ssh-add ~/.ssh/$FILENAME_SSH
    # Erstelle die SSH Konfigurationsdatei
    #ServerAliveInterval 60\n  ServerAliveCountMax 2\n  ExitOnForwardFailure yes
    #ServerAliveInterval 60 → Sendet jede 60 Sekunden ein Keep-Alive-Signal.
    #ServerAliveCountMax 2 → Trennt die Verbindung, wenn 2 Keep-Alive-Signale ausbleiben.
    #ExitOnForwardFailure yes → Verhindert das Offenlassen von hängenden SSH-Verbindungen.
    - echo -e "Host $SSH_CONFIG_HOST\nHostName $SSH_CONFIG_HOSTNAME\nUser $SSH_CONFIG_USER\nPort $SSH_CONFIG_PORT\nIdentityFile ~/.ssh/$FILENAME_SSH\nIdentitiesOnly yes\nStrictHostKeyChecking no\nServerAliveInterval 60\nServerAliveCountMax 2\nExitOnForwardFailure yes" > ~/.ssh/config
    - chmod 644 ~/.ssh/config
    # Verhindert SSH-Warnungen
    - echo $SSH_CONFIG_HOSTNAME  $SSH_CONFIG_HOST >> /etc/hosts
    - cat /etc/hosts
    - echo $SSH_CONFIG_HOST
    - ssh-keyscan  $SSH_CONFIG_HOST > ~/.ssh/known_hosts
    - chmod 644 ~/.ssh/known_hosts
    - cat ~/.ssh/known_hosts
    #Erstelle unter _dep/from_gitlab_to_live eine neue .deploy.env Datei
    - echo "PHP_VERSION=$PHP_VERSION" > ./_dep/from_gitlab_to_live/.deploy.env
    - echo "PHP_CMD=/usr/bin/php$PHP_VERSION" >> ./_dep/from_gitlab_to_live/.deploy.env
    # Achtung WEB_PATH_LOCAL wird zusammengesetzt
    - echo "WEB_PATH_LOCAL=/builds/$CI_PROJECT_PATH/" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "WEB_PATH_REMOTE=$DEPLOYER_WEB_PATH_REMOTE" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "CHOWN_USER=$DEPLOYER_CHOWN_USER" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "CHOWN_GROUP=$DEPLOYER_CHOWN_GROUP" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "HOST_SSH_CONFIG=$SSH_CONFIG_HOST" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "RSYNC_FILTER_FILE=$DEPLOYER_RSYNC_FILTER_FILE" >> ./_dep/from_gitlab_to_live/.deploy.env
    - echo "RSYNC_FILTER_FOR_BUILD_FILE=$DEPLOYER_RSYNC_FILTER_FOR_BUILD_FILE" >> ./_dep/from_gitlab_to_live/.deploy.env

const parseColor = (color) => {
    const normalized = color.trim().toLowerCase();

    if (normalized === 'white') {
        return { r: 255, g: 255, b: 255 };
    }

    const hex3 = /^#([0-9a-f]{3})$/i.exec(normalized);
    if (hex3) {
        const r = parseInt(hex3[1][0] + hex3[1][0], 16);
        const g = parseInt(hex3[1][1] + hex3[1][1], 16);
        const b = parseInt(hex3[1][2] + hex3[1][2], 16);
        return { r, g, b };
    }

    const hex6 = /^#([0-9a-f]{6})$/i.exec(normalized);
    if (hex6) {
        const r = parseInt(hex6[1].substring(0, 2), 16);
        const g = parseInt(hex6[1].substring(2, 4), 16);
        const b = parseInt(hex6[1].substring(4, 6), 16);
        return { r, g, b };
    }

    const rgbMatch = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/.exec(normalized);
    if (rgbMatch) {
        return {
            r: parseInt(rgbMatch[1], 10),
            g: parseInt(rgbMatch[2], 10),
            b: parseInt(rgbMatch[3], 10)
        };
    }

    const rgbaMatch = /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d*\.?\d+)\s*\)$/.exec(normalized);
    if (rgbaMatch && parseFloat(rgbaMatch[4]) >= 1) {
        return {
            r: parseInt(rgbaMatch[1], 10),
            g: parseInt(rgbaMatch[2], 10),
            b: parseInt(rgbaMatch[3], 10)
        };
    }

    return null;
};