웹 접근성
Day 22) 접근성을 고려한 인터랙티브 위젯 구현 가이드
권끼리마끼리
2025. 2. 9. 17:03
🎄 A11y Advent Calendar (번역) 22일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)
최근 웹사이트와 애플리케이션이 점점 더 인터랙티브해지면서, 접근성이 저하되는 사례가 늘고 있습니다. 이는 웹이 기본적으로 지원하지 않는 기능들을 수작업으로 구현해야 하기 때문입니다. 이러한 방식은 나중에 접근성 문제를 일으킬 위험이 있습니다.
특히, 복잡한 인터랙션을 페이지에 추가할 때는 신중함이 필요합니다. 우선 이 방식이 최선인지 생각해보세요. 더 간단하고 직관적인 방법이 있을 수 있습니다. 예를 들어, Tab, Dialog, Toggle과 같은 인터랙티브 위젯은 사용성, 명확성, 성능 측면에서 비용이 발생할 수 있습니다. 반드시 구현해야 한다면, 직접 개발하기보다 검증된 솔루션을 활용하는 것이 좋습니다.
다음은 Interactive Widgets을 구현해야 하는 경우 사용할 수 있는 자바스크립트 라이브러리 모음입니다
- Dialogs: aria-modal-dialog (근데 해당 레포에 들어가봤더니 지금은 유지보수가 잘되지 않는다고 이 dialog 보는 것을 더 추천한다고 합니다)
- Content visibility toggles: a11y-toggle or Inclusive Components’ Collapsible Sections
- Tabs: Inclusive Components’ Tabbed Interface or a11y_tab_widget
- Dropdowns: Inclusive Components’ Menu & Menu Buttons
- Tooltips: Inclusive Components’ Tooltips & Toggletips or a11y_tooltips
- Sliders: Inclusive Components’ Content Sliders
- Notifications: Inclusive Components’ Notifications
- Data tables: Inclusive Components’ Data Tables
추가 참고자료
• WCAG 가이드라인: 인터랙티브 위젯의 접근성 기대치를 이해하는 데 도움이 됩니다.
• Scott O’Hara GitHub: 다양한 접근성 컴포넌트를 유지 관리하고 있으며, 필요 시 활용할 수 있습니다.