Accessible HTML forms
Forms are conversations. Clear names, visible requirements, and useful recovery guidance help everyone complete them with confidence.
-
Do / Don’t + demo
Give every control a name
Visible labels, compact search fields, and accessible names.
-
Explainer + demo
Make required fields unmistakable
Combine visible language with native HTML constraints.
-
Do / Don’t + demo
Make errors easy to find and fix
Identify the problem, explain recovery, and manage focus.
Color and contrast
Color choices need measurable luminance contrast, but contrast alone cannot communicate meaning.
Images
Useful alternatives come from an image’s purpose and context—not from a fixed inventory of visible objects.
-
Concept + interactive demo
Write alt text for the image’s purpose
Compare one image across product, editorial, and redundant contexts.
-
Concept + comparison
Decorative images should be silent
Use empty alternatives to remove noise without hiding meaning.
-
Concept + keyboard pattern
Name the action, not the pixels
Name linked images by destination and remove duplicate card links.
-
Concept + navigation map
Alt text is not a tab stop
Compare screen-reader reading order with keyboard focus order.
-
Explainer + chart pattern
Give complex images two levels of meaning
Pair a concise chart summary with structured details and exact data.
-
Do / Don’t + decision guide
Keep words as text
Prefer adaptable HTML text and recognize the narrow exceptions.
-
Pattern comparison
Name the control, not every icon
Treat decorative, functional, and informative SVGs according to purpose.
-
Do / Don’t + code patterns
Swap the source, not the meaning
Use one semantic image and one alternative across responsive candidates.
Commerce
Build product browsing and cart interactions from native structure, deliberate focus order, and clear feedback.
-
Concept + responsive demo
A visual grid is usually a semantic list
Separate CSS layout from the ARIA grid interaction pattern.
-
Concept + live pattern
Repeated actions need unique context
Keep “Add to cart” visible while naming the affected product.
-
Concept + state demo
Keep focus. Announce progress
Expose Adding, Added, and failure without stealing focus.
-
Concept + modal demo
Let the platform make the cart modal
Open, contain, dismiss, and restore focus with native dialog.
-
Pattern + anatomy
One product. Two useful actions
Compose image, title, price, link, and button without nesting controls.
-
Pattern + live collection
Repeat the card, not its mistakes
Combine semantic cards with product-specific cart feedback.
-
Use case + complete demo
Browse, add, review, return
Combine the product grid, cart feedback, quantities, and modal focus.
Authentication
Help people identify themselves with understandable fields, password-manager support, and alternatives to cognitive barriers.
-
Concept + live forms
Tell browsers what identity fields mean
Label sign-in and sign-up fields for people, browsers, and password managers.
-
Concept + toggle demo
Reveal the password without replacing the field
Preserve value and focus while exposing password visibility state.
-
Concept + decision guide
Do not make identity a memory test
Separate sensory CAPTCHA alternatives from cognitive authentication barriers.
-
Interactive demo + limitations
Make a numeric CAPTCHA less exclusionary
Reload, speak, validate, and provide a route that avoids the challenge.
-
Composite use case
Sign in without a memory test
Combine autofill, paste, recovery, validation, and submission feedback.
-
Composite use case
Offer more than one way through
Combine sign-up fields with operable challenge controls and an email route.