웹 접근성(feat. 웹 표준)

Minsu·2025년 9월 25일

⛳ 이 글을 통해 알게되는 것
1. 웹 접근성의 개념과 필요성
2. 웹접근성 4원칙
3. 웹 접근성 준수 방법

2025년 5월 15일

🌎 세계 접근성 인식의 날(Global Accessibility Awareness Day, GAAD)

매년 5월 셋째주 목요일은 세계 접근성 인식의 날입니다.

모든 사람이 디지털 접근성과 포용성에 대해 이야기하고, 생각하고, 배우고, 이를 실천하도록 알리는 것이 목적입니다.

https://www.newsiesports.com/news/articleView.html?idxno=14932

“웹” 접근성?

신체적, 환경적 조건에 관계없이 누구나 인터넷을 통해 정보에 접근하고 이용할 수 있는지에 대한 정도

즉, 모든 사용자가 어떠한 기술환경에서도 전문적인 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것입니다.

신체적, 환경적 제약 조건에 대해 좀 더 자세히 알아볼까요?

신체적 제약 조건

시각적 제약: 시각장애, 색각 이상, 저시력 등으로 화면이나 색상 정보를 구분하기 어려움
청각적 제약: 청각장애, 난청 등으로 오디오 콘텐츠(알림음, 영상 음성)를 인식하기 어려움
운동 기능 제약: 손이나 팔의 움직임이 불편하거나 제한되어 마우스·키보드 조작이 어려움
인지적 제약: 학습장애, 기억력 저하, 난독증 등으로 복잡한 UI나 긴 텍스트 이해에 어려움

환경적 제약 조건

물리적 환경: 밝은 햇빛(스크린 시인성 저하), 소음이 큰 장소(오디오 인식 방해) 등 주변 환경적 요인
기술적 환경: 네트워크 불안정, 낮은 성능의 기기 사용으로 인해 콘텐츠 접근에 제약 발생

웹 접근성, 왜 준수해야 하나요?

웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다.

Tim Berners Lee

장애인차별금지법

장애인들도 비장애인들과 동등하게 전자정보를 사용할 수 있도록 해야한다는 내용이 포함되어 있음

https://www.law.go.kr/lsInfoP.do?lsId=010420&ancYnChk=0#0000

대형 서비스의 경우에는 장애인 단체에서 실제로 장애인차별금지법 위반의 이유로 소송을 제기한 적도 있다.

웹 접근성 지침

**WCAG (Web Content Accessibility Guidelines) -** W3C가 발행한 콘텐츠 접근성 지침
**KWCAG (Korean Web Content Accessibility Guidelines) -** 한국형 웹콘텐츠 접근성 지침. 웹표준 기술동향 토대로 국내 설정에 맞게 반영됨

참고: A11YKR(Accessibility Korea) 커뮤니티 https://a11ykr.github.io/docs/

비즈니스적 가치

이탈률 감소
- 접근성이 낮으면 사용자들이 서비스 이용을 포기할 수 있음
시장 확대
- 고령화 사회, 다양한 사용자를 포용하면 잠재 고객층이 넓어짐
SEO 및 검색 노출 개선
- 검색엔진 크롤러가 읽기 쉬운 구조 → 검색 엔진 최적화(SEO)

그러나..! 알고있지만 지키지 않는 이유

“여유가 없다”
“부가적인 것으로 느껴진다”
“필요성을 못느꼈다”

그렇지만, 우리는 이미 접근성에 대해 어느정도 고려하고 있다.

Input에 placeholder 넣기
배경색에 알맞은 글자색 사용하기
버튼에 패딩값을 주어 충분한 클릭 영역 확보하기
…

웹 접근성 4원칙(POUR)

Perceivable (인식의 용이성)

사용자가 콘텐츠에 접근할 때 문제가 될 수 있는 모든 장애 요인을 제거하는 것.
사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 인식할 수 있어야 한다.

이미지에 대체 텍스트(alt) 제공 → 스크린리더가 이미지 설명 읽어줌

<!-- 의미 있는 이미지 -->
<img src="profile.png" alt="프로필 사진" />

<!-- 장식용 -->
<img src="line.png" alt="" />

<!-- 링크 내 이미지 -->
<a href="/home">
  <img src="home.png" alt="홈으로 이동" />
</a>

영상에 자막 제공(멀티미디어 대체 수단 제공) → 청각장애 사용자도 내용 이해 가능
색상, 명도 대비 강화 → 색각 이상 사용자가 구분 가능 https://sitero.co.kr/contrast
텍스트 크기 조절, 오디오 볼륨 제어 지원 → 시력 저하·난청 사용자도 접근 가능

Operable (운용의 용이성)

사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 운용할 수 있어야 한다.
→ 마우스, 키보드나 터치스크린을 사용할 수 없는 사람들도 UI 컴포넌트를 사용하여 콘텐츠를 탐색할 수 있는가?

키보드 내비게이션 지원 → Tab/Shift+Tab으로 모든 버튼·입력창 접근 가능 https://betteryy.com/웹-접근성을-높이는-키보드-내비게이션-가이드-9가지/
포커스 표시 제공 → 현재 초점 위치를 테두리나 하이라이트로 시각적으로 표시 키보드 접근 시 초점이 시각적으로 노출되어야 한다. 초점 이동이 시각적으로 보이지 않으면 어디에 초점이 있는지 알 수 없어 컨트롤을 선택할 수도 없음
키보드 이동 시 해당 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있어야 함
- hideFocus
- outline:none
- onfocus=this.blur()
  
  → 초점이 보이지 않게되어 주의해야 함
자동 슬라이드 배너에 일시정지/재생 버튼 제공 → 사용자가 제어 가능
모달은 <dialog> 활용 → 포커스 자동 이동, 포커스 트랩 기능으로 모달 안에서만 탐색 가능

Understandable (이해의 용이성)

사용자가 웹사이트의 콘텐츠와 동작 방식을 쉽게 이해하고, 예측 가능해야 한다.
유저가 콘텐츠를 이해하는 데 문제가 없는가?

가독성 → 명확하고 간단한 문구 사용
예측 가능성 → 버튼/링크의 동작이 예상 가능해야 함
입력 도움 → 오류 발생 시 수정 방법 안내, 자동 완성, 입력 포맷 힌트 제공

Robust (견고성)

사용자는 기술에 영향을 받지 않고 원하는 콘텐츠를 이용할 수 있어야 한다.

HTML5 시맨틱 태그 사용 → <header>, <nav>, <main>, <footer>
ARIA 속성 활용 → aria-label, aria-expanded, aria-describedby 등으로 의미 전달
다양한 브라우저(Chrome, Edge, Safari) 및 보조기술(스크린리더 NVDA, VoiceOver) 테스트
웹 표준 검사(Lighthouse, W3C Validator) 통해 문법 오류 최소화

웹 접근성 준수 방법

1. 웹 표준 지키기

웹 표준이란, 어떠한 운영체제나 브라우저에서도 동일한 콘텐츠를 볼 수 있도록 웹페이지를 만들 때 지켜야 하는 규칙

1990년대부터 2000년대 초반까지 다양한 브라우저들이 등장
그로인해 과도한 경쟁 발생으로 해당 브라우저에서만 사용 가능한 기술들이 나타나기 시작했다!
여러 브라우저를 지원해야 했기 때문에, 개발자들은 그에따라 여러 웹페이지를 만들어야했다.

→ 이를 해결하기 위해 W3C라는 웹 표준 기구가 설립되었다. https://www.w3.org/

시맨틱 마크업 - 시맨틱 태그 사용하기

*시맨틱 - 의미론적인, 의미를 가진

https://i-ten.tistory.com/341

시맨틱 태그 종류

https://developer.mozilla.org/ko/docs/Web/HTML/Reference/Elements#inline_text_semantics

시맨틱 태그 사용 이점

가독성 향상
웹 접근성 향상 https://d4lltw.csb.app/
SEO(검색엔진최적화) 향상 - 검색엔진이 웹사이트를 크롤링 할 때, 페이지의 HTML 태그 분석

WAI-ARIA

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA#:~:text=Accessible%20Rich%20Internet%20Applications%20(ARIA)%20is%20a%20set%20of%20roles%20and%20attributes%20that%20define%20ways%20to%20make%20web%20content%20and%20web%20applications

Web Accessibility Initiative – Accessible Rich Internet Applications

WAI — W3C 산하의 웹 접근성 지원 기관
ARIA — 리치 애플리케이션의 접근성을 지원하는 표준 기술 명세 *리치 애플리케이션: 앱처럼 동적으로 동작하는 웹 애플리케이션

→ HTML 태그에 필요한 정보를 제공해주는 보조 기술

분류

역할(Roles) - 이 요소가 무슨 UI 컴포넌트인지 알림
- role="button” →
  로 버튼 구현할 경우 해당 role을 주면 버튼으로 인식
- role="dialog”
- role="tablist”

상태(States) - 현재 상태를 알림

aria-expanded → 현재 항목 펼침 여부 표현

button, listbox, tab

<button aria-expanded="false" aria-controls="menu1">메뉴 열기</button>
<ul id="menu1" hidden> ... </ul>

aria-selected → 현재 항목 선택 여부 표현

option, tab

<li role="tab" aria-selected="true">탭 1</li>
<li role="tab" aria-selected="false">탭 2</li>

속성(Properties) - UI의 특성을 알림
- aria-controls → 어떤 요소가 다른 요소를 제어하고 있음을 연결
- aria-labelledby → 다른 요소의 텍스트를 가져와 이 요소의 이름(Accessible Name)으로 사용
```
<h2 id="title">로그인 폼</h2>
<form aria-labelledby="title">...</form>
```
- aria-describedby
  - 다른 요소의 설명(Description)을 연결
  - 라벨만으로 부족할 때 부가설명 전달
```
<input type="password" aria-describedby="pw-hint" />
<small id="pw-hint">8자 이상 입력하세요</small>
```
- aria-activedescendant
  - 현재 활성화된 자식 요소를 가리킴
  - 주로 커스텀 콤보박스, 리스트박스에서 키보드 탐색 시 사용
```
<div role="listbox" aria-activedescendant="opt2">
<div id="opt1" role="option">옵션 1</div>
<div id="opt2" role="option">옵션 2</div>
<div id="opt3" role="option">옵션 3</div>
</div>
```

https://codesandbox.io/p/sandbox/wpgmf9?file=%2Fsrc%2FApp.js%3A49%2C2

🌟 Accessible Name 규칙

Accessible Name: 스크린리더가 요소를 소개할 때 읽어주는 공식 이름
Author: 작성자가 명시적으로 작성한 값 (aria-label, alt, title 등)
Contents: 요소의 텍스트 값
Author > Contents →작성자가 명시적으로 준 값이 최우선

예시.

<div aria-label='감사안해요'>감사합니다</div>

상황	코드 예시	Accessible Name	비고
1. aria-labelledby만 있음	`<div aria-labelledby="label">텍스트</div><span id="label">라벨</span>`	"라벨"	`aria-labelledby`가 최우선
2. aria-label만 있음	`<div aria-label="안녕하세요">텍스트</div>`	"안녕하세요"	직접 지정된 `aria-label`이 적용됨
3. 텍스트 콘텐츠만 있음	`<div>텍스트</div>`	"텍스트"	요소 안의 실제 텍스트가 읽힘
4. aria-labelledby + aria-label 둘 다 있음	`<div aria-label="안녕하세요" aria-labelledby="label">텍스트</div><span id="label">로그인 폼</span>`	"로그인 폼"	`aria-labelledby`가 `aria-label`보다 우선
5. aria-labelledby 잘못된 참조 (없는 id)	`<div aria-label="안녕하세요" aria-labelledby="nope">텍스트</div>`	"안녕하세요"	참조가 무효면 `aria-label`로 fallback
6. aria- 속성 전혀 없음*	`<div>텍스트</div>`	"텍스트"	기본적으로 안의 텍스트가 읽힘

⚠️ ARIA 사용 전 주의사항

Semantic HTML First
- 기본 HTML 기능을 우선 고려하기
- 의도한 역할과 기능을 하는 태그를 찾아 사용해야 함
필요한 경우에만 보완적으로 사용하기
- 잘못 사용된 ARIA는 주의 필요
  - 원래 의도한 맥락과 다르게 해석되어 접근성이 오히려 저하될 수 있음