단계를 나타내는 UI - 프로세스 이미지화

 

 

디자인상으로는 컬러나 텍스트로 변화를 줘서, 해당 단계임을 나타내보일 수 있지만,

보이지 않을 경우, 현재 단계가 어디인지를 나타내주어야한다.

그런경우 아래와 같이 써본다.

 

ol > li > span.hidden

 

위와 같은 구조로 봤을 때, hidden 처리 된 span 엘리먼트 안에 "현재 페이지" 또는 "현재 단계"의 텍스트를 넣어주면 보이지 않는 경우에도 현재 단계가 어디인지 나타내 줄 수 있다.

 

응용적으로 hidden 처리 시킨 span 을 그림에서와 같이 아래 화살표 모양의 디자인을 넣어줘서 디자인도 만족시키고,

추가적인 태그 추가 등을 막을 수 있다.

 

 

HTML5 에 WAI-ARIA 속성이 적용되면서 해당 UI에 WAI-ARIA 를 추가한 구조를 아래처럼 나타낼 수 있다.

<ol aria-label="회원가입 단계">
  <li>1단계</li>
  <li aria-current="step">2단계</li>
  <li>3단계</li>
</ol>

 

aria-current 속성으로 현재 단계를 나타낼 수 있다.