테마의 액세스 가능성

테마를 사용자 지정할 때는 온라인 스토어를 액세스 가능한 상태로 유지하는 디자인과 콘텐츠를 선택하는 것이 좋습니다. 액세스 가능한 웹사이트는 장애가 있는 사용자를 포함하여 누구나 사용할 수 있도록 설계된 웹사이트입니다. 고객이 필요한 모든 기능을 사용할 수 있는 경험을 제공하려면 온라인 스토어의 액세스 가능성이 높아야 합니다.

아래 지침은 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 이상으로 설정합니다.
  • 텍스트 정렬을 양쪽 맞춤으로 설정하면 안 됩니다. 양쪽 맞춤을 사용하면 단어 사이의 간격이 일정하지 않습니다.

참고: 글꼴 패밀리가 다르면 글꼴 크기가 같더라도 더 작거나 크게 표시될 수 있습니다. 사용 중인 글꼴이 16px에서 다른 글꼴보다 작게 표시된다면 더 큰 크기를 사용하십시오.

텍스트 링크

텍스트에 링크를 추가할 때는 모든 고객이 해당 링크를 식별할 수 있도록 해야 합니다. 색상을 확인하기가 어려운 고객도 있으므로 색상만으로 일반 텍스트와 링크를 구분해서는 안 됩니다. 아래 예제에서 Discover our story라는 텍스트에는 밑줄이 있습니다. 즉, 해당 텍스트가 링크임을 표시하기 위해 색상 변경이 아닌 다른 방법도 사용되었습니다.

'Discover our story and meet the people that make our brand what it is.'라는 환영 메시지 'Discover our story'라는 텍스트는 링크임을 나타내기 위해 빨간색으로 설정되어 있으며 밑줄이 표시됩니다.

테마의 스타일시트를 편집하는 경우 텍스트 링크 스타일을 제거하면 안 됩니다. 다음 지침을 따르십시오.

  • 텍스트 링크에는 밑줄을 설정하거나 일반 텍스트와 구별되는 기타 표시 방법을 사용합니다.

이미지의 대체 텍스트

온라인 상점에 이미지를 추가할 때는 시각 장애가 있거나 시력이 약한 고객도 이미지를 확인할 수 있도록 하는 것이 중요합니다. 이렇게 하려면 각 이미지를 정확하게 설명하는 대체 텍스트를 추가하면 됩니다. 화면 리더를 사용하는 고객은 대체 텍스트를 통해 온라인 스토어의 이미지 콘텐츠를 파악할 수 있습니다.

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

이미지에 대체 텍스트를 추가할 때는 눈을 감은 사람에게 이미지를 설명한다고 생각하고 텍스트를 선택하는 것이 좋습니다. 즉, 이미지가 보이지 않는 사람이 이미지를 떠올릴 수 있는 텍스트를 제공해야 합니다. 이미지를 설명하는 방법은 웹 페이지의 컨텍스트에 따라서도 달라집니다. 예를 들어 여행사와 아웃도어 장비 스토어는 이미지를 각기 다른 방식으로 설명할 수 있습니다. 다음 이미지를 살펴보십시오.

어깨동무를 하고 바다를 바라보는 배낭을 멘 두 친구

여행사는 두 친구가 여행 중인 국가/지역, 그리고 두 사람이 보고 있는 해변의 이름 등을 대체 텍스트로 추가할 수 있습니다. 반면 아웃도어 장비 스토어는 두 친구의 배낭 브랜드와 기능을 중점적으로 설명하는 대체 텍스트를 추가할 수 있습니다.

여행사는 "바닷가에 서 있는 두 사람"과 같은 대체 텍스트를 사용하면 안 됩니다. "포르투갈 라고스를 여행 중인 두 친구가 화창한 어느 날 파라이아 두 카밀로의 백사장을 바라보고 있습니다."와 같은 대체 텍스트를 추가하는 것이 좋습니다.

슬라이드 쇼 및 동영상 액세스 가능성

온라인 스토어에 동영상을 추가할 때는 시력이 나쁜 고객, 청각 장애가 있거나 청력이 약한 고객 또는 전정 기관 장애가 발생하기 쉬운 고객의 요구를 고려해야 합니다.

이러한 고객 중에는 웹 페이지의 콘텐츠를 읽어 주는 화면 리더의 텍스트 음성 변환 기능을 사용하는 고객도 있습니다. 그런데 동영상과 음악에서 오디오가 추가로 재생되면(특히 예상치 못한 상황에서 재생되는 경우) 이러한 기능을 사용하기가 어려워질 수 있습니다. 그러므로 청각 장애가 있거나 청력이 나쁜 고객도 콘텐츠에 액세스할 수 있도록 동영상에 선택 자막을 추가하는 것이 좋습니다.

전정 기관 장애가 있는 고객은 움직이는 콘텐츠를 보면 어지러움을 느낄 수 있습니다. 그러므로 슬라이드 쇼와 동영상은 자동으로 재생되지 않도록 설정해야 합니다.

슬라이드 쇼

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

  • 슬라이드 쇼가 자동으로 재생되지 않도록 설정합니다.
  • 슬라이드 쇼가 자동으로 재생되는 경우에는 고객이 슬라이드 쇼를 일시 정지하거나 중지하는 데 사용할 수 있는 설정을 포함해야 합니다.

동영상

온라인 스토어에 동영상을 추가할 때는 다음 지침을 따르십시오.

  • 동영상이 자동으로 재생되지 않도록 설정합니다.
  • 동영상이 자동으로 재생되는 경우에는 오디오를 음소거합니다.
  • 오디오가 포함된 동영상은 다른 페이지 요소에 가려지지 않고 완전히 표시되어야 합니다. 그러면 선택 자막이 계속 표시됩니다.
  • 대화가 포함된 동영상의 경우에는 텍스트 대본을 사용할 수 있습니다. 대본은 동영상이 재생되는 페이지에 포함할 수도 있고 별도의 페이지로 이동하는 링크로 제공할 수도 있습니다.

이러한 지침은 슬라이드 쇼에 포함되어 있는 동영상에도 적용됩니다.

키보드 지원

시각 장애나 행동 장애가 있는 고객은 키보드를 사용해 탐색을 하고 온라인에서 작업을 완료할 수도 있습니다. 이러한 고객은 시각적 표시기를 통해 웹 페이지에서 키보드의 포커스가 설정된 위치를 파악합니다. 아래 예제에서는 이메일 필드에 시각적 포커스 표시기가 있습니다.

이메일과 비밀번호용 양식 필드가 표시되는 온라인 스토어의 고객 로그인 화면 이메일 필드에는 파란색 윤곽선이 표시됩니다.

테마의 스타일시트를 편집하는 경우 어떤 페이지 요소에서도 키보드 포커스 스타일을 제거하면 안 됩니다. 다음 지침을 따르십시오.

  • 키보드 포커스 설정 시 모든 대화형 페이지 요소에는 시각적 표시기가 명확하게 표시되어야 합니다. 이러한 요소에는 링크, 버튼, 양식 필드 등이 있습니다.

리소스

이 문서에서 설명한 주제와 관련된 웹 액세스 가능성에 대해 자세히 알아보려면 다음 리소스를 참조하십시오.

색상 대비 리소스

텍스트 리소스

대체 텍스트 리소스

슬라이드 쇼 및 동영상 리소스

키보드 지원 리소스

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험