How Browsers Work · Part 18 — Accessibility Tree Internals
Accessibility tree được dẫn xuất từ DOM thế nào: role/name/state, thuật toán tính tên, ignored/inert nodes, API nền tảng và cách kiểm tra bằng DevTools/CDP.
Filter/Tag
#accessibility
13 entries
-
-
Three.js from Zero to Senior · Part 24 — Testing, Observability, Accessibility & Resilience
Make Three.js production systems testable and operable: deterministic clocks, browser/visual/perf tests, failure injection, privacy-safe telemetry, accessible canvas twins and incident SLOs.
-
Web Components · Phần 5 — Shadow DOM, slots và composed tree
Hiểu host, light DOM, shadow tree và composed tree; dùng slot mặc định, named slot, fallback và slotchange để xây kb-task-column có API composition rõ ràng.
-
Web Components · Phần 8 — Form-associated elements với ElementInternals
Xây kb-priority-picker tham gia HTML form như control gốc: submit value, validation, labels, disabled, reset và state restoration bằng ElementInternals.
-
Web Components · Phần 10 — Contract testing và debugging trong browser thật
Kiểm thử public contract của Accessible Mini Kanban trên browser thật: lifecycle, upgrade, attribute/property, event, slot, keyboard và form trước khi refactor sang Lit.
-
Web Components · Phần 7 — Events, focus và accessibility qua Shadow DOM
Làm chủ event phases, bubbles, composed, cancelable, retargeting và focus; xây kb-task-card có semantics, accessible name và keyboard contract đúng nền tảng.
-
Tailwind, Radix & shadcn/ui · Part 7 — Radix UI Primitives: Headless & Accessible
The second pillar: why headless components exist, installing Radix, the Root/Trigger/Portal/Content anatomy, and building a fully accessible Dialog and DropdownMenu styled with Tailwind. With a live anatomy + a11y demo.
-
Tailwind, Radix & shadcn/ui · Part 4 — Variants, States & Composition
Style on interaction and context: hover/focus/active/disabled, the group-* and peer-* patterns, and data-[state] styling — the exact mechanism Radix and shadcn rely on. With a live state explorer.
-
SVG from Zero to Senior · Part 10 — Production: Optimization, Sprites & Accessibility
Ship SVG like a senior: optimize with SVGO, choose the right delivery (inline vs img vs sprite), build a symbol + use icon system themed with currentColor, make graphics accessible with title/desc/role/aria, and respect perf budgets.
-
SVG from Zero to Senior · Part 16 — Accessibility Deep-Dive
Go past title/desc: accessible names with role=img and aria-labelledby, the decorative-vs-meaningful decision, keyboard-focusable shapes, aria-live readouts, accessible charts backed by a real data table, and how to test. With a live demo.
-
Web Accessibility Deep Dive — ARIA, the Accessibility Tree, and Complex Widgets
A senior guide to the accessibility tree, ARIA authoring patterns, keyboard semantics, live regions, and pragmatic a11y testing for design systems.
-
Forms & the Constraint Validation API — Native Validation Done Right
Native HTML form validation deep-dive: ValidityState, setCustomValidity, async/cross-field patterns, ARIA errors, FormData — and why the server always wins.
-
Accessible CSS Animation — Designing with prefers-reduced-motion
Senior guide to motion accessibility: the prefers-reduced-motion media query, opt-in vs global reset strategies, replacing motion with fades, matchMedia, and WCAG 2.3.3.