가상 요소 사용 규칙
SLUR UI System에서는
가상 요소(::before, ::after)를
접근성이 필요 없는 순수 장식 또는 보조 표현에 한해 사용합니다.
가상 요소는 UI 구조나 의미를 대체하기 위한 수단이 아닙니다.
가상 요소에 대한 기본 관점
Section titled “가상 요소에 대한 기본 관점”가상 요소는
DOM 구조에 존재하지 않는 시각적 표현 수단입니다.
SLUR UI System은 가상 요소를 다음과 같이 정의합니다.
- 의미를 가지지 않습니다.
- 보조 기술이 인식하지 않습니다.
- 구조와 콘텐츠를 대신할 수 없습니다.
이 특성 때문에
가상 요소는 사용 범위가 명확히 제한되어야 합니다.
가상 요소 사용 허용 기준
Section titled “가상 요소 사용 허용 기준”SLUR UI System에서는 다음 경우에만 가상 요소 사용을 허용합니다.
- 순수 장식 목적의 아이콘이나 구분선
- 시각적 강조를 위한 보조 그래픽
- 구조와 무관한 배경 표현
이 경우에도
가상 요소는 UI 이해에 필수적인 정보를 포함해서는 안 됩니다.
가상 요소 사용 금지 기준
Section titled “가상 요소 사용 금지 기준”다음과 같은 경우에는
가상 요소 사용을 금지합니다.
- 의미 전달이 필요한 텍스트
- 버튼, 링크 등 인터랙션 요소
- 상태 정보를 표현하는 콘텐츠
- 접근성 대체 수단으로 사용하는 경우
가상 요소로 의미를 전달하기 시작하면
접근성은 즉시 깨진다고 판단합니다.
가상 요소와 접근성의 관계
Section titled “가상 요소와 접근성의 관계”SLUR UI System에서는
가상 요소를 접근성 설계의 일부로 취급하지 않습니다.
- 가상 요소에는 대체 텍스트를 제공할 수 없습니다.
- 스크린 리더는 가상 요소를 인식하지 않습니다.
- 키보드 접근 대상이 될 수 없습니다.
따라서
접근성이 필요한 정보는
반드시 실제 DOM 요소로 제공해야 합니다.
가상 요소 설계 시 점검 기준
Section titled “가상 요소 설계 시 점검 기준”가상 요소를 사용하기 전에는 다음을 점검합니다.
- 이 요소가 없어도 UI 의미가 유지되는가
- 실제 요소로 구현하는 것이 더 적절하지 않은가
- 장식 목적 외의 역할을 하고 있지는 않은가
- 접근성 사용자에게 정보 손실이 발생하지 않는가
가상 요소가 많아질수록,
구조 설계를 다시 검토해야 합니다.
가상 요소 사용 규칙의 목적
Section titled “가상 요소 사용 규칙의 목적”가상 요소 사용 규칙은
UI의 시각적 표현과 의미 전달을 명확히 분리하고,
접근성을 구조적으로 보장하기 위한 기준입니다.
SLUR UI System은
가상 요소를 최소화함으로써
의미 있는 UI 구조를 유지하는 것을 목표로 합니다.