Carousel 마크업

Resources

• 원문 - 번역은 아니고... 보면서 공부한 내용들 입니다.
• Example
• Role/States/Properties 목록

5 STEPS

• STEP 1. 사용자에게 각 element의 역할이 무엇인지 설명해야 한다: ROLE (eg.<input type="checkbox">)
• STEP 2. 사용자에게 element의 속성과 중요 연관성을 알려야 한다: PROPERTY (eg. <input type=... disabled required readonly>)
• STEP 3. 사용자에게 element의 상태를 알려야 한다: STATE ( eg. ... checked="true" disabled="false">)
• STEP 4. 상태변화가 있을시 사용자에게 알려야 한다: STATE CHANGE
• STEP 5. 키보드 접근성 제공 (TAB키로 이동)

Markup

<div class="ui_carousel theme_default" data-uipack="ui_carousel">
  <div id="mainCarousel" class="carousel" aria-live="polite">
    <ul class="innerFrame">
      <li class="frame" aria-hidden="false">
        item1
      </li>
      <li class="frame" aria-hidden="true">
        item2
      </li>
      <li class="frame" aria-hidden="true">
        item3
      </li>
    </ul>
  </div>
  <fieldset class="ctrls" aria-controls="mainCarousel">
    <button value="prev" aria-label="previous">&lt;&lt;</button>
    <button value="play" aria-label="play">Play</button>
    <button value="pause" aria-label="pause">||</button>
    <button value="next" aria-label="next">&gt;&gt;</button>
  </fieldset>
</div>

STEP1: ROLE 정의하기

• Carousel의 아이템들은 리스트가 맞다.
• Carousel을 제어하는 버튼들의 역할은 html 기본 태그로 설명이 된다.
• 버튼들의 내용이 심볼이나 아이콘이면 대체 텍스트 대체 텍스트가 필요하며, aria-label 속성으로 제공한다.

STEP2: 중요 Element간 관계와 속성

구조(Structure) :

• Carousel의 아이템들은 한 리스트 목록이다.
• <fieldset>으로 버튼들을 묶어 버튼들은 한그룹임을 표시한다.

그룹 간의 관계(Relationship) :

• 위 UI에는 컨트롤 그룹과, Carousel그룹이 있다.
• 두 마크업은 서로 ui동작에 연관이 있어 아래와 같이 연관성을 사용자에게 전달 해야한다.
• 버튼 컨트롤들이 Carousel을 제어하니까, aria-controls="mainCarousel" 이라고 해준다.

속성(Property) :

• Carousel의 컨텐츠는 자동으로 바뀌게 되는데, 이때 컨텐츠 변화를 사용자에게 알리기 위해 aria-live="polite"라는 속성을 사용한다.
• aria-live="polite: 는 사용자가 다른 컨텐츠를 보고있을 때, carousel의 컨텐츠가 변화해도, 현재 사용하고있는 컨텐츠를 다 본시점에서 알려준다는 값이다.(세치기 ㄴㄴ)
• aria-live="off": aria-live 속성을 비활성화 시키고, 사용자에게 이 Element의 변화를 알리지 않는다.
• aria-live="assertive: 해당 Element의 컨텐츠가 바뀌면 바로 사용자에게 알린다. (세치기 ㅇㅇ)

STEP3: UI 상태 초기화

• 초기화면에서 보여줄 상태를 설정한다.
• 초기화면에선 Carousel의 첫 아이템을 보여주며, aria-hidden; 속성으로 리스트의 가시성 상태를 사용자에게 알려준다.
• 보여줄 아이템은 aria-hidden="false", 감출 아이템은 true값으로.
• 위 속성을 CSS선택자로 사용해 display속성을 선언해준다.

.carousel .frame[aria-hidden="true"] {
  display: none
}
.carousel .frame[aria-hidden="false"] {
  display: block
}

STEP4: STATE 변경

• Carousel은 버튼 컨트롤들로 인한 화면전환과, 자동 롤링 기능이 있다.
• 화면 전환 기능은 STEP3에서 지정한 aria-hidden속성의 값으로 보여지는 아이템의 상태를 바꿀 수 있다.
• 자세한 설명은 다음 스크립트작성 파트에서 ...

STEP5: 키보드 접근성

• 자세한 설명은 다음 스크립트작성 파트에서 ...