테마의 액세스 가능성
테마를 사용자 지정할 때는 온라인 스토어를 이용하기 쉽도록 디자인과 콘텐츠를 선택해야 합니다. 액세스 가능한 웹사이트는 장애가 있는 사람을 포함하여 누구나 사용할 수 있도록 설계된 웹사이트입니다. 온라인 스토어의 접근성을 염두에 두고 선택하면 모든 고객에게 포용적인 경험을 제공할 수 있습니다.
아래 지침은 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 Admin에서 제품 이미지에 대체 텍스트를 추가할 수 있습니다. 테마 편집기에서 테마의 다른 이미지에 대체 텍스트를 추가할 수 있습니다.
이미지에 대체 텍스트를 추가할 때는 눈을 감은 사람에게 이미지를 설명한다고 생각하고 텍스트를 선택하는 것이 좋습니다. 즉, 이미지가 보이지 않는 사람이 이미지를 떠올릴 수 있는 텍스트를 제공해야 합니다. 이미지를 설명하는 방법은 웹 페이지의 컨텍스트에 따라서도 달라집니다. 예를 들어 여행사와 아웃도어 장비 스토어는 이미지를 각기 다른 방식으로 설명할 수 있습니다. 다음 이미지를 살펴보십시오.
여행사는 두 친구가 여행 중인 국가/지역, 그리고 두 사람이 보고 있는 해변의 이름 등을 대체 텍스트로 추가할 수 있습니다. 반면 아웃도어 장비 스토어는 두 친구의 배낭 브랜드와 기능을 중점적으로 설명하는 대체 텍스트를 추가할 수 있습니다.
여행사는 "바닷가에 서 있는 두 사람"과 같은 대체 텍스트를 사용하면 안 됩니다. "포르투갈 라고스를 여행 중인 두 친구가 화창한 어느 날 파라이아 두 카밀로의 백사장을 바라보고 있습니다."와 같은 대체 텍스트를 추가하는 것이 좋습니다.
슬라이드 쇼 및 동영상 액세스 가능성
온라인 스토어에 동영상을 추가할 때는 시력이 나쁜 고객, 청각 장애가 있거나 청력이 약한 고객 또는 전정 기관 장애가 발생하기 쉬운 고객의 요구를 고려해야 합니다.
이러한 고객 중에는 웹 페이지의 콘텐츠를 읽어 주는 화면 리더의 텍스트 음성 변환 기능을 사용하는 고객도 있습니다. 그런데 동영상과 음악에서 오디오가 추가로 재생되면(특히 예상치 못한 상황에서 재생되는 경우) 이러한 기능을 사용하기가 어려워질 수 있습니다. 그러므로 청각 장애가 있거나 청력이 나쁜 고객도 콘텐츠에 액세스할 수 있도록 동영상에 선택 자막을 추가하는 것이 좋습니다.
전정 기관 장애가 있는 고객은 움직이는 콘텐츠를 보면 어지러움을 느낄 수 있습니다. 그러므로 슬라이드 쇼와 동영상이 자동으로 재생되지 않고 고객이 제어 버튼을 사용하여 슬라이드 쇼를 제어할 수 있도록 설정해야 합니다.
슬라이드 쇼
온라인 스토어에 슬라이드 쇼를 추가할 때는 다음 지침을 따르십시오.
- 슬라이드 쇼가 자동으로 재생되지 않도록 설정합니다.
- 슬라이드 쇼가 자동으로 재생되는 경우에는 고객이 슬라이드 쇼를 일시 정지, 진행 또는 중지하는 데 사용할 수 있는 슬라이드 쇼 제어를 포함해야 합니다.
동영상
온라인 스토어에 동영상을 추가할 때는 다음 지침을 따르십시오.
- 동영상이 자동으로 재생되지 않도록 설정합니다.
- 동영상이 자동으로 재생되는 경우에는 오디오를 음소거합니다.
- 오디오가 포함된 동영상은 다른 페이지 요소에 가려지지 않고 완전히 표시되어야 합니다. 그러면 선택 자막이 계속 표시됩니다.
- 대화가 포함된 동영상의 경우에는 텍스트 대본을 사용할 수 있습니다. 대본은 동영상이 재생되는 페이지에 포함할 수도 있고 별도의 페이지로 이동하는 링크로 제공할 수도 있습니다.
이러한 지침은 슬라이드 쇼에 포함되어 있는 동영상에도 적용됩니다.
키보드 지원
시각 장애나 행동 장애가 있는 고객은 키보드를 사용해 탐색을 하고 온라인에서 작업을 완료할 수도 있습니다. 이러한 고객은 시각적 표시기를 통해 웹 페이지에서 키보드의 포커스가 설정된 위치를 파악합니다. 아래 예제에서는 이메일 필드에 시각적 포커스 표시기가 있습니다.
테마의 스타일시트를 편집하는 경우 어떤 페이지 요소에서도 키보드 포커스 스타일을 제거하면 안 됩니다. 다음 지침을 따르십시오.
- 키보드 포커스 설정 시 모든 대화형 페이지 요소에는 시각적 표시기가 명확하게 표시되어야 합니다. 이러한 요소에는 링크, 버튼, 양식 필드 등이 있습니다.
리소스
이 문서에서 설명한 주제와 관련된 웹 액세스 가능성에 대해 자세히 알아보려면 다음 리소스를 참조하세요.
색상 대비 리소스
- 적절한 대비를 설정할 수 있는 색상(웹 액세스 가능성 이니셔티브의 문서)
- 대비 비율(두 색상 간의 대비 비율을 확인하는 데 사용할 수 있는 온라인 툴)
- Color Contrast Analyzer(Paciello Group에서 개발한 다운로드 가능한 대비 비율 분석 애플리케이션)
텍스트 리소스
- 16픽셀 글꼴 크기: 비용 낭비를 방지할 수 있는 본문의 최소 글꼴 크기(Smashing Magazine의 기사)
- 텍스트 정렬(Web AIM의 문서)
- 링크 표시(Web AIM의 문서)
- 콘텐츠 구조에 제목 사용(Web AIM의 문서)
대체 텍스트 리소스
- 텍스트 음성 변환(웹 액세스 가능성 이니셔티브의 문서)
- 대체 텍스트(Web AIM의 문서)
- 대체 텍스트 작성 시의 고려 사항(Medium의 문서)
슬라이드 쇼 및 동영상 리소스
- 전정 기관 장애 관련 기본 지침(The A11Y Project의 문서)
- 텍스트 음성 변환(웹 액세스 가능성 이니셔티브의 문서)
- 동영상 자막(웹 액세스 가능성 이니셔티브의 문서)
- 자동 자막 사용(YouTube 도움말의 문서)
- 자막(Vimeo 도움말 센터의 문서)
- 캐러셀 유용성(Nielsen Norman Group의 문서)