웹접근성

웹접근성이란

웹 접근성이란 많은 사람들이 웹 사이트의 콘텐츠를 활용 할 수 있도록 하는 방법입니다. 신체적인 원인으로 웹 이용에 불편함을 느끼는 사용자들을 포함하여 느린 네트워크 문제 등의 원인으로 웹 콘텐츠에 제한이 있는 이용자들에게 좀 더 편의를 제공하기 위해 웹접근성은 지켜야 합니다.

 

웹 접근성을 좀 더 직접 느끼기 위해 보조 도구를 활용하여 웹 사이트를 사용해보겠습니다.

저는 스크린 리더기를 사용해보겠습니다. 스크린 리더기는 웹 사이트 내의 콘텐츠를 읽어가며 어떤 콘텐츠가 있는지 사용자에게 설명을 해줍니다. 맥의 경우 기본적으로 보이스 오버라는 유틸리티가 있습니다. 이를 활용하면 스크린 리더기로 사용할 수 있습니다.

 

맥에서 보이스 오버 켜기

 

맥에서 보이스 오버를 킨 후 웹접근성이 좋은 웹사이트와 웹 접근성이 낮은 웹사이트에 활용을 해보며 한 번 사이트들의 차이점을 보겠습니다.

 

웹 접근성이 좋은 예

 

접근성이 높은 웹사이트

스크린 리더기는 전체 웹 사이트의 콘텐츠를 하나하나 훑어가며 사용자에게 이를 설명해줍니다. 웹 접근성이 좋은 사이트들의 경우 해당 콘텐츠가 무엇인지 정확히 알려줍니다.

 

웹 접근성이 안 좋은 예

 

접근성이 낮은 웹사이트의 스크린 리더기

웹 접근성이 안 좋은 사이트의 경우 스크린 러디기가 이용자들에게 콘텐츠에 대한 설명을 위와 같이 잘 못합니다. 위는 스크린리더기가 해당 이미지 콘텐츠에 대한 설명을 해주는 모습니다. 스크린 리더기가 이렇게 읽어줄 경우 사용자들은 이미지에 대한 콘텐츠가 무엇인지 알 수가 없습니다. 이렇게 나탄 이유는 스크린 리더기가 HTML을 통해 해당 이미지에 대한 정보를 받는데, 이미지에 alt 속성값이 없어 위와 같이 나타난 것입니다. 

 

WCAG

보시다시피 웹접근성이 높은 사이트로 만들기 위해서는 HTML 작성 시 좀 더 세심한 주의를 요구합니다. W3C (World Wide Web Consortium, 웹의 표준을 개발하는 국제 컨소시엄)은 웹 접근성을 평가하기 위한 가이드라인인 WCAG (Web Content Accessibility Guidelines)를 제공합니다. WCAG는 접근성을 높이기 위해 네가지의 원칙을 내세웁니다.

 

1. 인지 가능 (perceivable)

 

사용자들은 웹 사이트에서 제공하는 정보를 쉽게 인지할 수 있어어햡니다.

 

1.1 대체 텍스트

텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 도와줄 수 있게 대체 텍스트를 제공해야합니다. 사진, 오디오, 비디오 등의 콘텐츠를 볼 수 없거나 들을 수 없을 경우 해당 콘텐츠가 무엇인지 알려줘야합니다.

 

1.2 시간 기반 미디어

오디오, 비디오 등의 시간 기반 미디어를 이해 할 수 있는 보조적 컨텐츠를 제공해야합니다. 자막, 수화 등의 다른 방안들을 마련하여 해당 콘텐츠에 접근 할 수 있도록 해야합니다.

 

1.3 적응가능

사용자들이 웹사이트의 콘텐츠의 모든 정보를 손쉽게 이용할 수 있는 형태로 나타내야합니다. 예를 들어 시각적 자료를 사용할 수 있는 사용자들의 경우 제목을 본문과 떨어져 있으며 글 크기가 좀 더 크고 굵은 형태를 통해 제목임을 이해 할 수 있습니다. 청각적 자료를 사용하는 사람들의 경우 강조하는 목소리 등을 통해 해당 정보가 중요함을 인지할 수 있습니다. 또한 콘텐츠를 이해함에 있어 콘텐츠의 순서가 중요한 경우 순서를 정확히 해야합니다. 이러한 다양한 자료의 형태를 통해 사용자들이 웹 사이트 콘텐츠의 이해에 도움을 줄 수 있도록 해야합니다.

 

1.4 식별 가능

사용자들이 콘텐츠를 쉽게 식별 할 수 있도록 제공해야합니다. 만약 색상을 통해서만 정보를 제공하거나 어느 특정 인터렉션을 요구한다는 경우 이용자들은 색상을 통해 자료를 식별할 수 있기 때문에 지양해야합니다. 또는 오디오 자료의 경우 제어할 수 없는 도구를 제공하지 않다면 해당 오디오 콘텐츠를 이해하는데 문제점을 일으킬 수 있습니다. 그 외에 명암대비, 텍스트 크기 등의 문제로 사용자들이 콘텐츠를 식별 하는데 어려움을 겪게 해서는 안됩니다.

 

2. 조작 가능 (understandable)

 

사용자들은 인터페이스를 쉽게 조작할 수 있어야 합니다.

 

2.1 키보드 접근성

웹콘텐츠를 소비함에 있어 키보드 사용에 제한이 있어서는 안됩니다. 키보드를 통해 모든 기능에 접근할 수 있어야 합니다. 키보드 사용시 가끔 강제 포커스를 통해 이동에 제약을 두는 경우가 있습니다. 이런 함정에 빠지는 경우가 있는지 확인해야합니다.

 

2.2 충분한 시간

사용자가 콘텐츠를 읽고 사용할 수 있도록 충분한 시간을 제공해야합니다. 신체적 문제가 있는 사용자의 경우 콘텐츠를 읽는데에 남들보다 많은 시간을 소요할 수 있습니다. 읽는 시간을 보장하기 위해 충분한 시간을 제공해야합니다. 예를 들어 영상 자료의 경우 텍스트와 함께 제공이 된다면 이를 충분히 읽을 수 있도록 영상 일시정지 기능을 제공해야합니다. 

 

2.3 발작 및 신체적 반응

발작 장애가 있는 경우 특정한 상황에서 빛에 의해 발작이 일어날 수 있습니다. 1초 내의 3번 이상의 반짝거림 등의 특정한 상황의 경우 발작을 일으킬 수 있으니 주의해야합니다.

 

2.4 쉬운 네비게이션

사용자가 현재 웹사이트가 제공하는 콘텐츠 내에서 자신의 위치가 어디인지 또는 특정한 콘텐츠가 어디에 위치하는지 알 수 있고 탐색할 수 있는 네비게이션을 제공해야합니다. 이런 기능을 제공하기 위해서는 페이지의 제목, 절의 제목, 레이블의 이름 등을 설정해야합니다. 링크 사용시 어느 콘텐츠가 있는 사이트로 이동하는지 알려줘야하며, 목차등으로 위치를 알 수 있는 기능을 제공해야합니다.

 

2.5 입력방식

사용자가 키보드 이외의 다양한 입력 장치를 통해 콘텐츠의 기능들을 쉽게 조작할 수 있도록 해야합니다. 버튼 등이 일정한 크기 이상(44 css 픽셀 이상)으로 해서 손쉽게 누를 수 있도록 해야합니다. 또는 손떨림 등으로 마우스 클릭 실수가 많은 경우를 위해 이를 방지할 수 있는 기능이 있어야합니다. 예를 들어 링크를 우리가 클릭하여 사용하는 경우 링크를 클릭했다가 손가락을 떼어야 정상적으로 작동됩니다. 그리고 클릭 - 드래그 - 손가락을 떼면 해당 기능은 작동이 안될것입니다. 기능의 작동이 쉬우면서 실수를 예방할 수 있도록 해야합니다.

 

3. 이해 가능 (understandable)

 

사용자들은 텍스트 및 콘텐츠를 쉽게 읽을 수 있으며 이해할 수 있도록 해야합니다.

 

3.1 가독성

텍스트 콘텐츠를 읽고 이해할 수 있도록 해야합니다. 기본 언어를 설정하여 스크린 리더가 정확한 발음으로 읽을 수 있도록 도와야합니다. 또는 잘 사용하지 않은 단어, 약어의 경우 설명을 더해 사용자들이 이해할 수 있도록 도와야합니다.

 

3.2 예측 가능성

웹 페이지가 예측 가능한 방식으로 제시되고 작동되야 합니다. 포커스 시 또는 작성칸을 입력 시 사용자들의 보편적 상식 하에 예상한 대로 작동해야합니다.

 

3.3 입력지원

사용자가 폼 입력 및 제출 시 실수를 회피하거나 수정할 수 있도록 지원해야합니다. 입력 시에 오류가 생겼다면 해당 오류를 알아차릴 수 있도록 도와야하며 오류를 어떻게 고쳐야할지 도와줘야합니다. 폼을 제출 후 이를 수정할 수 있는 기회를 주어야합니다.

 

4. 견고함 (robust)

 

보조 도구를 포함한 다양한 사용자 에이전트들이 콘텐츠를 쉽게 이해할 수 있도록 해야합니다. 

 

4.1 호환성

보조도구 활용에 문제가 없게 마크업에 문법 문제가 없도록 해야합니다. 이름, 역할, 상태, 상태 메시지 등을 작성하여 보조도구와의 호환성을 높혀야 합니다. 

 

웹접근성 예시

1.1 대체 텍스트

안좋은 예시

<img src="logo.png" />

위의 예시는 1.1의 기준에 부합하지 않습니다. 해당 이미지 콘텐츠는 대체 텍스트가 없기에 무슨 콘텐츠인지 알 수가 없습니다.

 

좋은 예시

<img src="logo.png" alt="tistory logo"/>

alt속성값을 추가하여 해당 이미지가 무엇인지 작성했습니다. 이를 통해 이미지 콘텐츠에 접근이 어려운 사용자들도 무슨 콘텐츠인지 알 수 있습니다.

 

2.1 키보드 접근성

안좋은 예시

https://www.youtube.com/watch?v=BoAsayPVogE 

 

위의 영상은 키보드 함정에 대해서 논하는데 보시면 tab을 활용해도 키보드 함정에 빠져 이동을 할 수 없는 상태를 확인할 수가 있습니다. 이는 키보드 이용에 제한을 두기에 주의해야합니다.

 

좋은 예시

키보드 함정은 모달을 사용해야하는 경우 모달에서만 키보드로 이동할 수 있도록 의도적으로 사용합니다. 대신 모달을 끌 수 있는 버튼을 만들어 키보드로 모달을 닫을 수 있도록 해야겠습니다.

 

3.1 가독성

안좋은 예시

html에 기본 언어가 설정되어있지 않은 경우 스크린 리더기가 언어를 파악하는데 문제가 생깁니다. 해당 사이트의 언어가 설정되어있는 경우 스크린 리더기는 설정된 언어에 맞는 발음을 활용하여 컨텐츠를 전달합니다. 그러나 미설정인 경우 스크린 리더기의 언어의 발음대로 콘텐츠를 읽기 때문에 콘텐츠 전달에 부정적 영향을 줄 수가 있습니다.

 

좋은 예시

<html lang="eu"></html>

html에 기본 언어를 작성을 하면 됩니다!

 

웹접근성 측정 도구

Lighthouse

 

라이트하우스는 크롬에서 기본적으로 제공하는 도구입니다. 위 사진을 보시면 접근성만 측정할 수 있는 기능을 활용할 수가 있습니다.

 

측정을 통해 어떤 부분들이 웹접근성을 낮추는지 보실 수가 있습니다. 이를 활용하여 좀 더 접근성이 높은 웹사이트로 발전하는데 잘 사용할 수 있습니다.

 

WAVE(web accessibility evaluation tool)

WAVE는 제3 어플리케이션으로 해당 사이트의 웹접근성 관련한 항목들을 각각 나타내며 문제가 있는지 없는지 혹은 어떤 문제가 일어날 수 있을지에 대한 주의항목들을 알려주기에 참고하기에 편리합니다. 특히 라이트하우스보다 더 직관적으로 문제점을 가리키기 때문에 활용하기에 편리합니다.

 

 

참고자료

https://a11y.gitbook.io/wcag/

모두를 위한 디자인 - WCAG 2.1

https://nuli.navercorp.com/guideline/s01/g01

NULI