saeyan
안녕하세요, 프로덕트 디자이너 새얀입니다.
오늘은 접근성이 높은 제품을 개발하기 위한 과정을 여러분과 나누고자 합니다.
웹 접근성
웹 접근성은 모든 사용자가 동등하게 웹 콘텐츠를 이용할 수 있도록 보장하는 핵심 요소입니다. 특히 도움센터나 개발자 문서에서 접근성의 중요성은 더욱 두드러집니다. 고객이 필요한 정보를 쉽게 찾지 못하는 상황은 제품이나 서비스에 대한 부정적인 경험으로 이어질 수 있기 때문입니다.
리더블은 빨리 움직이는 팀을 위한 가이드 문서 도구로 개발되었습니다.
고객에게 실질적인 가치를 제공하는 가이드 문서를 구축하기 위해, 저희 팀은 접근성 향상에 초점을 맞추었으며, 세 가지 핵심 영역에서 중점적인 개선을 진행했습니다.
컬러 대비
사이즈 최적화
전반적인 접근성 개선
컬러 대비
WCAG 2.1 지침을 준수하여 텍스트와 배경 간의 대비율을 4.5:1 이상으로 설정했으며
Figma의 'Able - Friction free accessibility' 플러그인을 활용하여 컬러 대비와 접근성을 검증하며 디자인했습니다.
사이즈 최적화
다양한 디바이스, 특히 모바일 환경을 고려하여 폰트 및 터치 크기를 조정했습니다.
최소 24px의 터치 크기를 기준으로 삼아, 사용자의 디바이스에 관계없이 일관된 사용성을 제공하도록 노력했습니다.
전반적인 접근성 개선
리더블로 만들어진 사이트는 다양한 사용자들이 문제 없이 콘텐츠에 접근할 수 있도록 설계되었습니다.
어떤 기기를 사용하든지, 나이나 신체적 특성 등에 관계없이 원하는 내용을 손쉽게 찾아 읽을 수 있습니다.
논리적인 마크업 구조
스크린 리더 친화적 설계
키보드 네비게이션 지원
ESC 키로 메뉴 닫을 시 메뉴 트리거 버튼으로 포커스 이동
메뉴 목록에 focus trap 적용으로 키보드 사용자의 편리한 이동 지원
이 밖에 다양한 기기와 화면 크기에서 사용할 수 있는 반응형 레이아웃을 지원하고 있습니다.
열심히 달려와준 팀원들 덕에, Google의 Lighthouse 접근성 평가 만점을 받을 수 있었고
별도 설정 없이 SEO 친화적인 사이트를 설계할 수 있습니다.
앞으로 리더블은 접근성뿐만 아니라 사용자 경험의 모든 측면에서 개선을 이어나갈 예정입니다.
리더블 소개: https://rdbl.io
리더블 써 보러 가기: https://app.rdbl.io
감사합니다.
