728x90
접근성(accessibility)과 인클루시브 디자인(inclusive design)은 밀접하게 연관된 개념이지만, 목적과 접근 방식에서 약간의 차이가 있다.
접근성 (Accessibility)
접근성은 장애가 있는 사람들도 동등하게 정보와 기능에 접근할 수 있도록 보장하는 것을 의미한다.
주요 초점
- 시각, 청각, 운동, 인지 등의 다양한 장애를 가진 사람들도 제품/서비스를 사용할 수 있게 하는 것
- WCAG(Web Content Accessibility Guidelines) 같은 표준을 준수
- 종종 법적 규제나 표준을 충족시키기 위한 개발의 일환
접근성 개발 시 핵심 원칙
- 시맨틱 태그 사용 (h1~h1까지, header, nav, section, artivle, footer, main 등)
- <img> 태그와 함께 alt 속성 사용
- <strong> 태그 주의 거센 억양으로 소리내어 발음)
- 대체 텍스트 제공
- 키보드 네비게이션 보장
- 색상 대비와 글자 크기
- 언어 설정 필수 (스크린리더가 음성 표현에 사용할 언어를 선택할 때 도움을 주기 위한 설정 - <html lang="ko">)
- 가상 요소(content : '';) 텍스트 금지
- content 속성으로 폰트 아이콘이나 특수문자와 같은 비문자 콘텐츠를 추가할 때도 스크린 리더기에서 읽을 수 있기 때문에 aria-hidden="true" 를 추가하여 숨기기
<nav aria-label="주 메뉴">
<ul>
<li><a href="/home">홈</a></li>
<li><a href="/about">소개</a></li>
<li><a href="/contact">연락처</a></li>
</ul>
</nav>
<img src="logo.png" alt="회사 로고">
<button type="button" aria-pressed="false">즐겨찾기</button>- aria-label, aria-pressed, aria-hidden 등 ARIA 속성은 보조 기기가 더 잘 이해하도록 도와준다.
- form 요소에 label은 반드시 명확히 연결 (for 속성 또는 label로 감싸기)
접근성 테스트
- 구글의 lighthouse
- 실생활 테스트 (모바일에서 테스트, 저성능에서 테스트 등)
인클루시브 디자인 (Inclusive Design)
인클루시브 디자인은 장애를 포함한 다양한 사용자들을 처음부터 고려하여 제품/서비스를 설계하는 포괄적인 접근 방식
주요 특징
- 장애에 국한되지 않고 연령, 문화, 언어, 기술 수준, 환경적 제약(예: 시끄러운 장소, 저사양 기기)까지 포함
- 예방적이고, 포괄적이며, 사용자 다양성을 강점으로 삼는 디자인 철학
- 기술/서비스 설계 과정에서 다양한 사용자 참여와 피드백을 적극 반영
예: 한 손으로 기기를 사용하는 사용자, 노년층, 임시적 장애(예: 깁스한 팔)까지 고려한 설계
접근성과 인클루시브 디자인의 관계
| 접근성 | 인클루시브 디자인 |
| 장애가 있는 사용자들의 동등한 접근을 보장 | 다양한 조건과 맥락의 사용자 모두를 포괄 |
| WCAG, ADA 등 명확한 기준과 법적 요구 | 철학과 접근법 중심 (법적 요구는 아님) |
| 주로 보조 기술 호환성과 기능적 접근성 | 사용자 경험, 심리적/문화적 수용성까지 고려 |
| 결과에 초점 (장애인의 접근 보장) | 과정에 초점 (다양한 사용자를 위한 설계) |
인클루시브 디자인은 접근성을 포함하는 더 넓은 개념이라고 볼 수 있다.
즉, 인클루시브 디자인을 잘하면 자연스럽게 접근성도 충족될 가능성이 높다.
실제 사례로 보는 연관성
| 사례 | 접근성 관점 | 인클루시브 디자인 관점 |
| 영상에 자막 제공 | 청각 장애인의 정보 접근 보장 | 소음이 심한 곳에서 보는 사용자도 도움 |
| 버튼 크기 확대 | 운동 장애인을 위한 더 큰 클릭 영역 | 이동 중 한 손으로 사용하는 사용자에게도 유용 |
| 고대비 모드 | 저시력 사용자 지원 | 햇빛 아래 모바일 화면을 보는 사용자에게도 유리 |
이상 스텔라였습니다. ✍️
728x90
'TECH' 카테고리의 다른 글
| 클로저 (Closure) ⛱ (1) | 2025.07.09 |
|---|---|
| css 인라인 조건문 🅸🅵 (1) | 2025.07.08 |
| 이벤트 전파 🖐🏻 (4) | 2025.07.04 |
| 면접 예상 질문 🙋♀️ (5) | 2025.07.03 |
| 이벤트 트래킹과 헤비포인트 🎭 (7) | 2025.07.02 |
