Websites and app creation

Design fast, accessible and understandable websites and applications where architecture, interface and visibility support the same goal.

54 articles · Latest article updated

Search covers every article in this topic, including the archive and article text.

Understand the topic

A practical guide to this topic

Building a site or app means enabling a task, not simply producing screens. This category connects content structure, interface, accessibility, performance, security and maintenance to the complete experience. The simplicity of a security screen is measured through the task: understand a request, choose an action, recognise the outcome and recover from an error. Visual hierarchy helps, while labels, keyboard support, focus and status messages determine whether the task can be completed.

What to examine
  • Describe tasks and audiences before selecting components and technology.
  • Test navigation, forms and error feedback across devices and interaction modes.
  • Plan updates, backups and content evolution from the start.
  • Check opening, movement, closing and context restoration in interfaces that interrupt a task.
  • Inventory motion, offer reduced behaviour and test that progress, state and navigation remain understandable without animation.
  • Describe waiting, failure and uncertain outcomes without losing the person’s work.
  • Structure units, headers, sorting and alternatives so comparisons remain usable.
  • Make search results, saves, progress and errors perceptible visually, by keyboard and with screen readers.
  • Deliver an appropriate variant without losing the subject, readability or layout stability.
  • Accept and confirm values without silently changing separators, units or date order.
Useful questions
  • Which path leads to a successful action?
  • Which states or content are hard to understand?
  • How will fixes be checked for regressions?
  • After an error, does the form explain correction while retaining valid values?
  • Is a modal necessary?
  • Does reduced motion prohibit all animation?
  • Does navigator.onLine establish service access?
  • Should every table become cards?
  • Should every update be announced?
  • Should sizes always be 100vw?
  • Does Intl.NumberFormat parse input?

Illustrative decision example

Situation
Fictional example: these inputs describe no customer or observed result. A confirmation is communicated through an animated movement that some people prefer to reduce.
Check
Enable reduced-motion preferences and check that text or a static state still communicates the action result.
Act
Preserve information and control in the reduced variant. Provide suitable controls for persistent movement where needed.

The Strategic Role of Motion Design in Guiding User Attention in UX

Animation: verify reduced motion, pause and understanding

W3C — WCAG 2.3.3 Animation from Interactions (AAA)

Design waiting and recovery

A journey is incomplete if only success is designed. Cover missing responses, unknown state and loss-free recovery; connect each message to a verified condition and test understanding and navigation.

Does the user know what to do without repeating an uncertain operation?

Explore the methods

Read data · verify · decide

Forms: verify the whole error-recovery journey

Identify errors so they are understandable and correctable. Preserve useful data and verify the journey through confirmation.

Completed tasks
12 / 2060% in this exercise
Blocked tasks
8 / 2040% to investigate
Recovery journey
4 stepsLocate, understand, correct, confirm

Fictional teaching case — figures describe neither CIE nor a client.

Questions to support your decisions

Find answers and practical checks in the analyses in this category.

Explore the archive

Further analysis in this topic beyond the recent articles listed below.

References: data, uses and limitations

Documentation reviewed on .

References: data, uses and limitations
Source and purposeVerified data or benchmarkHow to use itLimitation to retain
W3C · WCAG 2.2

Evaluate accessibility criteria for web content.

WCAG 2.2 is a W3C Recommendation. Success criteria have A, AA and AAA levels. Define tasks, pages and states, then combine inspection, keyboard, zoom and relevant assistive technology. Keep reproduction steps for barriers.

Explore the method →

An automated scanner does not establish conformity of a complete journey. Evaluation must cover interactive states and actual content.
Google · Core Web Vitals

Distinguish loading, responsiveness and visual stability.

Good thresholds are LCP ≤ 2.5 s, INP ≤ 200 ms and CLS ≤ 0.1 at the 75th percentile, segmented by mobile and desktop. Separate field measurement from laboratory tests. Record period, URL, device, population and sample size before comparing changes.

Explore the method →

These thresholds are not measured results for this site. A good lab score alone does not establish visitor experience.

Explore the CISA KEV catalogue

Bring vulnerability tracking into maintenance

An added entry starts a work item, rather than automatically closing one. Connect tracking to inventory, a change window and service verification after intervention.

  • Assign decision and change owners.
  • Separate patch availability, deployed patch and successful verification.
  • Keep the source, observed result and remaining limits.

Explore the catalogue and method →

CISA KEV · 2026.10.21 · Documentary review : 2026-10-22

Forms: criteria, errors and contrast

Review states, not just the initial page

A form may look clear before entry and become difficult after an error. A useful review retains task context and connects each finding to a version and state.

  • Test waiting, error, correction and confirmation.
  • Separate colour calculation, keyboard navigation and status presentation.
  • Keep steps that reproduce the barrier.

Open the WCAG review grid and contrast calculator →

W3C WAI · Forms Tutorial · User Notifications · Practical guidance · consulted 2026-10-23

CSP: directives, fallback and journeys

Deploy CSP with journey evidence

A monitored policy and an enforced policy have different effects. Server, CDN and proxy transformations may also result in several received policies.

  • Preserve raw policies, mode, delivery and page version.
  • Test sign-in, forms, payment and recovery within scope.
  • Connect reports, defects and stop criteria before deciding on enforcement.

Read CSP fallback orders and explore eight scenarios →

W3C · Content Security Policy Level 3 · Mike West, Antonio Sartori · Working Draft · 2026-09-16 · work in progress · §2.2.1, §3, §6.8.3–6.8.4, §8.1

Reference material

Primary guidance published by the organizations responsible for these methods and standards.