IR 기법 - 대체 텍스트 숨김

IR 기법이란

이미지 대체 텍스트 제공을 위한 CSS 기법으로, 다양한 CSS 기법을 사용하여 이미지 대체 텍스트를 제공할 수 있습니다.

종류

1. padding-top 사용

width와 hegiht 속성을 적용하고 overflow 속성을 적용합니다. 그리고 box-sizing: border-box;를 적용해야지 padding-top 속성을 적용했을 때 대체 텍스트가 숨김 처리됩니다.

2. text-indent 사용

padding-top을 사용할 때와 똑같이 width와 height 속성을 적용하고 overflow 속성을 적용합니다. 그 후 text-indent 속성을 사용하여 대체 텍스트를 숨길 수 있습니다. 대체 텍스트를 해당 width의 값만큼 들여 쓰기를 하면서 텍스트가 숨겨지는건데, 만약 높이값을 어느정도 가지고 있으면 들여쓰기 후 텍스트가 개행돼서 2번째 줄에 텍스트 뒷부분이 보일 수 있습니다. 그렇기 때문에 개행을 막는 white-space: nowrap;을 적용시켜줘야 됩니다.

3. position: absolute; 사용

하나의 박스 안에 span 태그를 두 개 만들고, 하나에는 대체 텍스트를 적어주고 다른 하나에는 background-image를 줍니다. background-image를 부여한 span 태그에 position 속성에 absolute 값을 줘서 대체 텍스트가 쓰인 span 태그 위에 올려주면서 대체 텍스트를 숨길 수 있습니다.

위 방법들을 제외하고 다른 방법들을 더 찾아봤습니다.

aria-label 사용

예)

<button aria-label="이전 이벤트 보기"></button>

<button aria-label="다음 이벤트 보기"></button>

title 사용

예)

<button title="이전 이벤트 보기"></button>

<button title="다음 이벤트 보기"></button>