• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기
Front-end/Accessibility

[웹접근성]웹접근성(a11y) 이란?

by 빽짱구 2024. 6. 13.
본문글자

웹 접근성(Web Accessibility)은 장애가 있는 사람들을 포함한 모든 사용자가 웹사이트와 웹 애플리케이션을 이용할 수 있도록 보장하는 것입니다. 이는 시각, 청각, 신체, 인지, 언어, 학습 등 다양한 장애를 가진 사람들이 웹 콘텐츠에 접근하고 상호작용할 수 있도록 하는 것을 목표로 합니다.

 

반응형

 

"a11y"는 "accessibility"의 첫 글자 'a'와 마지막 글자 'y' 사이에 있는 11개의 문자를 나타내는 줄임말입니다. 이는 웹 접근성(웹 콘텐츠 접근성)을 지칭하는 약어로서, 모든 사용자가 웹 사이트나 애플리케이션을 이해하고 사용할 수 있도록 하는 개념을 포함합니다.

이미지 출처 : http://www.smartebiz.kr/new/subpage02_01.html(웹발전 연구소)

 

https://www.wa.or.kr/m1/sub1.asp

 

웹접근성이란? > WA : 한국웹접근성인증평가원

웹접근성이란? > WA > 웹접근성이란? 정보통신접근성(Web접근성)이란? 정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장

www.wa.or.kr

 

웹 접근성의 중요성

  1. 포괄성: 웹 접근성은 모든 사람, 특히 장애를 가진 사람들이 웹 콘텐츠를 이용할 수 있게 함으로써 사회적 포용을 증진합니다.
  2. 법적 준수: 많은 국가에서 웹 접근성을 법적으로 규정하고 있습니다. 웹 접근성 표준을 준수하지 않으면 법적 제재를 받을 수 있습니다.
  3. 사용성 향상: 접근성 개선은 종종 웹사이트의 전반적인 사용성을 향상시킵니다. 예를 들어, 명확한 내비게이션과 구조화된 콘텐츠는 모든 사용자에게 유익합니다.
  4. SEO 혜택: 접근성 좋은 사이트는 종종 검색 엔진 최적화(SEO)에도 긍정적인 영향을 미칩니다. 예를 들어, 대체 텍스트는 검색 엔진 크롤러가 이미지 콘텐츠를 이해하는 데 도움이 됩니다.

웹 접근성의 원칙

웹 접근성의 주요 원칙은 W3C(World Wide Web Consortium)의 WAI(Web Accessibility Initiative)에서 정의한 WCAG(Web Content Accessibility Guidelines)에 기반을 둡니다. WCAG는 다음 네 가지 원칙을 중심으로 합니다:

  1. 인지할 수 있음(Perceivable): 정보와 사용자 인터페이스 구성 요소는 사용자가 인지할 수 있어야 합니다.
    • 예: 이미지에 대체 텍스트 제공, 색상 대비 높이기, 자막 제공
  2. 운용할 수 있음(Operable): 사용자 인터페이스 구성 요소와 네비게이션이 운용 가능해야 합니다.
    • 예: 키보드로 모든 기능을 사용할 수 있게 하기, 충분한 시간 제공, 콘텐츠가 발작을 일으키지 않도록 하기
  3. 이해할 수 있음(Understandable): 정보와 사용자 인터페이스 운용은 이해할 수 있어야 합니다.
    • 예: 예측 가능한 네비게이션, 명확한 에러 메시지 제공, 읽기 쉬운 콘텐츠
  4. 견고함(Robust): 콘텐츠는 다양한 사용자 에이전트(특히 보조 기술)에서 신뢰성 있게 해석될 수 있어야 합니다.
    • 예: HTML 및 CSS 사용 시 표준을 준수, 최신 보조 기술과 호환성 유지

 

참고 링크

 

NULI

[모바일 환경 이해하기] 영상 재생 [모바일 환경 이해하기] 원고 안녕하세요. 접근성팀 서미연입니다. 오늘은 모바일 애플리케이션 접근성에 대해서 알아볼 건데요. 오늘 이 강의를 통해서 모바

nuli.navercorp.com

 

웹 접근성 구현 방법

  1. 대체 텍스트 사용: 이미지, 비디오, 오디오 콘텐츠에는 대체 텍스트를 제공하여 시각 장애인도 콘텐츠를 이해할 수 있게 합니다.
    • 예: <img src="image.jpg" alt="설명 텍스트">
  2. 키보드 내비게이션 보장: 모든 기능이 키보드만으로도 접근 가능하도록 합니다.
    • 예: tabindex 속성을 사용하여 키보드 탐색 순서 지정
  3. 명확한 구조 제공: 제목, 리스트, 표 등을 사용하여 콘텐츠를 논리적으로 구조화합니다.
    • 예: <h1>, <h2> 등의 제목 태그를 사용하여 문서 구조 표시
  4. 충분한 색상 대비: 텍스트와 배경 사이의 색상 대비를 높여 시각 장애인도 쉽게 읽을 수 있도록 합니다.
    • 예: 밝은 배경에 어두운 텍스트 사용
  5. 자막과 대본 제공: 동영상 콘텐츠에는 자막을 제공하고, 오디오 콘텐츠에는 대본을 제공합니다.
    • 예: YouTube 자막 기능 사용
  6. 반응형 디자인: 다양한 장치와 화면 크기에서 콘텐츠가 잘 보이도록 반응형 디자인을 채택합니다.
    • 예: CSS 미디어 쿼리 사용
  7. 표준 준수: HTML, CSS, ARIA 등의 웹 표준을 준수하여 보조 기술과의 호환성을 보장합니다.

웹 접근성 테스트 도구

웹 접근성을 평가하고 개선하기 위해 다양한 도구를 사용할 수 있습니다. 몇 가지 유용한 도구는 다음과 같습니다:

  1. WAVE (Web Accessibility Evaluation Tool): 웹 페이지의 접근성을 시각적으로 평가해주는 도구
  2. AXE: 자동화된 접근성 테스트 도구, 브라우저 확장 프로그램으로 제공
  3. Lighthouse: Google Chrome의 내장 도구로, 웹 페이지의 접근성, 성능, SEO 등을 평가

웹 접근성은 웹사이트와 웹 애플리케이션이 모든 사용자에게 동등하게 제공될 수 있도록 보장하는 중요한 요소입니다. 이를 구현하면 모든 사용자가 더 나은 웹 경험을 할 수 있으며, 법적 요구 사항을 준수하고, 전반적인 사용자 경험을 향상시킬 수 있습니다.

 

참고 링크 :

https://www.wa.or.kr/

 

한국웹접근성인증평가원

고객상담센터 02-858-7220 평일 09:00~18:00 (주말/공휴일 제외)

www.wa.or.kr

 

장애인차별금지법

https://www.mohw.go.kr/menu.es?mid=a10710020100

 

728x90

'Front-end/Accessibility'의 다른글

  • 현재글[웹접근성]웹접근성(a11y) 이란?