Skip to content
academia.sh
tr
Log in

Course Advanced

Accessible Component Patterns

By the end of this course

Start course

01

Basic Components

Specifying the button, text input, selection control, dropdown list, and form patterns by role, name, state, and keyboard contract; tying the link-versus-button distinction to behavior.

  1. 01 Buttons The six sections of a component specification, the behavior the native element provides for free, the pressed-state declaration, the keyboard contract, and auditing the clickable area against target size criteria.
  2. 02 Text Inputs The separate places the label, help text, error message, and placeholder occupy in the accessibility tree; computing the name and description, auditing the error binding, and the text field's keyboard contract.
  3. 03 Selection Controls The separate problems solved by the checkbox, radio button, and switch; naming the group, declaring the mixed state, and testing two different keyboard contracts.
  4. 04 Dropdown Lists Comparing the native selection element with the hand-built combobox; separating the active-option declaration from real focus, testing the keyboard contract, and auditing the invariants of reachable states.
  5. 05 Form Patterns The criterion for grouping fields, focus and announcement management in a multi-step form, save and undo behavior, and comparing two layouts with a rule check.
  6. 06 Link and Button Distinction The decision rule based on source change, comparing the two components' keyboard contracts, counting the losses a mismatch produces, and auditing link text against purpose criteria.

02

Container and Navigation Components

Specifying card, tab, accordion, menu, breadcrumb, pagination, table, and cyclical content patterns by keyboard contract, focus management, and state declaration.

  1. 01 Cards That a card is a grouping layout rather than a component; computing the three clickability patterns by tab stop count, accessible name, and nested placement.
  2. 02 Tabs Tying tab headings to panels, the roving tabindex requirement, the decision between automatic and manual activation, and testing the selection invariant.
  3. 03 Accordion The pattern for progressive disclosure, comparing the native disclosure element against a hand-built accordion, tracking the expansion state, and the structural rule audit.
  4. 04 Menus and Dropdown Panels The distinction between the menu role and the dropdown panel, scanning three setups for focus leaks and closing behavior, and verifying the focus return point and the open-close cycle.
  5. 05 Breadcrumb and Pagination Declaring hierarchical and sequential position in markup, the link name carrying its target, keeping the current page as a link, and the focus decision on a page change.
  6. 06 Tables Building two-axis position in markup, the row-header and column-header relationship, declaring and announcing sort state, and keeping the tab order under control in dense data.
  7. 07 Cyclical Content Navigation How the automatic transition relates to reading time, the unconditional requirement for a stop control, removing hidden cards from the tab order, and why automatically changing content is not announced.

03

Layer and Feedback Components

The specification of components that rise above the page flow: modal dialogs, tooltips, notifications, loading indicators, skeleton screens, empty and error states, and badges.

  1. 01 Modal Dialogs The specification of the modal dialog; the distinction between the native dialog element and a manual ARIA setup, how focus containment differs from a keyboard trap, testing the return point with a state machine, and measurable constraints.
  2. 02 Tooltips The specification of the tooltip; the distinction between the tooltip and the toggletip, a rule check of the 1.4.13 criterion's three conditions, computing whether the pointer can reach the tooltip by geometry, and the solution for touch access.
  3. 03 Notification Banners and Toast Notifications The distinction between the notification banner and the toast notification, computing how long a notification stays visible from the text's reading speed, coalescing events that arrive one after another, and measuring loss in the polite–assertive queue.
  4. 04 Loading Indicators The specification of the indeterminate and determinate indicator; computing the progress value and remaining-time estimate, measuring the instability of the estimate, and the frequency policy for progress announcements.
  5. 05 Skeleton Screens The specification of the skeleton screen; its place in the accessibility tree, computing cumulative layout shift with a session window for multi-region loading, and the cost of the skeleton's promised structure turning out wrong.
  6. 06 Empty and Error States The role, priority, and focus specification of the empty state and the error state; measuring the recovery path by key count, the effect of the error summary on discovery cost, and a completeness check of the state specification.
  7. 07 Badges and Tags The specification of the badge and the tag, building the number badge's accessible name, checking the contrast of status colors, and computing distinguishability without color information by relative luminance.

04

Text and Localization

Turning interface text into an auditable system, error message writing, localization constraints, right-to-left layout, and regional field requirements.

  1. 01 Interface Text Guide Turning an interface text guide into rules an auditor can check; a term glossary, tone rules, a per-class length limit, and the criterion that visible text be contained in the accessible name.
  2. 02 Error Message Writing Classifying error messages by their source, each class's required parts, catching messages whose parts are complete but empty of content with a language audit, and deriving a message's placement and lifetime from its class.
  3. 03 Localization Requirements Deriving formatting from the locale, plural form count varying by language, short strings growing proportionally more, string concatenation baking in word order, and measuring translation coverage.
  4. 04 Right-to-Left Languages The style layer's counterpart to a direction change, logical properties taking precedence over physical ones, icon mirroring tied to a criterion, isolation in bidirectional text, and keyboard contracts written by flow direction.
  5. 05 Regional Requirements Counting the assumptions baked into name, address, and identity fields, a flexible field setup that accepts every record, requirements read from a country table, and storing identity fields as text.

Start typing to search.

↑↓ ↵ Esc navigate · open · close