서비스 관점에서 접근성은 ‘모든 사람들이 이용할 수 있어야 한다’로 정리할 수 있습니다. 여기서 모든 사람이란 연령, 성별, 장애 여부와 관련이 없다는 것을 의미합니다. 다만, 기획/디자인/개발 관점에서 접근성은 여전히 어렵게 느껴지는 분야이기도 해요. 그래서 오늘은 접근성 관련 다양한 가이드 콘텐츠를 제공하는 노션 페이지를 정리해볼까 합니다.

‘Access Guide’는 노션 페이지로 제작된 곳입니다. WCAG 2.1(Web Content Accessibility Guidelines)를 바탕으로 접근성 이해와 반영에 필요한 개념 설명은 물론 함께 보면 좋은 내용들이 잘 정리되어 있어요. 갤러리 형태로 제작된 페이지에는 각 내용을 쉽게 파악할 수 있도록 커버 이미지를 직접 제작해 등록한 모습입니다. 덕분에 상세페이지로 들어가지 않고도 먼저 확인하고 싶은 개념을 리스트에서 바로 확인할 수 있어요.

이미지에 대한 텍스트 중심의 설명과 오디오를 제공할 수 있어야 한다는 내용을 시작으로 오디오 콘텐츠 제공 시 잡음을 제거해야 한다는 내용 등 지금까지 45개 내용이 등록되어 있어요. 다만, 특정 주제는 아직 제작중이며 제작중 콘텐츠에는 별도 안내가 제공되고 있습니다. 45개 내용 중 몇 개를 페이지 기준으로 간략하게 정리해봤어요.

1.사용자가 어디에 있는지 쉽게 확인할 수 있게 돕기

먼저 살펴본 내용은, 사용자가 현재 어떤 상황에 처해 있는지 알 수 있어야 한다는 것입니다. 위 이미지를 보면 사용자가 일정 경로를 거쳐 ‘FAQ’페이지에 머물고 있다는 사실을 쉽게 이해할 수 있는데요. 이처럼 사용자가 현재 서비스 내 어디에 위치하고 있는지, 이전 또는 거쳐온 곳 중 특정 화면으로 어떻게 바로 돌아갈 수 있는지 안내해주는 것이 중요하다고 해요.

2.기본 사이즈 텍스트 외 2배 크기로 볼 수 있는 환경 제공하기

매일 여러 서비스를 들여다보며 가장 불만스러운 건 텍스트 사이즈입니다. 30대 중반인 제가 보기에도 잘 보이지 않는다면 연령대가 높아질수록 더 어렵게 느껴질 가능성이 높아요. 디바이스 별 폰트 사이즈 조절은 가능하지만, 서비스에 그대로(자연스럽게) 적용되진 않기에 기본 사이즈 외 옵션을 제공할 수 있어야 해요.

3.유사 컬러가 아니라, 대조가 확실한 컬러 활용하기

위 세 가지 컬러 조합 중, 가장 눈에 띄는 컬러는 가운데입니다. 대조가 잘 반영 되었기 때문인데요. 색을 잘 구분하지 못하는 경우, 유사 컬러로 배경색과 폰트 컬러를 맞추면 쉽게 보이지 않는 문제가 생길 수 밖에 없습니다. 때문에 ‘접근성’을 고려한다면, 대조가 잘 되는 컬러 조합을 활용하는 것이 좋아요.

4.실수로 누르지 않도록, 명확하고 큰 버튼 제공하기

이건 저도 서비스에서 종종 하게 되는 실수(?)입니다. 제 손이 큰 탓도 있지만 앱 환경에 최적화된 것이 아닌 웹 UI를 그래도 활용하는 등 버튼 사이즈가 작게 적용되어 있기 때문입니다. 접근성을 고려한다면, 한 손가락으로 쉽게 구분, 선택할 수 있는 버튼과 버튼명을 활용하는게 좋아요.

5.올바른 검색어 제안하기

우리는 상대적으로 검색어 등 문자를 쉽게 입력할 수 있지만, 반대의 상황에 있는 사람들도 있어요. 접근성은 앞서 언급한 것처럼 ‘모든 사람’이 쉽게 서비스를 이용하는 것을 기준으로 하기에 잘못된 검색어를 적합한 내용으로 추천해주는 과정 역시 고려해볼 수 있습니다.

이렇게 45개 중 5개 내용을 간략하게 살펴봤는데요. 정리가 개념 단위로 정말 잘 되어있어 페이지를 저장, 접근성에 대한 고민이 필요할 때 꺼내보면 정말 유용하게 쓸 수 있지 않을까 싶어요. 한 가지 아쉬운 점은 접근성 이라는 포괄적 구분보다 더 세분화된 구분에 따라 내용을 확인할 수 없다는 점입니다. 그래도 커버 이미지와 타이틀을 통해 상세 내용을 유추할 수 있으니, 접근성에 대한 기본 개념 확인 및 정리가 필요하다면 ‘이곳’을 통해 자세한 내용을 확인해보세요!

함께 읽고, 활용해보세요!