피드로 돌아가기
Dev.toFrontend
원문 읽기
aria-current 기반 시각적 Parity 구현 및 Vanilla CSS 최적화 설계
Styling the Vertical - Achieving Parity
AI 요약
Context
Screen Reader 사용자에게 제공되는 정보와 시각적 사용자 간의 정보 격차 해소가 필요한 상황. 기존 Vertical Layout의 기본 구조를 유지하면서 Accessibility(접근성)를 시각적으로 구현하는 Styling 전략이 요구됨.
Technical Solution
- aria-current="page" 속성을 Selector로 활용하여 현재 활성화된 페이지에 대한 시각적 인디케이터(Fisheye character)를 배치함으로써 정보 Parity 달성
- Layout Shift 방지를 위해 border-bottom을 제거하는 대신 transparent 색상을 적용하여 렌더링 안정성 확보
- focus-visible의 outline을 제거하고 border-left-color를 변경하는 커스텀 Focus 상태를 설계하여 시각적 가독성과 접근성 동시 개선
- Nested List의 계층 구조 표현을 위해 border-left는 유지한 채 padding-left를 단계적으로 증가시키는 Indentation 전략 채택
- CSS @layer system-component 및 CSS Variables(--sp-px)를 통한 디자인 시스템의 일관성 및 유지보수 효율 증대
- Relative/Absolute Positioning 조합을 통해 Navigation 요소의 배치 유연성과 White Space 확보
실천 포인트
- ARIA 속성을 CSS Selector로 활용하여 보조 공학 도구와 시각적 UI 간의 정보 동기화 여부 확인 - 요소 제거 시 발생할 수 있는 Layout Shift를 방지하기 위해 투명도나 색상 변경으로 대체 처리 - 웹 접근성 준수를 위해 기본 outline 제거 시 반드시 대체 가능한 시각적 Focus 표시 수단 제공 - 계층형 UI 설계 시 Border와 Padding의 역할을 분리하여 구조적 일관성 유지