접근성 높은 생성형 콘텐츠

• content를 사용하여 의미 있는 텍스트 (라벨, 상태, 안내)를 전달하지 마세요. DOM에 유지하세요 (WCAG F87). 대체 텍스트 인수는 장식이 실수로 의미를 전달하는 경우에 대한 피해 감소이며 라이선스가 아닙니다.
• content의 대체 텍스트 인수를 사용하여 스크린 리더용 대체 텍스트를 제공합니다. 예: content: url(cloud.svg) / "Save";
• content: "text" / "";를 사용하여 순수하게 장식용인 텍스트가 스크린 리더에 읽히지 않도록 합니다.
• 이미지에 빈 대체 텍스트 인수를 사용하지 마세요. 기본적으로 이미지는 이미 프레젠테이션용입니다. 예를 들어 content: url(cloud.svg) / "";은 잘못된 표현입니다.
• 설명이 공식 그림 이모티콘 이름과 다른 경우가 아니라면 대체 텍스트 인수를 사용하여 그림 이모티콘을 설명하지 마세요. 예를 들어 content: "🎉" / "celebration";는 안 되지만 content: "🎉" / "Yay!";는 괜찮습니다.

텍스트가 기본 값과 다르고 DOM에 아직 없는 경우에만 대체 텍스트 인수를 사용합니다. 즉, 다음과 같이 작성하면 안 됩니다.

HTML:

<button class="save">Save</button>

CSS:

button.save::before {
  content: url(cloud.svg) / "Save";
}

스크린 리더는 이를 '저장 저장'으로 읽습니다.