brunch

You can make anything
by writing

C.S.Lewis

by SNC Lab Apr 22. 2021

온라인 쇼핑몰 웹 접근성 개선하기 3


앞 기사에서도 살펴 보았듯이 한국은 OECD 37개국 가운데 가장 빠른 속도로 고령화가 진행되고 있습니다. 인구 고령화의 또다른 의미는 신체적 노약자층이 그만큼 증가한다는 것입니다. 나이가 들면서 시각장애를 갖게 되는 경우를 우리는 주변에서 쉽게 볼 수 있습니다. 통계적으로도 전 세계적으로 중증도 이상의 시각 장애인구는 1990년부터 2015년까지 매년 38.4%씩 증가추세를 보여왔고, 이러한 경향성은 앞으로 더 가속화될 전망입니다. 시각 장애 인구의 증가는 온라인 쇼핑몰이 그만큼 시각 장애를 가진 고객의 접근성 향상에 관심을 가져야 하는 이유이기도 합니다.


시각장애 인구의 증가 및 증가 추세 예측(이미지 출처 : Bourne et al(2017))


시각장애는 앞을 전혀 볼 수 없는 ‘전맹’ 유형과 어느 정도 잔존시력(교정시력 0.3이하이거나 시야각이 10도 미만)을 보유한 ‘저시력’ 유형으로 구분할 수 있습니다. 전맹 사용자들은 키보드와 스크린리더를 사용해 정보통신기기를 활용하고, 저시력 사용자들은 시인성을 향상시켜주는 화면 확대 기능, 고대비 모드 등을 통해 정보통신기기를 활용합니다. 저시력인들은 시력 정도에 따라 다양한 시야 상황을 갖고 있습니다.


여러가지 저시력 상황에서의 시야 예시


신체적으로 시각장애를 갖고 있지 않더라도 일반 사용자들도 다양한 환경적, 상황적 요인에 의해 시지각 장애를 경험하기도 하는데, 조명의 밝기에 따라 같은 화면도 다르게 보일 수 있고, 사용자의 컨디션에 따라 또는 사용자가 웹사이트를 이용하는 목적에 따라 같은 시각적 정보라도 달리 인지될 수가 있기 때문입니다. 하지만 이때 환경적 요인으로 인한 시각장애는 적절한 수단을 제공한다면, 다시 말해 장애가 되는 요인을 변화시킨다면 얼마든지 개선이 가능합니다.


이번 기사에서는 저시력 사용자가 온라인 쇼핑몰을 이용하는 과정에서 장애로 작용하는 환경적 요인은 무엇인지, 어떻게 그러한 장애 환경을 개선할 수 있는지 알아보도록 하겠습니다.






6) 텍스트 콘텐츠의 명도대비가 충분하지 않은 경우

첫 번째는 텍스트 콘텐츠와 배경색 간의 명도대비가 충분하지 않은 경우입니다. 일반 텍스트나 이미지에 포함되어 있는 텍스트와 배경색 간의 명도 대비가 지나치게 낮으면 저시력 사용자는 물론 색각 장애인, 노인도 글씨가 흐리게 보여 정보를 인지하는 데 많은 시간이 소요됩니다.


텍스트 콘텐츠와 배경색 간 명도대비 개선 사례


쇼핑몰 웹페이지에서 제공하는 텍스트 콘텐츠와 배경 간의 명도대비는 4.5:1 이상이 좋으며, 텍스트를 충분히 확대할 수 있는 경우에는 3:1까지 낮출 수 있습니다. 콘텐츠를 만들기 전 기획단계에서부터 홍보/상세 이미지 등에 주로 사용할 배경색과 글자색 간의 명도대비를 점검한다면 추후에 색을 수정하는 번거로움을 피할 수 있을 것입니다. 기획한 색상을 점검 도구(Colour Contrast Check)를 활용해 명도대비를 확인하거나 폰트 크기와 색상에 따른 텍스트의 명도대비 측정 샘플(명도대비 측정 샘플, Naver NULI 아티클)을 참고하면 저시력 사용자도 인식하기 좋은 콘텐츠를 만들 수 있습니다. 브랜드 색상 활용으로 인해 불가피하게 명도대비 조건을 충족하지 않는 색상을 사용해야만 하는 경우라면 텍스트에 그림자를 넣는 등의 표현으로 보완할 수 있습니다.


높은 명도대비차, 텍스트 그림자를 활용한 이미지 텍스트 예시


이와 관련해 저희가 발행한 <텍스트 콘텐츠의 명도 대비 적절하게 제공하기> 기사를 참고해 보실 수 있습니다.




7) 콘텐츠 범례를 색상만으로 구분한 경우

두 번째는 콘텐츠 범례를 색상만으로 구분한 경우입니다. 제품의 특장점을 그래프 형식으로 표현한 경우, 개별 구성요소 및 항목 간의 색상이 명도대비 기준에 미치지 못하면 저시력 사용자는 그 차이를 구분할 수 없습니다.


콘텐츠 범례를 명도대비차가 낮은 색상만으로 구분하여 저시력 사용자가 그 차이를 알기 어려운 경우(원본 그래프(좌), 회색조 모드(우))
배경면의 패턴 변경을 활용해 항목간의 차이를 두드러지게 표현한 그래프(원본 그래프(좌), 회색조 모드(우))


위 예시처럼 비시각장애인에게는 색상 간의 차이가 두드러져 보이는 그래프라도, 색각에 이상이 있는 사용자에게는 막대 그래프의 색상 간의 차이가 두드러지지 않게 보여 제품과 관련된 정보를 인지하는 데 어려움이 있습니다. 이러한 경우 역시, 제품 설명 및 홍보 이미지를 제작할 때 인포그래픽이 포함되는 경우, 범례를 각각의 막대 옆에 텍스트로 명확하게 제공하거나 배경색의 채움, 배경면의 패턴 변경 등 여러 가지 방식을 활용해 구성요소 및 항목을 구분하도록 해야 합니다.

색맹 사용자도 읽기 쉬운 콘텐츠 범례를 제공하는 방법과 관련해 저희가 발행한 <색상에 관계 없이 인식 가능한 콘텐츠 제공하기> 기사를 참고해 보실 수 있습니다.




8) 이미지 해상도로 인해 텍스트 콘텐츠 인지가 어려운 경우

온라인 쇼핑몰에서 제품의 상세 페이지를 보면, 제품의 주요 정보를 이미지 형식으로 제공한 경우가 많습니다. 이 경우 이미지에 많은 내용의 정보를 작은 글씨로 담아 표시하면 해상도가 높지 않게 저장되어 100% 배율로 본다 하더라도 저시력 사용자는 읽는 데 어려움이 따릅니다.


제품 사용 방법에 대한 설명을 담고 있는 이미지 콘텐츠.


100% 배율(좌), 400% 배율(우)로 부분 확대한 제품 상세 정보 이미지


저시력 사용자에 대한 연구 결과에 따르면, 대부분의 저시력 사용자들은 화면을 400% 정도 확대하여 콘텐츠를 확인하는 것으로 나타났는데, 앞선 상세 정보 이미지 예시를 400% 확대하게 되면 100% 배율일 때보다 글씨의 윤곽선이 훨씬 왜곡되어 텍스트를 인지하기 어려워짐을 알 수 있습니다. 이러한 왜곡은 PC에서보다 해상도가 높은 모바일에서 더 큰 문제가 될 수 있습니다.

텍스트를 이미지 형식으로 저장하여 제공하는 경우, 이미지 품질을 조정해 가면서 200~300% 확대시에도 내용을 충분히 인지할 수 있는지 확인하여 저장 및 업로드하는 것이 좋습니다.

텍스트를 이미지로 저장하지 않고, 에디터를 활용해 텍스트 또는 표 형식으로 직접 입력하게 되면 별도의 해상도 확인 과정 없이 접근성 높은 상품 정보를 제공할 수 있습니다. 이미지를 텍스트로 제공할 경우, 대체 텍스트까지 별도로 작성해야 하는 노력을 줄일 수 있으며 스크린리더 사용자의 사용성도 개선됩니다.





연재를 마치며

지금까지 시각장애인 사용자가 온라인 쇼핑몰에서 빈번히 겪는 대표적인 웹 접근성 문제들과 그 해결방안에 대해 살펴봤습니다. 코로나 19 이후 갈수록 커지고 있는 이커머스 시장의 규모와 고객의 수요, 또 갈수록 가속화되고 있는 인구 고령화와 장애 인구의 증가 추세를 감안할 때, 온라인 쇼핑몰의 웹 접근성 준수의 중요성은 더욱 증대되고 있습니다. 그런 의미에서 온라인 쇼핑몰이 아직 환경기반을 마련하지 못해 포섭하지 못한 장애인이나 노인과 같은 고객층을 가리켜 ‘미개척시장’(An untapped market)이라고 일컫는 것도 그럴 만합니다.


이같은 잠재고객을 확보하기 위한 온라인 쇼핑몰의 노력은 층계가 많은 계단을 경사로로 탈바꿈하는 것에 비할 수 있습니다. 물론 계단을 경사로로 바꾸는 데에는 비용과 노동력이 들듯 온라인 쇼핑몰이 웹 접근성을 개선하는 데에도 마찬가지입니다. 그러한 노력에는 플랫폼사가 벤더사들이 웹 접근성 지침에 준하는 균일한 퀄리티의 상품 정보를 입력할 수 있도록 표준화된 장치를 마련하는 데 더해 구매고객의 웹 접근성을 이해할 수 있는 교육 프로그램을 동시에 제공하는 것이 포함될 수 있습니다. 벤더사 또한 상품의 기획단계에서부터 웹 접근성 지침을 준수해 콘텐츠를 만들고, 상품등록 시에도 다양한 상황과 환경에서 쇼핑몰을 이용하는 고객들의 웹 접근성을 고려해 양질의 콘텐츠 정보를 업로드하기 위한 노력을 병행해야 할 것입니다.


하지만 완만한 경사로가 휠체어나 목발을 이용하는 장애인뿐만 아니라 유모차 이용자나 영유아를 동반한 사람, 노인에게도 두루 편리한 것처럼, 누구나 접근하기 편리한 웹 환경을 만들려는 온라인 쇼핑몰의 그 같은 노력도 마찬가지 결과를 불러올 것입니다. 이전에는 대체텍스트나 링크 텍스트가 없거나 잘못 쓰여 있어서, 이미지 정보를 제대로 알아보기 어려워서 상품 구매를 포기해야 했던 고객들이 정확한 상품정보를 어려움 없이 제공받게 된다면 그만큼 상품을 구매할 가능성이 커지게 되고, 그 혜택은 고스란히 온라인 쇼핑몰에 돌아갈 것이기 때문입니다.


이러한 경제적 이점 외에도 온라인 쇼핑몰이 웹 접근성을 개선하기 위해 들이는 노력은 우리 사회에도 긍정적인 영향을 미칠 것으로 예상해 볼 수 있습니다. 그동안 전자정보를 이용하는 데 있어 차별받거나 소외되어 왔던 장애인·노인층의 사용편의가 증진되어 실질적인 평등권을 실현할 수 있게 할 것이기 때문입니다. 나아가 앞으로 닥칠 고령화 사회, 포스트 코로나 시대에 적극적으로 대비하여 기술경쟁력을 확보케 하는 측면에서도 온라인 쇼핑몰의 웹 접근성 개선 노력은 결코 헛되지 않을 것입니다.



브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari