웹 접근성(A11y) 기초와 실전 적용 방법

안녕하세요! AT SOPT YB 36기 한승우입니다. 

지난 1주차 세미나에서 웹 접근성에 대해 아주 간단히 다뤘었습니다.
그때 SEO 이야기가 나왔는데, 검색 최적화를 통해 더 많은 사용자에게 노출될 수 있다는 점을 다시금 떠올리게 됐습니다.

오늘은 웹 프론트엔드 개발자로서 꼭 알고 있어야 할 주제인 웹 접근성(A11y)에 대해 조금 더 깊이 이야기해보려고 합니다.

‘웹은 모두의 것이다’라는 말을 한 번쯤 들어보셨을 것 같아요.
하지만 실제 개발 현장에서는 바쁘다는 이유로, 혹은 생소하다는 이유로 접근성을 간과하는 경우가 많다고 합니다.
이번 기회에 우리가 왜 접근성을 고민해야 하는지, 그리고 어떻게 실천할 수 있는지를 함께 살펴보면 좋겠습니다.

 

1. 웹 접근성이란 무엇일까?

✍️ 웹을 더 많은 사람들과 나누기 위한 기본

A11y는 Accessibility의 축약어로, 장애 유무, 장치의 종류, 네트워크 상황에 상관없이 누구나 웹에 접근할 수 있도록 하는 것을 말합니다.

우리가 흔히 떠올리는 시각·청각 장애뿐 아니라, 마우스를 쓸 수 없는 환경, 저사양 기기, 키보드만 사용하는 유저, 심지어는 스마트 TV에서도 웹을 볼 수 있어야 한다는 것입니다.

🔎 예시:

마우스를 쓸 수 없는 사람 = 배터리 나간 사용자

색약 사용자 = 대비가 약한 텍스트를 못 읽는 사용자

터치스크린 기기 = 마우스 hover 이벤트를 사용할 수 없음

즉, 접근성은 특정 사용자를 위한 기능이 아니라 모두를 위한 배려입니다.

2. 시맨틱 마크업과 구조화된 HTML

🏗 의미 있는 구조로 돕는 스크린리더와 검색엔진

 

웹 접근성의 가장 첫 걸음은 의미 있는 HTML 태그를 쓰는 것입니다.
이는 단순히 “보기 좋게 정리”한다는 의미를 넘어서, 스크린 리더와 SEO에도 큰 영향을 줍니다.

시맨틱 태그 예시

 

Image inspired by semrush

 

Image inspired by mailchimp

반면 <div>만으로 만든 구조는 사람 눈엔 보이지만 기계는 해석하지 못하는 블랙박스입니다.
검색엔진에도, 보조 기기에도, 사용자에게도 불친절한 구조가 되어버리는 것 입니다.

3. 인지 가능한 콘텐츠 만들기

🌈 색상 대비부터 이미지 대체 텍스트까지

WCAG(Web Content Accessibility Guidelines)는 접근성을 위한 4가지 원칙을 제시합니다.
그 중 첫 번째가 인지 가능성(Perceivable)입니다.

✅ 실천 방법

 

텍스트와 배경 사이 명암 대비는 4.5:1 이상 (검은 글자 + 흰 배경처럼)

대체 텍스트(alt)를 모든 이미지에 포함시키기

텍스트만 의존하지 말기 (색깔만 바꾸는건 시각장애인에게 불리)

 

 

이러한 요소들은 단순히 장애인을 위한 기능이 아니라, SEO에도 긍정적인 영향을 미치고, 모바일 환경에서도 콘텐츠 전달력을 높여준다고 합니다.

4. 키보드와 포커스를 위한 설계

 

⌨ 키보드만으로도 충분히 사용할 수 있어야 해요

 

웹페이지의 모든 기능은 키보드만으로도 작동해야 합니다.
하지만 현실은? 많은 웹사이트들이 키보드 접근을 고려하지 않아 포커스가 안 되거나, 탭 순서가 엉망입니다.

✅ 실천 방법

1. tabindex="0"을 통해 키보드 포커스 지정
2. 포커스 상태에서의 outline을 제거하지 않거나 대체 시각효과 제공
3. button, a처럼 기능에 맞는 요소를 사용
4. div에 onClick 쓰지 말고, 키보드 이벤트도 같이 처리

제출

 

실제로 많은 시각장애인들은 키보드와 스크린 리더만으로 웹을 탐색합니다.
따라서 포커스가 안 되면, 그 사람은 웹을 전혀 사용할 수 없게 되는 셈 입니다.

5. 웹 접근성 체크리스트와 툴 활용

 

🧪 직접 확인하고, 지속적으로 개선하기

 

접근성은 “한 번 고치고 끝”이 아니라, 지속적인 점검과 유지보수가 필요한 항목입니다.
다행히도 우리는 이를 도와주는 도구들을 사용할 수 있습니다.

🔍 접근성 검사 도구

WAVE: 접근성 오류 시각화 도구

Lighthouse (크롬 DevTools): 접근성 점수 및 문제 제시

axe DevTools: 개발자 친화적인 접근성 점검 툴

 

접근성은 “장애인을 위한 것”이라는 인식을 넘어서, 모든 사용자를 위한 사용자 경험의 기본인 것 같습니다.

---

🧠 마무리하며

 

접근성을 고려하는 작업이 처음에는 귀찮고 복잡해 보일 수도 있다고 생각합니다.
하지만 하나씩 실천하다 보면 분명히 여러분의 코드와 UI는 더 많은 사람들에게 가닿게 될 것 같아요!

저도 앞으로 코딩 하면서 웹 접근성을 고려하는 작업을 실천하려고 합니다.

이상입니다! 긴 글 읽어주셔서 감사합니다😄🙏

 

 

참고 및 추천 자료:

• 모두를 위한 웹 접근성: A11y 가이드라인 이해하기 - BetteryBlog
• 프론트엔드 웹 접근성(a11y) - 기본 | 지나가던 개발(zigae)