[사용자 친화 웹] 웹 접근성

웹 접근성이란

일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것

화면을 볼 수 없거나, 소리를 들을 수 없거나, 마우스 없이 키보드밖에 사용할 수 없는 등 정보 접근에 제한을 받을 수 있는 상황을 해결하고자 노력하는 것

국내 모든 공공기관, 법인 웹 사이트는 장애인 차별 금지 및 권리 구제 등에 관한 법률에 의해 웹 접근성을 의무적으로 갖춰야 한다.

웹 접근성의 목적

웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것

정보 소외 계층 뿐만 아니라 정보 접근에 제한을 받는 상황에 있는 비장애인들에게도 도움이 됨

웹 접근성을 갖추면 얻을 수 있는 효과

• 사용자층 확대: 장애인, 고령자 등 정보 소외 계층도 웹 사이트를 자유롭게 이용할 수 있게되어 사이트의 이용자를 늘릴 수 있음
• 다양한 환경 지원: 운전 중이나 마우스를 사용할 수 없는 상황 등 다양한 환경, 다양한 기기에서 웹 사이트를 자유롭게 사용할 수 있게되어 서비스의 사용 범위가 확대됨
• 사회적 이미지 향상: 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여주어 기업의 사회적 이미지가 향상됨

한국형 웹 콘텐츠 접근성 지침 2.1

‘WCAG(Web Content Accessibility Guidelines) 2.0’을 기반으로 한국 실정에 맞게 조금 수정한 지침

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

1. 적절한 대체 텍스트: 텍스트가 아닌 콘텐츠는 그 의미나 용도를 이해할 수 있도록 대체 텍스트를 제공해야 한다.
   • 시각적으로 화면을 인식할 수 없는 사용자 혹은 상황을 대비해서 alt 속성 사용하여 대체 텍스트를 제공할 필요가 있음
   • 배경 이미지와 같이 정보를 인식할 필요가 없는 경우나 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우에는 alt 값으로 빈 문자열을 주어 스크린 리더가 인식하지 않게 하기
2. 자막 제공: 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공해야 한다.
3. 색에 무관한 콘텐츠 인식: 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
   • 콘텐츠에 테두리를 설정하거나, 레이블을 달아주어 색 구분이 명확하지 않아도 내용을 파악할 수 있게 만들기
4. 명확한 지시사항 제공: 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
5. 텍스트 콘텐츠 명도 대비: 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
6. 자동 재생 금지: 자동으로 소리가 재생되지 않아야 한다.
   • 불가피하게 제공해야 하는 경우 가장 먼저 위치시켜 정지할 수 있게 구현하거나 ESC를 눌러 정지할 수 있게 구현하는 등의 방법으로 해결
7. 콘텐츠 간 구분: 이웃한 콘텐츠는 구별될 수 있어야한다.

운용의 용이성(Operable): 사용자 인터페이스 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

1. 키보드 사용 보장: 모든 기능은 키보드만으로도 사용할 수 있어야 한다.
2. 초점 이동: 키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
3. 조작 가능: 사용자 입력 및 컨트롤은 조작 가능하도록 제공되어야 한다.
4. 응답 시간 조절: 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
   • 가능하면 시간 제한이 있는 콘텐츠를 넣지 않는 것이 좋지만, 꼭 넣어야 하는 상황에서는 충분한 시간, 종료 안내, 조절 수단을 제공해야 함
   • 은행 사이트 로그인 - 자동 로그아웃을 떠올리면 된다.
5. 정지 기능 제공: 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
   • 자동 변경 슬라이드 (캐러셀 슬라이드) : 이전, 다음, 정지 기능을 제공해야 하며, 정지 버튼이 없더라도 마우스 호버 혹은 키보드 접근시에 정지되도록 구현해야 한다
   • 자동 변경 콘텐츠 : 실시간 검색어와 같이 자동으로 변경되는 콘텐츠는 이전, 다음, 정지 기능이 없더라도 접근했을 때 모든 콘텐츠를 확인할 수 있도록 구현해야 한다
6. 깜빡임과 번쩍임 사용 제한: 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.
7. 반복 영역 건너뛰기: 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
8. 제목 제공: 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
9. 적절한 링크 텍스트: 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

이해의 용이성(Understandable): 콘텐츠는 이해할 수 있어야 한다.

1. 기본 언어 표시: 주로 사용하는 언어를 명시해야 한다.
   • html 요소에 lang 속성을 사용하면 됨
2. 사용자 요구에 따른 실행: 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
   • 페이지 진입 시에 팝업이 뜨지 않게 해야 하며, 화면을 가리는 레이어 창(모달)이 있는 경우, 가장 상단에 제공하여 가장 먼저 제어할 수 있도록 해야 한다
   • 스크린 리더 사용자는 새 창이 떴을 때 이를 인지하지 못하고 기존 페이지를 계속 보고있다고 생각할 수 있다. 따라서 새 창임을 알려줄 수 있어야 한다
     • 링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기

       <a href="...">페이지<span class="blind">새 창</span></a>

     • 링크 요소에 title 속성으로 새 창 작성하기

       <a href="..." title="새 창">페이지</a>

     • 링크 요소에 target=”_blank” 속성을 넣기

       <a href="..." target="_blank">페이지</a>

3. 콘텐츠 선형 구조: 콘텐츠는 논리적인 순서로 제공해야 한다.
   • 스크린 리더는 마크업 순서대로 내용을 읽어준다
4. 표의 구성: 표는 이해하기 쉽게 구성해야 한다.
5. 레이블 제공: 사용자 입력에는 대응하는 레이블을 제공해야 한다.
6. 오류 정정: 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

견고성(Robust): 웹 콘텐츠는 미래의 기술로도 접근할 수 있도록 견고하게 만들어야 한다.

1. 마크업 오류 방지: 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
2. 웹 애플리케이션 접근성 준수: 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
   • 접근성을 갖추지 못한 경우에는 대체 수단이나 대체 텍스트를 제공해야 한다

WAI-ARIA

WAI-ARIA는 WAI와 ARIA를 합친 단어로, 각각의 의미는 다음과 같다.

• WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
• ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술

WAI-ARIA의 필요성

1. 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에 WAI-ARIA를 사용하면 HTML 요소에 추가적인 의미를 부여하여 더 원활하게 페이지를 탐색 할 수 있게 도와줌 (보조적인 역할로만 사용)
   • 시맨틱 요소로 의미를 충분히 부여할 수 있다면 WAI-ARIA는 사용하지 않아야 함
2. SPA처럼 AJAX를 사용하는 상황, 즉 새로고침 없이 페이지의 내용이 바뀌는 상황에서도 변경된 영역에대한 정보를 전달해줄 수 있어 동적인 콘텐츠에서도 웹 접근성을 향상시킬 수 있음

사용법

WAI-ARIA는 HTML 태그 내부에 속성(attribute)을 추가함으로써 의미를 부여해줄 수 있다. WAI-ARIA의 속성에는 크게 세 가지 분류가 있다.

1. 역할(role) : HTML 요소의 역할을 정의하는 속성
   • role: HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)

     <div role="button">div이지만 button으로 사용되는 요소</div>

     <div role="tabList">
       <li role="tab">Tab1</li>
       <li role="tab">Tab2</li>
       <li role="tab">Tab3</li>
     </div>
     
     <div role="tabpanel">Tab menu ONE</div>
     <div role="tabpanel">Tab menu TWO</div>
     <div role="tabpanel">Tab menu THREE</div>

2. 상태(state) : 요소의 현재 상태를 나타내는 속성
   • aria-selected: 여러 개의 선택 가능한 요소중에서 선택 상태인 요소를 표시할 수 있는 속성

     <div role="tabList">
       <li role="tab" aria-selected="true">Tab1</li>
       <li role="tab" aria-selected="false">Tab2</li>
       <li role="tab" aria-selected="false">Tab3</li>
     </div>

   • aria-expanded: 아코디언 UI가 펼쳐진 상태인지 표시해주는 속성
   • aria-hidden: 요소가 숨김 상태인지를 표시하는 속성
3. 속성(property) : 요소의 특징을 정의하는 속성(attribute)
   • aria-label: 요소에 라벨을 붙여주는 기능을 하는 속성

     <button aria-label="닫기"/> <img src="X.png" /> </button>
     <button aria-label="검색"/> <img src="돋보기.png" /> </button>

   • aria-live: 해당 요소가 실시간으로 내용을 갱신하는 영역인지 표시해주는 속성으로, 속성 값으로는 polite, assertive, off(default)가 있다.
     • polite : 스크린 리더가 현재 읽고있는 내용을 모두 읽고나서 갱신된 내용을 사용자에게 전달
     • assertive : 스크린 리더가 현재 읽고있는 내용을 중단하고 갱신된 내용을 바로 사용자에게 전달

WAI-ARIA에 대한 더 자세한 설명과 속성의 종류 알아보기

MDN - Using ARIA: Roles, states, and properties
W3C - ARIA in HTML