Section3 사용자 친화 웹_2

keepgoing·2023년 3월 2일

코드스테이츠

목록 보기
12/31
post-thumbnail

chapter3. 웹 접근성

✅ 웹 접근성

  • 일반적으로 웹 접근성은 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 뜻함
  • 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록하는 것

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

  1. 사용자층 확대
    => 장애인, 고령자 등 소외 계층의 매출 확보 가능
  2. 다양한 환경 지원
    => 운전 중, 마우스가 없는 상황 등 다양한 환경에서 지원하여 이용자 수 증가 기대
  3. 사회적 이미 향상
    => 기업이 정보 소외 계층을 위한 사회 공헌 및 복지 향상에 힘쓰고 있음을 보여줄 수 있다.
    => 기업 이미지 향상

🥲웹 접근성 실태

우리나라의 웹 접근성 수준은 높은 정보화 수준에도 불구하고 높지 않다.
2021년 기준, 일반 국민의 정보화 수준을 100이라고 할 때, 장애인, 고령층 등 디지털 취약 계층의 정보화 지수는 75.4점이었고, 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점이었습니다.

✅ 웹 콘텐츠 접근성 지침

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

  1. 적절한 대체 텍스트
  2. 자막 제공
  3. 색에 무관한 콘텐츠 인식
    • 콘텐츠에 테두리 설정하기
    • 콘텐츠에 레이블 달기
  4. 명확한 지시사항 제공
  5. 텍스트 콘텐츠 명도 대비
  6. 자동 재생 금지
  7. 콘텐츠 간 구분

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

  1. 키보드 사용 보장
  2. 초점 이동
  3. 조작 가능
  4. 응답 시간 조절
  5. 정지 기능 제공
  6. 깜빡임과 번쩍임 사용 제한
  7. 반복 영역 건너 뛰기
  8. 제목제공
  9. 적잘한 링크 텍스트

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

  1. 기본 언어 표시
  2. 사용자 요구에 따른 실행
  3. 콘텐츠 선형 구조
  4. 표의 구성: 이해하기 쉽게 구성
  5. 레이블 제공
<input> 요소에 id 를 설정하고 <label> 요소의 for 속성으로 연결해줍니다.
(O) <label for="user_id">아이디</label>
    <input id="user_id" type="text" placeholder="아이디" />
  
title 속성을 사용합니다.
 <input type="text" title="아이디" placeholder="아이디" />
  1. 오류 정정

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

  1. 마크업 오류 방지
  2. 웹 애플리케이션 접근성 준수
    => 웹 콘텐츠에 포함된 웹 애플리케이션도 접근성을 갖춰야 합니다. 접근성을 갖추지 못한 경우에는 대체 수단이나 대체 텍스트를 제공해야 합니다.

✅ WAI-ARIA

  • WAI (Web Accessibility Initiative) : 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관
  • ARIA (Accessible Rich Internet Applications) : 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 하는, 즉 웹 접근성을 갖추기 위한 기술
    • RIA (Rich Internet Applications) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다.

👍 WAI-ARIA는 WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격

WAI-ARIA의 필요성

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

WAI-ARIA의 사용법

  • 역할(role) : HTML 요소의 역할을 정의하는 속성
  • 상태(state) : 요소의 현재 상태를 나타내는 속성
  • 속성(property) : 요소의 특징을 정의하는 속성(attribute)
  1. 역할 : HTML의 요소 종류와 역할이 서로 맞지 않을 때, 어떤 역할을 하는 요소인지 명시해줄 때 사용할 수 있는 속성(attribute)
<div role="button">div이지만 button으로 사용되는 요소</div>
<div>
  <li>Tab1</li>
  <li>Tab2</li>
  <li>Tab3</li>
</div>

<div>Tab menu ONE</div>
<div>Tab menu TWO</div>
<div>Tab menu THREE</div>
// WAI-ARIA 사용하여 표시 가능
<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>
  1. 상태 : 속성이 바로 여러 개의 선택 가능한 요소중에서 선택 상태인 요소를 표시할 수 있는 aria-selected 라는 속성
  • aria-selected
  1. 속성(Property) : 요소에 라벨을 붙여주는 기능
  • aria-label
//전
<button> <img src="X.png" /> </button>
<button> <img src="돋보기.png" /> </button>
//후
<button aria-label="닫기"/> <img src="X.png" /> </button>
<button aria-label="검색"/> <img src="돋보기.png" /> </button>
profile
keepgoing
매일매일
이전 포스트

Section3 사용자 친화 웹

다음 포스트

Section3 React_ToDoList

0개의 댓글