웹 접근성 개선에 도움이 되는 5가지 SEO 가이드 알아보기

‘웹 사이트의 접근성이 좋다’라는 말을 들어본 적이 있으신가요? 이는 모든 사람이 웹 사이트 내의 콘텐츠를 사용하기 쉽고, 편리하게 기능을 활용할 수 있다는 뜻입니다. 이 문구에서 알 수 있듯이, 웹 접근성이란 누구나 쉽게 사이트에 접근하여 사용할 수 있는 정도를 의미합니다.

웹 접근성을 개선하면 특히나 장애인과 고령자 등 온라인 이용에 어려움을 겪는 사람들에게 큰 도움이 되는데요. 웹 접근성은 장애인과 비장애인 구분 없이, 모든 사용자가 동등하게 정보를 제공받을 수 있는 권리를 보장하기 위해 만들어진 개념이기 때문입니다. 

이번 글에서는 웹 사이트 접근성의 정의, 중요성, 웹 접근성 향상을 위한 SEO (검색 엔진 최적화) 전략과 접근성 평가 도구에 대해 말씀드리도록 하겠습니다. 

웹 접근성이란?

웹 접근성이란 장애인, 고령자 등 상대적으로 웹사이트를 이용하기 어려운 사람들도 비장애인과 동등하게 웹 사이트를 이용할 수 있도록 편리성을 보장하는 것입니다. 웹 접근성을 향상하면 사용자 친화적인 인터페이스가 구축되기 때문에 특정 대상이 아닌, 모든 사용자에게 긍정적인 영향을 끼칠 수 있습니다. 즉, 사실상 웹 접근성은 소수의 사용자만을 위한 것이 아닌 다수를 위한 개선입니다. 

웹 접근성은 시각, 청각, 이동성 및 인지 능력을 고려하여 만들어졌습니다. 실명, 색각 이상 등 다양한 형태의 저시력을 가진 사람들과 청각의 문제를 가지고 있는 사람들을 위해 다양한 시각 자료를 개선합니다. 또한 근육의 문제로 인해 손을 쓰기 어려운 상태의 사람들, 혹은 인지 능력에 문제가 있거나 학습 장애를 가진 사람들을 위해서도 쉽게 콘텐츠를 접하거나 이해할 수 있도록 웹 사이트 환경을 구축하는 것이 접근성을 높이는 것입니다.

웹 접근성의 4원칙 

웹 접근성은 POUR이라고 불리는 4가지 핵심 요소를 가지고 있습니다.

1) Perceivable 인식의 용이성 

: 사용자가 콘텐츠를 쉽게 인지할 수 있는가? 

인식의 용이성이란 사용자가 콘텐츠에 접근할 때 문제가 될 수 있는 모든 장애 요인을 제거하는 것입니다. 시력 외에 다른 감각을 활용하여 사용자들이 콘텐츠를 인지할 수 있도록 만드는데요. 예를 들어 대체 텍스트와 논리적 구조를 활용하여 스크린 리더가 웹사이트에 액세스할 수 있도록 하는 것이 포함됩니다. 

인지 가능성을 위해 고려할 수 있는 사항은 다음과 같습니다.

• 비디오, 오디오, 이미지 등의 미디어 콘텐츠 처리

• 캡션 및 수화 등을 이용한 대체 텍스트

• 색상 및 대비 처리

• 텍스트 크기 및 오디오 제어

2) Operable 운용의 용의성

: 사용자가 UI 컴포넌트를 사용하여 콘텐츠를 탐색 가능한가?

운용의 용이성은 마우스, 키보드나 터치스크린을 사용할 수 없는 사람들도 사이트를 탐색할 수 있는지에 대한 것입니다. 웹사이트를 탐색하는 장치와 관계없이 모든 유저가 사이트를 사용할 수 있도록 다양한 방법을 활용해 접근성을 높여야 하는데요. 이 외에도 사용자가 웹 사이트 내에서 원하는 작업을 완료할 수 있도록 충분한 시간을 주는 것 역시 운용 가능성에 해당합니다.

3) Understandable 이해의 용의성 

: 유저가 콘텐츠를 이해하는 데 문제가 없는가?

이해의 용이성이란 사용자가 인터페이스를 이해하고 활용할 수 있도록 일관성 있게 웹 사이트가 만들어져 있는지에 대한 것입니다. 이를 위해서는 이해하기 쉬운 언어와 기능을 사용하는 것이 좋은데요. 예를 들어 상황 별 도움말 혹은 오류 시 대처 방안 등의 정보를 게시하는 것도 이해 가능성을 향상시키는 데 도움이 됩니다. 

4) Robust 견고성 

: 다양한 브라우저 및 보조 기술로 웹 사이트 내 콘텐츠를 소비할 수 있는가?

앞서서 웹 접근성이란 장애에 구애받지 않고 누구나 웹 사이트를 사용할 수 있도록 하는 것이라고 말씀드렸는데요. 이때 장애란 신체, 인지적 장애 외에도 웹을 사용하는 데 영향을 끼치는 환경적 제약 상태도 포괄하는 의미입니다. 

견고성은 웹사이트가 얼마나 다양한 플랫폼 및 장치에서 작동하는지, 즉 환경적 제약에 영향을 받지 않는지를 뜻합니다. 예를 들어 보조 기술인 스크린 리더로도 무리 없이 웹 사이트를 사용할 수 있는지, 혹은 플랫폼 업데이트 중에도 웹 사이트에 계속 접속하라 수 있는지 등을 고려하는 요소입니다. 

웹 접근성이 중요한 이유 

그렇다면 왜 웹 접근성을 고려해서 사이트를 운영하는 것이 중요한지 그 이유를 알아보겠습니다.

1) SEO (검색엔진 최적화) 

웹 접근성을 향상시키면 사이트의 SEO가 개선될 수 있는데요. 그 이유에 대해서 자세히 알아보겠습니다.

첫째, 웹 접근성은 더 나은 사용자 경험을 제공하도록 도와줍니다. 그런데 구글은 검색 페이지에서 웹페이지의 순위를 결정할 때 이 사용자 경험을 고려하는데요. 따라서 웹 접근성을 향상시키면 구글에서 더 높은 검색 순위에 도달할 수 있습니다.

둘째, 콘텐츠 가독성 및 구조를 최적화할 수 있습니다. 웹 접근성이 요구하는 콘텐츠 가독성을 충족시키는 방법과 SEO의 콘텐츠 구조를 최적화하는 방법이 동일합니다. H 태그를 이용해 제목 구조화, 설명이 포함된 링크 텍스트 제공, 가독성 높은 글꼴 사용 등의 SEO 전략은 검색 엔진 봇이 크롤링 하기 쉽게 만들어 주는 대표적인 seo 전략인데요. 이런 방법들을 사용하면 사람들도 더 쉽게 콘텐츠를 이해하고 사이트를 탐색할 수 있기에 도움이 됩니다.

셋째, 이미지의 가시성을 높일 수 있습니다. 대체 속성을 사용해서 이미지를 설명하면 장애가 있는 사용자가 사이트를 더 쉽게 사용할 수 있습니다. 그뿐만 아니라 검색 엔진이 멀티미디어 콘텐츠를 더 잘 이해하고 인덱스할 수 있습니다. 이는 이미지 검색의 가시성이 향상되어 사이트에 더 많은 트래픽이 유입되는 결과를 불러옵니다.

웹 접근성을 개선할 수 있는 SEO 전략에 대해서는 아래에서 자세히 다루도록 하겠습니다.

2) 비즈니스 기회 창출 (사용자 확대) 

웹 접근성을 개선하면 사용자를 확대해 새로운 비즈니스 기회를 창출할 수 있습니다. 탐색하기 쉬운 사이트는 사용자 경험을 확대하고 참여도를 증가시킵니다. 즉 많은 유저에게 사이트를 노출시켜 새로운 고객층을 확보할 수 있습니다. 

3) 법정 의무사항

「지능 정보화 기본법」에 따라 웹 접근성을 준수하는 것은 법적 의무사항입니다. 웹 접근성은 장애인·노인·임산부 등의 편의 증진 보장에 관한 법률, 장애인 차별 금지법 등 다양한 법률 정책과 연관되어 있습니다. 따라서 비즈니스의 법적 요건을 준수하기 위해서는 웹 접근성을 반드시 고려해야 합니다.

웹 접근성에 관한 가이드라인은 한국형 웹 콘텐츠 접근성 지침 KWCAG, 한국형 웹 접근성 표준)에서 확인할 수 있습니다. 또한 국제 웹 접근성 표준은 (WCAG, Web Content Accessibility Guidelines)에서 확인할 수 있습니다. 

웹 접근성 향상을 위한 5가지 SEO 전략 

1) 시맨틱 태그 사용 

시맨틱 태그를 사용하여 콘텐츠를 구조화해야 합니다. 시맨틱 태그란 사이트의 구조를 설계하는 데 도움이 되는 태그로, 명시적이면서도 직관적으로 웹사이트를 설계하는 데 도와주는 태그입니다.

시맨틱 태그에는 <header>, <nav>, <article>, <section>, <footer>, <main> 등 다양한 종류가 있습니다. 시맨틱 태그는 스크린 리더, 음성 명령 등 보조 기술에 대한 유용한 정보를 제공합니다. 예를 들어, 강조하는 내용을 작성할 때 쓰는 <strong> 태그를 사용하면 스크린 리더는 조금 더 강하게 말하여 사용자에게 해당 내용이 중요한 부분임을 알려주는데요. 검색 엔진의 경우, <strong> 태그를 페이지 내 중요 문장으로 인식합니다. 

이처럼 시맨틱 태그를 사용하면 보조 기술이 콘텐츠 섹션 별 내용과 중요성을 파악하는 데 도움이 될 뿐만 아니라, 검색 엔진 로봇은 페이지 내의 정보 구조를 더 쉽게 파악할 수 있습니다. 

2) 모바일 친화적인 환경 제공

보조 기술을 사용하는 대다수의 유저는 모바일 장치를 사용해서 인터넷에 엑세스합니다. 따라서 모바일 접근성을 개선하는 것이 웹 접근성을 향상하는 데 도움이 됩니다. 

모바일 친화적인 웹사이트를 만들기 위한 예시는 다음과 같습니다.

• 터치스크린 최적화 : 모바일과 태블릿 사용자를 위한 터치스크린을 최적화해야 합니다. 클릭할 수 있는 요소의 크기를 적절하게 유지하거나, 스와이프 등의 제스처를 지원합니다.

• 로딩 시간 단축 : 이미지 최적화, 캐싱 활용을 통해 서버 응답 시간을 단축시키면 페이지 응답 속도를 높일 수 있습니다. 이를 통해 사용자 경험을 개선할 수 있습니다.

3) 이미지 대체 텍스트 삽입 

이미지 대체 텍스트는 웹 페이지에서 이미지를 표현하기 위해 <img> 태그에 추가된 html 특성입니다. 이미지에 대체 텍스트를 삽입하기 위해서는 alt 태그를 사용하면 되는데요.

대체 텍스트를 사용하면 이미지를 텍스트로 설명할 수 있어 스크린 리더 등 보조 기술이 이미지의 내용을 사용자에게 전달하여 접근성을 향상시킬 수 있습니다. 뿐만 아니라 검색 엔진 크롤러가 이미지를 이해할 때 대체 텍스트를 기반으로 파악하기 때문에 이미지 검색 결과에서 노출 순위를 향상시킬 수 있습니다.

그렇다면 대체 텍스트는 어떻게 작성하는 것이 좋을까요? 예를 들어 다음 사진에 alt 태그를 삽입한다고 가정해 보겠습니다.

대체 텍스트를 작성할 때는 alt 태그 뒤에 있는 부분에 내용을 입력하면 되는데요. 이때 대체 텍스트만 읽어도 이미지의 내용을 시각화할 수 있도록 관련성이 높고, 정확하게 작성하는 것이 중요합니다. 그렇다면 해당 사진에는 <img src=”yellow chick.jpg” alt=”알에서 부화한 노란 병아리”>라는 대체 텍스트를 작성할 수 있습니다. 

4) 동영상 캡션 추가

출처: Adobe

동영상에 캡션을 추가하면 접근성 향상에 도움이 됩니다. 동영상 캡션은 영상 속 내용을 보여주기 위해 화면에 표시되는 텍스트를 의미합니다. 흔히 캡션을 자막과 혼동하는 경우가 많은데요. 캡션은 청각적 어려움이 있는 사용자에게 동영상 속 상황에 대한 설명을 자막과 함께 제공하는 것이고, 자막은 동영상 속 언어를 이해하지 못하는 사람을 위해 번역을 제공하는 것입니다.

동영상 캡션을 추가하면 검색엔진이 해당 내용을 이해하고 키워드 관련성을 높일 수 있습니다. 영상에 캡션을 다는 방법은 다양하지만, 그중 가장 간단한 방법을 소개해 드리겠습니다. Adobe 툴을 활용하는 것인데요. 캡션을 만들고 싶은 영상을 업로드한 뒤, 사용하고자 하는 언어와 글꼴 스타일을 선택하면 됩니다.

5) 앵커 텍스트 사용

앵커 텍스트는 링크로 연결되는 페이지의 콘텐츠 내용을 설명하는 텍스트입니다. 앵커 택스트는 a태그의 구성 요소 중 하나입니다. 다른 페이지로 연결해주는 하이퍼 링크를 의미합니다. 쉽게 예시를 들어 설명 드리겠습니다. 바로 윗 문장에 제가 a태그와 관련한 글로 하이퍼 링크를 연결해 놓았는데요. 이때 해당 링크를 설명해 주는 텍스트, 즉 ‘a태그’라고 적힌 텍스트가 바로 앵커 텍스트입니다. 

스크린 리더는 링크를 발견하면 앵커 텍스트를 활용하여 사용자에게 대상 페이지로의 방문 여부를 묻는데요. 따라서 앵커 텍스트를 작성하라 때는 이곳을 클릭해 보세요”와 같은 일반적인 문구 보다는 연결될 페이지의 내용을 자세하게 표현해 주는 것이 좋습니다. 

웹 접근성 진단 도구 

그렇다면 웹 접근성은 어떻게 평가할 수 있을까요? 자가로 진단할 수 있는 웹 접근성 진단 도구 3가지를 알려드리겠습니다.  

1) Google Lighthouse 

출처 : https://developer.chrome.com/docs/lighthouse/overview?hl=ko

Lighthouse는 웹 페이지의 품질을 개선하기 위한 오픈소스 도구입니다. 분석을 원하는 링크에 들어가 lighthouse 확장 프로그램을 실행하면 웹 페이지에 대한 보고서를 받을 수 있습니다. 보고서를 통해 접근성, SEO, 로딩 속도 등 다양한 지표를 합산한 퍼포먼스 점수를 확인해 보세요.

2) W3C Validation

출처 : https://validator.w3.org/

W3C validator는 웹 기술의 표준을 정의하는 공식 기관인 W3C (World Wide Web)의 html 마크업 검사기입니다. Html, xhtml, smil 등의 웹 문서의 마크업 유효성을 검사할 수 있는데요. 마크업에 대한 문법적 오류를 검사할 수 있어 작성한 문서의 html 문법 유효성을 검사하고 싶을 때 사용하면 좋은 사이트입니다.  

3) CCA (Colour Contrast Analyzer) 

출처 : https://www.tpgi.com/color-contrast-checker/

CCA는 웹 접근성 평가 기준 중 ‘텍스트 콘텐츠의 명도 대비’ 항목을 평가할 수 있는 검사기입니다. 텍스트 콘텐츠 명도 대비는 저시력 사용자들을 위해 글씨와 배경색의 구분이 잘 되는지를 평가하는 항목인데요. CCA를 통해 명도 대비 테스트 및 시각 장애 유형별 화면을 확인할 수 있어 콘텐츠의 가독성을 평가하기 좋은 검사기입니다. 

지금까지 웹 접근성의 정의, 웹 접근성의 4가지 핵심 원칙, 웹 접근성의 중요성, 웹 접근성 개선을 위한 5가지 SEO 전략과 웹 접근성 진단 도구에 대해서 알아봤습니다. 접근성을 고려하여 사이트를 만들고 콘텐츠를 작성하는 것은 사용자 편의를 증진시켜 더 많은 유저를 유입할 수 있는 SEO 전략입니다. 

SEO에 대해 더 궁금하신 사항들이 있다면, 아래 링크를 통해 SEO 컨설팅 서비스를 받아보세요! 

>> TBWA DATA LAB 본문 바로가기

>> TBWA KOREA SEO 컨설팅 서비스 바로가기