모두를 위한 웹 프론트엔드
'사소해' 보이지만 강력한 접근성 팁
웹 접근성이란?
장애의 유무와 관계없이 모든 사람이 웹사이트에서 제공하는 모든 정보에 동등하게 접근하고 이용할 수 있도록 보장하는 것입니다.
"웹의 힘은 그것의 보편성에 있다. 장애와 무관하게 모든 사람이 접근할 수 있는 것이 필수적인 요소이다."
— 팀 버너스리 (WWW 창시자)
적합성 수준 (WCAG)
웹 콘텐츠 접근성 지침(WCAG)은 세 단계의 성공 기준을 제시합니다.
| 수준 | 설명 |
|---|---|
| A (최소) | 준수하지 않으면 일부 그룹이 아예 접근이 불가능한 수준. |
| AA (권장) | 대부분의 경우 가장 큰 장벽을 제거하는 수준. 법적 표준인 경우가 많음. |
| AAA (최상) | 가장 높은 수준의 접근성을 충족하는 경우. |
연석 효과 (The Curb-Cut Effect)
특정 그룹(휠체어 사용자)을 위해 인도 경계석을 낮췄더니, 유모차,
여행객, 자전거 이용자 등 모두가 편해졌습니다.
웹 접근성도 마찬가지입니다. 특정 사용자를 위한 개선이 결국
모든 사용자의 경험(UX)을 향상시킵니다.
-
더 나은 UX
-
SEO 향상
-
유지보수성 증가
-
브랜드 이미지 제고
구조의 힘
시맨틱 HTML과 ARIA로 보조 기술과 소통하는 법
시맨틱 HTML: div를 넘어서
div는 의미가 없지만, nav나
main은 그 자체로 '역할'을 가집니다. 이는 스크린리더
사용자에게 페이지의 '지도'를 제공하여 원하는 정보로 바로 이동할
수 있게 돕습니다.
스크린리더 출력 결과
ARIA: 꼭 필요할 때만
role, aria-label 등 ARIA 속성은
HTML만으로 의미를 충분히 전달할 수 없을 때 사용합니다. 예를
들어, 아이콘만 있는 버튼에 스크린리더가 읽을 수 있는 이름을
붙여줄 수 있습니다.
ARIA 제1규칙: 네이티브 HTML 요소로 기능을
구현할 수 있다면 ARIA를 사용하지 마세요. (예:
div role="button" 대신 button 사용)
링크 vs 버튼
용도에 맞는 태그 사용은 스크린리더 사용자에게 다음 행동을 예측하게 합니다.
-
a href="..."(링크): 클릭 시 다른 페이지로 이동하거나 URL이 변경될 때 사용합니다. "어딘가로 이동"을 의미합니다. -
button(버튼): 현재 페이지에서 무언가 동작(폼 제출, 모달 열기, 토글 등)을 일으킬 때 사용합니다. "무언가를 실행"을 의미합니다.
보이지 않는 접근성
렌더링 방식이 SEO와 초기 로딩에 미치는 영향
CSR (Client-Side Rendering)
서버는 빈 HTML과 JS를 보냅니다. 브라우저가 JS를 실행해 페이지를 그립니다.
문제점: 검색엔진이 처음 방문했을 때 빈 페이지로 인식해, 콘텐츠가 검색 결과에 누락될 수 있습니다.
SSR / SSG (Server-Side / Static)
서버가 완성된 HTML을 만들어 보냅니다. 브라우저는 바로 보여주기만 합니다.
장점: 검색엔진과 보조 기술이 즉시 모든 콘텐츠를 읽을 수 있어 SEO와 초기 접근성에 유리합니다.
결론: 검색을 통해 발견되어야 하는 콘텐츠(블로그, 상품 페이지 등)라면 CSR보다는 SSR이나 SSG를 우선적으로 고려해야 합니다.
이제 무엇을 할까?
오늘 당장 시작할 수 있는 액션 아이템과 유용한 도구들
1. 키보드로 테스트하기
가장 쉽고 강력한 방법입니다.
Tab
키만으로 웹페이지를 처음부터 둘러보세요. 막히는 부분이 있다면,
그게 바로 첫 번째 접근성 버그입니다.
3. 한 가지부터 시작
다음 주 리팩토링에서 aria-label 이 필요한 곳은
없는지, alt 속성이 빠진 이미지는 없는지 한
가지만이라도 확인해보세요!