[WEB] 웹페이지 접근성 높히는 방법, 인클루시브 디자인(inclusive design) 이란?

 

 

---

개요

• 디지털 서비스가 일상 생활에 큰 영향을 미치는 오늘날, 누구나 쉽게 접근하고 이용할 수 있는 웹 환경을 제공하는 것은 필중요합니다.
• 모든 사용자가 차별 없이 콘텐츠에 접근할 수 있도록 보장하는 것은 사회적으로도 중요하며 사용자 경험을 개선 및 넓은 사용자층을 확보하여 회사에도 영향을 줍니다.
• 사용자 인터페이스 개선에 관련하여 웹 프론트엔드 개발자가 다양한 사용자의 요구를 반영 해야하는 이유와 방법 등을 알아보자

 

인클루시브 디자인 (Inclusive Design) 이란?

• 다양한 사용자들이 제품이나 서비스를 이용할 수 있도록 설계하는 방법론
• 포괄적인 디자인은 제품, 서비스 또는 환경이 가능한 한 많은 사람들, 특히 전통적으로 인터페이스를 사용하거나 환경을 탐색할 수 없도록 배제된 그룹이 사용할 수 있도록 디자인되는 디자인 프로세스

 

 

 

인클루시브 디자인 목표

• 성별, 나이, 장애 여부, 기술 사용 능력 등과 같은 다양한 사용자 특성을 고려하여, 모든 사람이 불편 없이 접근할 수 있는 환경을 만드는 것이 목표

 

😊😊웹 프론트엔드 개발자가 인클루시브 디자인을 고려해야 하는 이유

• 디지털 환경에서는 웹 접근성이라는 개념과도 밀접하게 연관되어 웹 프론트엔드 개발자는 사용자가 가장 먼저 접하는 웹사이트의 인터페이스를 구축하는 역할을 한다.
• 따라서, 웹 프론트엔드 개발자는 다음과 같은 이유로 인클루시브 디자인을 반드시 고려해야 합니다.

 

인클루시브 디자인 고려사항

• 웹 접근성 준수
  • WCAG(Web Content Accessibility Guidelines) 가이드라인 등 웹 접근성 표준을 준수하는가?
• 사용자 경험 향상
  • 고령자나 시력이 낮은 사용자를 위한 텍스트 확대 기능, 색맹을 고려한 색상 조합 등 기능을 지원하는가?
• 브랜드 이미지 향상
  • 긍정적인 브랜드 이미지를 구축, 장기적으로 사용자 또는 로운 사용자층을 확보 할 수 있는가?

 

 

접근성을 높히는 기술적 요소

• 반응형 웹 디자인
  • 다양한 화면 크기와 디바이스에서 웹사이트가 원활하게 작동해야한다.
  • 예) 데스크톱, 스마트폰 ( 클릭, 터치 등)
• 키보드 내비게이션
  • 마우스를 사용하지 못하는 사용자를 위해 키보드로 모든 요소를 탐색할 수 있도록 웹사이트를 설계해야 한다.
  • -> 탭(Tab), 화살표 키 등을 활용
• 스크린 리더 호환성
  • 스크린 리더가 웹 콘텐츠를 제대로 읽을 수 있도록 적절한 HTML 구조를 갖추는 것
  • -> aria-label, role 속성과 같은 ARIA(Accessible Rich Internet Applications) 속성을 활용
• 명확한 색상 대비
  • 텍스트와 배경의 색상 등 명확한 색상 대비를 유지
  • -> WCAG에서 권장하는 기준 충족
• 명확한 폰트와 텍스트 크기
  • 적절한 텍스트 크기와 충분한 줄 간격을 설정, 사용자가 텍스트 크기를 쉽게 조정할 수 있는 기능을 제공

 

접근성 테스트 방법

• 기차 탑승 중에 테스트하기
• 급한 상황에서 사람들에게 요청하기
• 팔을 쭉 펴고 핸드폰 잡아보기
• 프로젝터로 UI 검토하기
• 안경 벗기
• 장갑끼고 마우스 사용해보기
• 키보드만 사용해보기
• 저사양 단말기에서 테스트해 보기
• JS, CSS 및 이미지의 브라우저 렌더링을 비활성화하기

 

마무리

• 인클루시브 디자인은 웹 프론트엔드 개발자가 단순히 기능적인 부분만 고려하는 것이 아니라, 다양한 사용자의 요구와 제약을 이해하고 이를 반영하는 방식으로 웹사이트를 설계하는 것이다.
• 웹 프론트엔드 개발자는 인클루시브 디자인을 실천하는 데 중요한 역할을 하며, 이를 위해 꾸준히 웹 접근성 관련 지식을 업데이트하고, 다양한 도구를 활용해 웹사이트를 최적화하는 노력이 필요하다.