🔍 웹 접근성

어떤 사람이든, 어떤 상황이든 항상 동등한 수준의 정보에 동등하게 접근하고 이해할 수 있도록 보장하는 것을 의미한다.

국내의 웹 접근성 수준은 높지 않으며, 쇼핑몰의 경우, 상품의 상세정보를 스크린 리더가 인식할 수 없는 텍스트가 들어간 이미지로 대체하는 식의 웹 접근성을 갖추지 않는 사례가 잦다.

그러나 웹 접근성을 갖추게 되면, 사용자 층이 확대되어 사이트의 이용자를 늘릴 수 있고, 다양한 환경을 지원하여 서비스의 사용 범위를 늘리며 이용자 수를 늘릴 수 있다. 또한, 소외 계층을 위한 서비스에 힘쓰고 있음을 보여줌으로써 기업의 사회적 이미지를 향상할 수 있다.

따라서, 웹 접근성에 대한 인식을 높이 갖고, 잘 지켜지도록 노력하도록 하자.

👀 웹 콘텐츠 접근성 지침(Web Content Accessibility Guidelines)

✔ 인식의 용이성(Perceivable)

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

• 1. 적절한 대체 텍스트 제공
  
  텍스트가 아닌 콘텐츠는 의미와 용도를 이해할 수 있도록 alt 속성을 사용하여 대체 텍스트를 제공해야한다.
  <img src="이미지 주소" alt="대체 텍스트" />
  
  
  정보를 인식할 필요가 없는 경우, alt 속성값에 빈 문자열을 주어 스크린 리더가 인식하지 않게하며, 인접 요소의 내용에서 이미지의 정보를 충분히 인지할 수 있는 경우에는 이미지 정보를 중복 제공하게 되므로 작성하지 않는다.

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

<!--vtt 또는 TTML 형식 사용-->
<video ... >
	<track src="자막.vtt" kind="captions" />
</video>

• 3. 색에 관계없이 콘텐츠 인식이 가능해야 함
  
  색을 인지하는 데 어려움이 있는 사용자를 염두해, 색 구분이 명확하지 않아도 콘텐츠를 구분할 수 있도록 콘텐츠에 테두리를 설정한다든가, 레이블을 다는 방식 작성한다.

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

• 5. 텍스트 콘텐츠와 배경 간의 명도 대비를 충분히 확보해야 함
  
  텍스트 콘텐츠와 배경 간의 명도가 충분히 확보되지 않으면 텍스트를 읽기 어려움으로, 4.5:1 이상을 꼭 지켜준다. 단, 장식 목적이거나 비활성화된 콘텐츠이거나 필요한 상황에서는 3:1까지 허용된다.

• 6. 동영상 및 오디오 자동 재생 금지

• 7. 웹 페이지를 구성하는 모든 콘텐츠는 시각적으로 구분할 수 있어야 함
  
  테두리, 구분선, 무늬, 명도대비, 간격 등 사용하여 시각적으로 구분해야 한다.

✔ 운용의 용이성(Operable)

UI 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.

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

• 9. 키보드에 의한 초점은 논리적으로 이동해야하며 구별할 수 있어야 함
  
  왼쪽->오른쪽, 위->아래로 이동

• 10. 사용자 입력 및 컨트롤은 조작 가능해야 함
  
  컨트롤 대각선의 길이는 6mm 이상, 연이은 컨트롤 요소 간 여백 1px 이상을 준다.

• 11. 시간 제한이 있는 콘텐츠는 응답 시간 조절이 가능해야 함
  
  충분한 시간, 종료 안내, 조절 수단을 제공해야한다.(ex.은행 사이트)

• 12. 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 함
  
  캐서렐 슬라이드의 경우 이전, 다음, 정지 기능을 제공해야 하며, 실시간 검색어의 경우, 접근 시 모든 콘텐츠를 확인할 수 있어야 한다.

• 13. 깜빡임, 번쩍인 효과 사용 제한
  
  눈에 피로와 발작을 일으킬 수 있으므로, 불가피하게 제공되는 경우, 콘텐츠의 면적을 10% 미만, 시간을 3초 미만으로 제공해야하며 사전에 경고하고 중단할 수 있는 수단을 제공해야 한다.

• 14. 반복 영역 건너뛰기
  
  가장 앞에 건너뛰기 링크 제공, 필요한 경우에만 메뉴를 열 수 있도록 만들기 등, 중복되는 요소를 건너뛸 수 있는 방법을 제공한다.

• 15. 페이지, 프레임, 콘텐츠 블록에 적절한 제목 제공
  
  특수 문자는 1개까지만 사용해야 한다.

• 16. 용도와 목적을 이해할 수 있는 링크 텍스트 제공

✔ 이해의 용이성(Understandable)

콘텐츠는 이해할 수 있어야 한다.

• 17. 기본 언어 표시

lang 속성을 사용하여 주로 사용하는 언어를 명시해야 한다.
  html lang = "ko"

• 18. 사용자가 의도하지 않은 기능은 실행되지 않아야 함
  
  페이지 진입 시 팝업X, 모달은 최상단에 제공하여 가장 먼저 제어 가능해야 한다.
  
  
  또한, 새 창이 떴을 때, 새 창에 접근하게 됨을 알려주어야 한다.

<!--링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 알려주기-->
<a href="...">페이지<span class="blind">새 창</span></a>

<!--링크 요소에 title 속성으로 새 창 작성하기-->
<a href="..." title="새 창">페이지</a>

<!--링크 요소에 target=”_blank” 속성 넣기-->
<a href="..." target="_blank">페이지</a>

• 19. 콘텐츠는 논리적인 순서로 제공되어야 함(선형 구조)

<!--잘못된 예시-->
<div>탭1</div>
<div>탭2</div>
<div>탭1 관련 내용</div>
<div>탭2 관련 내용</div>

<!--옳은 예시-->
<div>탭1</div>
<div>탭1 관련 내용</div>
<div>탭2</div>
<div>탭2 관련 내용</div>

• 20. 표는 이해하기 쉽게 구성해야 함
  
  테이블 요소 안에 caption 요소를 사용하여 표의 제목을 제공함으로써 표의 제목만 보고도 표의 내용을 파악할 수 있도록하며, 제목 셀과 데이터 셀이 구분 되도록 구성해야한다.(제목: <th>, 데이터: <td>)
  또한, 표의 구조는 간결하게, scope 또는id, header 속성을 사용해 작성한다.

• 21. 사용자 입력에 대응하는 레이블을 제공해야 함
  
  어떤 정보를 입력해야 하는 지 명시한다.

<!--<input> 요소에 id 를 설정, <label> 요소의 for 속성으로 연결-->
<lable for="user_id">아이디</label>
    <input id="user_id" type="text" placeholder="아이디" />

<!--title 속성 사용-->
<input type="text" title="아이디" placeholder="아이디" />

<!--WAI-ARIA의 aria-label 속성 사용(사용 자제, 차선책으로 사용)-->
<input type="text" aria-label="아이디" placeholder="아이디" />

• 22. 입력 오류를 정정할 수 있는 방법을 제공해야 함
  
  오류 발생 시 입력한 내용을 유지하고, 발생 원인과 위치를 제공해야 한다.(위치: 초첨 이동)

✔ 견고성(Robust)

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

• 23. 마크업 언어의 요소는 여닫음, 중첩 관계 및 속성 선언에 오류가 없어야 함

• 24. 웹 애플리케이션 접근성 준수

👀 WAI-ARIA

WAI는 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관이며, ARIA는 웹 점근성을 갖추기 위한 기술이다. 또한, RIA는 빠른 반응의 UI를 갖는 웹 애플리케이션을 의미한다.

따라서, WAI-ARIA란 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격을 의미한다.

WAI-ARIA는 시맨틱 요소만으로 의미를 충분히 부여할 수 없는 상황에서 보조적으로 사용하며, HTML 요소에 추가적인 의미를 부여함으로써 원활한 페이지 탐색을 도울 수 있다.

또한, SPA와 같이 AJAX를 사용하는 상황(새로고침 없이 페이지 내용 변경)에서도 변경된 영역에 대한 정보를 전달해줌으로써 동적인 콘텐츠에서의 웹 접근성 향상이 가능하다.

✔ WAI-ARIA 사용

HTML 태그 내부에 role / state / property 속성을 추가함으로써 의미를 부여한다.

role

어떤 역할을 하는 요소인지 명시하는 속성

<!--올은 예시: 버튼 요소를 만들었는데 div 요소를 사용했을 경우, 역할 명시-->
<div role="button">div이지만 button으로 사용되는 요소</div>

<!--잘못된 예시: HTML 요소로도 충분히 파악할 수 있는 경우, 사용X-->
<button role="button">button인 요소</button>

state

• aria-selected
  어떤 요소를 선택했는 지 알 수 있도록 표시해주는 속성

• aria-expanded
  아코디언 UI가 펼쳐진 상태인지 표시해주는 속성

• aria-hidden
  요소가 숨김 상태인지를 표시해주는 속성

property

• aria-label
  요소에 라벨을 붙여주는 속성으로, 예시로 텍스트 콘텐츠가 없는 이미지 버튼이 어떤 역할을 하는 지 명시할 수 있다.

• aria-live
  해당 요소가 실시간으로 내용을 갱신하는 영역(동적으로 작동하는 콘텐츠)인지 표시하는 속성(polite, assertive, off(default) 값이 있음)

MDN - Using ARIA: Roles, states, and properties

W3C - ARIA in HTML

Reference: 코드스테이츠