접근성 및 제목: 시각 장애가 있는 사용자를 위한 디자인

웹사이트나 앱에서 제목을 사용하는 방법과 같은 작은 세부 사항으로 인해 잠재 고객이나 판매 비용이 발생할 수 있습니다. 웹 사이트에 액세스할 수 있어야 하는 이유, 액세스할 수 없는 경우 발생할 수 있는 일 및 페이지를 통해 사용자를 올바르게 안내하기 위해 제목을 사용하는 방법에 대한 모범 사례를 계속 읽으십시오.

접근성의 경우

새 웹사이트를 디자인하거나 기존 웹사이트를 업데이트할 때 제목을 쉽게 간과할 수 있습니다. 마케터는 디자인의 미학적 측면에 더 집중하고 실용적인 측면에는 덜 집중하는 경향이 있습니다. 시각적 요소가 웹사이트의 사용자 경험(UX)에서 중요한 역할을 하는 것은 사실이지만 시각 장애가 있는 사용자가 더 쉽게 액세스할 수 있도록 하면 전환하는 방문자의 수가 증가할 수 있습니다.

통계는 접근성에 대한 우리의 사례를 강화합니다.

• 전 세계적으로 약 2억 5,300만 명이 시력 장애를 겪고 있습니다.
• 매일 250명이 영국에서 시력을 잃기 시작합니다.
• 영국에서 2 백만 이상의 사람들이 드라이브에 자신의 일상 생활 예를 들어 무능력에 큰 영향을 미친다 시력 손실과 함께 생활
• 연령 관련 변성은 성인 실명의 주요 원인입니다 .

2050 년 까지 영국에서 410만 명이 시력 상실의 영향을 받을 것으로 예상 됨에 따라 기업은 웹사이트를 모든 청중에게 적용하지 않을 여유가 없습니다. 이는 대상 시장이 시력 문제를 겪을 가능성이 더 높은 고령 인구 통계학적인 경우 특히 중요합니다.

제목을 올바르게 사용하는 것과 같은 간단한 측면은 큰 차이를 만들 수 있으며 적용하는 것은 어렵지 않습니다. 소송을 진행하는 비용도 절약할 수 있습니다.

도미노의 경우

도미노 피자는 시각 장애가 있는 사용자의 접근성을 무시하는 데 비용이 얼마나 많이 드는지를 보여주는 좋은 예입니다.

시각 장애인 미국 고객은 2016년에 토핑을 선택하고 할인 코드를 사용하고 레스토랑의 iPhone 앱에서 주문을 완료하는 데 어려움을 겪은 후 불만을 제기했습니다. 문제는 앱이 휴대전화의 화면 읽기 소프트웨어와 통합되지 않았다는 것입니다. 회사의 앱과 웹사이트에는 iPhone이 옵션을 읽을 수 있도록 하는 올바른 코드가 없었습니다.

판사들은 처음에 도미노의 편을 들었지만, 항소 법원은 지난주에 “ 도미노 웹사이트와 앱의 접근 불가 주장이 공공 장소인 물리적 피자 프랜차이즈의 상품과 서비스에 대한 접근을 방해 한다는 이유로 고객의 손을 들어줬다”고 판결했다. 숙박 ”.

영국에서는 시각 장애인의 로얄 국립 연구소는 또한 숨은 대한 주석 판결 환영 "모든 조직은 자신의 웹 사이트 및 애플리케이션이 포함 시력 명, 시각 장애인에 의해 부분적으로 사용될 수 있음을 보장하는 평등 법 2,010 아래에 책임이있다 스크린 리더를 사용하는 사람”.

기업이 웹사이트를 보다 쉽게 ​​액세스할 수 있도록 하는 다양한 방법이 있으며 제목 태그를 올바르게 사용하면 사용자가 페이지를 탐색하는 데 많은 도움이 됩니다.

접근성을 위한 표제 모범 사례

부분적으로는 개발자가 디자인을 너무 밀접하게 따르거나 디자이너가 제목을 사용하는 올바른 방법을 인식하지 못하기 때문에 제목을 혼동하고 오용하는 경우가 많습니다.

제목이 무엇인지 확실하지 않은 경우 W3C에는 좋은 정의가 있으며 Yoast는 SEO 사용에 대해 설명합니다.

W3C는 올바른 사용법을 다음과 같이 정의합니다.

“H1에서 H6까지 6개의 표제 요소는 섹션 표제를 나타냅니다. 제목의 순서와 발생이 HTML DTD에 의해 제한되지는 않지만 문서 는 수준 (예: H1에서 H3으로)을 건너뛰지 않아야 합니다. 이러한 문서를 다른 표현으로 변환하는 것은 종종 문제가 되기 때문입니다."

제목의 올바른 사용은 사람들과 Google이 페이지를 읽는 방식에 영향을 미칠 뿐만 아니라 스크린 리더가 사용자에게 콘텐츠를 표시하는 방식에도 큰 영향을 미칩니다. 접근성 도구를 사용하는 사람들은 제목을 통해 페이지를 탐색할 수 있으므로 중요한 말을 할 경우 의도한 대로 구조적으로나 시각적으로 배치해야 합니다.

페이지를 만들 때 제목에 액세스할 수 있도록 하기 위해 추가 작업이 필요하지 않습니다. 올바른 사용법을 따르면 접근성 기준이 충족됩니다. 제목에 대한 W3c 접근성 조언은 이것을 아주 잘 설명하고 있으며, 보시다시피 접근성뿐만 아니라 구조적으로나 시각적으로 의미가 있습니다.

제목은 어떻게 확인합니까?

개발자나 테마가 올바른 제목 사용을 따른다면 간단히 콘텐츠를 추가하고 편집기/CMS를 통해 올바른 방식으로 제목을 추가할 수 있어야 합니다.

부수적으로 모든 곳에 제목을 추가할 필요가 없습니다. 간단한 H1(일반적으로 페이지 제목) 다음에 H2가 오는 것으로 충분합니다. 그러나 특히 긴 페이지를 올바르게 구성하고 싶거나 다른 사람의 페이지를 확인하고 있다고 가정해 보겠습니다. 작업? 즐겨 사용하는 브라우저에 다음 플러그인 중 하나를 사용해 보세요.

• Chrome용 제목 맵
• Firefox용 제목 맵

일단 설치되면 사용하기가 매우 쉽고 잘못된 제목은 플러그인 버튼을 클릭할 때 사이드바에 빨간색으로 강조 표시됩니다. 이 기능은 또한 WordPress 5.0 릴리스의 Gutenberg 편집기에서 기본 옵션이 될 것이며 이 사이트에 설명되어 있습니다.

제목을 사용하는 올바른 방법:

제목을 사용하는 잘못된 방법:

아래 이미지는 구조가 아닌 스타일링에 사용되는 제목을 보여줍니다. 이렇게 하면 마크업 오류가 발생하고 의미상 올바르지 않습니다. 이런 식으로 사용하지 마십시오!

이 게시물이 이제 모든 사람을 위해 웹 페이지를 올바르게 구성하는 데 도움이 되기를 바랍니다.

웹 개발에 도움이 필요하면 주저하지 말고 저희에게 연락하십시오.