[UI&UX]웹 접근성

❓웹 접근성

웹 접근성(Web Accessibility)이란? 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻합니다

웹을 사용하는 사람은 모두 자신 같은 사람일 것이라는 것을 전제로 서비스를 제공하다 보면 몇몇 사람들
(소리를 듣지 못하거나, 보지 못하거나) 같은 사람들의 정보 접근이 제한될 수밖에 없습니다.😢

불편함을 겪는 사회적 약자도 정보를 제공받을 수 있도록 보장하기 위해 만들어진 것이 웹 접근성입니다,

 

⚡웹 접근성이 필요한 이유

🌍사용자층 확대

그동안 외면받아 왔던 사회적 약자나 소외계층을 빠르게 흡수 하면서 사용자 층을 확대할 수 있다.

🏄다양한 환경 지원

특정 환경(집을 구하기, 쇼핑 보기) 등과 같은 여러 환경을 지원함으로써 새로운 서비스의 사용범위를 확대할 수 있다.

🗽사회적 이미지 향상.

외면받는 소외계층을 위한 서비스를 제공하면서 사회 공헌 및 복지 활동을 하고 있다는 이미지를 형성할 수 있다.

 

📜웹 콘텐츠 접근성 지침

웹 접근성을 잘 확보했는지 판단할 기준이 될 수 있는 것이  웹 콘텐츠 접근성 지침입니다.

https://webaccessibility.visionaid.org/?gclid=Cj0KCQiAmaibBhCAARIsAKUlaKQ-OTlI2XEIxT7M5BPakLCqEY5VhWIg3LFIZuy -F0eObOhhS6P1G-EaAtsZEALw_wcB 

Vision-Aid Digital Accessibility Testing & Training Center – Vision-Aid Foundation

 

🎧인식의 용이성

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

📌적절한 대체 텍스트

시각적으로 화면을 인식할 수 없는 사용자 혹은 상황을 대비해서 대체 텍스트를 제공할 필요가 있다

alt 속성 사용하기

img src="이미지 주소" alt="대체 텍스트" />

📌자막 제공

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

📌track요소 사용하기

콘텐츠는 색에 관계없이 인식될 수 있어야 합니다.

콘텐츠에 테두리 및 레이블 달기

텍스트 콘텐츠 명도 대비

📌자동 재생 금지

자동으로 소리가 재생되지 않아야 한다.
👉자동으로 소리가 재생될 경우 소리가 겹쳐 페이지 내용을 파악하기 힘들어집니다.

📌콘텐츠 간 구분

이웃한 콘텐츠는 구별될 수 있어야 한다.

 

⚽운용의 용이성

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

📌키보드 사용 보장

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

📌초점 이동

키보드에 의한 초점은 논리적으로 이동해야 하며 시각적으로 구별할 수 있어야 한다.
👉일반적으로 왼쪽에서 오른쪽➡ 위쪽에서 아래쪽 ⬇으로 이동하게 됩니다.

📌조작 가능

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

📌응답 시간 조절

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

📌정지 기능 제공

자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

📌깜빡임과 번쩍임 사용제한

초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 합니다.😖

📌반복 영역 건너뛰기

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

📌제목 제공

페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.
👉적절한 제목을 제공함으로써 원하는 내용에 빠르게 접근할 수 있도록 도울 수 있습니다.

📌적절한 링크 텍스트

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

 

👌이해의 용이성

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

📌기본 언어 표시

주로 사용하는 언어를 명시해야 한다
👉페이지 내에 다른 언어가 존재하는 경우에는 해당 요소에 lang 속성을 표기합니다.

📌사용자 요구에 따른 실행

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

📌콘텐츠의 선형구조

콘텐츠는 논리적인 순서로 제공해야 한다
순서 제목 ➡ 내용

📌표의 구성

표는 이해하기 쉽게 구성해야 한다

📌레이블 제공

사용자 입력에는 대응하는 레이블을 제공해야 한다.
👉사용자가 정보를 입력하는 상황에, 어떤 정보를 입력해야 하는지 정확하게 알 수 없으면 입력이 불가능합니다.

📌 오류 정정

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

 

🧱견고성

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

📌마크업 오류 방지

마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

요소의 열고 닫음에 오류가 없어야 합니다.

1
2
(X) <div><span></div></span>
(O) <div><span></span></div>

요소의 속성을 중복해서 사용해선 안 됩니다.

1
2
(X) <div class="중복" class="사용"></div>
(O) <div class="안 돼요"></div>

id를 중복해서 사용해선 안 됩니다.

1
(X) <div id="아이디"><span id="아이디"></span></div>

 

📌웹 애플리케이션 접근성 준수

콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.
👉대체수단이나 대체 텍스트