접근성 있는 헬프 센터 콘텐츠 만들기

사용 중인 플랜

Suite Growth 플랜 이상에서 사용 가능 모든 Guide 플랜에서 사용 가능

보조 기술에 의존하는 사람을 포함하여 모든 사람이 쉽게 접근하고 사용할 수 있는 헬프 센터 콘텐츠를 만들면 Zendesk를 이용하는 사람 누구나 성공적이고 긍정적인 경험을 할 수 있습니다.

참고: 헬프 센터에 대한 접근성을 최적화하려면 콘텐츠뿐만 아니라 헬프 센터 테마에도 접근할 수 있어야 합니다. 접근성 있는 헬프 센터 콘텐츠 만들기를 참조하세요.

이 문서는 다음 섹션으로 구성되어 있습니다.

콘텐츠 접근성 가이드라인
콘텐츠 접근성 리소스

콘텐츠 접근성 가이드라인

다음 표에는 모든 사람이 헬프 센터 문서에 접근하고 쉽게 사용할 수 있도록 하기 위한 가이드라인이 포함되어 있습니다.

참고: 모든 웹 콘텐츠 접근성 가이드라인에 대한 자세한 설명은 웹 콘텐츠 접근성 가이드라인(WCAG) 2.1 표준을 참조하세요.

문서 요소	가이드라인	예
본문 콘텐츠	모든 사람이 쉽게 이해할 수 있는 콘텐츠를 만들기 위해 다음을 사용합니다. 명확하고 간단한 말 짧은 단락 머리글 및 체계적 구성 글머리 기호 또는 번호 매기기 목록	접근성 결여 “위젯을 조립하려면 먼저 상자부터 살펴보세요. 상자가 손상된 경우(즉, 찌그러지거나 파손된 경우) 반드시 당사에 알려주세요. 이제 다음 작업을 수행할 수 있습니다. 나사를 장치 안에 삽입하고 조입니다. 장치를 켭니다.” 접근성 있음 위젯을 조립하려면 상자에 손상이 있는지 검사합니다. 손상된 경우에는 고객 서비스에 알립니다. 나사를 위젯 안에 삽입하고 조입니다. ON 버튼을 누릅니다.
머리글	가장 중요한 머리글을 <h1>로 시작하여 <h2>, <h3> 등으로 하위 머리글을 구성하여 계층적으로 머리글을 사용합니다. 페이지에서 정렬할 때 한 번에 한 수준씩 머리글을 늘리거나 줄입니다. 예를 들어 <h3> 뒤에는 <h5>나 <h6> 대신 <h4>를 사용합니다. 페이지 제목과 같이 가장 중요한 텍스트로 하나의 <h1>만 사용하도록 하세요. 머리글로 웹 페이지를 구성하면 인지 장애가 있는 사용자가 시각적으로 구분할 수 있고 화면 판독기 사용자가 더 쉽게 탐색할 수 있습니다.	접근성 결여(하위 머리글 없음) Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque volutpat turpis ac ultrices pulvinar. Nullam pharetra neque ac eros fermentum, sed tempor lorem tristique. Aenean ut malesuada diam. 접근성 결여(하위 머리글 수준 건너뜀) Lorem ipsum dolor sit amet, consectetur adipiscing elit. 머리글 1 Quisque tempor semper metus eu venenatis. 머리글 4 Etiam et vehicula ipsum. 접근성 결여(두 개 이상의 <h1>) Lorem ipsum dolor sit amet, consectetur adipiscing elit. 머리글 1 Quisque tempor semper metus eu venenatis. 머리글 1 Etiam et vehicula ipsum. 접근성 있음 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 머리글 1 Quisque tempor semper metus eu venenatis. Integer vehicula interdum velit, sit amet rutrum nisi sollicitudin ac. 머리글 2 Etiam et vehicula ipsum. Aenean placerat semper leo et bibendum.
이미지	이미지의 내용을 설명하는 목적이 있는 이미지에 대해 명확하고 간결한 대체 텍스트를 제공합니다. 화면 판독기 소프트웨어가 대체 텍스트를 소리내어 읽어줍니다. 사용 예 콘텐츠 블록에서는 콘텐츠 블록 편집기 도구 모음의 ALT 기능을 사용하여 대체 텍스트를 입력합니다. 문서에서는 소스 코드 편집기를 사용하여 이미지에 <img> 대체 속성을 추가합니다. 화면 판독기와 같은 보조 기술에서 무시할 수 있도록 널 대체 텍스트(`alt=""`)를 사용하여 장식 이미지를 숨기세요.	접근성 결여 접근성 있음
링크 색과 스타일	페이지 및 주변 텍스트와 대비되며 밑줄이나 아이콘 등 색이 없는 표시기를 포함하는 링크 색을 사용합니다. 이로써 색대비가 낮은 텍스트를 구분하는 데 어려움이 있거나 색맹인 사용자들이 링크에 쉽게 접근할 수 있습니다. 이미지를 링크로 사용하는 것을 피합니다. 필요한 경우 링크의 위치와 목적을 설명하는 대체 텍스트를 포함하는 이미지를 사용하세요.	접근성 결여 접근성 있는 헬프 센터 콘텐츠 만들기를 참조하세요. 참조 접근성 있음 접근성 있는 헬프 센터 콘텐츠 만들기를 참조하세요.
링크 텍스트	주변 콘텐츠 없이도 의미가 있는 링크 텍스트를 만듭니다. 예를 들어 “여기를 클릭” 또는 “자세히 알아보기” 등 모호한 링크 텍스트를 피하세요. 화면 판독기는 텍스트에 명시되지 않는 경우 링크가 어디로 연결되는지 해석할 수 없습니다. 링크 텍스트에 원시 URL을 사용하지 마세요. 화면 판독기는 길이에 관계없이 전체 URL을 사용자에게 읽어줍니다.	접근성 결여 여기를 클릭 www.website.com/linkedpage.html을 참조하세요. 접근성 있음 접근성 리소스 목록 보기
제목	주제나 목적을 설명하는 페이지 제목을 사용합니다.	접근성 결여 “접근성 세부 정보” 접근성 있음 “접근성 있는 헬프 센터 콘텐츠 만들기”
동영상	폐쇄 자막을 지원하는 동영상 제공업체를 선택합니다. 폐쇄 자막은 청각 장애가 있거나 난청이 있는 사람들이 동영상에 더 쉽게 접근할 수 있도록 합니다. 동영상에 대한 대본과 오디오 설명을 제공합니다.	접근성 있음

콘텐츠 접근성 리소스

다음 리소스를 숙지하여 접근성 있는 헬프 센터 콘텐츠를 만드는 방법에 대해 자세히 알아보세요.