SEO 및 접근성: UX 강화

접근 가능한 웹사이트의 중요성

학습, 쇼핑, 은행 업무, 예약 등 많은 활동이 온라인 공간에서 이루어집니다. 디지털 환경이 물리적 환경만큼 접근 가능해야 한다는 것이 중요합니다. 귀하의 사이트가 보조 기술 및 대체 상호 작용 방법에 맞게 최적화되면 시장 범위가 확대되고 모든 사람에게 비즈니스가 개방되며 포용성과 형평성이 입증됩니다.

기업은 미국 장애인법(ADA) 제3장에 따라 상품, 서비스, 특권 및 이점에 대해 "완전하고 평등한 향유"를 제공해야 합니다. 미국 법무부는 이를 인터넷에서 제공되는 서비스도 포함한다고 해석합니다.

ADA를 준수하지 않는 사이트를 운영하는 기업에 대한 법적 조치의 위험이 커지고 있습니다. 2022년 미국 연방 법원에서 ADA Title III 웹사이트 접근성 소송이 3,255건 발생했는데, 이는 2017년 814건보다 증가한 수치입니다.

접근성이 SEO에 영향을 미치나요?

장애가 있는 사용자가 웹 사이트와 상호 작용할 수 있도록 접근성 기능을 구현하면 검색 엔진이 사이트를 더 잘 이해하고 더 정확하게 색인을 생성하는 데 도움이 됩니다.

웹사이트 접근성에 대한 업계 표준은 W3C(World Wide Web Consortium)에서 발행한 WCAG(웹 콘텐츠 접근성 지침)에 명시되어 있습니다. SEO 마케팅 담당자는 이 가이드를 사용하여 색상 대비, 이미지 대체 텍스트 및 탐색과 같은 기술 요소를 처리하여 능력에 관계없이 모두에게 공평한 온라인 경험을 만들 수 있습니다.

접근성이 순위 요소인가요?

웹사이트 접근성은 직접적인 검색 엔진 순위 요소가 아닙니다. 그러나 모든 사용자에게 최적화된 사이트는 Google의 순위 요소와 일치하여 검색 결과에서 더 높은 순위를 차지할 가능성이 높습니다.

XML 및 HTML 사이트맵, 가독성, 비디오 캡션, 핵심 웹 바이탈 등 많은 접근성 기능이 SEO와 연결되어 있습니다. 만족할 수 있는 요소가 많을수록 사이트 순위가 높아집니다.

예를 들어, 건강한 Core Web Vitals를 갖춘 사이트는 신속하게 로드 및 안정화되며 최적의 경험을 위해 사용자 상호 작용에 신속하게 응답합니다. 결론? Google은 개발자가 접근 가능한 제품을 개발하도록 권장하므로 검색 업계의 선두를 따르는 것이 중요합니다.

접근성과 SEO를 통합하는 방법

다음 섹션에서는 귀하의 사이트를 장애인과 검색 엔진에게 더욱 유용하게 만들 수 있는 몇 가지 SEO 접근성 전략을 강조하겠습니다.

웹사이트 디자인 및 UX

Google은 순위에서 사용자 경험을 점점 더 고려하므로 접근 가능한 SEO가 있는 사이트는 순위가 더 높을 가능성이 높습니다. 장애가 있는 사용자가 사이트와 원활하게 상호 작용할 수 있다면 이탈률을 줄이고 방문자 참여를 장려할 수 있습니다.

다음을 통해 사이트 디자인을 개선하세요.

• 사이트 요소를 단순하게 유지합니다.
• 느리게 로드되는 이미지, 전면 광고, 번쩍이는 콘텐츠를 피하세요.
• 높은 색상 대비와 읽기 쉬운 글꼴 유형 및 크기를 제공합니다.
• 텍스트를 왼쪽으로 정렬합니다.
• 논리적인 사이트 아키텍처와 직관적인 탐색을 생성합니다.
• 설명적이고 명확한 헤드라인을 사용합니다.
• 정보를 강조하는 방법으로 색상을 피합니다.
• 사이트를 탐색하고 콘텐츠를 소비하는 대체 방법을 제공합니다.

XML 및 HTML 사이트맵

사이트맵은 웹사이트의 모든 페이지에 대한 링크를 제공하고 검색 엔진에 크롤링 및 색인 생성을 위해 콘텐츠가 구성되는 방식에 대한 전체적인 개요를 제공합니다. 또한 사이트맵은 장애가 있는 사용자에게 중요한 대체 탐색 방법을 제공하여 사용자가 한 곳에서 관련 웹페이지를 빠르게 스캔하고 찾을 수 있도록 해줍니다.

섹션 및 하위 섹션별로 사이트맵을 구성하여 사이트의 계층 구조를 표시하고, 페이지가 추가, 이동 또는 삭제될 때마다 사이트맵을 수정하여 작동하지 않는 링크나 누락된 페이지가 없는지 확인하세요.

항해

사용자가 보조 장치를 사용하여 콘텐츠를 찾거나 액세스할 수 없으면 좌절감을 느낄 수 있으므로 탐색하기 쉬운 사이트는 접근성에 필수적입니다. 탐색은 검색 엔진이 링크를 따라 새 페이지를 발견하고 색인화하기 때문에 SEO에도 영향을 미칩니다.

사이트 아키텍처를 최적화하려면:

• 사용자가 기대하는 친숙한 위치에 탐색 기능을 배치하세요.
• 링크가 어디로 가는지 명확하게 해주는 의미 있는 라벨을 사용하세요.
• 마우스를 사용할 수 없는 사용자를 위해 키보드 탐색 옵션을 제공합니다.
• 더 빠른 탐색을 위해 콘텐츠가 많은 페이지에 섹션 링크를 추가하세요.
• 사용자가 쉽게 클릭할 수 있을 만큼 링크가 충분히 큰지 확인하세요.
• 사이트를 시작하기 전에 탐색을 테스트하여 문제를 식별하십시오.
• 탭 순서가 적절하게 설정되었는지 확인하세요.

빵 부스러기

탐색경로 탐색은 페이지 상단에 가로로 나타나는 페이지별 탐색입니다. 이는 상위 페이지와 관련하여 페이지의 위치를 ​​보여 주며 사용자, 특히 홈페이지 대신 검색을 통해 카테고리 페이지를 방문하는 사용자를 복잡한 사이트로 안내하는 데 유용합니다. 사용자는 페이지에서 직접 계층 구조의 상위 페이지로 빠르게 이동할 수도 있습니다.

SEO 목적을 위해 탐색경로 탐색은 페이지가 어떻게 연관되어 있는지 검색 엔진에 보여줍니다. 상위 페이지는 내부 링크를 통해 하위 페이지와 링크 자산을 공유할 수도 있어 순위에 대한 권위를 높이는 데 도움이 됩니다.

효과적인 탐색경로 탐색을 위해:

• 이동 경로에 슬래시나 보다 큼 기호와 같은 시각적 구분 기호를 사용하세요. 스크린 리더가 시각적 구분 기호를 알리지 않도록 CSS를 사용하여 탐색경로를 추가합니다.
• 탐색경로 탐색이 검색결과에 표시되도록 구조화된 데이터를 구현합니다. 이는 검색자가 스니펫을 클릭하면 사이트의 어느 위치로 이동하게 될지 알려줍니다.

페이지 제목

페이지 제목은 웹페이지의 목적이나 내용을 요약합니다. 그들은 종종 다음과 같이 나타납니다:

• 검색 엔진 결과에서 클릭 가능한 링크.
• 브라우저 표시줄에 열려 있는 탭의 이름입니다.
• 북마크된 페이지의 기본 제목입니다.
• 소셜 미디어 링크에서 클릭 가능한 이미지 블록의 제목입니다.

검색 엔진은 HTML 제목 태그를 사용하여 색인 생성을 위한 페이지의 내용을 이해합니다. 화면 읽기 프로그램은 사용자가 관련 페이지를 찾거나 사용 중인 페이지를 알 수 있도록 페이지 제목을 알려줍니다.

접근성 SEO를 위해 제목 태그를 최적화하려면 다음과 같은 유용한 페이지 제목을 만드세요.

• 페이지를 정확하게 설명합니다.
• 타겟 키워드를 자연스럽게 통합합니다.
• 길이는 50~60자입니다.
• 사용자가 클릭을 하도록 강요합니다.

제목

헤더 태그는 가독성을 높이기 위해 텍스트를 섹션으로 구성하는 데 사용되는 페이지 SEO의 표준 요소입니다. 각 헤더는 새로운 주제나 하위 주제의 시작을 나타냅니다.

보조 기술은 제목을 사용하여 사용자를 원하는 섹션으로 직접 안내합니다. 이는 특정 정보를 수집하기 위해 전체 웹 페이지를 읽는 것보다 쉽습니다. 검색 엔진은 검색어와 더 잘 일치하도록 제목을 사용하여 각 헤더 뒤에 오는 콘텐츠를 이해합니다.

SEO 접근성을 위해 제목을 최적화하려면:

• 보조 기술이 읽을 수 있도록 적절한 HTML 태그를 사용하십시오.
• 각 헤더가 섹션 콘텐츠를 정확하게 설명하는지 확인하세요.
• 섹션 내에서 헤더 수준을 순서대로 중첩시키므로 H3에서 H5로 이동하지 마세요.

대체 텍스트

대체 텍스트는 이미지를 대체하는 온라인 이미지에 대한 서면 설명입니다. 시각 장애가 있거나 시력이 낮은 사람들이 이미지를 이해하는 데 도움이 될 뿐만 아니라 이미지가 느리게 로드되거나 누락된 경우 모든 사용자에게 정보를 제공합니다. 검색 엔진은 이미지를 크롤링할 수 없기 때문에 SEO 목적으로 색인 생성을 위해 이미지 제목을 전달하는 데 Alt 태그가 중요합니다.

대체 텍스트를 작성할 때 고려해야 할 몇 가지 사항은 다음과 같습니다.

• 화면 판독기가 자동으로 이를 알려 주므로 설명에 "다음의 이미지입니다"를 포함할 필요는 없습니다.
• 완전한 문장을 작성하고 그림에 생기를 불어넣으세요. 대체 텍스트에 '아이스크림'을 사용하는 대신 '딸기 아이스크림 두 스쿱이 담긴 와플 콘을 손에 들고'를 시도해 보세요.
• 페이지 콘텐츠와 관련된 대체 텍스트를 만들고 주제의 맥락에서 사용자가 알고 싶어하는 내용을 고려하세요.
• 이미지에 기능이 있는 경우 이미지보다는 동작을 설명하세요. 예를 들어 Nike 로고가 귀하가 판매하는 Nike 제품으로 연결되는 경우 대체 텍스트는 "Nike 로고"를 명시하는 대신 이 정보를 전달해야 합니다.
• 키워드를 자연스럽게 포함시키세요. 키워드 채우기는 스팸으로 간주됩니다.
• 차트 등 복잡한 이미지의 경우 자세한 설명 링크를 참조하세요.
• 장식용 이미지의 경우 또는 화면상의 자세한 캡션이 반복되지 않도록 하려면 화면 판독기에서 이를 건너뛸 수 있도록 빈 Alt 속성을 사용하세요.

메타데이터

메타 설명과 같은 메타데이터는 게시된 웹 페이지에 표시되지 않지만 검색 엔진과 사용자가 페이지의 목적과 콘텐츠를 이해하는 데 도움이 됩니다.

메타 설명은 페이지 제목 아래 SERP에 표시되며 접근성에 중요합니다. 화면 판독기는 페이지를 클릭하기 전에 페이지가 자신의 요구 사항을 충족하는지 여부를 사용자가 결정할 수 있도록 큰 소리로 읽어줍니다. 또한 검색 엔진에 페이지 관련성에 대한 통찰력을 제공하여 콘텐츠를 적절한 쿼리에 일치시키고 이탈률을 줄임으로써 SEO를 향상시킵니다.

효과적인 메타 설명:

• 페이지의 내용을 정확하게 설명하세요.
• 큰 소리로 읽으면 명확하고 쉽게 이해됩니다.
• 기본 키워드를 포함하세요.
• 160자 미만을 포함합니다.
• 클릭 유도 문구를 포함하고 사용자가 클릭하도록 유도합니다.

모바일 친화성

전 세계 웹 트래픽의 절반 이상이 모바일 장치에서 발생합니다. Google은 모든 새 웹사이트의 모바일 버전을 먼저 크롤링합니다. 즉, 귀하의 사이트는 스마트폰, 태블릿 및 기타 기기에 액세스할 수 있고 최적화되어 있어야 합니다.

사이트가 모바일 친화적인지 확인하려면 다음 단계를 따르세요.

• 다양한 화면 크기에 맞게 렌더링되는 반응형 디자인을 사용하세요.
• 독자가 쉽게 훑어보거나 읽을 수 있도록 콘텐츠 형식을 지정하세요.
• 방해가 되는 전면 광고 없이 사이트를 단순하고 깔끔하게 유지하세요.
• 이동 중인 사용자를 위해 빠르게 로드되도록 사이트 속도를 최적화하세요.
• 음성 검색을 위해 특정 키워드를 타겟팅합니다.

비디오 캡션 및 대본

비디오 콘텐츠의 인기가 높아지고 있지만 캡션과 스크립트를 제공하지 않는 한 라이브 스트림, 웹 세미나, 인터뷰 및 시각적 제품 데모는 청각 장애가 있거나 난청이 있는 사용자와 검색 엔진 모두에게 어려울 수 있습니다.

화면 캡션은 청각 장애가 있거나 난청이 있는 사용자를 위한 오디오 대신 사용할 수 있는 텍스트입니다. 어떤 사람들은 시끄러운 환경에 있거나 다른 사람을 방해하고 싶지 않을 때 캡션을 선호하기도 합니다. YouTube는 자동 동영상 캡션을 제공하지만 최상의 사용자 경험을 위해서는 정확성을 위해 캡션을 편집해야 합니다.

전체 대본은 비디오의 음성 부분에 대한 텍스트 대안을 제공합니다(비디오 SEO에 적합합니다). 동영상과 같은 페이지에 게시하거나 링크가 포함된 별도의 페이지에 게시해야 합니다. 화면 판독기는 비디오 캡션보다 더 빠르게 스크립트를 읽을 수 있습니다. 일부 사용자는 비디오를 보거나 특정 용어에 대한 스크립트를 검색하는 것보다 스크립트를 훑어보는 것을 선호할 수도 있습니다.

검색 엔진은 비디오 콘텐츠를 크롤링할 수 없기 때문에 스크립트는 색인 생성을 위한 귀중한 정보를 제공합니다. 읽기 쉽도록 스크립트에서 '음', '아'와 같은 대화 요소를 제거하도록 수정하세요.

앵커 텍스트

앵커 텍스트는 사용자와 검색 엔진에 링크가 어디로 연결되는지 알려주는 클릭 가능한 텍스트입니다. 검색 엔진은 앵커 텍스트를 사용하여 링크 주변과 대상 페이지의 콘텐츠를 이해합니다. 장애가 있는 사용자가 필요에 맞지 않는 다른 페이지를 불필요하게 클릭하지 않도록 정확한 앵커 텍스트도 중요합니다.

사용자가 링크를 따라갈 때 무엇을 기대하는지 알 수 있도록 간결하고 정확한 앵커 텍스트를 작성하세요. 이는 “여기를 클릭하세요”와 같은 일반적인 표현을 피하거나 URL을 앵커 텍스트로 사용하는 것을 의미합니다.

화면 판독기를 사용하는 일부 사용자는 페이지에서 링크를 검색하므로 앵커 텍스트에 액세스할 수 있는지 여부에 대한 좋은 테스트는 해당 내용을 소리내어 읽어도 이해되는지 확인하는 것입니다.

가독성

가독성은 콘텐츠를 얼마나 쉽게 사용할 수 있는지를 나타냅니다. 가독성이 높은 페이지는 사용자의 관심을 끌고 사이트에 더 오랫동안 머물게 합니다. 또한 콘텐츠를 사용자 쿼리와 일치시키려는 검색 엔진에서 더 쉽게 이해할 수 있습니다.

다음을 통해 SEO에 대한 가독성과 접근성을 향상할 수 있습니다.

• 정보를 쉽게 찾을 수 있도록 명확한 헤더를 사용하여 콘텐츠를 덩어리로 그룹화합니다.
• 장황함을 제거하고 단순하고 설득력 있는 언어를 선택합니다.
• 보다 직접적인 스타일의 글쓰기를 위해 능동태를 사용합니다.
• 스캔을 위해 번호가 매겨진 목록이나 글머리 기호 목록을 사용합니다.
• 독자를 위해 글을 쓰고 키워드 채우기를 피합니다.

접근성 테스트 도구

귀하의 사이트에 얼마나 접근 가능한지 알아볼 수 있는 다양한 무료 및 유료 도구가 있습니다. 시작하는 데 도움이 되는 몇 가지 항목을 아래에 나열했습니다.

액세스스캔

accessScan은 클릭 가능한 요소, 제목, 메뉴, 방향, 그래픽, 양식 및 가독성 측면에서 사이트가 어떻게 측정되는지에 대한 자세한 분석을 제공합니다. 이 무료 도구는 도메인을 검사하여 사이트가 다양한 접근성 표준을 충족하는지 여부와 충족하지 못한 요소에 대한 세부정보를 알려줍니다. 해당 정보를 PDF 보고서로 다운로드할 수 있습니다.

접근성 검사기

접근성 검사기는 일부 국가의 접근성 법률을 기반으로 웹사이트의 규정 준수 여부를 감사합니다. 전반적인 규정 준수 점수, 긴급 및 보조 문제 목록, 솔루션을 제공합니다. 무료 도구는 개별 웹 페이지에서 사용할 수 있지만 한 번에 여러 페이지를 스캔하려면 업그레이드해야 합니다.

웹 접근성 평가 도구(WAVE)

WebAIM에서 개발한 이 도구는 WCAG 2.1 지침에 따라 웹 페이지의 접근성 문제를 테스트합니다. WAVE 웹사이트로 직접 이동하여 URL을 입력하면 오류 시각화를 확인할 수 있습니다. 이 도구는 웹 페이지에 아이콘을 겹쳐서 문제가 있는 위치를 보여줍니다. WAVE는 브라우저 확장으로도 사용할 수 있으므로 Chrome, Firefox 및 Edge에서 직접 테스트할 수 있습니다.

지금 바로 SEO와 접근성을 통합하는 데 도움을 받으세요

접근성을 나중에 고려하는 대신 SEO와 결합하여 웹사이트 최적화 노력을 간소화하세요. Victorious의 팀은 접근성과 SEO를 결합한 강력한 전략을 구축하여 가능한 한 가장 광범위한 청중에게 다가갈 수 있는 유용하고 장벽 없는 웹 사이트를 만드는 데 도움을 드릴 수 있습니다. 무료 상담을 원하시면 오늘 저희에게 연락하십시오.