버튼 속성 추가
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
A section of a page that consists of a composition that forms an independent part of a document, page, or site. An article is not a navigational landmark, but may be nested to form a discussion where assistive technologies could pay attention to article ne
www.w3.org
TAB UI 적용 사례
연결된 tab의 contents의 활성화는 aria-selected 가 아닌 aria-expanded로 구분해 주어야 합니다
https://aoa.gitbook.io/skymimo/aoa-2018/2018-aria/tab
TAB키 이동 웹 접근성
'작업 일지 > 웹접근성' 카테고리의 다른 글
| 커스텀 Input 컴포넌트의 라벨 연결 오류 와 해 (0) | 2025.06.12 |
|---|---|
| IR(Image Replacement) (0) | 2024.03.11 |
| 웹 접근성 키보드 포커스 처리 (0) | 2024.03.05 |
| 탭 UL 접근성 (0) | 2024.02.27 |
| 반응형 웹 vs 적응형 웹 (0) | 2023.06.29 |