웹 접근성?

웹 접근성의 필요성

웹 접근성(Web Acessibility)란 웹에 대한 접근성을 의미한다.
'접근성'은 모두가 접근할 수 있는 능력을 뜻한다.

1) 장애인 차별 금지 및 권리 구제 등에 관한 법률 (이하 장차법)
2) 웹 접근성 준수 의무화
3) 법적 책임과 벌칙 규정
4) 사회적 책임의 증대

장애인, 노약자 등을 위한 사회적인 책임과 더불어 관련 법률로도 명시되어 있기에 준수하도록 해야한다.
또한 WCAG(Web Content Accessibility Guidelines) 같은 국제 표준이 있고, 기업 입장에서 SEO 향상이나 사용자층 확대 측면에서도 접근성이 중요하다.

장애인 종류 및 사용자 그룹

1. 시각 장애인을 위한 웹 사용 고려 사항

   스크린 리더기 : 디지털 콘텐츠를 청각적으로 듣고 이해하는 장치

• 시멘틱 HTML 구조 사용
• 이미지 대체 텍스트(alt 등) 제공
• 폰트 크기 조정 기능

2. 청각 장애인을 위한 웹 사용 고려 사항

• 자막 및 텍스트 기반 콘텐츠 제공
• 오디오 콘텐츠의 시각적 대체 수단 마련

3. 운동 기능 장애인을 위한 웹 사용 고려 사항

• 키보드 접근성 고려
• 사용자 피드백 안내
• 논리적인 탭 순서
• 좁은 터치 범위 지양

웹 접근성 가이드라인 및 표준

WCAG (웹 콘텐츠 접근성 지침)

인식성 (perceivable)

• 정보와 사용자 인터페이스 구성 요소는 사용자에게 인식 가능해야 함.

운용성 (operable)

• 모든 사용자는 인터페이스 및 내용과 상호작용할 수 있어야 함.

이해성 (understandable)

• 정보 및 동작은 사용자에게 이해 가능해야 함.
• 콘텐츠는 일관성 있고 예측 가능하게 제공되어야 함.

견고성 (robust)

• 다양한 기술 및 도구에서 콘텐츠가 안정적으로 표현되고 작동해야 함.
• 새로운 기술이나 향상된 기술이 나올 때, 웹 콘텐츠는 여전히 접근 가능해야 함.

WAI-ARIA (웹 접근성 강화를 위한 웹 응용 프로그램 지침)

• WAI-ARIA는 마크업을 보충하여 스크린 리더 및 보조기기 등에 상호작용 및 필요한 정보를 제공하는 지침임.
  HTML에 역할(roles), 속성(properties), 상태(States) 정보를 추가하여 접근성 및 상호 운용성을 향상시켜 보다 나은 사용자 경험을 제공함.
• WAI-ARIA에서 제공되는 내용은, HTML5 시맨틱 요소와 중복해서 사용하지 않음.

역할(roles)

• 특정 요소에 역할을 정의한다.
  이때 정의된 역할은 동적으로 변경할 수 없다.
• role 어트리뷰트를 사용하여 대략 80여개의 역할을 사용할 수 있다.

예)

<div role="alert">경고 메시지입니다.</div>
<nav role="navigation">내비게이션 메뉴</nav>

role="alert": 경고 메시지 역할 (자동으로 스크린 리더가 알림).
role="navigation": 내비게이션 역할.

속성(Properties) + 상태(States)

• aria라는 접두어를 가지며, 요소가 가진 기본적인 특징이나 상황을 설명한다.

• 속성: 요소의 고유한 속성을 설명함

<img src="image.jpg" aria-label="제품 이미지">

• 상태: 동적으로 변할 수 있는 상태를 나타냄.

<button aria-pressed="true">버튼</button>

자주 사용되는 AIRA 속성

• aria-label : 요소에 접근성을 위한 라벨을 부여
  버튼이나 아이콘에 적절한 설명을 제공할 때 유용
• aria-labelledby : 기존 HTML 요소의 id 값을 참조하여 라벨을 지정
• aria-descibedby : 설명을 제공하는 요소를 참조하여 내용을 보충
• aria-hidden : 요소를 스크린 리더기에서 숨김
• aria-live : 실시간으로 변경되는 콘텐츠를 알림
• aria-expanded : 요소(메뉴, 아코디언 등)의 확장 여부를 나타냄.

ARIA 사용 시 주의할 점
- HTML의 기본 요소(예: <button>, <a>등)을 최대한 활용
예를 들어, <button>요소는 기본적으로 role="button"이 포함되어 있어 aria-role="button"을 추가할 필요가 없음.

• 불필요한 AIRA 속성 남발 금지
  예를 들어, <h1 role="heading">처럼 이미 의미가 포함된 요소에 role을 추가하는 것은 불필요함.
• 스크린 리더에서 테스트하기

웹 접근성 구현 방법

프론트엔드 개발자는 여러 장애인의 특성을 구려하며 웹 접근성을 준수해야 함

시멘틱 HTML
- div 요소만 사용하면 스크린 리더기가 명확한 인식 불가능

대체 텍스트 제공
- 시각적인 콘텐츠를 추가한다면 반드시 콘텐츠를 설명하는 내용을 텍스트로 제공해야 함

• 스크린 리더기는 alt 값을 'alt' 이미지 라고 읽음.
• 이미지 주변에 동등한 콘텐츠를 제공하는 경우, alt값 비우기
• 화면에 미노출되는 대체 텍스트 작성하는 경우,
  display: none, visibility: hidden 속성으로 스크린 리더가 무시하게 하기.

• 시각적으로 보이지 않되, 화면상에서 존재하고 스크린 리더기가 읽는 CSS 스타일링

.ir-text{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
    }

폰트 크기 관련
- WCAG에 따르면, 본문 텍스트는 16px이 적합

• em, % 등 상대 단위 사용
• 200%까지 확대하여 테스트를 진행

색상 관련
- 명도 대비 : 색상 대비 높게 줄 것
WCAG 명도 대비 기준은 4.5:1
명도 대비 체크 URL

키보드 조작 관련
- 키보드만으로 웹 서비스를 동일하게 사용할 수 있어야 함

키보드 사용 보장
- 상호작용이 가능한 모든 요소는 키보드로 포커스가 가능해야 함

포커스 스타일링
- tab 등 키보드로 접근했을 때, 활성화된 요소에 스타일이 부여되어야 함

• :focs등 가상 클래스를 활용하여 스타일을 설정할 수 있음

논리적인 탭 순서
- HTML이 논리적으로 구성되어 있는 게 가장 중요

• tabindex 속성을 활용해 명시적으로 탭 순서를 지정할 수 있음

• tabindex : 키보드 사용자가 요소를 이동할 수 있도록 초점을 제어하는 속성

1) tabindex="0"

• 요소가 기본적인 tab 이동 순서(HTML 문서의 흐름)을 따르게 함
• 버튼, 링크 같은 기본적으로 포커스 받을 수 있는 요소가 아니라도 초점을 받을 수 있게 만듦

2) tabindex="-1"

• 요소를 키보드 tab키로 이동할 순 없지만, js로 초점을 줄 수 있음
• 모달 창이나 특정 동작 후 초점을 강제로 이동해야 할 때 사용함

예)

<button onclick="document.getElementById('modal').focus()">모달 열기</button>
<div id="modal" tabindex="-1">이 모달은 자동으로 포커스를 받습니다.</div>

3) tabindex="1" 이상 (비추천)

• HTML 기본 tab 순서를 강제로 변경하지만, 관리가 어려워 접근성을 해칠 수 있음

웹 접근성 진단 도구

스크린 리더
NVDA
센스리더

명도 대비
webAIM

자동 접근성 진단
WAVE
Webwatch

웹 표준+접근성 검사기
W3C