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

WordPress 웹 사이트를 시작할 때 모든 종류의 방문자가 방문한다는 점을 염두에 두어야 합니다.

더 중요한 것은 모든 사이트 방문자가 마우스를 움직이거나 사이트의 색 구성표를 보거나 비디오 콘텐츠를 듣는 것과 같이 당연하게 여기는 간단한 일을 할 수 있는 것은 아니라는 것입니다. 따라서 업계에서 확고한 평판을 얻고 전환율을 높이고 올바른 일을 하려면 WordPress 접근성에 중점을 두어야 합니다.

그렇기 때문에 오늘 우리는 WordPress 웹사이트를 보다 쉽게 ​​액세스할 수 있는 가장 쉬운 방법을 소개 합니다 .

시작하겠습니다.

워드프레스 접근성이란?

WordPress 접근성이란 장애가 있는 사용자를 포함한 모든 사용자 가 웹사이트와 콘텐츠를 사용할 수 있도록 하는 것을 의미합니다.

이것이 타겟 고객에게 적용되는지 확실하지 않습니까?

이것에 대해 생각하다. National Service Inclusion Project에 따르면 미국에만 4,890만 명의 장애가 있습니다. 이를 전 세계로 확장하면 사이트 방문자의 상당 부분이 귀하가 의도한 방식으로 귀하의 웹사이트를 탐색하는 능력에 영향을 미치는 일종의 장애가 있을 가능성이 있습니다.

Web Accessibility Initiative에서는 사이트의 접근성을 높이는 것이 다음 그룹의 사람들에게 도움이 된다고 명시하고 있습니다.

• 노인
• 안경을 분실하거나 팔다리가 부러지는 등 일시적인 장애가 있는 사람
• 시각 또는 청각 장애가 있는 분
• 인터넷 연결이 느린 사람들
• 밝은 곳이나 사이트 오디오가 들리지 않는 환경에서 사이트에 액세스하는 등 상황에 따른 제한이 있는 사용자
• 글을 읽는 능력에 영향을 미치는 난독증과 같은 인지 문제가 있는 사람

계속 진행하기 전에 Blinkee.com을 예로 들어 보겠습니다.

작은 글꼴과 깜박이는 표시등 사이에는 콘텐츠를 읽거나 사이트를 탐색하거나 몇 초 이상 중요한 것에 집중할 수 없는 사이트 방문자가 많이 있습니다.

무슨 말인지 알겠어? 웹사이트 접근성은 많은 사람들이 인정하고 싶어하는 것보다 훨씬 더 중요합니다.

하지만 WordPress 접근성에 관심을 가져야 하는 이유는 무엇입니까?

WordPress 웹 사이트가 Blinkee.com처럼 보이지 않는다고 스스로 생각할 수도 있습니다. 그리고 그것이 좋은 일이지만 아직 명확하지 않습니다.

다음은 사이트 접근성을 고려해야 하는 가장 강력한 이유입니다.

• 장애가 있는 사람들은 그렇지 않은 사람들보다 온라인에 접속할 가능성이 3배 낮습니다. 즉, 잠재 고객의 많은 부분을 전환할 수 있는 엄청난 기회를 놓치고 있습니다.
• Google 및 기타 주요 검색 엔진은 검색 순위에서 더 높은 순위를 지정하여 액세스할 수 있는 사이트에 보상을 제공합니다.
• 2015년에 이러한 유형의 사례를 처음 추적한 이후로 수천 건의 웹 접근성 사례가 접수되었으며, 이는 귀하의 사이트가 소송의 위험에 처할 수 있음을 의미합니다.

보시다시피, 어떤 종류의 웹사이트를 가지고 있더라도 타겟 고객의 일부를 소외시키면 많은 것을 잃을 수 있습니다.

웹사이트의 접근성을 높이는 팁

1. WordPress 사이트의 접근성 테스트

액세스 가능성을 높이기 위해 사이트를 변경하기 전에 현재 액세스 가능성을 확인하는 것이 가장 좋습니다.

이것은 WAVE(웹 접근성 평가 도구)와 같은 도구를 사용하여 쉽게 수행됩니다. 이를 통해 사이트의 URL을 입력하기만 하면 웹사이트의 접근성을 평가할 수 있습니다.

평가 후 WAVE는 사이트의 정상, 개선이 필요하거나 실제 오류인 섹션을 나타내는 다른 색상으로 구분된 아이콘을 표시합니다. 아이콘을 클릭하면 수정해야 할 사항에 대한 자세한 설명에 액세스할 수 있습니다.

2. 색 구성표를 신중하게 선택하십시오.

웹사이트를 브랜드화하고 경쟁업체와 차별화되는 가장 좋은 방법 중 하나는 특정 색 구성표를 사용하는 것입니다. 그러나 귀하의 웹사이트에 방문하는 사이트 방문자가 색맹이거나 시력이 좋지 않은 경우 사이트의 색상을 제대로 즐길 수 없습니다.

예를 들어 다음과 같은 간단한 색상 대비 예제를 살펴보십시오.

첫 번째 이미지에 쓰여진 텍스트를 보는 것이 꽤 어렵죠? 그리고 당신은 이 이미지를 보는 방식에 영향을 미치는 장애가 없을 수도 있습니다.

이제 당신이 색맹을 가진 전 세계 3억 명 중 한 명이라고 상상해 보십시오.

대비되는 색 구성표를 보는 것 외에도 충돌하는 색 구성표를 사용하지 않는 것이 중요합니다. 대비가 끔찍 하지 않다고 해서 색상이 잘 어울리는 것은 아닙니다.

WordPress 사이트의 색상 균형을 유지하려면 Contrast Checker라는 무료 온라인 도구를 확인하십시오.

전경색과 배경색을 선택하고 도구가 색상의 균형이 적절하게 조정되었는지 여부를 결정하게 하십시오. 그렇지 않은 경우 도구에서 다음을 알려줍니다.

3. WordPress 접근성 플러그인 사용

스스로 작업을 정말 쉽게 만들고 싶다면 항상 전용 WordPress 접근성 플러그인을 사용하여 사이트를 평가하고 모든 사람이 액세스할 수 있는지 확인할 수 있습니다.

그러한 플러그인 중 하나는 WP 접근성입니다. 이 플러그인은 WordPress 테마의 일반적인 접근성 문제를 식별하고 수정하여 사이트의 사용성을 개선하는 데 도움이 됩니다.

일부 기능은 다음과 같습니다.

• 링크에서 대상 속성 제거
• 콘텐츠에 삽입된 이미지에서 제목 속성 제거
• 표준 "더 읽기" 링크에 게시물 제목 추가
• 누락된 경우 표준 WordPress 양식 필드에 레이블 추가
• 포커스 가능한 요소에서 tabindex 제거
• 두 16진수 코드 값 간의 색상 대비 표시
• 그리고 훨씬 더

또한 WP 접근성은 테마의 고대비, 큰 인쇄 및 회색조 보기 간을 전환하기 위한 도구 모음을 추가하고, 모든 이미지에 alt 속성을 적용하고, HTML 속성에 언어 및 텍스트 방향 속성을 추가할 수도 있습니다.

또는 accessiBe와 같은 전용 접근성 플랫폼을 선택할 수 있습니다. 이 유형의 플랫폼의 가장 큰 장점은 WordPress 외부에서 작동한다는 것입니다.

4. 접근 가능한 테마 사용

접근성 문제를 처음부터 수정하지 않으려면 접근 가능한 WordPress 테마를 사용해야 합니다.

물론 이것은 때때로 말보다 쉽습니다. 즉, 공식 WordPress Repository를 탐색하면 접근 가능한 디자인을 사용하는 멋진( 무료! ) 테마를 찾을 수 있습니다. 기능 필터 를 사용하고 액세스 가능으로 표시된 테마를 검색하기만 하면 됩니다.

그러나 우리가 추천하는 것은 Kadence입니다. 이 테마에는 무료 버전이 있지만 추가 기능이 포함된 프리미엄 버전도 있습니다.

WordPress 웹 사이트에 대해 접근 가능한 테마를 선택하면 탐색, 링크 스타일, 색 구성표 등의 측면에서 모든 사용자가 사이트를 사용할 수 있습니다.

5. 모든 이미지에 대체 텍스트 추가

사이트 이미지에 대체 텍스트를 추가하는 것은 단순히 검색 순위를 높이는 것이 아닙니다. 물론 이미지의 대체 텍스트는 검색 엔진 크롤러가 귀하의 웹사이트를 더 잘 이해할 수 있도록 하고 가장 관련성이 높은 검색 결과에서 순위를 매기는 데 도움이 됩니다.

그러나 이미지에 대체 텍스트를 추가하면 장애가 있는 사용자가 사이트에 있는 동안 더 나은 사용자 경험을 제공하는 데 도움이 됩니다. 사실, 이미지에 추가한 대체 텍스트는 장애가 있는 사람들이 인터넷 서핑을 돕기 위해 스크린 리더를 사용하는 경우 이미지를 "읽을" 수 있도록 합니다.

따라서 모든 WordPress 사이트 이미지에 대체 텍스트를 추가하십시오. 그리고 스크린 리더가 사용자에게 의미 있는 방식으로 읽을 수 있도록 설명적이고 키워드를 포함해야 합니다.

6. 키보드 친화적인 사이트 만들기

장애가 있는 사용자를 수용하고 WordPress 사이트의 접근성을 높이는 또 다른 좋은 방법은 사이트를 키보드 친화적으로 만드는 것입니다. 즉, 사이트 방문자는 다음 사이트 요소를 통해 탭할 수 있어야 합니다.

• 메뉴 항목
• 연결
• 버튼
• 양식 필드

귀하의 사이트가 현재 키보드 친화적인지 확실하지 않습니까? 확인하려면 웹사이트를 방문하여 마우스를 사용하지 않고 탐색할 수 있는지 확인하기만 하면 됩니다. 대신 탭 버튼을 클릭하고 어떤 일이 일어나는지 확인하십시오.

WordPress.org는 모든 사용자가 사이트에 액세스할 수 있도록 하는 데 큰 역할을 합니다. 실제로 사이트를 탭핑할 때 탭하는 각 메뉴 항목 주위에 점선 형태가 표시됩니다.

7. 양식 필드의 올바른 형식 지정

사이트를 보다 체계적이고 깔끔하게 보이도록 필드 상자 안에 양식 필드 레이블을 배치하고 싶을 것입니다. 그러나 일부 화면 판독기는 이러한 유형의 레이블을 식별하고 읽을 수 없습니다. 이것은 스크린 리더에 의존하는 사람들이 사이트의 양식 필드를 보고 채우는 것을 불가능하지는 않더라도 어렵게 만듭니다. 이것은 또한 귀하의 성공에 큰 피해를 줄 수 있는 전환 손실을 의미합니다.

돈을 벌거나 팔로워를 늘리기 위해 사이트 방문자 가입에 크게 의존하는 경우 양식 필드에 액세스할 수 없도록 하면 일부 대상 고객이 소외될 가능성이 높아집니다. 이 문제를 해결하려면 양식 필드 레이블을 각 상자 외부에 배치하십시오.

8. 링크 스타일링에 주의

사이트의 하이퍼링크에 할당하는 색상은 종종 브랜딩 목적으로 선택되지만 장애가 있는 사용자는 하이퍼링크와 관련하여 명확한 대비가 필요하다는 점을 명심하십시오.

다음은 WordPress 사이트의 링크에 더 쉽게 접근할 수 있도록 하는 몇 가지 유용한 팁 목록입니다.

• 스크린 리더가 링크로 연결되는 내용을 사용자에게 알려 주기 때문에 링크에 "링크"라는 단어를 사용하지 마십시오.
• 때때로 대문자로 된 텍스트를 한 글자씩 읽는 스크린 리더를 혼동하기 때문에 링크를 대문자로 사용하지 마십시오.
• 링크 텍스트에 URL을 사용하지 마십시오. 스크린 리더가 문자를 읽어 사용자가 따라가기 어렵게 만들기 때문입니다.
• 전체 콘텐츠 블록을 연결하지 마십시오. 짧고 달콤하게
• 링크가 새 창에서 열릴 때 사용자에게 경고하여 길을 잃지 않도록 합니다.
• 많은 앵커 링크를 사용할 때 주의하십시오(장애인은 이미 스캔한 페이지를 위아래로 움직이는 것임을 깨닫지 못할 수 있습니다)
• 연결된 텍스트에 밑줄을 긋고 대비를 위해 눈을 즐겁게 하는 별도의 색상 사용
• 끊어지거나 비어 있는 링크를 정기적으로 확인

마무리

결국 워드프레스 접근성이 그 어느 때보다 중요해졌습니다. 요즘 사람들은 인터넷을 모든 용도로 사용하고 있습니다. 청구서 지불에서 사교 모임, 약속 설정, 온라인 쇼핑에 이르기까지 사람들의 삶의 거의 모든 측면이 어떤 방식으로든 온라인에서 처리될 수 있습니다.

타겟 고객의 일부를 제외하지 않고 사이트 트래픽을 최대화하고 모든 계층의 사람들이 귀하가 제공하는 제품을 쉽게 탐색할 수 있도록 하려면 다음을 확인하십시오. 귀하의 사이트에 액세스할 수 있습니다. 수준에 미치지 못한다면 간단하고 빠르게 변경하십시오. 이것은 팔로워 또는 고객 기반을 확장하는 데 도움이 될 뿐만 아니라 올바른 일입니다.

공개: 이 게시물에는 제휴사 링크가 포함되어 있습니다. 이것은 당신이 구매를 할 경우 우리가 약간의 수수료를 낼 수 있음을 의미합니다.