웹 접근성

웹 접근성이란?

모든 사용자를 위한 편리한 서비스

모든 사용자가 특정 환경이나 신체적 장애에 상관없이 웹 사이트나 애플리케이션에서 제공하는 모든 정보에 동등하게 접근하고 이용할 수 있도록 보장하는 것이다.

웹 접근성의 4원칙 (POUR)

웹 접근성은 POUR이라고 불리는 4가지 핵심 요소를 가지고 있습니다.

1. Perceivable (인식의 용이성) : 사용자가 콘텐츠를 쉽게 인식할 수 있는가?

모든 콘텐츠는 사용자가 인식할 수 있어야 한다. 인식의 용이성은 사용자가 콘텐츠에 접근할 때 문제가 될 수 있는 모든 장애 요인을 제거하는 것이다. 시력 외에 다른 감각을 활용하여 사용자들이 콘텐츠를 인지할 수 있도록 한다. 예를 들어 대체 텍스트와 논리적 구조를 활용하여 스크린 리더가 웹사이트에 액세스할 수 있도록 하는 것이 포함된다.

인지 가능성을 위해 고려할 수 있는 사항은 다음과 같다.

캡션을 이용한 대체 텍스트 삽입
색상 대비
텍스트 크기 및 오디오 볼륨 제어
시멘틱 태그 사용 (논리적 구조)

2. Operable (운용의 용이성) : 사용자가 UI 컴포넌트를 사용하여 콘텐츠를 탐색할 수 있는가?

사용자 인터페이스 구성 요소는 조작이 가능하고 내비게이션할 수 있어야 한다. 마우스, 키보드나 터치 스크린을 사용할 수 없는 사람들도 사이트를 탐색할 수 있는가에 대한 것이다. 웹사이트를 탐색하는 장치와 관계없이 모든 유저가 사이트를 사용할 수 있도록 다양한 방법을 활용해 접근성을 높여야 한다.

운용의 용이성을 위해 고려할 수 있는 사항은 다음과 같다.

사용자가 웹 사이트 내에서 원하는 작업을 완료할 수 있도록 충분한 시간 제공

3. Understandable (이해의 용이성) : 유저가 콘텐츠를 이해하는 데 문제가 없는가?

콘텐츠는 장애유무에 관계없이 이해할 수 있게 구성되어야 한다. 이해의 용이성이란 사용자가 인터페이스를 이해하고 활용할 수 있도록 일관성 있게 웹 사이트가 만들어져 있는가에 대한 것이다. 이를 위해서는 이해하기 쉬운 언어와 기능을 사용하는 것이 좋다.

이해의 용이성을 위해 고려할 수 있는 사항은 다음과 같다.

상황 별 도움말 및 오류 시 대처 방안 등 정보 제공

4. Robust (견고성) : 다양한 브라우저 및 보조 기술로 웹 사이트 내 콘텐츠를 소비할 수 있는가?

다양한 브라우저 및 보조 기술로 웹 사이트 내 콘텐츠를 소비할 수 있어야 한다. 견고성은 웹사이트가 얼마나 다양한 플랫폼 및 장치에서 작동하는가, 즉 환경적 제약에 영향을 받지 않는지를 뜻한다.

견고성을 위해 고려할 수 있는 사항은 다음과 같다.

보조 기술(스크린 리더)로 무리 없이 웹 사이트를 사용할 수 있는지 고려
플랫폼 업데이트 중에도 웹 사이트에 계속 접속이 가능한지 고려

웹 접근성의 중요성

1. 누구에게나 동등한 기회 제공

사회적 약자를 포함한 모든 계층의 사용자들이 구분 없이 동등하고 편리하게 사용할 수 있도록 해야 한다.

2. 웹 접근성 보장은 법률에 명시된 의무사항

국가정보화기본법과 장애인차별금지 및 권리구제 등에 관한 법률 등 법률에 명시된 의무사항이다.

웹 접근성 구현 기술

1. 대체 텍스트

img 태그에 alt 삽입 이미지 대체 텍스트는 웹 페이지에서 이미지를 표현하기 위해 태그에 추가된 html 특성이다. 대체 텍스트를 사용하면 이미지를 텍스트로 설명할 수 있어 스크린 리더 등 보조 기술이 이미지의 내용을 사용자에게 전달하여 접근성을 향상시킬 수 있다. 뿐만 아니라, 검색 엔진 크롤러가 이미지를 이해할 때 대체 텍스트를 기반으로 파악하기 때문에 이미지 검색 결과에서 노출 순위를 향상시킬 수 있다.

잘못된 예시 <img src="cat.png" />
올바른 예시 <img src="cat.png" alt="선글라스 쓴 고양이 사진" />

2. 유의미한 태그 사용

의미 있는 button 만들기

잘못된 예시

<div className="button-cat" onClick={() => navigator("/dialog")}>
<span>+</span>
</div>

올바른 예시

<button
className="button-cat"
aria-label="고양이 추가"
onClick={() => navigator("/dialog")}
>
<span aria-hidden="true">+</span>
</button>

3. 시멘틱 마크업

시멘틱 태그란? 사이트의 구조를 설계하는 데 도움이 되는 태그로, 명시적이면서 직관적으로 웹 사이트를 설계하는 데 도움을 주는 태그이다.

4. ARIA

5. 그 외

동영상 캡션 추가 캡션은 청각적 어려움이 있는 사용자에게 동영상 속 상황에 대한 설명을 자막과 함께 제공하는 것이다. 동영상 캡션을 추가하면 검색엔진이 해당 내용을 이해하고 키워드 관련성을 높일 수 있다.
앵커 텍스트 사용 링크로 연결되는 페이지의 콘텐츠 내용을 설명하는 텍스트이다. a 태그의 구성 요소중 하나이며, 다른 페이지로 연결해 주는 하이퍼 링크를 의미한다.
role 사용 ARIA 랜드마크 role은 스크린 리더 사용자에게 매우 즉각적인 가치를 제공하고 추가하기 쉬운 기능이다. 요소에 role=".."을 추가하면 스크린 리더 사용자들은 쉽게 랜드마크를 탐색할 수 있다.
색상 대비 시각 장애의 관점에서 가장 첫 번째로 고려해야 할 사항이며, 색상 대비는 요소의 색상과 배경색의 비율로 계산한다.
소요 시간 기반의 작어 피하기 사이트에서 사용자가 작업에 소요할 시간을 가정하거나, 이와 유사하게 입력 폼에는 제한 시간을 둬서는 안 된다. 사용자가 읽거나 작업을 마무리하는 데 걸리는 시간을 가정해서는 안 된다.

웹 접근성 도구

1. WAVE (Web Accessibility evaluation tool)

접근성을 준수하는지 평가해 주는 확장 프로그램으로, WebAIM이라는 기관이 운영한다. 현재 페이지가 어떤 접근성 원칙을 위반하는지 문제가 되는 이유, 해결 방법까지 제시해 준다.

2. Chrome Developer Tools - Accessibility

크롬 개발자 도구에 포함된 접근성 관련 기능 툴로, DOM 요소를 확인할 수 있는 탭에서 바로 확인 가능하다.

3. Chrome Developer Tools - Lighthouse

웹 페이지의 품질을 개선하기 위한 오픈 소스 도구이며, 크롬 개발자 도구에서 확인 가능하다. 분석을 원하는 링크에 들어가 Lighthouse 확장 프로그램을 실행하면 웹 페이지에 대한 보고서를 받을 수 있다. 보고서를 통해 접근성, SEO, 로딩 속도 등 다양한 지표를 합산한 퍼포먼스 점수를 확인할 수 있다.

4. W3C Validation

웹 기술의 표준을 정의하는 공식 기관인 W3C(World Wide Web)의 html 마크업 검사기이다. 마크업에 대한 문법적 오류를 검사할 수 있어서 작성한 html 문법 유효성 검사에 용이하다.

5. CCA (Colour Contrast Analyzer)

웹 접근성 평가 기준 중 '텍스트 콘텐츠의 명도 대비' 항목을 평가할 수 있는 검사기이다. CCA를 통해 명도 대비 테스트 및 시각 장애 유형별 화면을 확인할 수 있어 콘텐츠의 가독성을 평가하기 좋다.

OHLPstudy / Frontend

2. 웹 접근성 #1