[웹접근성] 꾸밈 요소의 이미지 처리

 

이미지에는 alt값이 필수이다.

하지만 내용이 없는 꾸밈 요소의 이미지는 어떻게 처리하면 좋을까?

 

 

 

 

스크린리더가 이미지를 무시하는 좋은 방법

 

• css의 background 속성 사용

 

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

<img src="bg.jpg" alt="">

 

• <img> 태그에 aria-hidden 사용

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

 

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

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

 

 

 

스크린리더가 아이프레임을 무시하는 좋은 방법

<iframe role="presentation" tabindex="-1" title="hidden"></iframe>

 

 

 

이미지 폰트 사용시 주의

 

css의 가상 선택자의 content는 스크린리더가 읽는다.

이미지 폰트를 스크린리더가 읽지 못하도록 aria-hudden="true" 속성을 삽입하고 숨김 텍스트로 그 의미를 삽입한다.

<a href="/icon/address">
	<i class="icon-address" aria-hidden="true"></i>
    <span class="hide">address</span>
</a>

 

 

 

---

출처: https://aoa.gitbook.io/skymimo/aoa-2019/tips-2/ignore