버튼 / TAB aria 속성

버튼 속성 추가

aria-haspopup="dialog" 속성 추가, aria-controls 연결된 팝업의 id값 적용,

팝업 열림 유무에 따라 aria-expanded="false | true" 상태 값 변화 적용해주시면 됩니다.

<button
    type="button"
    class="btn-filter"
    aria-haspopup="dialog"
    aria-controls="연결된 팝업의 id"
    aria-expanded="false | true"
>

 

 

참고:

https://www.w3.org/TR/wai-aria-1.1/#tab

Accessible Rich Internet Applications (WAI-ARIA) 1.1

TAB UI 적용 사례
연결된 tab의 contents의 활성화는 aria-selected 가 아닌 aria-expanded로 구분해 주어야 합니다
https://aoa.gitbook.io/skymimo/aoa-2018/2018-aria/tab

 

TAB키 이동 웹 접근성

https://osmosemococoro.github.io/