Niveau
Fortgeschritten
Lesezeit
350 Min.
Einträge
42 Lektionen
Sie erhalten
Zertifikat (70% zum Bestehen)
/ Kurse

Barrierefreie Webentwicklung in der Praxis

Für Entwickler. Erstellen Sie Oberflächen, die von Grund auf barrierefrei sind: zuerst semantisches Markup, ARIA nur bei Bedarf, korrektes Fokus-Management und ein wiederholbarer Testablauf.

47 Quizfragen Lektionen und Materialien sind auf Englisch

Lesen Sie die erste Lektion

Die komplette erste Lektion, im Original. Der Rest des Kurses liest sich genauso. Das Material ist auf Englisch.

Two interfaces can look identical in a screenshot and diverge completely in how they were built. One team chose the right native element on the first commit, wired every label and focus target as the feature went in, and shipped something a screen reader user can operate without a workaround. The other team shipped a demo, waited for an audit, and is now retrofitting roles, key handlers, and focus traps onto a codebase that was never designed to carry them.

The retrofit costs more than the schedule shows. An audit reports the paths a scanner and a tester happened to exercise that day, not every path through the application, so a retrofit habitually patches what was found and leaves the same defect one click deeper in the flow. Building accessible from the first commit makes the fix true everywhere the pattern repeats, not only where someone looked.

DimensionBuilt accessibleRetrofitted after audit
When the decision is madeAt design and first implementationMonths later, against a deadline
What gets fixedThe pattern, everywhere it recursThe instances a scanner or tester happened to find
CostMarginal, folded into normal build timeHigh: rework, regression risk, re-testing

This course installs four habits that make "accessible by construction" a repeatable practice instead of a slogan.

Platform firstReach for the native element the browser already ships before writing a line of custom widget code.
ARIA fills gapsAdd ARIA only where HTML has no equivalent, and treat every attribute you add as a promise your JavaScript must keep.
Deliberate focusEvery dynamic change, a dialog opening, a route changing, content loading, moves focus on purpose rather than by accident.
Test like a userVerify with a keyboard and a screen reader, not only an automated scanner, before calling anything finished.
Why it matters

None of these habits need new tools. They need one decision, repeated at each piece of markup: does the platform already solve this? Most of the time it does.

Lektion 1 von 42.

Lehrplan

  1. Semantic HTML as the foundation

    6 Lektionen · Modultest

    1. 01Accessible by construction, not by retrofit
    2. 02What a native element buys you: the button vs div autopsy
    3. 03Buttons act, links navigate
    4. 04Headings and landmarks are a navigation API
    5. 05Structural semantics: lists, tables, and labeled controls
    6. 06When native falls short: styling before rebuilding
  2. The accessibility tree and accessible names

    6 Lektionen · Modultest

    1. 07From DOM to accessibility tree
    2. 08The accessible name computation, step by step
    3. 09Accessible descriptions and the aria-describedby wire
    4. 10Six ways to hide content, and what each actually hides
    5. 11Implicit semantics: the ARIA you already wrote
    6. 12Inspecting the tree in devtools
  3. ARIA used correctly

    6 Lektionen · Modultest

    1. 13The rules of ARIA and the perception-only principle
    2. 14Roles, properties, and states: three families, three lifecycles
    3. 15Keeping state true: the lying widget bug
    4. 16Relationship plumbing: controls, owns, and activedescendant
    5. 17Live regions: announcing what changed
    6. 18ARIA that harms, and how to audit your own
  4. Keyboard interaction patterns

    6 Lektionen · Modultest

    1. 19WCAG keyboard requirements as an engineering spec
    2. 20tabindex without the folklore
    3. 21Reading the APG like a spec sheet
    4. 22Roving tabindex vs aria-activedescendant
    5. 23Focus indicators that survive your stylesheet
    6. 24Shortcuts and character keys without collisions
  5. Focus management in dynamic interfaces

    6 Lektionen · Modultest

    1. 25The focus contract: on open, while open, on close
    2. 26Building the dialog: native <dialog> vs hand-rolled
    3. 27SPA route changes: replacing what the page load gave you
    4. 28Mutating content under the user
    5. 29Menus, popovers, and light dismiss
    6. 30Focus across portals and shadow DOM
  6. Common widgets built right

    6 Lektionen · Modultest

    1. 31Disclosure and accordion
    2. 32Tabs
    3. 33Menu button and action menus
    4. 34Combobox and autocomplete
    5. 35Switches, custom checkboxes, and toggle buttons
    6. 36Tooltips, toasts, and confirmations
  7. The developer testing workflow

    6 Lektionen · Modultest

    1. 37What automated tools can and cannot catch
    2. 38axe in the inner loop
    3. 39A screen reader crash course for developers
    4. 40The manual pre-merge pass
    5. 41CI gates and scheduled crawls
    6. 42Making it stick: linters, checklists, and regression tests
Jetzt einschreiben
$129