TIL 53일차 - [사용자 친화 웹] 웹 접근성 1

Yoon Kyung Park·2023년 6월 26일

TIL

목록 보기

53/75

웹 접근성의 개념과 필요성을 이해한다.

o
웹 접근성(Web Accessibility)은 장애인, 고령자 등의 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 정보를 얻을 수 있도록 보장하는 것을 의미한다.
뿐만 아니라 정보 접근에 제한을 받는 상황에 있는
비장애인들에게도 도움이 된다.

이러한 웹 접근성이 잘 갖추어지면,
웹에 접근했을 때 그 어떤 상황에서도 누구든지
항상 동등한 수준의 정보를 제공받도록 보장 받을 수 있기 때문에 필요하다.

또한 웹 접근성을 갖추면,
사용자층의 확대, 다양한 환경 지원, 사회적 이미지 향상 등의 효과를
기대할 수 있다.

이러한 웹 접근성을 갖추기 위해서 노력하면,
'정보의 평등'에 다가갈 수 있는 것은 물론,
그 외에도 여러 가지 효과를 기대할 수 있다.
국내에서의 웹 접근성 실태를 기억한다.

o
높은 정보화 수준에도 불구하고 우리나라의 웹 접근성 수준은
상대적으로 낮다.

⌜장애인 차별 금지 및 권리 구제 등에 관한 법률⌟에 의해
모든 공공기관과 법인의 웹 사이트들은 웹 접근성을
'의무적'으로 갖추도록 '강제성'이 부여되어있음에도
잘 지켜지지 않고 있다.

이는 우리나라가 웹 접근성에 대한 인식이
상대적으로 낮음을 보여준다.
예를 들어, 아마존, 아이허브 등 해외 쇼핑몰을 보면,
상품의 기본 정보가 이미지에 들어있는 글자가 아닌
이미지와 별도로 상품의 기본 정보가 모두 텍스트로 작성되어 있어서
스크린 리더가 읽을 수 있도록 되어있다.

따라서 개발자는 다양한 사용자에 대한 고려와 배려로써
웹 접근성이 보장되는 사이트를 제공하기 위해 노력해야 한다.
웹 콘텐츠 접근성 지침을 기억한다.

o
웹 콘텐츠 접근성 지침이란 웹 접근성을 잘 확보했는지 판단할 기준으로
W3C의 웹 접근성 권고안인 'WCAG(Web Content Accessibility Guidlines)2.0'을 한국 실정에 맞게 수정한
'한국형 웹 콘텐츠 접근성 지침 2.1'을 정리한 것이다.

총 4가지 측면에서 준수해야 할 24가지의 지침이 있다.
4가지 측면으로는
모든 콘텐츠는 사용자가 인식할 수 있어야 한다는
'인식의 용이성(Perceivable)',
사용자 인터페이스 구성 요소는 조작 가능해야 하고,
내비게이션 할 수 있어야 한다는 '운용이 용이성(Operable),
콘텐츠는 이해할 수 있어야 한다는 '이해의 용이성(Understandable)',
웹 콘텐츠는 미래의 기술로도 접근할 수 있도록
견고하게 만들어야 한다는 '견고성(Robust)'이 있다.
웹 콘텐츠 접근성 지침을 충족시키는 방법을 기억한다.
o
- 텍스트가 아닌 콘텐츠를 이해할 수 있도록 alt 속성을 사용하여
  대체 텍스트를 제공해야 한다.
- 멀티 미디어 콘텐츠에는 자막, 원고, 수화를 제공해야 한다.
- 색을 인지하는 데 어려움을 겪는 사용자도 콘텐츠를 이용할 수 있도록
  색에 관계 없이 인식될 수 있는 콘텐츠를 제공한다.
- 지시상항은 시각적인 요소 뿐만 아니라 이를 설명하는 대체 텍스트나
  청각적인 요소를 함께 제공하여 명확한 지시사항을 제공한다.
- 텍스트 콘텐츠와 배경 간의 명도 대비는 일반적으로 4.5:1 이상이어야 한다.
- 스크린 리더를 사용하는 사용자가 자동 재생된 콘텐츠의 소리와 겹쳐
  해당 페이지의 내용을 이해하는 데 어려움을 겪지 않도록
  자동으로 소리가 재생되지 않도록 한다.
- 이웃한 콘텐츠는 구별될 수 있도록 한다.
- 키보드로도 모든 기능을 조작할 수 있도록 키보드 사용을 보장해야 한다.
- 초점이 왼쪽에서 오른쪽/ 위쪽에서 아래쪽으로 이동하는 것과 같이
  스크린 리더 사용자 뿐만 아니라 키보드 사용자도 이 순서로
  웹 페이지를 탐색할 수 있도록 마크업을 구성해야 한다.
- 사용자가 원하는 요소를 선택하여 조작할 수 있도록 제공한다.
- 시간 제한이 있는 콘텐츠는 될 수 있으면 사용하지 않는 것이 좋으나
  사용할 경우, 충분한 시간을 제공하면서 종료까지 남은 시간을 알려주고,
  시간을 연장할 수 있는 버튼과 로그아웃 버튼을 제공하여
  사용자가 응답시간을 조절할 수 있도록 한다.
- 캐러셀 슬라이드와 같이 자동으로 변경되는 콘텐츠는
  사용자가 움직임을 직접 제어할 수 있도록 한다.
- 눈을 피로하게 하고 광과민성 발작을 유발할 수 있는
  지나친 깜빡임과 번쩍임의 사용은 될 수 있으면 사용하지 않는다.
- 스크린 리더가 중복으로 반복해서 읽지 않도록 반복되는 영역은
  건너 뛸 수 있도록 장치를 제공한다.
- 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공하며,
  특수문자는 1개까지만 사용한다.
- 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
- 주로 사용하는 언어를 lang 속성을 사용하여 기본 언어를 제공한다.
- 사용자가 의도하지 않은 기능은 실행되지 않도록 한다.
- 콘텐츠는 제목 -> 내용 순으로 제공되도록 선형 구조로 제공한다.
- 표는 이해하기 쉽게 구성해야 한다.
- 사용자가 정보를 입력하는 상황에 대응하는 레이블을 제공한다.
- 입력 오류를 정정할 수 있는 방법을 제공한다.
- 마크업 작성 시, 오류가 없어야 한다.
- 웹 애플리케이션은 접근성이 있어야 한다.
WAI-ARIA의 사용법을 기억한다.

o
WAI-ARIA는 WAI + ARIA가 합쳐진 단어로
WAI는 W3C에서 웹 접근성을 담당하는 기관을 의미하며,
ARIA는 웹 접근성을 갖추기 위한 기술을 의미한다.
즉, WAI에서 발표한 RIA 환경에서의 웹 접근성 기술 규격이다.

WAI-ARIA는 시멘틱 요소만으로 의미를 충분히 부여할 수 없는 경우
부수적으로 사용하여 웹 접근성을 향상할 수 있다.
따라서 시멘틱 요소만으로도 충분한 상황에서는 사용하지 않아야 한다.
시멘틱한 HTML을 작성하는 것이 최우선이다.

WAI-ARIA의 속성은 다양하지만,
그 중에 HTML 요소의 역할을 정의하는 속성인 역할(role),
요소의 현재 상태를 나타내는 속성인 상태(state),
요소의 특징을 정의하는 속성(attribute)인 속성(property)정도만 사용해도
HTML에 추가적인 의미를 부여할 수 있기 때문에
웹 접근성을 어느 정도 향상할 수 있다.

👇 [role 사용법]

👇 [state 사용법]

👇 [property 사용법]

출처: codestates