[Deep Dive CS - Q30] Web Accessibility

Q30. 웹접근성에 대해서 아는대로 설명해주세요

 

웹 접근성(Web Acessibility, 줄여서 A11y)은 "신체적 조건이나 환경에 구애받지 않고, 누구나 동등하게 웹 사이트의 정보를 이용할 수 있도록 보장하는 것"입니다. 웹 접근성을 잘 준수하려면, HTML을 시멘틱하게 짜야 합니다. 이는 결국 검색엔진, 스크린 리더가 코드를 잘 이해하게 만드는 과정입니다. 

 

하지만 스크린 리더 같은 보조 공학 기기는 DOM을 직접 읽지 않습니다. 브라우저는 DOM을 기반으로 접근성 트리(Accessibility Tree, AOM)라는 별도의 트리를 구측합니다. (💡 Chrome DevTools의 Elements 패널 옆에 Accessibility 탭을 활용하는 것을 추천드립니다)

 

대부분은 시멘틱 HTML만 잘써도 90%는 해결됩니다. 하지만 나머지는 ARIA(Accessible Rich Internet Applications)을 사용합니다. 
하지만, 잘못쓰면 독이 되기 때문에 적절히 잘 사용하는 것을 권합니다

 

사용가이드는 해당 문서를 잘 읽어보는 것을 권합니다

https://w3c.github.io/using-aria/

 

 

🎯 실전 Case Study: 모달(Modal)과 포커스 트랩

SPA(Single Page Application)에서 가장 접근성이 많이 깨지는 곳이 바로 모달입니다.

1. Focus Trap: 모달이 열리면 Tab 키를 눌렀을 때 포커스가 모달 밖(배경)으로 나가면 안 됩니다. 모달 내부에서만 뱅글뱅글 돌아야 합니다.
2. Focus Restore: 모달을 닫았을 때, 포커스는 모달을 열었던 '그 버튼'으로 다시 돌아와야 합니다. 그렇지 않으면 사용자는 페이지 처음부터 다시 탐색해야 하는 미아가 됩니다.
3. Keyboard Close: ESC 키를 눌렀을 때 모달이 닫혀야 합니다.

React에서는 FocusTrap 같은 라이브러리를 쓰거나 useEffect로 포커스 관리를 직접 구현해야 합니다.

---

🧪 테스트 및 도구 추천

"내 눈에 보인다고 다가 아닙니다."

1. Lighthouse / axe-core: 자동화 도구로 기본적인 문법 오류(명도 대비, alt 누락)를 잡습니다.
2. Screen Reader 직접 써보기:
   • Mac: VoiceOver (Cmd + F5)
   • Windows: NVDA (무료)
3. Keyboard Only: 마우스를 뽑고 Tab, Shift + Tab, Enter, Space만으로 웹사이트를 이용해 보세요. 포커스 링(outline)이 사라진 곳은 없는지 체크합니다.

 

참고 : https://developer.mozilla.org/ko/docs/Web/Accessibility/ARIA