toggle layer

Web Accessibility

Role & Attribute

• aria-controls
• aria-expanded
• aria-labelledby

Screen Reader 지원

Role & Attribute	Sense Reader	NVDA	VoiceOver	TalkBack
aria-controls	X	X	X	X
aria-expanded	O	O	O	O
aria-labelledby	O	X	X	O

view

html

<div class="c-toggle">
    <button type="button" class="c-toggle__button" id="★toggle-button" aria-controls="★toggle-panel" aria-expanded="false">★toggle</button>

    <div class="c-toggle__panel" id="★toggle-panel" aria-labelledby="★toggle-button" tabindex="0"> <!-- 활성화시 is-active 클래스 생성 -->
        <p>
            content
        </p>

        <button type="button" class="c-toggle__close"><span class="sr-only">레이어 닫기</span></button>
    </div>
</div>

Keyboard Interaction

• button : c-toggle__button
  • enter, space : 해당 버튼의 패널 활성화
  • esc : 패널 닫힘

script

• button : c-toggle__button
  • aria-expanded : 활성화 true, 비활성화 false
• panel : c-toggle__panel
  • 포커스가 벗어나면 패널 닫힘

Screen Reader 음성 출력

• Sense Reader : 포커스가 모바일 가상 커서 처럼 제대로 작동하지 않으며, 읽히는게 이상한것 같음..

• VoiceOver, TalkBack : 가상 커서가 레이어를 벗어나도 자동으로 닫히지 않음

• Sense Reader

  축소됨 toggle 버튼
  페이지 열림 Document toggle toggle content 레이어 닫기 toggle 확장됨 toggle 버튼
  toggle
  content
  레이어 닫기 버튼

• NVDA

  toggle 버튼 축소됨
  확장됨
  content 레이어 닫기
  레이어 닫기 버튼
  toggle 버튼 축소됨

• VoiceOver

  toggle, button, collapsed
  toggle, expanded content
  레이어 닫기, button

• TalkBack

  접힘, toggle 버튼
  toggle content
  content (텍스트만 있으면 다음 포커스로 접근 안됨, 앵커 요소가 있어야 포커스 접근 가능 ?)
  레이어 닫기 버튼