[TIL] 웹 접근성

ansmeer008·2022년 11월 7일
1

Today I learn

목록 보기
49/65
post-thumbnail

웹 접근성

장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근, 이해할 수 있도록 보장하는 것. (소외계층만을 위한 것은 아님)

국내에서는 웹 접근성에 대한 인식이 낮은 편.

웹 접근성 효과

  • 사용자층 확대
  • 다양한 환경 지원
  • 사회적 이미지 향상

웹 콘텐츠 접근성 지침 WCAG 2.0

  • 인식의 용이성(Perceivable)

    1. 적절한 대체 텍스트 (ex: img태그의 alt 값)
    2. 자막 제공 (ex: 비디오 요소 내 track 요소 사용해 자막 파일 불러옴)
    3. 색에 무관한 콘텐츠 인식 (ex: 콘텐츠 테두리 설정, 콘텐츠에 레이블 달기)
    4. 명확한 지시사항 제공 (모양, 크기, 위치, 방향, 색, 소리에 관계 없이)
    5. 텍스트 콘텐츠 명도 대비 4.5 대 1 이상
    6. 자동 재생 금지
    7. 콘텐츠 간 구분
  • 운용의 용이성 (Operable)

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

    1. 기본 언어 표시 (HTML 요소의 lang 속성 사용해 제공 가능)
    2. 사용자 요구에 따른 실행 (사용자가 의도하지 않은 기능은 실행되지 x)
    3. 콘텐츠 선형구조 (논리적 순서로 제공하기)
    4. 표 이해하기 쉽게 구성
    5. 레이블 제공 (label 요소, title 속성, aria-label 속성)
    6. 오류 정정 방법 제공 (오류 발생 시 입력했던 내용 유지, 발생 원인 알려주기, 오류 발생 위치로 초점 이동)
  • 견고성 (Robust)

    : 미래 기술로도 접근할 수 있도록 견고하게 만들어야 함

    1. 마크업 오류 방지
    2. 웹 애플리케이션 접근성 준수


WAI-ARIA

  • WAI- ARIA : web accessibility initiative(기관) / accessible rich internet application : WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격.
  • 웹 접근성 향상 방법 중 하나.
  • RIA (rich internet application) : 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션 (SPA를 의미하는 경우가 많음)
  • 시맨틱 요소 외에도 보조적으로 WAI-ARIA를 통해 HTML 요소에 의미 부여 가능함. (시맨틱 요소만으로 충분히 의미 부여할 수 있는 상황이라면 사용하지 않는다)

역할(role)

HTML의 요소 종류, 역할이 서로 맞지 않을 때 어떤 역할 하는 요소인지 명시할수 있는 속성

<div role="button">div이지만 button으로 사용되는 요소</div>

//❌ HTML 요소만으로도 충분히 파악 가능 하므로❌
<button role="button"></div>

//❌ 시맨틱 요소 본연의 의미 바꾸지 않아야 함❌
<h1 role="button">h1인 요소</h1>

상태(state)

  • aria-selected 여러 개의 선택 가능한 요소 중 선택된 상태인 요소 표시
    <div role="tabList">
      <li role="tab" aria-selected="true">Tab1</li>
      <li role="tab" aria-selected="false">Tab2</li>
      <li role="tab" aria-selected="false">Tab3</li>
    </div>
  • aria-expanded 아코디언 UI가 펼쳐진 상태인지 표시
  • aria-hidden 요소가 숨김 상태인지 표시

속성(property)

  • aria-label
    요소에 라벨 붙여주는 기능
  • aria-live 요소가 실시간으로 내용 갱신하는 영역인지 표시 속성값 polite, assertive, off(default) 가 있음. polite 는 현재 읽고 있는 내용 모두 읽고 나서 갱신된 내용 전달 assertive는 현재 읽고 있는 내용 중단하고 바로 갱신 내용 전달

MDN
W3C

profile
예술적인 코드를 짜는 프론트 엔드 개발자가 꿈입니다! (나는야 코드 아티스트! 🤭)

0개의 댓글