Focus Ring
포커스 링
지금 키보드를 입력받는 컨트롤 주변에 보이는 선이나 강조 표시.
Tab을 눌러 포커스 따라가기
실제 예시
결제 화면에서 Tab을 누르면 페이지 레이아웃을 이동하지 않고 각 필드와 버튼 주위에 선명한 링이 표시됩니다.
주요 부분
- 01시각적 레이블
- 02Interaction target
- 03Current state
- 04Keyboard behavior
사용할 때
키보드 포커스를 받을 수 있는 모든 컨트롤에 표시하세요. 모든 배경과 상태에서 테스트하세요.
다음 경우에는 사용하지 마세요
브라우저 윤곽선을 똑같이 명확한 대체물 없이 절대 제거하지 마세요. 호버 스타일은 키보드 포커스를 보여주지 않습니다.
코드에서 사용된 이름
:focus-visible outline 출시하기 전에
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome：Complete the task with 포커스 링 (Focus Ring)。 User context：결제 화면에서 Tab을 누르면 페이지 레이아웃을 이동하지 않고 각 필드와 버튼 주위에 선명한 링이 표시됩니다. Design concept to apply：포커스 링 (Focus Ring)。 Why it fits：키보드 포커스를 받을 수 있는 모든 컨트롤에 표시하세요. 모든 배경과 상태에서 테스트하세요. Do not use it when：브라우저 윤곽선을 똑같이 명확한 대체물 없이 절대 제거하지 마세요. 호버 스타일은 키보드 포커스를 보여주지 않습니다. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary)：해당 출처에 대해 공식적인 것입니다. 다른 플랫폼이나 팀은 그 용어를 다른 방식으로 사용할 수 있습니다. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
이 요청을 확인하세요
Review how 포커스 링 (Focus Ring) is used now. Definition: 지금 키보드를 입력받는 컨트롤 주변에 보이는 선이나 강조 표시. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.