📌 도입

최근 배리어프리(Barrire-Free) 라는 말을 많이 들어보았을 것이다.

장벽(barrirer) 과 자유(Free)가 합쳐진말로, 고령자, 장애인 등 사회적 약자들이 물리적, 심리적 장벽 없이 안전하고 편리하게 시설을 이용하고 사회활동에 참여할 수 있도록 “장벽”을 제거하자는 운동이자, 정책 입니다.

휠체어를 탄 사람들을 위한 경사로, 시각장애인들을 위한 점자 표시 등이 베리어프리의 대표적인 예시이다.

이러한 가치관의 범위는 PC, 키오스크 등 시대가 발전함에 따라서 그 범위가 점점 더 많은 영역으로 확대 되어가고 있다.

그 중 가장 대표적이고 일상적인 영역이 바로 인터넷, 즉 Web 이다. Web 은 오래전부터 지금까지 끊임 없이 발전해왔고, 이제는 현대인의 일상 속에서 없어서는 안되는 존재 중 하나로 자리 잡았다.

하지만, 지속적인 발전을 통한 영향을 가장 많이 받고, 시각적인 요소가 주된 부분을 차지하는 Web 가장 접근이 쉬우면서도 사회적 약자 (시각장애인, 고령자 등)의 입장에서 사용하기 가장 어려운 것 중 하나가 된다.

이러한 문제를 인식하고, “모든 사람들이 동등하게 웹 정보에 접근 할 수 있어야 한다.”는 가치 아래 웹 접근성에 대해 많은 목소리가 생겨나게 되었다.

이에 대해서 사회적인 책임과 법적 규제(WCAG, KWCAG 등) 또한 생겨나게 되면서 표준으로 지켜지게 되었다.

📌 웹 접근성(Web Accessibility)

“누구나 신체적, 환경적 조건에 관계없이 모든 사용자가 동등하게 웹 콘텐츠에 접근하고, 이용할 수 있게 하는 것”

⇒ “어떤 상황, 어떤 사람(장애인, 고령자 등 정보통신 약자 포함)이든 정보를 제공 받지 못하는 사람이 없도록 하는 것!

왜 필요할까?

1. 사회적 가치

“누구에게나, 언제 어디서든 동일한 경험을 제공할 수 있도록 하는 것이다. “

특별히 디저털 발전에서 조금은 어려움을 겪는 사람들과의 접근에 대한 격차를 해소 시켜주는 역할을 한다.

또한, 모두가 같은 가치를

• 디지털 격차 해소
• 포용적 서비스 제공

1. 법적 준수

“웹 접근성 보장은 「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명시된 의무사항이다.”

1. 비즈니스적 이점

• 브랜드 이미지 개선
• SEO 향상

📌 웹 접근성 표준의 주요 원칙 (feat. WCAG)

한국형 웹콘텐츠 접근성 지침 2.2 주요 내용 (33개 검사 항목)에서는 주요 원칙을 다음과 같이 정의하고, 검사항목으로 구성하고 있다.

한국형 웹 콘텐츠 웹 접근성 지침2.2 다운로드

1️⃣ 인식의 용이성 (Perceivable)

모든 콘텐츠는 사용자가 인식할 수 있어야 한다.

• (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.

• (자막 제공) 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.

• (표의 구성) 표는 이해하기 쉽게 구성해야 한다.

• (콘텐츠의 선형구조) 콘텐츠는 논리적인 순서로 제공해야 한다.

• (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

• (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

• (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.

• (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

• (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

2️⃣ 운용의 용이성 (Operable)

사용자 인터페이스는 조작 가능하고 탐색 가능해야 합니다

• (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

• (초점 이동과 표시) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

• (조작 가능) 사용자 입력 및 콘트롤은 조작 가능하도록 제공되어야 한다.

• (문자 단축키) 문자 단축키는 오동작으로 인한 오류를 방지하여야 한다.

• (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

• (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

• (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

• (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

• (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

• (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

• (고정된 참조 위치 정보) 전자출판문서 형식의 웹 페이지는 각 페이지로 이동할 수 있는 기능이 있어야 하고, 서식이나 플랫폼에 상관없이 참조 위치 정보를 일관되게 제공ㆍ유지해야 한다.

• (단일 포인터 입력 지원) 다중 포인터 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 한다.

• (포인터 입력 취소) 단일 포인터 입력으로 실행되는 기능은 취소할 수 있어야 한다.

• (레이블과 네임) 텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 네임에 시각적으로 표시되는 해당 텍스트를 포함해야 한다.

• (동작기반 작동) 동작기반으로 작동하는 기능은 사용자 인터페이스 구성요소로 조작할 수 있고, 동작기반 기능을 비활성화할 수 있어야 한다.

3️⃣ 이해의 용이성 (Understandable)

콘텐츠는 모든 사용자가 이해할 수 있어야 합니다.

• (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.

• (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

• (찾기 쉬운 도움 정보) 도움 정보가 제공되는 경우, 각 페이지에서 동일한 상대적인 순서로 접근할 수 있어야 한다.

• (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

• (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.

• (접근 가능한 인증) 인증 과정은 인지 기능 테스트에만 의존해서는 안 된다.

• (반복 입력 정보) 반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 한다.

4️⃣ 견고성 (Roust)

웹 콘텐츠는 미래의 기술에서도 접근 가능하도록 견고하게 만들어야 합니다.

• (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
• (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

📌 프론트엔드 개발자로 접근성 향상을 통해 UX 기여하기

1️⃣ 의미있는 시맨틱 태그 사용하기

HTML5의 가장 큰 변화는 시맨틱 태그의 추가 였다. div, span 같은 의미없는 태그 대신에 의미있는 태그들을 상황에 맞게 잘 선택해야한다.

h1~6, nav, header, footer, aside, Button, dialog 등

2️⃣ Image 태그에 대체 텍스트 alt 속성 추가하기

이미지를 시각적으로 볼 수 없거나, 다운로드에 실패했을 때를 위해 추가하는 대체 텍스트이다.

alt 속성은 최대한 모양과 형태를 알 수 있는 상세하고, 유의미한 글로 작성한다.

2️⃣ Aria 속성 적절히 사용

(Accessible Rich Internet Applications, ARIA)

• 웹 어플리케이션(특히 JavaScript를 사용하여 개발한 경우)에 더 쉽게 접근할 수 있는 방법을 정의하는 여러 특성
• HTML을 보충해, 일반적으로 보조 기술이 알 수 없는 상호작용 및 흔히 쓰이는 어플리케이션 위젯에 필요한 정보를 제공

aria 속성 종류

역할 정의

• role : 특정 요소에 역할 정의, 사용자에게 정보제공

⇒ (참고) HTML5 의 시맨틱 태그를 명시적으로 사용하는 것이 더 좋음

https://w3c.github.io/using-aria/#aria-roles

속성 & 상태 :: (요소가 기본적으로 가진 특징or상황)

• aria-required : true로 지정하여 스크린리더사용자에게 해당 요소가 필수적으로 입력되어야 함을 전달.

<input type="checkout" aria-required="true">

• aria-describedby : 추가설명

<input type="text" aria-describedby="reference">
<div id="reference">추가설명</div>

• aria-label : HTML 요소에 간단한 설명을 제공하는 속성

<div role="group" aria-label="레이블">

• aria-expanded : 현재 탭 패널이 펼쳐짐(활성화)상태 라는 것

<div role="tabpanel" aria-expanded="true">

• aria-invalid : input에 입력된 값이 유효한지 판단하기 위한 것 ⇒ true 는 오류가 발생한 상태라는 것
  

<input type="text" aria-invalid="true">

• aria-pressed : 해당 요소를 토글버튼으로 정의
  • true → 누른 상태

<button aria-pressed="true">

• aria-hidden : 사용자에게 불필요한 정보를 스크린리더가 읽지 않게 하는 속성

• aria-live : 보조기기에서 읽어주지 않는 자동완성기능이나 실시간 갱신 정보를 인식하도록

📌 웹 접근성 진단 평가 방법 및 도구

접근 성 지원 도구

• 스크린 리더
• 명도 대비
• 웹 브라우저 개발자 도구
• Voice Access

웹 접근성 평가 방법

WA 인증마크

📌 마무리

• 웹 접근성은 단순한 규제가 아니라 사용자 중심 개발의 핵심 가치.

• 접근성을 고려한 개발은 UX 향상, 브랜드 가치 증진, 법적 리스크 예방 등 장기적으로 큰 이익을 제공.

• 주니어 개발자 시점에서는 시맨틱 마크업 + 키보드 접근성 + 기본 대체 텍스트 제공을 우선적으로 실천하는 것이 좋은 출발점.

• 디자인과 접근성 요구사항 충돌 시 균형 잡기.

• 개발 일정 내에서 접근성 반영이 소홀해질 가능성

• "형식적 준수"가 아닌 실제 사용자 경험을 개선하는 접근이 필요

📌 Reference

WCAG 2.1 Korean Translation Version

웹 접근성 지침 2.2 | Web Soul Lab

네이버 접근성 페이지 : 접근성 가이드

Using ARIA