오늘은 프론트엔드 개발자라면 실무에서 정말 중요하게 생각해야 할 '접근성(A11y)'에 대해 이야기해볼게. A11y는 accessibility의 약자인데, 'a'와 'y' 사이에 11개의 글자가 있어서 그렇게 줄여 부르거든. 단순히 법적 준수 사항을 넘어, 모든 사용자가 우리 서비스를 편하게 이용할 수 있게 만드는 핵심 요소라고 생각해.
1. 시맨틱 HTML, 기본 중의 기본이야
가장 먼저 강조하고 싶은 건 바로 시맨틱 HTML이야. 요즘 div로 모든 걸 해결하려는 경향이 있는데, 이건 접근성 측면에서 정말 치명적이거든.
header,nav,main,footer,section,article같은 HTML5 태그들을 적극 활용해- 버튼은
div에 클릭 이벤트 대신button태그를 써 - 링크는 반드시
a태그를 사용해
이렇게만 해도 스크린 리더가 "버튼입니다", "링크입니다"라고 명확하게 알려줘서 사용자 경험이 확 달라져.
2. 키보드 내비게이션은 필수야
마우스 없이 키보드만으로도 모든 기능을 사용할 수 있게 만들어야 해.
Tab키로 포커스가 논리적인 순서대로 이동하는지 확인해Enter나Space키로 버튼이나 링크를 활성화할 수 있는지 체크해- 모달 창이 열렸을 때 모달 내부에서만 포커스가 순환하는지도 신경 써야 해
나도 가끔 마우스 없이 키보드만으로 내가 만든 페이지를 테스트해보는데, 생각보다 불편한 점이 많더라.
3. 이미지 alt 속성과 색상 대비
시각적으로 정보를 전달하는 이미지에는 반드시 alt 속성을 넣어줘야 해.
- 로고 이미지:
alt="회사명 로고" - 설명 이미지:
alt="강아지가 햇살 아래서 낮잠을 자고 있는 모습" - 장식 이미지:
alt=""로 비워두기
색상 대비도 중요해. WCAG 기준 일반 텍스트는 4.5:1, 큰 텍스트는 3:1 이상의 대비율을 권장하고 있어. 색상만으로 정보를 전달하는 것도 피해야 해.
4. ARIA 속성, 신중하게 사용해
복잡한 UI 컴포넌트(아코디언, 탭 등)에는 aria 속성으로 보조 기술에 추가 의미를 전달할 수 있어.
aria-label: 요소의 목적을 명확히aria-expanded: 메뉴가 열렸는지 닫혔는지 상태 표시
하지만 **"First rule of ARIA is: Don't use ARIA"**라는 말이 있을 정도로, 시맨틱 HTML을 최대한 활용하고 정말 필요할 때만 신중하게 사용하는 게 핵심이야.
💡 핵심 정리
- 시맨틱 HTML 태그로 문서 구조를 명확하게
- 키보드만으로 모든 기능 사용 가능하게
- 이미지에 적절한 alt 속성, 충분한 색상 대비
- ARIA는 꼭 필요할 때만 신중하게
접근성은 단순히 기술적인 구현을 넘어, 모든 사용자를 배려하는 마음에서 시작되는 거라고 생각해. 작은 것부터 하나씩 적용해나가면 분명 더 좋은 웹을 만들 수 있을 거야. 화이팅!