WordPress 사이트의 접근성을 향상시키는 10가지 방법

웹사이트 접근성은 신체적, 상황적 장애 또는 경제적 제약에 관계없이 모든 사람이 웹사이트를 쉽게 사용할 수 있도록 하는 것입니다. 상황에 관계없이 모든 사용자가 사이트에서 원활하게 경험하도록 하고 싶습니다.

웹사이트의 이러한 측면이 수정되지 않은 경우 온라인 페이지의 주요 기능에 액세스할 수 없다는 이유로 많은 대상 시장을 제한할 수 있는 좋은 기회가 있을 수 있습니다.

주로 장애가 있는 사람들을 생각할 수 있지만, 물론 이것은 시작하기에 좋은 곳입니다. 웹사이트 접근성 문제는 다음과 같은 일시적인 상황에 영향을 줄 수 있습니다.

• 스마트 텔레비전(TV) 등을 사용하여 휴대전화나 기타 작은 화면 장치를 통해 사이트에 액세스해야 하는 사용자
• 고령화로 인해 다양하고 변화하는 과제를 안고 있는 오래된 웹사이트 방문자
• 조명이 어두운 곳에서 사이트에 액세스하는 사용자 그리고
• 느린 인터넷 연결을 사용하거나 국가 또는 장소로 인해 대역폭이 비싼 사용자.

해결해야 하는 문제의 광범위하고 다양한 환경을 알면 작동할 수 있는 솔루션을 만드는 데 도움이 될 수 있습니다. 다음은 사이트의 접근성을 개선하는 주요 방법입니다.

1. 음성을 통해 콘텐츠를 제어 가능하게 만들기

음성 인식은 웹사이트에 통합되어 음성으로 콘텐츠를 제어할 수 있는 기능입니다. 여기에는 양식, 단추, 링크 및 기타 컨트롤이 포함됩니다. 마우스나 키보드를 사용할 수 없는 사용자가 사이트에서 음성을 사용하여 기능을 수행할 수 있도록 하는 받아쓰기 소프트웨어를 통합할 수 있습니다.

이 작업을 수행하려면 모든 콘텐츠를 올바르게 코딩하고 설계해야 합니다. 또한 음성 명령으로 활성화할 컨트롤을 명확히 하기 위해 시각적으로 표시되는 방식과 일치하는 사이트 소스 코드의 식별자와 레이블이 필요합니다.

2. 색상 선택에 주의하십시오

전 세계 수백만 명의 사람들이 색맹이므로 사용하는 색상은 이러한 현실을 염두에 두어야 합니다.

또한 웹사이트의 색상 비율과 대비를 선택할 때 주의해야 합니다. 색상 대비 옵션은 높아야 합니다. 예를 들어 흰색 배경에 검정 텍스트를 사용하여 특정 시각적 제한이 있는 경우에도 사용자가 콘텐츠를 쉽게 읽을 수 있도록 합니다.

3. 링크에 밑줄이 표시되었는지 확인

밑줄이 그어진 글보다 밑줄이 없는 글이 더 심미적이기 때문에 많은 사람들이 최근 '링크에 밑줄을 긋다' 규칙을 포기했습니다. 사실일 수도 있지만 웹사이트의 주요 작업은 기능입니다. 이것은 모든 것을 의미합니다. 기능을 우선시해야 합니다.

밑줄을 제거하면 사용자가 카운터의 하이퍼링크 부분을 식별하기 어렵습니다. 여전히 콘텐츠에 밑줄을 긋고 싶지 않다면 링크를 나머지 사본과 구별할 수 있는 다른 방법을 고려하십시오. 이를 위해 색상 또는 굵은 텍스트를 사용할 수 있습니다.

4. 이미지에 Alt 태그 추가

웹사이트의 접근성을 향상시키려면 웹사이트의 모든 이미지에 'alt 태그'를 추가하는 것을 고려해야 합니다.

일부 사이트는 검색 엔진 최적화(SEO) 전략의 일부로 대체 텍스트를 사용합니다. 이미지를 가능한 한 간략하고 최선으로 설명하기 위해 대체 텍스트를 사용하는 대신 사이트 순위에 도움이 될 것으로 생각되는 키워드를 채우는 공간을 사용합니다. 분명히 이것은 일반적으로 웹 사이트 방문자에게 좋은 읽기 경험을 제공하지 않으며 웹 사이트에 액세스할 수 있도록 유지하기 위해 이를 피하려고 합니다.

누군가가 스크린 리더를 통해 웹 사이트에 액세스하고 웹 사이트에 시각적 콘텐츠에 추가된 alt 태그가 없는 경우 스크린 리더는 이미지에 있는 내용을 독자에게 설명할 수 없습니다. Alt 태그는 화면 판독기 소프트웨어에 이미지의 내용과 이미지가 주변 콘텐츠와 어떤 관련이 있는지 알려주는 것입니다.

사이트의 이미지에 대체 태그를 추가하려면 편집기의 오른쪽에 있는 대체 텍스트 필드로 이동하여 이미지를 설명하는 짧은 문장을 작성해야 합니다.

5. 설명이 포함된 링크 유지

일부 사용자는 시각적 제한 때문에 사이트를 탐색하기 위해 음성 명령 기술을 사용할 것입니다. 사이트 방문자의 이 세그먼트는 스크린 리더를 사용하여 사이트 콘텐츠에 액세스할 것이므로 링크는 더 문맥에 맞아야 합니다.

'더 읽어보기'와 같은 모호한 말을 하는 대신 사용자가 링크가 어디로 연결되는지 정확히 알 수 있도록 링크를 맥락화하기 위해 더 많은 세부정보를 추가할 수 있습니다. 따라서 '더 읽기' 대신에 더 자세한 내용을 추가하고 '여기를 클릭하여 우리 팀이 귀하를 도울 수 있는 방법에 대해 자세히 읽어보십시오'와 같은 내용을 읽도록 할 수 있습니다. 그렇게 하면 스크린 리더를 사용하는 사용자에게 제공된 링크를 클릭하라는 메시지가 표시됩니다.

6. 다양한 화면에서 글꼴 크기 테스트

현재 크기를 지정하지 말고 고개를 끄덕이기 전에 화면 크기가 다른 다양한 장치를 통해 사이트에 액세스해야 합니다. 예를 들어 텍스트가 개인용 컴퓨터(PC)와 휴대폰에서 어떻게 보이는지 테스트하여 최적화되었는지 확인합니다. 큰 화면과 작은 화면 모두에 사용할 수 있습니다.

7. 주요 콘텐츠 링크 추가

당신이 그것에 대해 아무것도 하지 않는다면, 스크린 리더를 사용하는 사용자는 단순히 그들의 독자가 당신의 웹사이트를 맨 위에서 아래로 읽기 시작하기 때문에 당신의 사이트에서 힘든 시간을 보낼 것이고 때로는 사용자가 필요로 하는 콘텐츠를 읽기 시작하기 전에 시간이 걸릴 수 있습니다. 읽다.

이 문제를 해결하려면 WordPress 사이트를 만들 때 스크린 리더가 페이지의 주요 콘텐츠로 건너뛸 수 있도록 링크를 삽입해야 합니다. 이 링크는 하이퍼텍스트 마크업 언어(HTML)의 첫 번째 열에 추가할 수 있습니다.

8. 시각 및 음성 콘텐츠에 대한 대체 텍스트 제공

콘텐츠에 캡션을 추가하면 청각 장애가 있는 사용자가 콘텐츠에 액세스하는 데 도움이 됩니다. 사이트에 비디오, 팟캐스트 또는 오디오북을 게시할 때 모든 사람이 이해할 수 있도록 해당 콘텐츠에 대체 텍스트를 추가했는지 확인하세요.

9. 탭 인덱싱 활성화

일부 사용자, 특히 운동 능력이 제한된 사용자는 종종 트랙패드나 마우스를 사용하여 사이트를 탐색하는 대신 키보드의 탭 키로 응답합니다.

이러한 사용자를 수용하려면 사이트가 탭 색인화되었는지 확인하십시오. 이는 콘텐츠 요소의 순서를 설정하여 모든 사용자가 의도한 순서대로 콘텐츠에 액세스할 수 있도록 하는 데 도움이 됩니다.

10. 낮은 인터넷 속도를 위한 디자인 사이트

일반 사용자는 사이트에 액세스할 때 평균 인터넷 속도가 빠르지만 일부 사용자는 일반 인터넷 속도보다 낮은 속도를 경험합니다.

또한 일반적으로 인터넷 속도가 빠른 사용자라도 때때로 연결이 불안정할 수 있습니다. 이를 염두에 두고 웹사이트를 디자인하면 모든 사람이 항상 웹사이트에 액세스할 수 있도록 할 수 있습니다.

웹사이트가 HTML 텍스트로만 작성되어야 한다는 의미라고 생각할 수도 있지만, 이는 그렇지 않습니다. 흐름 표준에는 다음이 포함될 수 있습니다.

• 페이지가 25kb 이하인지 확인하십시오. 목표는 약 15초 이내에 웹사이트 데이터를 로드하는 것입니다.
• CSS(Cascading Style Sheet)를 사용하여 사이트의 이미지를 줄이고 사이트 구조를 깔끔하게 유지하십시오.
• 사이트 페이지를 캐시할 수 있는지 확인하여 사이트를 자주 방문하는 방문자의 로드 시간을 줄입니다.
• PDF와 같은 대용량 파일에 대한 링크를 피하되 그러한 링크가 필요한지 확인하십시오. 파일 크기를 표시합니다.
• 사이트에 처음 로드되는 콘텐츠는 다른 정보가 로드되는 동안 독자가 ​​몇 초만 더 기다리도록 동기를 부여하므로 매우 중요해야 합니다. 따라서 귀중한 정보를 먼저 두십시오.

결론

웹 사이트를 액세스 가능하게 만드는 데는 많은 계획이 필요합니다. 이것은 사이트를 처음부터 만들거나 현재 사이트를 조정하려는 경우에 해당됩니다. 시간을 내어 다양한 제한 사항을 가진 사용자가 웹사이트와 상호 작용할 수 있는 방법과 더 나은 경험을 제공하는 방법에 대해 생각해 보십시오.