harborandpine.example

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: 키보드 포커스가 쿠키 배너에 갇힘(WCAG 2.1.2).
위치: 페이지 1개에서 1건, 예: /.

브라우저가 렌더링한 실패 요소 하나:
```html
Settings
```

중요한 이유: 포커스가 갇히면 키보드만 사용하는 사람과 스크린 리더 사용자는 쇼핑을 전혀 할 수 없습니다(WCAG 2.1.2 키보드 트랩 없음).

변경해야 할 내용:
- 쿠키 또는 동의 배너 앱의 설정에 접근성이나 포커스 트랩 관련 옵션이 있는지 확인하거나, 앱 개발사에 수정을 요청하십시오.
- 모달은 열려 있는 동안에만 포커스를 내부에 둘 수 있으며, Escape 키로 닫히고 포커스를 원래 위치로 되돌려야 합니다.

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: 키보드로 상품 옵션을 선택할 수 없음(WCAG 2.1.1).
위치: 페이지 1개에서 1건, 예: /products/trail-daypack.

브라우저가 렌더링한 실패 요소 하나:
```html
<div class="size-option" data-fr="opt-1">S</div>
```

중요한 이유: 많은 스크린 리더 사용자를 포함해 키보드만 사용하는 쇼핑객은 이 단계를 넘어갈 수 없습니다(WCAG 2.1.1).

변경해야 할 내용:
- 옵션 선택기를 보이는 레이블이 있는 기본 라디오 버튼(또는 <select>)으로 만들고, 레이블에 견본 스타일을 적용하십시오.
- 사용자 지정 요소를 유지한다면 각 옵션에 tabindex="0", role="radiogroup" 안에서 aria-checked가 있는 role="radio", 화살표 키와 Space 키 처리가 필요합니다. 기본 라디오 버튼을 쓰면 이 모든 기능이 기본으로 제공됩니다.

제안하는 변경 사항(테마의 상품 양식(옵션 선택기)):
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: 버튼에 반드시 인식 가능한 텍스트가 있어야 합니다(WCAG 4.1.2).
위치: 페이지 9개에서 41건, 예: /, /collections/all, /products/trail-daypack, /cart.

브라우저가 렌더링한 실패 요소 하나:
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

중요한 이유: WCAG 4.1.2는 모든 컨트롤에 이름이 있어야 한다고 요구합니다. 이름 없는 버튼은 수량 조절 버튼, 닫기 버튼, 슬라이더 화살표인 경우가 많습니다.

변경해야 할 내용:
- 아래 예시에서 해당 버튼을 찾으십시오.
- 버튼의 기능을 알려 주는 보이는 텍스트, 시각적으로 숨긴 텍스트 또는 aria-label을 추가하십시오(예: aria-label="Close" 또는 aria-label="Increase quantity").

제안하는 변경 사항(테마 코드(표시된 마크업으로 검색하십시오)):
```html
<button type="button" aria-label="[What this button does]">…</button>
```

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: 이미지는 반드시 대체텍스트를 가져야 합니다(WCAG 1.1.1).
위치: 페이지 7개에서 22건, 예: /, /collections/all, /products/trail-daypack, /products/pine-wool-beanie.

브라우저가 렌더링한 실패 요소 하나:
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

중요한 이유: WCAG 1.1.1은 의미 있는 이미지에 대체 텍스트를 요구합니다. 대체 텍스트가 없으면 스크린 리더 사용자는 사진이 어떤 상품인지 알 수 없습니다.

변경해야 할 내용:
- Shopify 관리자에서 제품 > [상품] > 미디어를 열고 각 이미지를 클릭해 ‘대체 텍스트’를 입력하십시오. 섹션 이미지는 온라인 스토어 > 테마 > 사용자 지정을 열고 섹션 설정에서 이미지 대체 텍스트를 설정하십시오.
- 상품명, 색상, 보이는 각도처럼 쇼핑객에게 중요한 내용을 설명하십시오(예: ‘올리브색 캔버스 토트백, 정면’).
- 장식용 이미지는 스크린 리더가 건너뛰도록 빈 alt 속성(alt="")을 사용해야 합니다.

제안하는 변경 사항(상품 사진: Shopify 관리자 › 제품 › 미디어 › 대체 텍스트. 그 밖의 이미지: 테마 코드):
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: form 엘리먼트는 반드시 레이블을 가져야 합니다(WCAG 4.1.2).
위치: 페이지 6개에서 7건, 예: /products/trail-daypack, /cart, /products/pine-wool-beanie, /products/enamel-camp-mug.

브라우저가 렌더링한 실패 요소 하나:
```html
<input type="number" value="1" min="1">
```

중요한 이유: WCAG 1.3.1, 3.3.2, 4.1.2는 양식 필드에 레이블이 있어야 한다고 요구합니다. 뉴스레터 가입 필드와 검색 필드에서 흔히 발생합니다.

변경해야 할 내용:
- 각 필드에 <label for="field-id"> 요소를 지정하거나, 최소한 aria-label을 추가하십시오.
- 플레이스홀더 텍스트만으로는 레이블로 인정되지 않습니다.

제안하는 변경 사항(테마 코드(표시된 마크업으로 검색하십시오)):
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: select 엘리먼트는 반드시 접근 가능한 이름을 가져야 합니다(WCAG 4.1.2).
위치: 페이지 1개에서 1건, 예: /collections/all.

브라우저가 렌더링한 실패 요소 하나:
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

중요한 이유: WCAG 4.1.2는 선택 메뉴에 접근 가능한 이름이 있어야 한다고 요구합니다.

변경해야 할 내용:
- select에 연결된 <label> 요소나 aria-label="Sort by" 같은 aria-label을 추가하십시오.

제안하는 변경 사항(테마 코드(표시된 마크업으로 검색하십시오)):
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: 링크는 반드시 인식 가능한 텍스트를 가져야 합니다(WCAG 2.4.4, 4.1.2).
위치: 페이지 9개에서 36건, 예: /, /collections/all, /products/trail-daypack, /cart.

브라우저가 렌더링한 실패 요소 하나:
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

중요한 이유: WCAG 2.4.4와 4.1.2는 링크에 목적을 설명하는 접근 가능한 이름이 있어야 한다고 요구합니다.

변경해야 할 내용:
- 아래 예시에서 해당 링크를 찾으십시오. 대부분 <a> 태그 안의 아이콘이나 이미지입니다.
- 링크 안에 시각적으로 숨긴 텍스트를 넣거나 aria-label="Instagram", aria-label="Cart" 같은 aria-label을 추가하십시오.
- 링크가 이미지를 감싸고 있다면 대신 이미지에 의미 있는 대체 텍스트를 지정하십시오.

제안하는 변경 사항(테마 코드(표시된 마크업으로 검색하십시오)):
```html
<a href="/cart" aria-label="Cart">…</a>
```

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: 엘리먼트는 반드시 충분한 명도 대비를 가져야 합니다(WCAG 1.4.3).
위치: 페이지 9개에서 22건, 예: /, /collections/all, /products/trail-daypack, /cart.

브라우저가 렌더링한 실패 요소 하나:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

중요한 이유: WCAG 1.4.3은 일반 텍스트에 최소 4.5:1, 큰 텍스트에 최소 3:1의 대비율을 요구합니다. 흐릿한 가격, 배지, 배너는 저시력인 사람은 물론, 밝은 빛 아래에서는 누구에게나 읽기 어렵습니다.

변경해야 할 내용:
- 아래에 나열된 실패 요소를 열고 실패 요약에 나온 전경색과 배경색을 기록하십시오.
- 온라인 스토어 > 테마 > 사용자 지정 > 테마 설정 > 색상에서 해당 색 구성표의 텍스트 색상을 어둡게 하거나 배경을 밝게 해 대비율을 4.5:1 이상으로 만드십시오.
- 세일 배지, 플레이스홀더 텍스트, 푸터 링크, 이미지 위의 버튼에 특히 주의하십시오.

제안하는 변경 사항(테마 설정 › 색상 또는 테마의 CSS 파일):
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: 모든 페이지 콘텐츠는 랜드마크에 포함되어야 합니다.
위치: 페이지 9개에서 18건, 예: /, /collections/all, /products/trail-daypack, /cart.

브라우저가 렌더링한 실패 요소 하나:
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

중요한 이유: 랜드마크가 있으면 스크린 리더 사용자가 페이지의 각 영역으로 바로 이동할 수 있습니다. WCAG 1.3.1과 2.4.1을 뒷받침하는 권장 사례입니다.

변경해야 할 내용:
- 랜드마크 밖에 있는 콘텐츠(공지 바, 팝업, 채팅 위젯)를 적절한 랜드마크로 감싸거나 <main> 안에 넣으십시오.

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.

저는 harborandpine.example 사이트를 운영하고 있으며, 사이트 유형은 Shopify 스토어(Online Store 2.0 테마, Liquid 템플릿)입니다. 접근성 테스트에서 다음 문제가 발견되어 테마에서 수정하려고 합니다.

문제: 제목 수준은 한 단계씩 증가해야만 합니다.
위치: 페이지 7개에서 7건, 예: /collections/all, /products/trail-daypack, /pages/about, /products/pine-wool-beanie.

브라우저가 렌더링한 실패 요소 하나:
```html
<h3>Trail Daypack 22L</h3>
```

중요한 이유: 스크린 리더 사용자는 헤딩으로 페이지를 탐색합니다. WCAG 1.3.1을 뒷받침하는 권장 사례입니다.

변경해야 할 내용:
- 해당 섹션의 헤딩 수준을 조정해 수준을 건너뛰지 않고 순서대로 이어지게 하십시오.
- 시각적 스타일은 그대로 두고 태그만 바꾸십시오(크기는 CSS 클래스로 지정).

제안하는 변경 사항(테마 코드(표시된 마크업으로 검색하십시오)):
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

답변 규칙:
- 정확한 수정 내용을 수정 전과 수정 후로 보여 주고, 수정할 파일이나 설정의 이름을 알려 주십시오. 먼저 제 파일을 봐야 한다면 붙여 넣어 달라고 요청하십시오.
- 시각적 디자인과 기존 동작은 모두 그대로 유지하십시오.
- 상품명, 가격, 문구를 지어내지 말고 제가 채울 수 있는 플레이스홀더를 사용하십시오.
- 마지막에는 제가 직접 수정 결과를 확인하는 방법을 알려 주십시오.
- 키보드와 스크린 리더로 확인하는 방법도 포함해 주십시오.