테마 접근성

테마를 사용자 지정할 때 온라인 스토어의 접근성을 유지하는 데 도움이 되는 디자인 및 콘텐츠를 선택해야 합니다. 접근성 높은 웹사이트는 장애가 있는 사람을 포함한 모든 사람이 사용할 수 있도록 디자인됩니다. 온라인 스토어의 접근성을 염두에 두고 선택하면 모든 고객에게 포용적인 경험을 제공하는 데 도움이 될 수 있습니다.

아래 지침은 웹 콘텐츠 접근성 지침(WCAG)을 염두에 두고 만들어졌습니다. 접근성 높은 웹사이트를 만들 때 고려해야 할 요소가 많기 때문에 아래 지침만 따른다고 해서 온라인 스토어의 접근성이 완전히 보장되는 것은 아닙니다. WCAG 웹사이트를 방문하거나 아래에 나열된 리소스를 참조하여 웹 접근성에 대해 자세히 알아볼 수 있습니다.

이 페이지의 내용

텍스트 접근성

시각 장애가 있거나 빽빽한 텍스트 블록을 읽는 데 어려움을 겪는 고객이 온라인 스토어의 텍스트를 읽을 수 있도록 하는 것이 중요합니다.

색상 대비

온라인 스토어의 색상을 편집할 때 모든 텍스트가 색맹이거나 시각 장애가 있는 고객에게 접근 가능하도록 해야 합니다. 이러한 고객은 적절한 색상 대비를 통해 시각적으로 사물을 구별합니다. 온라인 대비율 도구를 사용하여 스토어의 여러 부분에 대한 대비를 확인할 수 있습니다.

아래 예에서 텍스트의 배경 대비율은 2.4:1이며 일부 고객은 읽기 어렵습니다.

다음 예에서 텍스트의 대비율은 4.8:1이며 많은 고객이 더 쉽게 읽을 수 있습니다.

본문 텍스트, 머리글, 링크, 양식 필드를 포함한 모든 텍스트의 대비를 테스트하십시오. 다음 지침을 사용하십시오.

본문 텍스트와 버튼 텍스트 색상의 배경 대비율은 최소 4.5:1이어야 합니다.
머리글 및 기타 큰 텍스트(글꼴 크기 24px 이상) 색상의 배경 대비율은 최소 3:1이어야 합니다.
슬라이드 쇼, 배너, 동영상을 포함하여 이미지 위에 있는 모든 텍스트는 배경에 대해 충분한 대비율을 가져야 합니다. 큰 텍스트(글꼴 크기 24px 이상)의 경우 대비율이 최소 3:1이어야 합니다. 작은 텍스트의 경우 대비율이 최소 4.5:1이어야 합니다.
입력 테두리 및 아이콘을 포함한 텍스트가 아닌 요소 색상의 배경 대비율은 최소 3:1이어야 합니다.

텍스트 머리글

리치 텍스트 편집기를 사용하여 페이지에 머리글을 추가할 때는 순차적인 순서(1~6)를 유지하는 것이 중요합니다. 보조과학기술에서는 머리글을 사용하여 페이지 콘텐츠가 구성되는 방식을 전달합니다. 머리글 수준 2 다음에 머리글 수준 4가 오는 것과 같이 수준을 건너뛰면 사용자가 혼란스러워할 수 있습니다. 다음 지침을 사용하십시오.

머리글은 순차적으로 사용해야 하며 수준을 건너뛰어서는 안 됩니다.

텍스트 크기 및 정렬

테마의 타이포그래피 설정을 편집할 때는 고객이 편안하게 읽을 수 있도록 텍스트를 충분히 크게 설정하십시오.

또한 텍스트는 읽기 쉽도록 단어와 글자 간격이 일관되어야 합니다. 아래 예에서는 텍스트 정렬이 양쪽 맞춤으로 설정되어 단어 사이 간격이 일정하지 않습니다.

양쪽 맞춤으로 정렬된 텍스트 블록입니다. 텍스트의 각 줄이 공간을 끝에서 끝까지 채워 맞추기 위해 단어 사이의 간격이 다양하게 강제 적용됩니다.

다음 예에서는 텍스트 정렬이 왼쪽 맞춤으로 되어 단어 사이 간격이 일정합니다.

왼쪽 맞춤으로 정렬된 텍스트 블록입니다. 각 단어 사이에 일정한 간격이 있습니다.

텍스트의 크기와 정렬을 사용자 지정할 때는 다음 가이드라인을 따르십시오.

본문 텍스트의 최소 글꼴 크기는 16px에 해당합니다.
텍스트 정렬이 양쪽 맞춤이 아닙니다. 양쪽 맞춤 텍스트는 단어 사이의 간격을 일정하지 않게 만듭니다.

텍스트 링크

텍스트 링크는 밑줄이 있거나 일반 텍스트와 비교하여 시각적으로 구별되는 다른 스타일이어야 합니다. 일부 고객은 색상을 보는 데 어려움을 겪기 때문에 색상 변경만으로 링크를 일반 텍스트와 구별하는 데 의존할 수 없습니다.

텍스트 링크는 동일한 탭에서 열려야 합니다. 새 탭이나 창에서 열리는 링크는 특히 이전 창이 보이지 않는 모바일에서 혼란을 야기할 수 있으며, 화면 확대 기능을 사용하거나 기술에 익숙하지 않은 고객 등에게는 불편을 줄 수 있습니다.

테마의 스타일 시트를 편집하는 경우 텍스트 링크 스타일을 제거하지 않도록 하십시오. 다음 가이드라인을 따르십시오.

텍스트 링크에 밑줄이 있거나 색상 이외의 다른 시각적 구분 기호가 있어 고객이 일반 텍스트와 링크를 구별할 수 있습니다.
클릭하면 텍스트 링크가 같은 탭에서 열립니다.

이미지 대체 텍스트

온라인 스토어에 이미지를 추가할 때는 시각 장애가 있거나 저시력인 고객이 접근할 수 있도록 만드는 것이 중요합니다. 각 이미지를 정확하게 설명하는 대체 텍스트를 추가하여 접근성을 높일 수 있습니다. 스크린 리더를 사용하는 고객은 대체 텍스트에 의존하여 온라인 스토어에 있는 이미지의 콘텐츠를 전달받습니다.

Shopify 관리자에서 제품 이미지에 대체 텍스트를 추가할 수 있으며, 테마 편집기에서 테마의 다른 이미지에 대체 텍스트를 추가할 수 있습니다.

이미지에 대체 텍스트를 추가할 때 눈을 감고 있는 사람에게 이미지를 설명한다고 생각하는 것이 좋은 방법입니다. 상대방이 마음속으로 이미지를 그릴 수 있도록 도와주십시오. 이미지를 설명하는 방식은 웹 페이지의 컨텍스트에 따라 달라집니다. 예를 들어, 비즈니스가 여행사인 경우와 아웃도어 장비 스토어인 경우에 이미지를 다르게 설명할 수 있습니다. 다음 이미지를 예로 들어 보겠습니다.

여행사의 경우 두 친구가 여행하는 국가 및 지역, 그리고 이들이 바라보는 대양이나 바다의 이름을 언급할 수 있습니다. 반면, 아웃도어 장비 스토어의 경우 두 친구가 멘 백팩의 브랜드와 기능에 중점을 둘 수 있습니다.

비즈니스가 여행사인 경우, 좋지 않은 대체 텍스트의 예는 “바다 앞에 있는 두 사람”과 같을 수 있습니다. 같은 여행사의 좋은 대체 텍스트 예는 “맑은 날 포르투갈 라고스에서 여행하는 두 친구가 Praia do Camilo의 모래 해변을 바라보고 있음”과 같을 수 있습니다.

슬라이드 쇼 및 비디오 접근성

온라인 스토어에 비디오를 추가할 때는 저시력 고객, 청각 장애가 있거나 난청인 고객 또는 전정 장애에 영향을 받기 쉬운 고객의 요구 사항을 고려해야 합니다.

이러한 고객 중 일부는 웹 페이지의 콘텐츠를 소리 내어 읽어주는 스크린 리더의 텍스트 음성 변환 기능에 의존합니다. 비디오 및 음악에서 나오는 추가 오디오, 특히 예상치 못한 오디오는 이러한 경험을 어렵게 만들 수 있습니다. 청각 장애가 있거나 난청인 고객의 경우 콘텐츠에 액세스할 수 있도록 비디오에 폐쇄 자막을 추가하는 것이 좋습니다.

전정 장애가 있는 고객은 움직이는 콘텐츠에 어지러움을 느낄 수 있습니다. 따라서 슬라이드 쇼와 비디오가 자동으로 재생되지 않고 고객이 제어 버튼으로 슬라이드 쇼를 제어할 수 있도록 하는 것이 중요합니다.

슬라이드 쇼

온라인 스토어에 슬라이드 쇼를 추가할 때 다음 가이드라인을 따르십시오.

슬라이드 쇼는 자동으로 재생되지 않습니다.
슬라이드 쇼가 자동으로 재생되는 경우 고객이 슬라이드 쇼를 일시 중지, 진행 또는 중지하는 데 사용할 수 있는 슬라이드 쇼 컨트롤이 포함되어 있습니다.

비디오

온라인 스토어에 비디오를 추가할 때 다음 가이드라인을 따르십시오.

비디오는 자동으로 재생되지 않습니다.
비디오가 자동으로 재생되는 경우 오디오는 음소거됩니다.
오디오가 포함된 비디오의 경우 비디오가 완전히 표시되고 다른 페이지 요소에 의해 가려지지 않습니다. 이렇게 하면 폐쇄 자막이 계속 표시될 수 있습니다.
대화가 포함된 비디오의 경우 텍스트 스크립트를 사용할 수 있습니다. 이는 페이지에 포함되거나 별도 페이지로 연결되는 링크에 포함됩니다.

이러한 가이드라인은 슬라이드 쇼에 있는 비디오에도 적용됩니다.