Poziom
Zaawansowany
Czas czytania
350 min
Pozycje
42 lekcje
Otrzymujesz
Certyfikat (70% do zaliczenia)
/ Kursy

Tworzenie dostępnych stron internetowych w praktyce

Dla programistów. Twórz interfejsy dostępne już na etapie budowy: najpierw semantyczne znaczniki, ARIA tylko w razie potrzeby, prawidłowe zarządzanie fokusem i powtarzalny proces testowania.

47 pytań w quizie Lekcje i materiały są w języku angielskim

Przeczytaj pierwszą lekcję

Cała lekcja pierwsza, w oryginale. Reszta kursu jest napisana w ten sam sposób. Materiał jest po angielsku.

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.

Lekcja 1 z 42.

Program

  1. Semantic HTML as the foundation

    6 lekcji · test modułu

    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 lekcji · test modułu

    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 lekcji · test modułu

    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 lekcji · test modułu

    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 lekcji · test modułu

    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 lekcji · test modułu

    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 lekcji · test modułu

    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
Zapisz się
$129