Dialog와 Popover의 뜻 비교하기

Dialog And Popover Semantics

HTML, ARIA와 Apple에서 같은 이름이 가리키는 의미를 구분합니다.

이 자료로 구현하기

원문 주소와 버전이 포함된 요청문입니다. 복사한 뒤 만들 화면과 요구사항을 채워 에이전트에게 전달하세요.

표시 방식, 접근성 의미, 사용자 작업을 따로 비교합니다.
원문 가이드 ENGLISH

Primary role: interaction terminology comparison.

Repository Boundary

This page owns the meaning comparison. Native Interaction Contracts owns implementation decisions; Platform Guides owns native adaptation. Term identities and typed relations remain in Term Cases.

Reusable Method

For a named surface, record four axes before assigning a component: source vocabulary, exposed semantics, presentation mechanism, and task behavior. Ask which one the speaker means. One product surface can involve all four without making them synonyms.

Direct Source Comparison

Source What the cited term describes Missing information for an implementation
Apple HIG popovers A platform-guided temporary presentation with platform-specific usage and adaptation conventions. The target web role, keyboard behavior, and save policy.
HTML popover An attribute/API mechanism that can be applied to elements with different semantics. The task's semantic widget model.
HTML dialog A native HTML element with its own presentation and lifecycle operations. The task's name, focus destination, and application data decisions.
WAI-ARIA dialog An accessibility role for a dialog, including an accessible-name requirement. The code that makes interaction and presentation satisfy that role.
APG modal dialog An informative pattern for modal keyboard and focus behavior. Evidence that the chosen implementation works in its actual runtime.

Read on 2026-09-21. Apple page content was inspected through its official documentation JSON as well as the indexed page. HTML is a Living Standard; WAI-ARIA 1.2 is a Recommendation. Source authority applies to each named surface, not to a universal cross-platform component.

Popover: Shared Region And Non-Shared Regions

html.popover and apple.popover have partial_overlap in the recorded temporary-content scope. A temporary anchored information surface can fit both descriptions. HTML's mechanism also applies to semantically different surfaces without requiring the HIG's platform conventions. Apple's presentation includes native adaptation and usage decisions that the attribute does not supply.

The overlap does not justify copying every native dismissal behavior into a web form. A reviewer still needs to know whether an outside interaction saves, requests close, discards, or is ignored. That decision belongs in the consumer's contract and must preserve the task's data policy.

Dialog: Representation Direction

The recorded relation html.dialogaria.dialog uses implementation_representation. The native element can represent the accessible dialog concept; the relation points from representation to semantic concept. Other markup can carry a dialog role, but adding the role does not manufacture native lifecycle behavior.

The comparison is about ordinary dialog semantics, not every possible role override or misuse of the element. Modality is another axis: the implementation must make its declared background interaction and focus behavior true.

Worked Ambiguity: “Put It In A Modal Popover”

Turn the phrase into an explicit task rather than selecting a library component by substring. Suppose an annotation editor must remain visible while its document is inspected. Decide whether inspecting means reading the visible background or interacting with it. If interaction is needed, a modal focus contract may conflict with the task.

Question Recordable answer
What is the task? Edit one annotation while retaining document context.
What background interaction is allowed? The consumer explicitly permits or suspends it.
What semantics describe the editor? A named form/surface/widget choice, independently justified.
What displays it? A selected native or web mechanism.
What ends the task? Save, cancel, navigation, and outside interaction each have defined effects.
What comparison is being relied on? Source-qualified term pair, relation type, scope, and recheck date.

This example is a proposal, not an observed platform product. A library's component name can be recorded as an implementation choice without becoming another universal term definition.

Opinionated Guidance

Use task language in product copy and source-qualified language in engineering handoffs. If two engineers use the same word for different axes, preserve the distinction in the contract instead of forcing agreement on the label.

Platform-Specific Guidance

Native compact-view adaptation, browser top-layer behavior, and accessibility role exposure require different evidence. Route an actual adaptation to Adaptive Navigation. Do not infer host behavior from matching screenshots.

Unsupported Absolutes

Popover does not universally mean nonmodal form, menu, tooltip, or dialog. Top-layer painting does not specify an accessibility role. A component named Modal does not prove that the background is inert or that focus returns correctly.

Verification Contract

Recheck both meanings at their direct locators and explain the common and non-common regions. For implementation reliance, verify the exposed role, focus behavior, background interaction, and dismissal outcome separately. Source review cannot substitute for those observations.

The scenarios are unexecuted. A relation-validator pass establishes record consistency only. Re-review when a platform convention, HTML behavior, ARIA role, or library wrapper changes the comparison.

Source, License, And Attribution

Locally authored synthesis without copied examples or assets. Terminology reliance: html.popover, apple.popover, html.dialog, and aria.dialog; relation types: partial_overlap and implementation_representation. All named sources were rechecked 2026-09-21. Relations are author judgments, not independent semantic approval. consumer_reference: not_applicable because no consumer interaction record is selected.

IA Navigation

Parent: Design Terminology. Next: Design Term Comparison Workflow.