2022.07.11(Mon)
[TIL] Day54
[SEB FE] Day53
📎 웹 접근성
🧐 웹 접근성(Web Accessibility)이란?
: 웹 사이트 제공 정보를 장애인, 고령자 등이 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
👉 어떤 상황 및 사람이든지 정보를 제공받지 못한 경우가 없도록하는 것이 목적!
✋ 웹 접근성은 정보 소외 계층 뿐만 아니라 정보 접근에 제한 상황의 비장애인들에게도 도움이 됨
✋ 법률에 의해 모든 공공기관과 법인 웹 사이트는 웹 접근성을 의무적으로 갖춰야 함
😮 웹 접근성 효과
- 사용자층 확대
: 정보 소외 계층 또한 웹 사이트를 자유롭게 이용 가능 → 사이트 이용자 ⬆️, 새로운 고객층 확보 - 다양한 환경 지원
: 다양한 환경 및 기기에서 웹 사이트를 자유롭게 사용 가능 → 서비스 사용 범위 확대 → 서비스 이용자 수 증가 ⬆️ - 사회적 이미지 향상
: 이용 수 증가 ⬆️ → 충성 고객 확보 가능성 ⬆️
📄 웹 콘텐츠 접근성 지침
✍️
WCAG(Web Content Accessibility Guidelines) 2.0기반의
한국형 웹 콘텐츠 접근성 지침 2.1내용
1️⃣ 인식의 용이성(Perceivable)
: 모든 콘텐츠는 사용자가 인식할 수 있어야 함.
- 적절한 대체 텍스트
alt속성 사용 👉<img src=”img url” alt=”대체 text” />- 배경 이미지와 같이 정보 인식 필요 없는 경우,
alt값으로 빈 문자열 → 스크린 리더 인식 안하도록!
- 자막 제공
- 비디오 요소 내에
track요소를 통해 자막 파일 불러오기<video> <track src="자막.vtt" kind="captions" /> </video>
- 비디오 요소 내에
- 색에 무관한 콘텐츠 인식
- 콘텐츠에 테두리 설정
- 콘텐츠에 레이블 달기
- 명확한 지시사항 제공
- 시각, 청각 장애를 지닌 사용자들을 위해 대체 텍스트 및 시각적 피드백 함께 제공
- 텍스트 콘텐츠 명도 대비
- 택스트 콘텐츠와 배경 간의 명도 대비를 4.5 : 1 이상으로 설정
- 자동 재생 금지
- 자동으로 재생된 소리와 스크린 리더 음성과 겹쳐 페이지 내용 파악이 어려워짐
- 콘텐츠 간 구분
- 이웃한 콘텐츠는 구별되도록!
2️⃣ 운용의 용이성(Operable)
: 사용자 인터페이스 구성요소는 조작 가능하며 내비게이션 할 수 있어야 함.
- 키보드 사용 보장
- 키보드 조작시 빠져나오지 못하는 경우 없도록 주의
- 초점 이동
- 보통 초점은 왼→오, 위→아래쪽으로 이동하도록!
- 조작 가능
- 미세한 조작이 어려운 상황에서도 원하는 요소 선택 후 조작 가능하도록!
- Control 대각선 길이는
6mm이상 - Control 간
1pixel이상 여백
- Control 대각선 길이는
- 미세한 조작이 어려운 상황에서도 원하는 요소 선택 후 조작 가능하도록!
- 응답 시간 조절
- 시간 제한이 있는 콘텐츠는 응답시간 조절 가능하도록!
- 충분한 시간
- 종료 안내
- 조절 수단 제공
- 시간 제한이 있는 콘텐츠는 응답시간 조절 가능하도록!
- 정지 기능 제공
- 자동으로 변경되는 콘텐츠는 움직임 제어 가능하도록!
- 자동 변경 슬라이드 (캐러셀): 이전, 다음, 정지 기능 제공하기
- 자동으로 변경되는 콘텐츠는 움직임 제어 가능하도록!
- 깜빡임과 번쩍임 사용 제한
- 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠 제공하지 않기
- 반복 영역 건너뛰기
- 스크린 리더 사용시 모든 페이지에서 반복되는 요소도 반복해서 읽게 되므로 건너뛰기 링크 제공하기
- 제목 제공
- 적절한 제목을 제공하며, 특수 문자는 1개까지만 사용하기
- 적절한 링크 텍스트
- 링크를 설명해주는 대체 텍스트 작성하기
- 비어있는 링크 없어야 함
3️⃣ 이해의 용이성(Understandable)
: 콘텐츠는 이해할 수 있어야 함.
- 기본 언어 표시
- 주로 사용하는 언어 명시하기 👉
<html lang=”ko”>
- 주로 사용하는 언어 명시하기 👉
- 사용자 요구에 따른 실행
- 페이지 진입 시 팝없 뜨지 않도록, 모달의 경우 가장 상단에 제공 → 가장 먼저 제어할 수 있도록!
- 새 창이 떴을 때 이를 알려줘야 함
<a href=”…”>page<span class=”blind”>New page</span></a><a href=”…” title="New page">page</a><a href=”…” target="_blank">page</a>
- 콘텐츠 선형 구조
- 콘텐츠는 논리적인 순서로 제공하기
<div>Tab1</div> <div>Tab1 Content</div> <div>Tab2</div> <div>Tab2 Content</div>
- 콘텐츠는 논리적인 순서로 제공하기
- 표의 구성
Table요소 안에caption요소 사용하여 표 제목 제공- 제목 셀
<th>& 데이터 셀<td>구분되도록 구성 - 표 구조가 복잡할 경우,
scope|id|headers속성 사용하여 작성
- 레이블 제공
<input>요소에value나placeholder속성만 설정 → 적합 ❌<input>요소에 id 설정 후,<label>요소의for속성으로 연결title속성 사용하기- WAI-ARIA의
aria-label속성 사용하기 (✋ 사용 지양)
- 오류 정정
- 작성 중 및 제출시 오류 발생 → 입력 내용 사라지지 않고 유지되도록
- 오류 발생 → 사용자에게 오류 발생 원인 알려주기
- 오류 발생 → 오류 발생 위치로 초점 이동하기
4️⃣ 견고성(Robust)
: 웹 콘텐츠는 미래 기술로도 접근 가능하도록 견고하게 만들어야 함.
- 마크업 오류 방지
- 요소 열고 닫음에 오류 없어야 함
- 요소 속성 중복 사용 ❌
id중복 사용 ❌
- 웹 애플리케이션 접근성 준수
🐳 WAI-ARIA
🧐 WAI(Web Accessibility Initiative)란?
: 웹 표준을 정하는W3C에서 웹 접근성을 담당하는 기관
🧐 ARIA(Accessible Rich Internet Applications)란?
: 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는,
⇒ 웹 접근성을 갖추기 위한 기술
✚ RIA
: 별도의 프로그램 설치 없이도 웹 브라우저를 통해 사용할 수 있는 편리성
& 직접 프로그램 설치하여 사용한 것 같은 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션
⇒SPA의미
✍️ WAI-ARIA란?
: WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격으로,HTML요소에 추가적으로 의미 부여해줌
➰ WAI-ARIA 사용법
-
역할(
Role)
: HTML 요소 종류&역할이 서로 맞지 않을 때, 어떤 역할 요소인지 명시할 때의 사용 속성
👉<div role="button">Button</div> -
상태(
State)
: 요소의 현재 상태를 나타내는 속성aria-selected속성: 선택 가능한 요소 중에 선택 상태 요소 표시<div role="tabList"> <li role="tab" aria-selected="true">Tab1</li> <li role="tab" aria-selected="false">Tab2</li> </div>aria-expanded속성: 아코디언 UI가 펼침 상태인지 표시aria-hidden속성: 숨김 상태 요소인지 표시
-
속성(
Property)
: 요소의 특징을 정의하는 속성aria-label속성: 요소에 라벨을 붙여주는 기능
👉<button aria-label="닫기"/> <img src="X.png" /> </button>
aria-live속성: 실시간으로 내용 갱신 영역의 요소인지 표시polite: 스크린 리더가 읽고 있는 내용 모두 읽은 후 갱신 내용 전달assertive: 스크린 리더가 읽고 있는 내용 중단 후 갱신 내용 바로 전달off(default)
✋ 웹 접근성 확보시 Semantic HTML를 작성하는 것이 제일 중요! WAI-ARIA는 보조 역할로만 사용하기!
