[HTML&CSS] 스크린 리더가 이미지를 무시하는 방법들

css의 background 속성 사용

{
  background-image: url("bg.gif");
}

 

 

<img> 태그에 alt 속성을 빈 값으로 사용

<img src="spacer.gif" alt="">

 

<img> 태그에 aria-hidden 사용

<img src="bg.jpg" aria-hidden="true">

 

<img> 태그에 role="presentation" 사용

<img src="bg.jpg" role="presentation">

 

 

이외의 것들

.visually-hidden {
  /* 일반적인 흐름에서 항목을 제거 */
  position: absolute;
  /* 잘못 발음되거나 뭉개지는 텍스트를 위한 해결책 */
  white-space: nowrap;
  /* 가능한 가장 작은 크기로 설정 (일부 화면 낭독기는 높이와 너비가 0인 요소를 무시함) */
  width: 1px;
  height: 1px;
  /* 크기 조정 후 넘치는 콘텐츠 숨기기 */
  overflow: hidden;
  /* 요소의 크기를 변경할 수 있는 모든 속성 초기화 */
  border: 0;
  padding: 0;
  /* 클리핑은 요소의 어떤 부분이 표시될지 정의함. */
  /* 구식 clip 속성은 구형 브라우저를 위함 */
  clip: rect(0 0 0 0);
  /* 최신 브라우저를 위한 clip-path. inset(50%)는 콘텐츠를 사라지게 하는 내부 사각형을 정의함. */
  clip-path: inset(50%);
  /* 현재 아무도 정확히 왜 margin: -1px이 있는지 확실하지 않음. 게다가 이것이 문제를 일으킬 수 있음 (참조:https://github.com/h5bp/html5-boilerplate/issues/1985). */
  margin: -1px;

 

참고

https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore#less-than-img-greater-than-aria-hidden

https://soobing.github.io/a11y/writing-css-with-accessibility-in-mind/