접근성 - ChoDragon9/posts GitHub Wiki

2024 접근성 정리

접근성 위반 감지 도구

  • eslint-plugin-jsx-a11y
    • Static AST checker for a11y rules on JSX elements
  • axe-core
    • Accessibility engine for automated Web UI testing
    • axe-core 사용 툴
      • Lighthouse: Automated auditing, performance metrics, and best practices for the web
      • webhint: A hinting engine for the web

접근성 위반 해결

관련 자료

웹 접근성

월드 와이드 웹을 창시한 팀 버너스 리는 웹이란 장애에 구애 없이 모든 사람이 손쉽게 정보를 공유할 수 있는 공간이라고 정의하였으며, 웹 콘텐츠를 제작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이는 모든 사용자가 신체적, 환경적 조건과 관계없이 웹에 접근하여 이용할 수 있도록 보장하는 것을 뜻한다. 여기서 신체적 조건이란 일반 사용자는 물론, 장애를 가진 사람, 고령자 등을 의미하고 환경적 조건이란 다양한 기기, OS, 웹 브라우저를 의미한다.

접근성이란 보다 많은 사람이 이용할 수 있는 보편적 접근의 정도를 의미하며 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있게 하는 것을 의미한다.

장애인 차별 금지법(이하 장차법)

  • 2008/4/11부터 시행된 장애인 차별 금지 및 권리 구제 등에 관한 법률은 장애인이 교육, 고용 등 일상생활에서 장애로 차별을 당하지 않도록 법으로 금지하고 장애를 이유로 억울하게 차별받은 장애인을 효과적으로 구제하기 위해 마련된 법
  • 차별행위가 발생하는 경우 손해배상, 입증책임, 벌칙(3년 이하의 징역 또는 3천만원 이하의 벌금)이 따르게 되는 법으로서 기존의 유사 법률보다 좀 더 구체적이고 강제력이 부여됨
  • 2013/4/11 모든 법인이 해당하며 정당한 편의제공이 의무화됨

모바일 접근성

장애인, 고령자 등이 비장애인과 동등하게 모바일 기기를 사용하여 애플리케이션을 이용할 수 잇도록 보장하는 것

웹 접근성을 잘 보장하면 모바일 웹 접근성도 자연스럽게 제공될 수 있다. Mobile App 접근성의 준수/권고사항은 PC Web 접근성 내용을 포함하고 있으며, 모바일 기기의 특수성에 따른 사항만 하단에 정리한다.

모바일에서 나타나는 접근성 문제

  • 모바일 기기는 화면(해상도)이 작음
  • 모바일의 네트워킹 환경이 PC와 비교하면 저속
  • 모바일은 초창기 시장으로 다양한 운영체제가 존재

시각장애인의 컴퓨터 활용

전맹

시각장애인들이 컴퓨터를 사용하는 방법은 화면을 확대하여 사용하는 것입니다. 두 번째 방법은 입력하는 내용이나 연산된 내용을 소리로 듣고서 컴퓨터를 실행하는 방법입니다. 세 번째는 점자단말기를 활용하여 컴퓨터의 내용을 점자디스플레이로 확인하면서 실행하는 방법입니다.

세가지 방법 중에서 소리로 컴퓨터를 활용하는 것은 가장 비용이 적게 들고 잔존 시력의 유무나 점자 해독 등의 능력과는 관계가 없기 때문에 시각장애인의 컴퓨터 활용 중에서 가장 널리 활용되는 방법입니다.

시각장애인은 인터넷 문서에서 원하는 정보를 찾을 경우 제일 먼저 링크 목록 대화상자를 활용합니다. 링크 목록 대화상자에서는 현재 문서의 링크 목록만 보여주기 때문에 쉽게 링크된 문서로 이동할 수 있습니다.

편집창을 쉽게 접근하기 위해서는 탭 키를 활용하면 링크 또는 폼이 있는 곳을 각각 이동하게 됩니다. 하지만 텍스트를 찾아갈 방법이 없습니다. 따라서 문서 내의 텍스트를 찾아가기 위해서는 텍스트 간의 이동을 사용합니다. 따라서 헤딩 간의 이동을 활용하면 좋습니다. 문서를 헤딩 1부터 6까지를 활용하여 구조화하면 시각장애인을 헤딩간 이동을 통하여 문서 구조를 훨씬 쉽게 이해할 수 있습니다. 또한 헤딩간 이동을 이용하면 원하는 위치를 직접 이동하게 되어 원하는 정보를 쉽게 찾을 수도 있습니다.

시각장애인은 사진이나 그림과 같은 이미지에 접할 수 없습니다. 이미지에 Alt Text를 제공하지 않으면 이미지 파일명을 음성 출력합니다. 그러나 Alt Text를 제공하면 내용을 음성 출력하여 쉽게 이해할 수 있습니다.

저시력인

시각장애인 중에는 앞을 전혀 볼 수 없는 사람이 있지만 잔존 시력이 남아 있어도 물체를 제대로 볼수 없는 사람이 많이 있습니다. 예를 들어

  • 물체를 볼 때 중심이 보이지 않는 경우(황반원공, 황반부 변성, 시신경병증, 시신경염)
  • 물체의 중심 부분은 제대로 보이나 주변부가 보이지 않는 경우(녹내장, 망막색소변성증, 시로질환)
  • 눈의 빛이 통과하는 기관에 혼탁이 생긴 경우(각막혼탁, 각막변성, 백내장, 유리체 출혈, 유리체 혼탁)
  • 비특이성 시각장애(당뇨병성 망작증, 합병성 망막증, 미숙아 망막증, 시신경위축, 합병성 안구외상 및 염증) 등이 있습니다. 이러한 증상이 있는 저시력인들은 일상생활에서 각종 광학 보조기구를 활용합니다.

저시력인들의 컴퓨터 활용상 화면 색상(배색)과 크기에 어려움을 갖습니다. 저시력인들이 앞을 전혀 못보는 시각장애인과는 달리 마우스를 활용합니다. 화면 색상에 관한 어려움은 고대비를 활용합니다. 화면의 크기 문제는 돋보기를 활용하거나, 특별한 화면 확대 프로그램을 사용합니다. 화면 확대 프로그램을 사용하더라도 화면의 내용이 감춰져 사용하기 어렵게 됩니다. 따라서 웹 문서 자체 내에서 오른쪽으로 화면이 커짐이 없이 글씨 크기 확대 기능을 제공해 주면 저시력인이 사용하기 훨씬 편리하게 됩니다.

웹 콘텐츠 제작기법

https://www.wah.or.kr:444/Participation/technique.asp?tab=1 정리 필요

웹접근성 해결 사례

탭 네비게이션이 동작하지 않음

  • 글로벌 이벤트로 탭키를 모니터링
  • 탭키에 따라 스타일을 토글링

포커스시 아웃라인이 깨져보임

  • 일반사용자에게는 아웃라인을 노출하게 하지 않음
  • 탭을 통해 접근을 할 때 아웃라인이 노출되게 함

<a href="#">과 같이 무의미한 값사용

  • href="#" 대신 tabindex="0" 사용

참고자료

⚠️ **GitHub.com Fallback** ⚠️