사용하기 적합한 경우

사용하기 적합하지 않은 경우

1. 1. 꺾쇠 아이콘: 콘텐츠 섹션의 확장/축소 상태를 나타냄
2. 2. 텍스트: 확장할 콘텐츠 섹션의 내용을 유추할 수 있는 제목 텍스트
3. 3. 컨테이너: 정보가 제공되는 콘텐츠 섹션으로 꺾쇠 아이콘이나 텍스트를 눌러 표시하거나 숨길 수 있음

• 기본적으로 축소된 상태로 제공한다.

  디스클로저는 화면 내 정보를 훑어보는 과정에서 사용자의 인지적 부담을 덜어주기 위한 용도로 사용되므로 화면이 로딩되었을 때 펼쳐진 상태로 제공하는 것은 적절하지 않다.

• 디스클로저를 통해 제공하고자 하는 부가 정보와 관련된 정보/컨트롤/섹션 아래에 배치한다.

  사용자가 관련 정보와 디스클로저 컨트롤 및 섹션 간 관계를 인지할 수 있도록 부가적인 정보를 제공하고자 하는 요소 아래에 배치한다.

• 가능한 한 하나의 섹션에 하나의 디스클로저만 사용한다.

  여러 개의 디스클로저를 연속적으로 배치하게 되면 복잡성이 증가되어 오히려 사용자에게 혼동을 줄 수 있다.

  [모범 사례]

  

  [피해야 할 사례]

  

• 디스클로저를 버튼 역할로 제공한다.

  디스클로저를 실행하였을 때 특정 섹션이나 화면으로 이동하는 것이 아니므로 <button>을 사용하거나 role=”button”을 사용하여 스크린 리더에서 버튼 역할임을 인지할 수 있도록 한다.

  • WCAG 2.1 Name, Role, Value (A)
• 스크린 리더에서 확장/축소 상태 정보를 확인할 수 있도록 한다.

  aria-expanded 속성이나 title 속성을 활용하여 디스클로저 섹션의 활성화 상태 정보가 스크린 리더에 탐지될 수 있도록 해야 한다.

  • WCAG 2.1 Name, Role, Value (A)

디스클로저 탐색

디스클로저 확장 및 축소