Usability und Barrierefreiheit<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+4:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root,[data-theme=\"light\"]{--bg:#f7f4ee;--surface:#fcfbf8;--surface2:#f1ede6;--text:#1f1b16;--muted:#57524a;--border:#d8d1c7;--primary:#0f5f67;--primary-soft:#dce8e7;--accent:#7a3f1d;--ok:#315f28;--link:#005c86;--shadow:0 10px 28px rgba(20,18,15,.07);--radius:18px;--max:1100px;--font-display:'Source Serif 4', Georgia, serif;--font-body:'Source Sans 3', system-ui, sans-serif}\n [data-theme=\"dark\"]{--bg:#151311;--surface:#1d1a17;--surface2:#25211e;--text:#f0eae1;--muted:#b8b0a6;--border:#39332d;--primary:#79b9c0;--primary-soft:#24383a;--accent:#d29a76;--ok:#8bb57d;--link:#8dc2e5;--shadow:0 14px 40px rgba(0,0,0,.36)}\n *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font:20px\/1.6 var(--font-body)}\n img,svg{display:block;max-width:100%} a{color:var(--link);text-underline-offset:.15em} button{font:inherit}\n .skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--text);color:var(--bg);padding:.8rem 1rem;border-radius:10px;z-index:100}\n .wrap{width:min(calc(100% - 2rem),var(--max));margin:auto}.narrow{max-width:72ch}\n header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}\n .top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}.brand{display:flex;align-items:center;gap:.8rem;font-weight:700}.brand svg{width:34px;height:34px;color:var(--primary)}\n .nav{display:flex;gap:.55rem;flex-wrap:wrap}.nav a,.theme{padding:.55rem .85rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text);font-size:16px}\n .hero{padding:4.8rem 0 3rem;background:linear-gradient(180deg,var(--primary-soft),var(--bg) 72%)}\n h1,h2,h3{font-family:var(--font-display);line-height:1.1;margin:0 0 .8rem} h1{font-size:clamp(2.6rem,4.2vw,4.8rem);max-width:10ch} h2{font-size:clamp(1.9rem,2.8vw,3rem)} h3{font-size:clamp(1.25rem,1.8vw,1.65rem)}\n p,li{max-width:72ch} .lead{font-size:clamp(1.18rem,1.8vw,1.45rem);color:var(--muted);max-width:62ch}\n section{padding:2.6rem 0;border-top:1px solid var(--border)}\n .hero-grid,.cols-2,.cols-3,.facts{display:grid;gap:1.2rem}.hero-grid{grid-template-columns:1.2fr .95fr;align-items:end}.cols-2{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:repeat(3,1fr)}.facts{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}\n .card,.panel,.quote,.fact{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)} .card,.panel,.quote,.fact{padding:1.3rem}\n .eyebrow{display:inline-block;padding:.38rem .75rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}\n .metric{font-size:2rem;font-weight:700;color:var(--primary)} .muted{color:var(--muted)} .small{font-size:16px}\n .agenda,.checklist,.linklist,.timeline{display:grid;gap:.8rem;padding:0}.agenda li,.checklist li,.linklist li,.timeline li{list-style:none}\n .agenda li,.timeline li,.linklist a{background:var(--surface);border:1px solid var(--border);border-radius:14px}.agenda li{padding:1rem}.timeline li{padding:1rem;display:grid;grid-template-columns:110px 1fr;gap:1rem}.timeline time{font-weight:700;color:var(--primary)}\n .badge{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;margin-bottom:.55rem}.tag{display:inline-block;padding:.28rem .55rem;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:14px;font-weight:700;margin-bottom:.65rem}\n .quote{border-left:5px solid var(--primary)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.good,.risk{padding:1rem;border-radius:14px}.good{background:color-mix(in srgb,var(--ok) 10%, var(--surface));border:1px solid color-mix(in srgb,var(--ok) 26%, var(--border))}.risk{background:color-mix(in srgb,var(--accent) 10%, var(--surface));border:1px solid color-mix(in srgb,var(--accent) 26%, var(--border))}\n .linklist a{display:block;padding:1rem 1.1rem;text-decoration:none;color:var(--text)} .linklist span{display:block;margin-top:.2rem;color:var(--muted);font-size:16px}\n footer{padding:3rem 0 4rem;border-top:1px solid var(--border)}\n @media (max-width:900px){body{font-size:18px}.hero-grid,.cols-2,.cols-3,.grid-2,.timeline li{grid-template-columns:1fr}.top{flex-direction:column;align-items:flex-start}}\n <\/style>\n<\/head>\n<body>\n<a class=\"skip\" href=\"#content\">Zum Inhalt springen<\/a>\n<header>\n <div class=\"wrap top\">\n <div class=\"brand\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\"><rect x=\"8\" y=\"8\" width=\"48\" height=\"48\" rx=\"12\" stroke=\"currentColor\" stroke-width=\"4\"\/><path d=\"M19 34c2-8 8-13 16-13 5 0 9 2 12 5\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\"\/><path d=\"M20 43h24\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\"\/><\/svg>\n <div>Usability und Barrierefreiheit<\/div>\n <\/div>\n <nav class=\"nav\" aria-label=\"Abschnittsnavigation\">\n <a href=\"#thema\">Thema<\/a>\n <a href=\"#grundlagen\">Grundlagen<\/a>\n <a href=\"#recht\">Rechtsrahmen<\/a>\n <a href=\"#praxis\">Praxisbeispiele<\/a>\n <a href=\"#massnahmen\">Ma\u00dfnahmen<\/a>\n <a href=\"#links\">Links<\/a>\n <button class=\"theme\" type=\"button\" data-theme-toggle>Dunkel<\/button>\n <\/nav>\n <\/div>\n<\/header>\n\n<main id=\"content\">\n <section class=\"hero\" id=\"thema\">\n <div class=\"wrap hero-grid\">\n <div>\n\n <h1>Usability und Barrierefreiheit<\/h1>\n <p class=\"lead\">Gute digitale Produkte funktionieren nicht nur im Idealfall. Sie sind so gestaltet, dass Menschen sie verstehen, bedienen und zuverl\u00e4ssig nutzen k\u00f6nnen \u2013 auch unter unterschiedlichen Voraussetzungen, in verschiedenen Nutzungssituationen und mit assistiven Technologien.<\/p>\n <\/div>\n <aside class=\"panel\" aria-label=\"\u00dcberblick\">\n\n <p><strong>Schwerpunkt:<\/strong> Grundlagen, gesetzliche Vorgaben, Standards und praktische Folgen f\u00fcr digitale Produkte und Dienstleistungen.<\/p>\n <p><strong>Perspektive:<\/strong> Management, Produktverantwortung, Qualit\u00e4t und Umsetzung im Unternehmensalltag.<\/p>\n <\/aside>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>Warum dieses Thema relevant ist<\/h2>\n <div class=\"facts\">\n <article class=\"fact\"><span class=\"tag\">ISO 9241-210<\/span><p>UX wird als Wahrnehmung und Reaktion einer Person beschrieben, die aus der tats\u00e4chlichen oder erwarteten Nutzung eines Produkts, Systems oder einer Dienstleistung resultiert.<\/p><\/article>\n <article class=\"fact\"><span class=\"tag\">Nutzen<\/span><p>Gute UX verringert Risiken, verbessert Zusammenarbeit, hilft bei der Priorisierung von Verbesserungen und kann den ROI erh\u00f6hen.<\/p><\/article>\n <article class=\"fact\"><span class=\"tag\">ISO 9241-110<\/span><p>F\u00fcr digitale Produkte werden im Material Anforderungen genannt wie aufgabenangemessen, selbstbeschreibend, steuerbar, erwartungskonform, fehlertolerant, individualisierbar und lernf\u00f6rderlich.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"grundlagen\">\n <div class=\"wrap cols-2\">\n <div class=\"panel\">\n <h2>Usability<\/h2>\n <p>Usability beschreibt die Qualit\u00e4t der Benutzung. Die zentrale Frage lautet: K\u00f6nnen Menschen ihre Aufgabe mit einem System klar, effizient und zuverl\u00e4ssig erledigen?<\/p>\n <p>Eine Oberfl\u00e4che kann modern aussehen und trotzdem schlechte Usability haben, wenn Navigation, Formulare, Fehlermeldungen oder Abl\u00e4ufe unn\u00f6tige H\u00fcrden erzeugen.<\/p>\n <\/div>\n <div class=\"panel\">\n <h2>Barrierefreiheit<\/h2>\n <p>Barrierefreiheit erweitert diese Perspektive. Sie fragt, ob Menschen mit unterschiedlichen Einschr\u00e4nkungen, Ger\u00e4ten und Nutzungssituationen Inhalte wahrnehmen, Funktionen bedienen, Informationen verstehen und technische Systeme zuverl\u00e4ssig nutzen k\u00f6nnen.<\/p>\n <p>Damit betrifft Barrierefreiheit nicht nur Spezialf\u00e4lle, sondern die Belastbarkeit digitaler Qualit\u00e4t im echten Alltag.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>ISO 9241 als fachliche Grundlage<\/h2>\n <div class=\"cols-2\">\n <div class=\"panel\">\n <h3>ISO 9241-11 und 9241-210<\/h3>\n <p>Die Normenreihe ISO 9241 bildet einen wichtigen fachlichen Rahmen f\u00fcr Ergonomie, Gebrauchstauglichkeit und Mensch-System-Interaktion. F\u00fcr den Vortrag besonders relevant sind die Begriffsarbeit zu Usability sowie die UX-Definition aus ISO 9241-210.<\/p>\n <p>Damit wird klar: Gute Gestaltung ist nicht nur eine Frage von Oberfl\u00e4che oder Geschmack, sondern eine Frage der Nutzung im konkreten Kontext.<\/p>\n <\/div>\n <div class=\"panel\">\n <h3>ISO 9241-110<\/h3>\n <p>ISO 9241-110 beschreibt allgemeine Gestaltungsprinzipien f\u00fcr den Dialog zwischen Mensch und interaktivem System. Diese Prinzipien sind technologieunabh\u00e4ngig und helfen dabei, Benutzungsqualit\u00e4t systematisch zu beurteilen.<\/p>\n <p>Viele Punkte, die heute unter Usability-Problemen oder Barrieren sichtbar werden, lassen sich genau mit diesen Prinzipien beschreiben.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>Die sieben Dialogprinzipien nach ISO 9241-110<\/h2>\n <div class=\"facts\">\n <article class=\"fact\"><h3>Aufgabenangemessenheit<\/h3><p>Das System unterst\u00fctzt die eigentliche Aufgabe, statt zus\u00e4tzliche unn\u00f6tige Arbeit zu erzeugen.<\/p><\/article>\n <article class=\"fact\"><h3>Selbstbeschreibungsf\u00e4higkeit<\/h3><p>Jeder Schritt ist verst\u00e4ndlich. Nutzer erkennen, was m\u00f6glich ist und was als N\u00e4chstes geschieht.<\/p><\/article>\n <article class=\"fact\"><h3>Steuerbarkeit<\/h3><p>Nutzer k\u00f6nnen Reihenfolge, Tempo und Richtung der Interaktion beeinflussen.<\/p><\/article>\n <article class=\"fact\"><h3>Erwartungskonformit\u00e4t<\/h3><p>Das System verh\u00e4lt sich konsistent und so, wie es Zielgruppe und Nutzungskontext nahelegen.<\/p><\/article>\n <article class=\"fact\"><h3>Fehlertoleranz<\/h3><p>Fehler f\u00fchren nicht sofort zum Scheitern. Korrekturen sind m\u00f6glich und Folgen bleiben begrenzt.<\/p><\/article>\n <article class=\"fact\"><h3>Individualisierbarkeit<\/h3><p>Die Nutzung kann an Bed\u00fcrfnisse, Vorwissen oder Pr\u00e4ferenzen angepasst werden.<\/p><\/article>\n <article class=\"fact\"><h3>Lernf\u00f6rderlichkeit<\/h3><p>Das System unterst\u00fctzt dabei, seine Funktionsweise zu verstehen und sicher zu nutzen.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>Woran gute digitale Gestaltung erkennbar ist<\/h2>\n <div class=\"cols-3\">\n <article class=\"card\"><h3>Klarheit<\/h3><p>Bezeichnungen, Reihenfolgen und R\u00fcckmeldungen sind verst\u00e4ndlich. Menschen wissen, was sie tun sollen und was nach dem n\u00e4chsten Schritt passiert.<\/p><\/article>\n <article class=\"card\"><h3>Steuerbarkeit<\/h3><p>Prozesse lassen sich ausl\u00f6sen, unterbrechen, korrigieren und nachvollziehen. Nutzer geraten nicht in Sackgassen.<\/p><\/article>\n <article class=\"card\"><h3>Fehlertoleranz<\/h3><p>Fehler werden m\u00f6glichst verhindert oder verst\u00e4ndlich erkl\u00e4rt. Korrekturen sind einfach m\u00f6glich.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"recht\">\n <div class=\"wrap\">\n <h2>Gesetzliche Vorgaben und Standards<\/h2>\n <div class=\"cols-3\">\n <article class=\"fact\"><span class=\"tag\">Gesetz<\/span><h3>BFSG<\/h3><p>Das Barrierefreiheitsst\u00e4rkungsgesetz ist seit dem 28. Juni 2025 anzuwenden. Es betrifft bestimmte Produkte und Dienstleistungen, die barrierefrei gestaltet werden m\u00fcssen.<\/p><\/article>\n <article class=\"fact\"><span class=\"tag\">Leitlinie<\/span><h3>WCAG 2.2<\/h3><p>Die WCAG 2.2 beschreiben, wie Webinhalte zug\u00e4nglicher gemacht werden k\u00f6nnen. Sie gelten international als zentraler fachlicher Referenzrahmen.<\/p><\/article>\n <article class=\"fact\"><span class=\"tag\">Standard<\/span><h3>EN 301 549<\/h3><p>EN 301 549 ist der europ\u00e4ische Standard f\u00fcr Barrierefreiheitsanforderungen an ICT-Produkte und -Dienstleistungen.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap cols-2\">\n <div class=\"panel\">\n <h2>Was das BFSG praktisch erfasst<\/h2>\n <p>Die Bundesfachstelle Barrierefreiheit nennt unter anderem Computer, Smartphones, Geldautomaten, Fahrausweis- und Check-in-Automaten, Fernsehger\u00e4te mit Internetzugang, E-Book-Leseger\u00e4te und Router als betroffene Produkte.<\/p>\n <p>Bei Dienstleistungen nennt sie unter anderem Telefondienste, E-Books, Messenger-Dienste, auf Mobilger\u00e4ten angebotene Dienstleistungen im Personenverkehr, Bankdienstleistungen und elektronischen Gesch\u00e4ftsverkehr.<\/p>\n <\/div>\n <div class=\"panel\">\n <h2>Wichtige Einordnung<\/h2>\n <p>WCAG und EN 301 549 sind nicht selbst das Gesetz. Sie helfen dabei, Anforderungen an digitale Barrierefreiheit fachlich und technisch konkret zu machen.<\/p>\n <p>F\u00fcr Unternehmen ist deshalb entscheidend, den Rechtsrahmen in pr\u00fcfbare Anforderungen f\u00fcr Produkt, Design, Entwicklung, Content, Dokumente und Qualit\u00e4tssicherung zu \u00fcbersetzen.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap cols-2\">\n <div class=\"panel\">\n <h2>POUR als Grundstruktur<\/h2>\n <p><strong>Wahrnehmbar:<\/strong> Inhalte m\u00fcssen erkennbar und zug\u00e4nglich sein.<\/p>\n <p><strong>Bedienbar:<\/strong> Funktionen m\u00fcssen ausf\u00fchrbar sein, auch ohne Maus oder mit Hilfsmitteln.<\/p>\n <p><strong>Verst\u00e4ndlich:<\/strong> Sprache, Logik und R\u00fcckmeldungen m\u00fcssen nachvollziehbar sein.<\/p>\n <p><strong>Robust:<\/strong> Die technische Umsetzung muss mit unterschiedlichen Browsern, Ger\u00e4ten und assistiven Technologien funktionieren.<\/p>\n <\/div>\n <div class=\"panel\">\n <h2>Typische Barrieren<\/h2>\n <ul class=\"checklist\">\n <li>Schlechter Kontrast oder kleine, schlecht lesbare Schrift.<\/li>\n <li>Formulare ohne klare Labels und ohne verst\u00e4ndliche Fehlermeldungen.<\/li>\n <li>Interaktive Elemente, die nur mit der Maus funktionieren.<\/li>\n <li>Unklare Linktexte und nicht sprechende Buttons.<\/li>\n <li>PDFs ohne Struktur oder nur als gescannte Bilder.<\/li>\n <li>Unkontrollierte Bewegungen, Zeitdruck oder unerwartete Kontextwechsel.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"praxis\">\n <div class=\"wrap\">\n <h2>Praxisbeispiele<\/h2>\n <div class=\"timeline\">\n <li><time>Online-Shop<\/time><div><h3>Checkout<\/h3><p>Der Kauf scheitert nicht am Produkt, sondern an Formularlogik, CAPTCHA, Tastaturbedienung oder unklaren Fehlermeldungen. Die Folge sind Abbr\u00fcche, Supportaufwand und Umsatzverlust.<\/p><\/div><\/li>\n <li><time>Kundenportal<\/time><div><h3>Dokumente<\/h3><p>Die Weboberfl\u00e4che ist nutzbar, aber die eigentliche Leistung steckt in Rechnungen, Vertr\u00e4gen oder Formularen als unstrukturierte PDFs. Der Kernprozess bleibt dadurch unzug\u00e4nglich.<\/p><\/div><\/li>\n <li><time>Terminbuchung<\/time><div><h3>Formulare<\/h3><p>Platzhalter ersetzen Labels, Pflichtfelder sind unklar, Kalender-Widgets sind schwer bedienbar. Genau an der Stelle, an der Nutzer abschlie\u00dfen wollen, entstehen H\u00fcrden.<\/p><\/div><\/li>\n <li><time>Internes Tool<\/time><div><h3>Fachanwendung<\/h3><p>Kleine Klickfl\u00e4chen, kryptische Begriffe, schlechte Fokusf\u00fchrung und fehlende Fehlertoleranz erzeugen Frust, l\u00e4ngere Einarbeitung und operative Fehler.<\/p><\/div><\/li>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>Konsequenzen im Unternehmensalltag<\/h2>\n <div class=\"grid-2\">\n <div class=\"good\">\n <h3>Was gute Gestaltung bewirkt<\/h3>\n <p>Weniger Reibung in zentralen Prozessen, geringere Fehlerraten, niedrigere Supportlast, bessere Verst\u00e4ndlichkeit, h\u00f6here Verl\u00e4sslichkeit und mehr Vertrauen in digitale Leistungen.<\/p>\n <\/div>\n <div class=\"risk\">\n <h3>Was schlechte Gestaltung ausl\u00f6st<\/h3>\n <p>Abbr\u00fcche, Frustration, Medienbr\u00fcche, Umgehungsl\u00f6sungen, Beschwerden, Mehrarbeit im Service und erh\u00f6hte Risiken in betroffenen gesetzlichen Anwendungsbereichen.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"massnahmen\">\n <div class=\"wrap\">\n <h2>Was Organisationen konkret tun k\u00f6nnen<\/h2>\n <div class=\"facts\">\n <article class=\"fact\"><h3>Anforderungen fr\u00fch festlegen<\/h3><p>Barrierefreiheit geh\u00f6rt in Briefings, Ausschreibungen, Produktanforderungen und Abnahmekriterien.<\/p><\/article>\n <article class=\"fact\"><h3>Kritische Journeys priorisieren<\/h3><p>Besonders relevant sind Login, Checkout, Formulare, Dokumente, Kundenkonto, Servicecenter und mobile Nutzung.<\/p><\/article>\n <article class=\"fact\"><h3>Inhalte \u00fcberarbeiten<\/h3><p>Klare Sprache, sinnvolle \u00dcberschriften, sprechende Links, Alternativtexte und dokumentierte PDF-Workflows sind zentrale Hebel.<\/p><\/article>\n <article class=\"fact\"><h3>Pr\u00fcfbar machen<\/h3><p>Tastaturtests, Kontrastpr\u00fcfung, Dokumentenpr\u00fcfung und klare Qualit\u00e4tskriterien machen Anforderungen \u00fcberpr\u00fcfbar.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"links\">\n <div class=\"wrap\">\n <h2>Vertiefende Quellen<\/h2>\n <ul class=\"linklist\">\n <li><a href=\"https:\/\/www.bundesfachstelle-barrierefreiheit.de\/DE\/Fachwissen\/Produkte-und-Dienstleistungen\/Barrierefreiheitsstaerkungsgesetz\" target=\"_blank\" rel=\"noopener noreferrer\">Bundesfachstelle Barrierefreiheit \u2013 BFSG<span>Offizielle \u00dcbersicht zu Anwendungsbereich, Produkten, Dienstleistungen, Ausnahmen und \u00dcbergangsfristen.<\/span><\/a><\/li>\n <li><a href=\"https:\/\/accessible-eu-centre.ec.europa.eu\/content-corner\/digital-library\/web-content-accessibility-guidelines-wcag-22_en\" target=\"_blank\" rel=\"noopener noreferrer\">AccessibleEU \u2013 WCAG 2.2<span>Einordnung von WCAG 2.2 als Referenzrahmen f\u00fcr zug\u00e4ngliche Webinhalte.<\/span><\/a><\/li>\n <li><a href=\"https:\/\/digital-strategy.ec.europa.eu\/en\/policies\/latest-changes-accessibility-standard\" target=\"_blank\" rel=\"noopener noreferrer\">EU Digital Strategy \u2013 EN 301 549<span>Europ\u00e4ischer Standard f\u00fcr Anforderungen an digitale Barrierefreiheit.<\/span><\/a><\/li>\n <li><a href=\"https:\/\/www.ergo-online.de\/ergonomie-und-gesundheit\/software\/usability\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ergo-Online \u2013 Usability<span>Erg\u00e4nzung zu Usability, Ergonomie und Dialoggestaltung.<\/span><\/a><\/li>\n <\/ul>\n <\/div>\n <\/section>\n<\/main>\n\n<footer>\n <div class=\"wrap narrow\">\n <h2>Zusammenhang<\/h2>\n <p class=\"muted\">Usability beschreibt gute Benutzbarkeit. Barrierefreiheit pr\u00fcft, ob diese Benutzbarkeit unter realen Bedingungen f\u00fcr unterschiedliche Menschen tats\u00e4chlich erreichbar ist. Dort, wo gesetzliche Vorgaben greifen, wird daraus nicht nur ein Qualit\u00e4ts-, sondern auch ein Compliance-Thema.<\/p>\n <\/div>\n<\/footer>\n\n<script>\n(()=>{const b=document.querySelector('[data-theme-toggle]');const r=document.documentElement;let t=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';const render=()=>{r.setAttribute('data-theme',t);b.textContent=t==='dark'?'Hell':'Dunkel'};render();b.addEventListener('click',()=>{t=t==='dark'?'light':'dark';render();});})();\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Usability und Barrierefreiheit Zum Inhalt springen Usability und Barrierefreiheit Thema Grundlagen Rechtsrahmen Praxisbeispiele Ma\u00dfnahmen Links Dunkel Usability und Barrierefreiheit Gute digitale Produkte funktionieren nicht nur im Idealfall. Sie sind so gestaltet, dass Menschen sie verstehen, bedienen und zuverl\u00e4ssig nutzen k\u00f6nnen \u2013 auch unter unterschiedlichen Voraussetzungen, in verschiedenen Nutzungssituationen und mit assistiven Technologien. Schwerpunkt: Grundlagen, gesetzliche […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-142","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ISO & EN - UXUI<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/metalmotion.de\/uxui\/iso-en\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ISO & EN - UXUI\" \/>\n<meta property=\"og:description\" content=\"Usability und Barrierefreiheit Zum Inhalt springen Usability und Barrierefreiheit Thema Grundlagen Rechtsrahmen Praxisbeispiele Ma\u00dfnahmen Links Dunkel Usability und Barrierefreiheit Gute digitale Produkte funktionieren nicht nur im Idealfall. Sie sind so gestaltet, dass Menschen sie verstehen, bedienen und zuverl\u00e4ssig nutzen k\u00f6nnen \u2013 auch unter unterschiedlichen Voraussetzungen, in verschiedenen Nutzungssituationen und mit assistiven Technologien. Schwerpunkt: Grundlagen, gesetzliche […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/metalmotion.de\/uxui\/iso-en\/\" \/>\n<meta property=\"og:site_name\" content=\"UXUI\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-15T13:23:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/\",\"url\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/\",\"name\":\"ISO & EN - UXUI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/#website\"},\"datePublished\":\"2026-06-15T13:23:33+00:00\",\"dateModified\":\"2026-06-15T13:23:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ISO & EN\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/#website\",\"url\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/\",\"name\":\"UXUI\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n","yoast_head_json":{"title":"ISO & EN - UXUI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/metalmotion.de\/uxui\/iso-en\/","og_locale":"de_DE","og_type":"article","og_title":"ISO & EN - UXUI","og_description":"Usability und Barrierefreiheit Zum Inhalt springen Usability und Barrierefreiheit Thema Grundlagen Rechtsrahmen Praxisbeispiele Ma\u00dfnahmen Links Dunkel Usability und Barrierefreiheit Gute digitale Produkte funktionieren nicht nur im Idealfall. Sie sind so gestaltet, dass Menschen sie verstehen, bedienen und zuverl\u00e4ssig nutzen k\u00f6nnen \u2013 auch unter unterschiedlichen Voraussetzungen, in verschiedenen Nutzungssituationen und mit assistiven Technologien. Schwerpunkt: Grundlagen, gesetzliche […]","og_url":"https:\/\/metalmotion.de\/uxui\/iso-en\/","og_site_name":"UXUI","article_modified_time":"2026-06-15T13:23:35+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/metalmotion.de\/uxui\/iso-en\/","url":"https:\/\/metalmotion.de\/uxui\/iso-en\/","name":"ISO & EN - UXUI","isPartOf":{"@id":"https:\/\/metalmotion.de\/uxui\/#website"},"datePublished":"2026-06-15T13:23:33+00:00","dateModified":"2026-06-15T13:23:35+00:00","breadcrumb":{"@id":"https:\/\/metalmotion.de\/uxui\/iso-en\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/metalmotion.de\/uxui\/iso-en\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/metalmotion.de\/uxui\/iso-en\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/metalmotion.de\/uxui\/"},{"@type":"ListItem","position":2,"name":"ISO & EN"}]},{"@type":"WebSite","@id":"https:\/\/metalmotion.de\/uxui\/#website","url":"https:\/\/metalmotion.de\/uxui\/","name":"UXUI","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/metalmotion.de\/uxui\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/pages\/142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/comments?post=142"}],"version-history":[{"count":1,"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/pages\/142\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/pages\/142\/revisions\/143"}],"wp:attachment":[{"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/media?parent=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":142,"date":"2026-06-15T15:23:33","date_gmt":"2026-06-15T13:23:33","guid":{"rendered":"https:\/\/metalmotion.de\/uxui\/?page_id=142"},"modified":"2026-06-15T15:23:35","modified_gmt":"2026-06-15T13:23:35","slug":"iso-en","status":"publish","type":"page","link":"https:\/\/metalmotion.de\/uxui\/iso-en\/","title":{"rendered":"ISO & EN"},"content":{"rendered":"\n\n\n\n \n \n Usability und Barrierefreiheit<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+4:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root,[data-theme=\"light\"]{--bg:#f7f4ee;--surface:#fcfbf8;--surface2:#f1ede6;--text:#1f1b16;--muted:#57524a;--border:#d8d1c7;--primary:#0f5f67;--primary-soft:#dce8e7;--accent:#7a3f1d;--ok:#315f28;--link:#005c86;--shadow:0 10px 28px rgba(20,18,15,.07);--radius:18px;--max:1100px;--font-display:'Source Serif 4', Georgia, serif;--font-body:'Source Sans 3', system-ui, sans-serif}\n [data-theme=\"dark\"]{--bg:#151311;--surface:#1d1a17;--surface2:#25211e;--text:#f0eae1;--muted:#b8b0a6;--border:#39332d;--primary:#79b9c0;--primary-soft:#24383a;--accent:#d29a76;--ok:#8bb57d;--link:#8dc2e5;--shadow:0 14px 40px rgba(0,0,0,.36)}\n *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--text);font:20px\/1.6 var(--font-body)}\n img,svg{display:block;max-width:100%} a{color:var(--link);text-underline-offset:.15em} button{font:inherit}\n .skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--text);color:var(--bg);padding:.8rem 1rem;border-radius:10px;z-index:100}\n .wrap{width:min(calc(100% - 2rem),var(--max));margin:auto}.narrow{max-width:72ch}\n header{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 90%, transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}\n .top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 0}.brand{display:flex;align-items:center;gap:.8rem;font-weight:700}.brand svg{width:34px;height:34px;color:var(--primary)}\n .nav{display:flex;gap:.55rem;flex-wrap:wrap}.nav a,.theme{padding:.55rem .85rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);text-decoration:none;color:var(--text);font-size:16px}\n .hero{padding:4.8rem 0 3rem;background:linear-gradient(180deg,var(--primary-soft),var(--bg) 72%)}\n h1,h2,h3{font-family:var(--font-display);line-height:1.1;margin:0 0 .8rem} h1{font-size:clamp(2.6rem,4.2vw,4.8rem);max-width:10ch} h2{font-size:clamp(1.9rem,2.8vw,3rem)} h3{font-size:clamp(1.25rem,1.8vw,1.65rem)}\n p,li{max-width:72ch} .lead{font-size:clamp(1.18rem,1.8vw,1.45rem);color:var(--muted);max-width:62ch}\n section{padding:2.6rem 0;border-top:1px solid var(--border)}\n .hero-grid,.cols-2,.cols-3,.facts{display:grid;gap:1.2rem}.hero-grid{grid-template-columns:1.2fr .95fr;align-items:end}.cols-2{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:repeat(3,1fr)}.facts{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}\n .card,.panel,.quote,.fact{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)} .card,.panel,.quote,.fact{padding:1.3rem}\n .eyebrow{display:inline-block;padding:.38rem .75rem;border-radius:999px;border:1px solid var(--border);background:var(--surface);font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}\n .metric{font-size:2rem;font-weight:700;color:var(--primary)} .muted{color:var(--muted)} .small{font-size:16px}\n .agenda,.checklist,.linklist,.timeline{display:grid;gap:.8rem;padding:0}.agenda li,.checklist li,.linklist li,.timeline li{list-style:none}\n .agenda li,.timeline li,.linklist a{background:var(--surface);border:1px solid var(--border);border-radius:14px}.agenda li{padding:1rem}.timeline li{padding:1rem;display:grid;grid-template-columns:110px 1fr;gap:1rem}.timeline time{font-weight:700;color:var(--primary)}\n .badge{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:999px;background:var(--primary);color:#fff;font-size:14px;font-weight:700;margin-bottom:.55rem}.tag{display:inline-block;padding:.28rem .55rem;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:14px;font-weight:700;margin-bottom:.65rem}\n .quote{border-left:5px solid var(--primary)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.good,.risk{padding:1rem;border-radius:14px}.good{background:color-mix(in srgb,var(--ok) 10%, var(--surface));border:1px solid color-mix(in srgb,var(--ok) 26%, var(--border))}.risk{background:color-mix(in srgb,var(--accent) 10%, var(--surface));border:1px solid color-mix(in srgb,var(--accent) 26%, var(--border))}\n .linklist a{display:block;padding:1rem 1.1rem;text-decoration:none;color:var(--text)} .linklist span{display:block;margin-top:.2rem;color:var(--muted);font-size:16px}\n footer{padding:3rem 0 4rem;border-top:1px solid var(--border)}\n @media (max-width:900px){body{font-size:18px}.hero-grid,.cols-2,.cols-3,.grid-2,.timeline li{grid-template-columns:1fr}.top{flex-direction:column;align-items:flex-start}}\n <\/style>\n<\/head>\n<body>\n<a class=\"skip\" href=\"#content\">Zum Inhalt springen<\/a>\n<header>\n <div class=\"wrap top\">\n <div class=\"brand\">\n <svg viewBox=\"0 0 64 64\" fill=\"none\" aria-hidden=\"true\"><rect x=\"8\" y=\"8\" width=\"48\" height=\"48\" rx=\"12\" stroke=\"currentColor\" stroke-width=\"4\"\/><path d=\"M19 34c2-8 8-13 16-13 5 0 9 2 12 5\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\"\/><path d=\"M20 43h24\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\"\/><\/svg>\n <div>Usability und Barrierefreiheit<\/div>\n <\/div>\n <nav class=\"nav\" aria-label=\"Abschnittsnavigation\">\n <a href=\"#thema\">Thema<\/a>\n <a href=\"#grundlagen\">Grundlagen<\/a>\n <a href=\"#recht\">Rechtsrahmen<\/a>\n <a href=\"#praxis\">Praxisbeispiele<\/a>\n <a href=\"#massnahmen\">Ma\u00dfnahmen<\/a>\n <a href=\"#links\">Links<\/a>\n <button class=\"theme\" type=\"button\" data-theme-toggle>Dunkel<\/button>\n <\/nav>\n <\/div>\n<\/header>\n\n<main id=\"content\">\n <section class=\"hero\" id=\"thema\">\n <div class=\"wrap hero-grid\">\n <div>\n\n <h1>Usability und Barrierefreiheit<\/h1>\n <p class=\"lead\">Gute digitale Produkte funktionieren nicht nur im Idealfall. Sie sind so gestaltet, dass Menschen sie verstehen, bedienen und zuverl\u00e4ssig nutzen k\u00f6nnen \u2013 auch unter unterschiedlichen Voraussetzungen, in verschiedenen Nutzungssituationen und mit assistiven Technologien.<\/p>\n <\/div>\n <aside class=\"panel\" aria-label=\"\u00dcberblick\">\n\n <p><strong>Schwerpunkt:<\/strong> Grundlagen, gesetzliche Vorgaben, Standards und praktische Folgen f\u00fcr digitale Produkte und Dienstleistungen.<\/p>\n <p><strong>Perspektive:<\/strong> Management, Produktverantwortung, Qualit\u00e4t und Umsetzung im Unternehmensalltag.<\/p>\n <\/aside>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>Warum dieses Thema relevant ist<\/h2>\n <div class=\"facts\">\n <article class=\"fact\"><span class=\"tag\">ISO 9241-210<\/span><p>UX wird als Wahrnehmung und Reaktion einer Person beschrieben, die aus der tats\u00e4chlichen oder erwarteten Nutzung eines Produkts, Systems oder einer Dienstleistung resultiert.<\/p><\/article>\n <article class=\"fact\"><span class=\"tag\">Nutzen<\/span><p>Gute UX verringert Risiken, verbessert Zusammenarbeit, hilft bei der Priorisierung von Verbesserungen und kann den ROI erh\u00f6hen.<\/p><\/article>\n <article class=\"fact\"><span class=\"tag\">ISO 9241-110<\/span><p>F\u00fcr digitale Produkte werden im Material Anforderungen genannt wie aufgabenangemessen, selbstbeschreibend, steuerbar, erwartungskonform, fehlertolerant, individualisierbar und lernf\u00f6rderlich.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"grundlagen\">\n <div class=\"wrap cols-2\">\n <div class=\"panel\">\n <h2>Usability<\/h2>\n <p>Usability beschreibt die Qualit\u00e4t der Benutzung. Die zentrale Frage lautet: K\u00f6nnen Menschen ihre Aufgabe mit einem System klar, effizient und zuverl\u00e4ssig erledigen?<\/p>\n <p>Eine Oberfl\u00e4che kann modern aussehen und trotzdem schlechte Usability haben, wenn Navigation, Formulare, Fehlermeldungen oder Abl\u00e4ufe unn\u00f6tige H\u00fcrden erzeugen.<\/p>\n <\/div>\n <div class=\"panel\">\n <h2>Barrierefreiheit<\/h2>\n <p>Barrierefreiheit erweitert diese Perspektive. Sie fragt, ob Menschen mit unterschiedlichen Einschr\u00e4nkungen, Ger\u00e4ten und Nutzungssituationen Inhalte wahrnehmen, Funktionen bedienen, Informationen verstehen und technische Systeme zuverl\u00e4ssig nutzen k\u00f6nnen.<\/p>\n <p>Damit betrifft Barrierefreiheit nicht nur Spezialf\u00e4lle, sondern die Belastbarkeit digitaler Qualit\u00e4t im echten Alltag.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>ISO 9241 als fachliche Grundlage<\/h2>\n <div class=\"cols-2\">\n <div class=\"panel\">\n <h3>ISO 9241-11 und 9241-210<\/h3>\n <p>Die Normenreihe ISO 9241 bildet einen wichtigen fachlichen Rahmen f\u00fcr Ergonomie, Gebrauchstauglichkeit und Mensch-System-Interaktion. F\u00fcr den Vortrag besonders relevant sind die Begriffsarbeit zu Usability sowie die UX-Definition aus ISO 9241-210.<\/p>\n <p>Damit wird klar: Gute Gestaltung ist nicht nur eine Frage von Oberfl\u00e4che oder Geschmack, sondern eine Frage der Nutzung im konkreten Kontext.<\/p>\n <\/div>\n <div class=\"panel\">\n <h3>ISO 9241-110<\/h3>\n <p>ISO 9241-110 beschreibt allgemeine Gestaltungsprinzipien f\u00fcr den Dialog zwischen Mensch und interaktivem System. Diese Prinzipien sind technologieunabh\u00e4ngig und helfen dabei, Benutzungsqualit\u00e4t systematisch zu beurteilen.<\/p>\n <p>Viele Punkte, die heute unter Usability-Problemen oder Barrieren sichtbar werden, lassen sich genau mit diesen Prinzipien beschreiben.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>Die sieben Dialogprinzipien nach ISO 9241-110<\/h2>\n <div class=\"facts\">\n <article class=\"fact\"><h3>Aufgabenangemessenheit<\/h3><p>Das System unterst\u00fctzt die eigentliche Aufgabe, statt zus\u00e4tzliche unn\u00f6tige Arbeit zu erzeugen.<\/p><\/article>\n <article class=\"fact\"><h3>Selbstbeschreibungsf\u00e4higkeit<\/h3><p>Jeder Schritt ist verst\u00e4ndlich. Nutzer erkennen, was m\u00f6glich ist und was als N\u00e4chstes geschieht.<\/p><\/article>\n <article class=\"fact\"><h3>Steuerbarkeit<\/h3><p>Nutzer k\u00f6nnen Reihenfolge, Tempo und Richtung der Interaktion beeinflussen.<\/p><\/article>\n <article class=\"fact\"><h3>Erwartungskonformit\u00e4t<\/h3><p>Das System verh\u00e4lt sich konsistent und so, wie es Zielgruppe und Nutzungskontext nahelegen.<\/p><\/article>\n <article class=\"fact\"><h3>Fehlertoleranz<\/h3><p>Fehler f\u00fchren nicht sofort zum Scheitern. Korrekturen sind m\u00f6glich und Folgen bleiben begrenzt.<\/p><\/article>\n <article class=\"fact\"><h3>Individualisierbarkeit<\/h3><p>Die Nutzung kann an Bed\u00fcrfnisse, Vorwissen oder Pr\u00e4ferenzen angepasst werden.<\/p><\/article>\n <article class=\"fact\"><h3>Lernf\u00f6rderlichkeit<\/h3><p>Das System unterst\u00fctzt dabei, seine Funktionsweise zu verstehen und sicher zu nutzen.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>Woran gute digitale Gestaltung erkennbar ist<\/h2>\n <div class=\"cols-3\">\n <article class=\"card\"><h3>Klarheit<\/h3><p>Bezeichnungen, Reihenfolgen und R\u00fcckmeldungen sind verst\u00e4ndlich. Menschen wissen, was sie tun sollen und was nach dem n\u00e4chsten Schritt passiert.<\/p><\/article>\n <article class=\"card\"><h3>Steuerbarkeit<\/h3><p>Prozesse lassen sich ausl\u00f6sen, unterbrechen, korrigieren und nachvollziehen. Nutzer geraten nicht in Sackgassen.<\/p><\/article>\n <article class=\"card\"><h3>Fehlertoleranz<\/h3><p>Fehler werden m\u00f6glichst verhindert oder verst\u00e4ndlich erkl\u00e4rt. Korrekturen sind einfach m\u00f6glich.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"recht\">\n <div class=\"wrap\">\n <h2>Gesetzliche Vorgaben und Standards<\/h2>\n <div class=\"cols-3\">\n <article class=\"fact\"><span class=\"tag\">Gesetz<\/span><h3>BFSG<\/h3><p>Das Barrierefreiheitsst\u00e4rkungsgesetz ist seit dem 28. Juni 2025 anzuwenden. Es betrifft bestimmte Produkte und Dienstleistungen, die barrierefrei gestaltet werden m\u00fcssen.<\/p><\/article>\n <article class=\"fact\"><span class=\"tag\">Leitlinie<\/span><h3>WCAG 2.2<\/h3><p>Die WCAG 2.2 beschreiben, wie Webinhalte zug\u00e4nglicher gemacht werden k\u00f6nnen. Sie gelten international als zentraler fachlicher Referenzrahmen.<\/p><\/article>\n <article class=\"fact\"><span class=\"tag\">Standard<\/span><h3>EN 301 549<\/h3><p>EN 301 549 ist der europ\u00e4ische Standard f\u00fcr Barrierefreiheitsanforderungen an ICT-Produkte und -Dienstleistungen.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap cols-2\">\n <div class=\"panel\">\n <h2>Was das BFSG praktisch erfasst<\/h2>\n <p>Die Bundesfachstelle Barrierefreiheit nennt unter anderem Computer, Smartphones, Geldautomaten, Fahrausweis- und Check-in-Automaten, Fernsehger\u00e4te mit Internetzugang, E-Book-Leseger\u00e4te und Router als betroffene Produkte.<\/p>\n <p>Bei Dienstleistungen nennt sie unter anderem Telefondienste, E-Books, Messenger-Dienste, auf Mobilger\u00e4ten angebotene Dienstleistungen im Personenverkehr, Bankdienstleistungen und elektronischen Gesch\u00e4ftsverkehr.<\/p>\n <\/div>\n <div class=\"panel\">\n <h2>Wichtige Einordnung<\/h2>\n <p>WCAG und EN 301 549 sind nicht selbst das Gesetz. Sie helfen dabei, Anforderungen an digitale Barrierefreiheit fachlich und technisch konkret zu machen.<\/p>\n <p>F\u00fcr Unternehmen ist deshalb entscheidend, den Rechtsrahmen in pr\u00fcfbare Anforderungen f\u00fcr Produkt, Design, Entwicklung, Content, Dokumente und Qualit\u00e4tssicherung zu \u00fcbersetzen.<\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap cols-2\">\n <div class=\"panel\">\n <h2>POUR als Grundstruktur<\/h2>\n <p><strong>Wahrnehmbar:<\/strong> Inhalte m\u00fcssen erkennbar und zug\u00e4nglich sein.<\/p>\n <p><strong>Bedienbar:<\/strong> Funktionen m\u00fcssen ausf\u00fchrbar sein, auch ohne Maus oder mit Hilfsmitteln.<\/p>\n <p><strong>Verst\u00e4ndlich:<\/strong> Sprache, Logik und R\u00fcckmeldungen m\u00fcssen nachvollziehbar sein.<\/p>\n <p><strong>Robust:<\/strong> Die technische Umsetzung muss mit unterschiedlichen Browsern, Ger\u00e4ten und assistiven Technologien funktionieren.<\/p>\n <\/div>\n <div class=\"panel\">\n <h2>Typische Barrieren<\/h2>\n <ul class=\"checklist\">\n <li>Schlechter Kontrast oder kleine, schlecht lesbare Schrift.<\/li>\n <li>Formulare ohne klare Labels und ohne verst\u00e4ndliche Fehlermeldungen.<\/li>\n <li>Interaktive Elemente, die nur mit der Maus funktionieren.<\/li>\n <li>Unklare Linktexte und nicht sprechende Buttons.<\/li>\n <li>PDFs ohne Struktur oder nur als gescannte Bilder.<\/li>\n <li>Unkontrollierte Bewegungen, Zeitdruck oder unerwartete Kontextwechsel.<\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"praxis\">\n <div class=\"wrap\">\n <h2>Praxisbeispiele<\/h2>\n <div class=\"timeline\">\n <li><time>Online-Shop<\/time><div><h3>Checkout<\/h3><p>Der Kauf scheitert nicht am Produkt, sondern an Formularlogik, CAPTCHA, Tastaturbedienung oder unklaren Fehlermeldungen. Die Folge sind Abbr\u00fcche, Supportaufwand und Umsatzverlust.<\/p><\/div><\/li>\n <li><time>Kundenportal<\/time><div><h3>Dokumente<\/h3><p>Die Weboberfl\u00e4che ist nutzbar, aber die eigentliche Leistung steckt in Rechnungen, Vertr\u00e4gen oder Formularen als unstrukturierte PDFs. Der Kernprozess bleibt dadurch unzug\u00e4nglich.<\/p><\/div><\/li>\n <li><time>Terminbuchung<\/time><div><h3>Formulare<\/h3><p>Platzhalter ersetzen Labels, Pflichtfelder sind unklar, Kalender-Widgets sind schwer bedienbar. Genau an der Stelle, an der Nutzer abschlie\u00dfen wollen, entstehen H\u00fcrden.<\/p><\/div><\/li>\n <li><time>Internes Tool<\/time><div><h3>Fachanwendung<\/h3><p>Kleine Klickfl\u00e4chen, kryptische Begriffe, schlechte Fokusf\u00fchrung und fehlende Fehlertoleranz erzeugen Frust, l\u00e4ngere Einarbeitung und operative Fehler.<\/p><\/div><\/li>\n <\/div>\n <\/div>\n <\/section>\n\n <section>\n <div class=\"wrap\">\n <h2>Konsequenzen im Unternehmensalltag<\/h2>\n <div class=\"grid-2\">\n <div class=\"good\">\n <h3>Was gute Gestaltung bewirkt<\/h3>\n <p>Weniger Reibung in zentralen Prozessen, geringere Fehlerraten, niedrigere Supportlast, bessere Verst\u00e4ndlichkeit, h\u00f6here Verl\u00e4sslichkeit und mehr Vertrauen in digitale Leistungen.<\/p>\n <\/div>\n <div class=\"risk\">\n <h3>Was schlechte Gestaltung ausl\u00f6st<\/h3>\n <p>Abbr\u00fcche, Frustration, Medienbr\u00fcche, Umgehungsl\u00f6sungen, Beschwerden, Mehrarbeit im Service und erh\u00f6hte Risiken in betroffenen gesetzlichen Anwendungsbereichen.<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"massnahmen\">\n <div class=\"wrap\">\n <h2>Was Organisationen konkret tun k\u00f6nnen<\/h2>\n <div class=\"facts\">\n <article class=\"fact\"><h3>Anforderungen fr\u00fch festlegen<\/h3><p>Barrierefreiheit geh\u00f6rt in Briefings, Ausschreibungen, Produktanforderungen und Abnahmekriterien.<\/p><\/article>\n <article class=\"fact\"><h3>Kritische Journeys priorisieren<\/h3><p>Besonders relevant sind Login, Checkout, Formulare, Dokumente, Kundenkonto, Servicecenter und mobile Nutzung.<\/p><\/article>\n <article class=\"fact\"><h3>Inhalte \u00fcberarbeiten<\/h3><p>Klare Sprache, sinnvolle \u00dcberschriften, sprechende Links, Alternativtexte und dokumentierte PDF-Workflows sind zentrale Hebel.<\/p><\/article>\n <article class=\"fact\"><h3>Pr\u00fcfbar machen<\/h3><p>Tastaturtests, Kontrastpr\u00fcfung, Dokumentenpr\u00fcfung und klare Qualit\u00e4tskriterien machen Anforderungen \u00fcberpr\u00fcfbar.<\/p><\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <section id=\"links\">\n <div class=\"wrap\">\n <h2>Vertiefende Quellen<\/h2>\n <ul class=\"linklist\">\n <li><a href=\"https:\/\/www.bundesfachstelle-barrierefreiheit.de\/DE\/Fachwissen\/Produkte-und-Dienstleistungen\/Barrierefreiheitsstaerkungsgesetz\" target=\"_blank\" rel=\"noopener noreferrer\">Bundesfachstelle Barrierefreiheit \u2013 BFSG<span>Offizielle \u00dcbersicht zu Anwendungsbereich, Produkten, Dienstleistungen, Ausnahmen und \u00dcbergangsfristen.<\/span><\/a><\/li>\n <li><a href=\"https:\/\/accessible-eu-centre.ec.europa.eu\/content-corner\/digital-library\/web-content-accessibility-guidelines-wcag-22_en\" target=\"_blank\" rel=\"noopener noreferrer\">AccessibleEU \u2013 WCAG 2.2<span>Einordnung von WCAG 2.2 als Referenzrahmen f\u00fcr zug\u00e4ngliche Webinhalte.<\/span><\/a><\/li>\n <li><a href=\"https:\/\/digital-strategy.ec.europa.eu\/en\/policies\/latest-changes-accessibility-standard\" target=\"_blank\" rel=\"noopener noreferrer\">EU Digital Strategy \u2013 EN 301 549<span>Europ\u00e4ischer Standard f\u00fcr Anforderungen an digitale Barrierefreiheit.<\/span><\/a><\/li>\n <li><a href=\"https:\/\/www.ergo-online.de\/ergonomie-und-gesundheit\/software\/usability\/\" target=\"_blank\" rel=\"noopener noreferrer\">Ergo-Online \u2013 Usability<span>Erg\u00e4nzung zu Usability, Ergonomie und Dialoggestaltung.<\/span><\/a><\/li>\n <\/ul>\n <\/div>\n <\/section>\n<\/main>\n\n<footer>\n <div class=\"wrap narrow\">\n <h2>Zusammenhang<\/h2>\n <p class=\"muted\">Usability beschreibt gute Benutzbarkeit. Barrierefreiheit pr\u00fcft, ob diese Benutzbarkeit unter realen Bedingungen f\u00fcr unterschiedliche Menschen tats\u00e4chlich erreichbar ist. Dort, wo gesetzliche Vorgaben greifen, wird daraus nicht nur ein Qualit\u00e4ts-, sondern auch ein Compliance-Thema.<\/p>\n <\/div>\n<\/footer>\n\n<script>\n(()=>{const b=document.querySelector('[data-theme-toggle]');const r=document.documentElement;let t=matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light';const render=()=>{r.setAttribute('data-theme',t);b.textContent=t==='dark'?'Hell':'Dunkel'};render();b.addEventListener('click',()=>{t=t==='dark'?'light':'dark';render();});})();\n<\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Usability und Barrierefreiheit Zum Inhalt springen Usability und Barrierefreiheit Thema Grundlagen Rechtsrahmen Praxisbeispiele Ma\u00dfnahmen Links Dunkel Usability und Barrierefreiheit Gute digitale Produkte funktionieren nicht nur im Idealfall. Sie sind so gestaltet, dass Menschen sie verstehen, bedienen und zuverl\u00e4ssig nutzen k\u00f6nnen \u2013 auch unter unterschiedlichen Voraussetzungen, in verschiedenen Nutzungssituationen und mit assistiven Technologien. Schwerpunkt: Grundlagen, gesetzliche […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-142","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>ISO & EN - UXUI<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/metalmotion.de\/uxui\/iso-en\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"ISO & EN - UXUI\" \/>\n<meta property=\"og:description\" content=\"Usability und Barrierefreiheit Zum Inhalt springen Usability und Barrierefreiheit Thema Grundlagen Rechtsrahmen Praxisbeispiele Ma\u00dfnahmen Links Dunkel Usability und Barrierefreiheit Gute digitale Produkte funktionieren nicht nur im Idealfall. Sie sind so gestaltet, dass Menschen sie verstehen, bedienen und zuverl\u00e4ssig nutzen k\u00f6nnen \u2013 auch unter unterschiedlichen Voraussetzungen, in verschiedenen Nutzungssituationen und mit assistiven Technologien. Schwerpunkt: Grundlagen, gesetzliche […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/metalmotion.de\/uxui\/iso-en\/\" \/>\n<meta property=\"og:site_name\" content=\"UXUI\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-15T13:23:35+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data1\" content=\"6\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/\",\"url\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/\",\"name\":\"ISO & EN - UXUI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/#website\"},\"datePublished\":\"2026-06-15T13:23:33+00:00\",\"dateModified\":\"2026-06-15T13:23:35+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/iso-en\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ISO & EN\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/#website\",\"url\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/\",\"name\":\"UXUI\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/metalmotion.de\\\/uxui\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"}]}<\/script>\n","yoast_head_json":{"title":"ISO & EN - UXUI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/metalmotion.de\/uxui\/iso-en\/","og_locale":"de_DE","og_type":"article","og_title":"ISO & EN - UXUI","og_description":"Usability und Barrierefreiheit Zum Inhalt springen Usability und Barrierefreiheit Thema Grundlagen Rechtsrahmen Praxisbeispiele Ma\u00dfnahmen Links Dunkel Usability und Barrierefreiheit Gute digitale Produkte funktionieren nicht nur im Idealfall. Sie sind so gestaltet, dass Menschen sie verstehen, bedienen und zuverl\u00e4ssig nutzen k\u00f6nnen \u2013 auch unter unterschiedlichen Voraussetzungen, in verschiedenen Nutzungssituationen und mit assistiven Technologien. Schwerpunkt: Grundlagen, gesetzliche […]","og_url":"https:\/\/metalmotion.de\/uxui\/iso-en\/","og_site_name":"UXUI","article_modified_time":"2026-06-15T13:23:35+00:00","twitter_card":"summary_large_image","twitter_misc":{"Gesch\u00e4tzte Lesezeit":"6\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/metalmotion.de\/uxui\/iso-en\/","url":"https:\/\/metalmotion.de\/uxui\/iso-en\/","name":"ISO & EN - UXUI","isPartOf":{"@id":"https:\/\/metalmotion.de\/uxui\/#website"},"datePublished":"2026-06-15T13:23:33+00:00","dateModified":"2026-06-15T13:23:35+00:00","breadcrumb":{"@id":"https:\/\/metalmotion.de\/uxui\/iso-en\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/metalmotion.de\/uxui\/iso-en\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/metalmotion.de\/uxui\/iso-en\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/metalmotion.de\/uxui\/"},{"@type":"ListItem","position":2,"name":"ISO & EN"}]},{"@type":"WebSite","@id":"https:\/\/metalmotion.de\/uxui\/#website","url":"https:\/\/metalmotion.de\/uxui\/","name":"UXUI","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/metalmotion.de\/uxui\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"}]}},"_links":{"self":[{"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/pages\/142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/comments?post=142"}],"version-history":[{"count":1,"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/pages\/142\/revisions"}],"predecessor-version":[{"id":143,"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/pages\/142\/revisions\/143"}],"wp:attachment":[{"href":"https:\/\/metalmotion.de\/uxui\/wp-json\/wp\/v2\/media?parent=142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}