Art, design & a little curiosity
Accessible design ↗

Design sign-in without unnecessary memory barriers

Review a creative-service sign-in flow for password-manager support, paste, code entry, clear recovery, and usable alternatives while coordinating requirements with the team responsible for account security.

An original ink study study exploring accessible authentication design.
Ink study / Original digital study

Reduce unnecessary memory and transcription work

Sign-in should establish access without creating unnecessary memory or transcription work. A creative-service member may arrive to retrieve a booking reference rather than spend time solving an interface puzzle. Consider accessibility across entering credentials, verification, recovery, and returning to the intended task. Coordinate account-security decisions with the responsible specialists.

Support credential tools and useful alternatives

Support password managers and paste rather than blocking useful assistance. Examine verification-code entry as a complete task, including how the code is obtained and entered. W3C's accessible-authentication guidance explains requirements and exceptions; do not assume that any particular puzzle or custom field automatically satisfies them because it looks simple. Write the rule as a short contract between the person and the interface: an action has a visible consequence, that consequence has a recognizable state, and the next action remains possible. Sketch the ordinary path and one interruption beside it. This exposes missing information earlier than polishing a single screen. Keep the labels in the sketch close to the eventual product language so that unclear words cannot hide behind annotation.

Retrieve a booking through sign-in

Sketch a member signing in to retrieve a workshop booking. Include credential entry, a verification step if required, a mistyped value, and a recovery route. Preserve the destination after successful sign-in. Test a pasted code containing spaces and a password manager's ordinary fill behavior in the implemented form. Make a paper walkthrough with one card for each important state. Add a second set of cards for an interruption, a changed answer, and a return visit. Someone else should be able to operate the cards using only the visible instructions. Where they need hidden knowledge, note the missing information instead of teaching the intended path. Revise the cards before spending time on detailed visual treatment.

Repair code entry and circular recovery

A row of single-character boxes can make pasted codes or correction awkward. A recovery link that loops back to the same inaccessible challenge does not provide a useful alternative. If an error message exposes unnecessary account information or gives no safe next step, revisit it with the security and content owners. Read every instruction while pretending the preceding explanation was missed. People arrive from links, resume after breaks, and move through content in different ways. Put the necessary context where the action happens. If the same problem recurs in several places, revise the underlying pattern instead of adding a separate warning to each instance. Shared causes usually deserve a coherent design response.

Review realistic account-access sequences

Review with realistic credential tools and relevant assistive technologies, not only manual typing in an ideal session. Confirm that the person can correct an error, understand the current step, and resume the original task. Keep records of requirements and observed behavior. Accessibility and security need a coordinated implementation; a polished login mockup cannot establish either property by itself.

A worked example

Worked decision

Paste a spaced verification code into the real form and correct one digit. The design should not require unnecessary manual re-entry.

References & further reading

Examples and exercises in this guide are original teaching scenarios.

Keep following the thread.

More accessible design ↗

Write alt text for artwork in context

Choose image alternatives by the purpose of an artwork image, its surrounding text, and the reader's task, using concise examples without inventing visual details or replacing needed long descriptions.