웹 사이트의 접근성을 높이는 방법 + SEO

접근성과 SEO가 공존하는 곳 찾기

SEO와 접근성이 교차 할 수있는 영역이 있습니다. 크레딧 : Unsplash

검색 엔진 최적화 (SEO)와 웹 사이트 접근성은 동일하지 않습니다. 따라야 할 규칙, 대상별로 다른 대상 및 각각의 효과를 테스트하는 다른 방법이 있습니다.

검색 엔진 봇에 맞게 웹 사이트를 최적화한다고해서 실제 사람들도 자동으로 액세스 할 수있는 것은 아닙니다. 일부 SEO 관행은 웹 사이트의 접근성을 손상시킬 수도 있습니다.

그러나 모든 나쁜 소식은 아니지만 두 세계가 겹치는 영역이 있습니다. 프로젝트의 예산 및 / 또는 기간이 제한되어있는 경우이 6 가지 영역 *을 타겟팅하면 SEO 및 웹 사이트 접근성이 동시에 향상 될 수 있습니다.

* 참고 :이 기사는 중복 영역에 중점을 둡니다. 아래 각 영역의 각 특정 작업은 SEO를 더 많이 목표로하고 일부 작업은 접근성을 더 많이 목표로 할 수 있습니다.

경고 : 수염 난 힙 스터 피자 녀석은 당신을 사냥하고 당신이 SEO 및 웹 사이트 접근성을위한 UI의 중요성을 과소 평가하는 경우, 자신의 욕조에서 만든 수제 맥주를 마시도록 강요 할 것입니다. 크레딧 : Unsplash

구조 문제

우수한 사용자 인터페이스 (UI)의 힘을 과소 평가하지 마십시오. 깨끗하고 명확하며 일관된 UI를 갖춘 웹 사이트는 특히 검색 엔진 봇과 보조 기술 장치를 사용하거나 키보드 만 사용하는 사람들에게 적합합니다. 사용자 나 봇이 페이지를 찾지 못하면 어떻게 읽거나 상호 작용할 수 있습니까? 가능한 한 쉽게 페이지를 찾고 웹 사이트와 상호 작용해야합니다.

모범 사례

  • 탐색 및 페이지 레이아웃을 명확하고 일관된 방식으로 구성하고 콘텐츠를 찾는 여러 가지 방법 (예 : 검색, 사이트 맵, 목차)을 갖습니다. 잘 구성된 웹 사이트 아키텍처와 같은 검색 엔진 봇은 콘텐츠를보다 의미있는 방식으로 색인 생성합니다.
  • 웹 사이트를 탐색하거나 사용하기 어려운 경우 웹 사이트에서의 시간, 조회 한 페이지 및 이탈률을 포함한 사용자 분석 통계에 영향을 줄 수 있습니다. 결과적으로 SEO 순위가 떨어질 수 있습니다. 최소한 사용자를 자극합니다.
  • 의미를 전달하기 위해 CSS 또는 다른 스타일 마크 업을 사용하지 마십시오. 대신 HTML 마크 업을 사용해야하는 요소를 "가짜"해서는 안됩니다.
  • 적절한 경우
    ,
    ,
    ,
    와 같은 액세스 가능한 HTML 5 페이지 요소를 사용하십시오. 이러한 요소는 검색 엔진 봇 및 보조 기술 장치보다 일반
    또는

    요소에 대한 설명입니다.

태그, 태그, 모든 위치 태그. 다양한 크기와 색상의 수제 패키지 태그. 크레딧 : Unsplash

태그의 올바른 사용

웹 사이트 콘텐츠는 본질적으로 페이지 제목에 사용되는 태그 (

태그와 혼동하지 않아야 함)를 포함하여 HTML 마크 업으로 요약 될 수 있습니다.

태그를 탐색하면 사용자 또는 검색 엔진 봇에게 페이지에 대한 개요 및 해당 컨텐츠의 구성 방식을 제공 할 수 있으며

-

태그는 각 섹션의 세부 사항을 빠르게 이해할 수 있습니다. . 웹 사이트 접근성과 SEO 모두이 태그를 올바르게 사용하는 것이 중요합니다.

모범 사례

  • 제목 태그를 일관되게 유지하고 텍스트 스타일을 지정하는 것뿐만 아니라 실제 제목 태그를 사용하십시오. 그렇지 않으면 검색 엔진 봇과 사용자는 어떤 콘텐츠가 가장 중요한지 알 수 없습니다.
  • 제목 태그가 순서대로 있어야합니다. 즉,

    다음에

    가,

    뒤에

    또는

    이 계속됩니다.

  • 웹 사이트 페이지에서 순서대로 내려갈 때 제목 태그를 건너 뛰지 마십시오. 예를 들어

    에서

    로 건너 뛰지 마십시오. 참고 : 새 페이지 섹션을 시작하는 경우 순서대로 올라갈 때 제목 태그를 건너 뛰어도됩니다 (
    에서

    ).

  • 페이지 당 하나의

    만있는 것이 가장 좋습니다.

    태그는 본질적으로 검색 엔진 봇에 관련성 신호를 보내는 "두 번째 페이지 제목 태그"라고 생각하십시오.

연습은 완벽합니다. 선수는 chainlink 울타리에 흰색 아디다스 신발을 달려있다. 크레딧 : Unsplash

완벽한 링크

링크는 검색 엔진 봇과 스크린 리더와 같은 보조 기술 장치를 사용하는 사람들을 위해 웹 사이트를 만들거나 끊을 수 있습니다. 페이지 제목을 검토 한 후 링크는 사용자와 크롤러가 가장 자주 주목하는 다음 주요 요소이므로 링크가 최대한 완벽해야합니다.

모범 사례

  • 끊어진 링크가 없는지 확인하십시오. 이것은 SEO를 위해 무시되거나 버려진 웹 사이트의 표시로 볼 수 있습니다. 또한 사용자를 좌절 시키거나 혼란스럽게 할 수있는 나쁜 웹 사이트 접근성 관행입니다.
  • 내부 태그 유형 링크를 사용하지만 과도하게 사용하지 마십시오. Yoast.com에 따르면, "그것은 한 조각의 내용을 다른 내용, 특히 게시물 그룹을 서로 연결하여 SEO를 향상시킵니다."또한 사용자는 한 번의 클릭으로 유사한 내용에 쉽게 액세스 할 수 있습니다.
  • 설명 링크 텍스트를 제공하십시오. 여기를 클릭하여 자세한 내용을 읽으십시오. 이러한 구를 사용하려면 시각적으로 숨겨 지거나 ARIA 방법을 사용하여 추가 링크 정보를 추가하는 경우 * 한 * 그대로 유지할 수 있습니다.
  • 링크에 설명 제목 속성을 추가하지 마십시오 (링크 위에 마우스를 놓으면 표시되는 텍스트). 링크 제목을 추가하는 것이 반드시 틀린 것은 아니지만 SEO 나 웹 사이트 접근성에 크게 도움이되지는 않습니다.
김치! 레트로 니콘 카메라를 들고 핑크 꽃 셔츠에 여자. 크레딧 : Unsplash

이미지 최적화

검색 엔진 봇과 스크린 리더를 사용하는 사람들은 전통적인 의미에서“볼”수 없지만 이미지 이름과 대체 텍스트를 사용하여 이미지가 무엇을 나타내는 지 알려줍니다. 이러한 요소를 갖추는 것은 주변 콘텐츠를 보완하고 전반적인 사용자 경험을 위해 필수적입니다.

모범 사례

  • 이미지 이름을 지정할 때 최대한 일관되고 정확해야합니다. 예를 들어 주황색 얼룩 무늬 고양이 사진의 파일 이름을 brown-puppy.jpg로 지정하지 마십시오.
  • 알파벳이 아닌 문자 (예 : 7, %, &, $)를 사용하지 말고 이미지 이름이나 대체 텍스트에 밑줄 대신 단어 사이에 대시를 사용하십시오. 예를 들어, 0r @ nge_t @ 66y_c @ t! .jpg가 아닌 orange-tabby-cat.jpg를 작성하십시오.
  • 대체 텍스트를 125 자 미만으로 유지하십시오. 더 많은 문자가 필요한 경우 캡션 텍스트를 사용하거나 페이지의 기본 텍스트 영역에서 이미지를 자세히 설명하십시오.
  • 로봇이 아닌 사람과 같은 대체 텍스트를 작성하십시오. 키워드 소는 아무에게도 도움이되지 않습니다. 스크린 리더를 사용하는 사람들은 성가 시게되고 검색 엔진 봇이 귀하에게 불이익을 줄 것입니다. 하지 마십시오.
미디어가 봇과 인간을 위해 작동하도록하십시오. 회전 레코드 플레이어의 클로즈업입니다. 크레딧 : Unsplash

미디어 보충

시각 장애가있는 사람 (예 : 발작 장애, 맹인), 청각 장애 (예 : 청각 장애, 난청), 상황 / 일시 장애, 대역폭 연결 상태가 좋지 않은 사람 및 기타 많은 사람들이 방법. 마찬가지로 검색 엔진 봇은 눈, 귀 또는 손이 없기 때문에 "비활성화"되므로 SEO와 웹 사이트 접근성이 어느 정도 겹치는 영역입니다.

모범 사례

  • 더 적은 것입니다. 가능할 때마다 디자인에 복잡한 미디어 구성 요소 (예 : 슬라이드 쇼, 비디오) 사용을 제한하십시오. 다른 레이아웃 옵션이 있습니다.
  • 명확하고 완전하며 간결한 텍스트 설명과 마크 업을 필수 미디어에 추가하십시오. 불필요한 미디어를 유지하는 것에 대해 두 번 생각하십시오.
  • 모든 비디오와 슬라이드 쇼에는 자동 진행중인 경우 재생 / 일시 정지 버튼이 있어야하지만 자동 시작하지 마십시오. 이상적으로는 모든 미디어 컨트롤에 액세스 할 수 있어야합니다.
  • 미디어에 액세스 할 수있는 대체 방법을 제공하십시오. 예를 들어, 동영상의 대본 및 / 또는 캡션이 있어야합니다. 오디오 전용 파일의 대화 내용을 작성하십시오. 점자 형식의 파일을 미디어에 추가하십시오. 사용할 수있는 다양한 유형의 대체 형식이 있습니다.
내용은 왕입니다. 다양한 크기의 인쇄기 블록 문자 및 글꼴 패밀리의 컨테이너. 크레딧 : Unsplash

당신의 컨텐츠를 Declutter

마지막으로 웹 사이트의 전체 구조, 제목 태그, 링크, 이미지 및 기타 미디어를 다룬 후 다음 단계는 실제 콘텐츠에 집중하는 것입니다. 각 웹 사이트는 고유 한 눈송이이기 때문에 한 웹 사이트에서 다른 웹 사이트로 웹 사이트 내용이 다양합니다. 일부 웹 사이트의 일부 사용자에게 효과적인 기능은 귀하와 귀하의 사이트에서 작동하지 않을 수 있습니다. 핵심은 가능한 최고의 콘텐츠를 작성하고 Google의 콘텐츠 제작 진언을 마음 속에 두는 것입니다.

“귀하의 웹 사이트를 독특하고 가치 있거나 흥미롭게 만드는 요소에 대해 생각해보십시오. 당신의 웹 사이트를 당신의 분야에서 다른 사람들과 차별화 시키십시오.”

모범 사례

  • 각 단락의 길이를 대략 3 문장으로 제한하고 청중과 일치하는 읽기 등급 수준을 목표로합니다. 이상적으로는 웹 사이트 접근성과 SEO 목적을 위해 9 학년을 목표로해야합니다.
  • 단어를 강조하기 위해 굵고 이탤릭체 태그를 사용하지 말고 강하게 강조하십시오. 시각적으로 서로 비슷해 보이지만 화면 판독기 (오른쪽 모드)는 태그로 둘러싸인 단어를 강조하지만 태그는 완전히 무시하거나 약간만 변경합니다. .
  • 내용을 복제하지 마십시오. 검색 엔진 봇이 통지하고 처벌합니다. 사용자는 혼란 스러울 것입니다.
  • 글 머리 기호 및 번호 매기기 목록은 독자를 위해 콘텐츠를 분류하여보다 사용자 친화적으로 만듭니다. 보너스 : 일부 연구에 따르면 검색 엔진 봇은 일반 텍스트보다 글 머리 기호 및 숫자가 포함 된 콘텐츠를 선호합니다.

❤이 기사가 마음에 든다면 박수 아이콘 (원하는 횟수)을 클릭하고 소셜 미디어에서 이야기를 공유하고 매체 또는 트위터에서 나를 팔로우하여 지원을 보여주십시오! 감사하고 행복한 독서 ❤

이 이야기는 매체에서 가장 큰 기업가 정신 출판물 인 스타트 업 (The Startup)에 273,971 명 이상이 출판되었습니다.

여기서 주요 기사를 받으려면 구독하십시오.