[IR기법] 가상선택자(:after, :before)를 이용해보기

 

안녕하세요. Hivelab 웹 표준개발1팀 김성재입니다.

 

*IR기법을 z-index text-indent를 사용하는 것이 아닌 가상선택자를
이용한 방법을 생각해 보았습니다.

[*IR(Image Replacement)기법: 이미지는
통으로 잘라서 쓰고 이미지에 들어 있는 컨텐츠 내용은 텍스트로 작성 후 숨기는 방식.]

 

일반적으로
사용하는 구조형태(심플한 구조)로는 스크린리더 & 고대비모드 대응을 동시에 할 수 없을 까?” 라는 생각이 들어 찾아보던 중..

‘IR기법, :before를 이용해보면 어떨까?’ 라는 제목의 글을 보게 되었습니다.

출처: http://mulder21c.com/94?category=19

 

[일반적인 구조
예시]

        1.
<a
href=”#”>
질문</a>

             A.
스크린리더 정상

             B.
고대비모드 확인 불가

        2.
<a href=”#”><span
class=”blind”>
질문</span></a>

             A.
스크린리더 정상

             B.
고대비모드 확인 불가

 

test_screen.jpg

 

아래 테스트 URL과 HTML/CSS입니다.

[Test URL]

http://jsfiddle.net/suzkim/bYUwL/3/

 

[HTML]






<strong>일반적인
방법
(text-indent 사용)</strong><br>


<button type=”button”
class=”normal”>
버튼이미지(버튼)</button>


<br>


<strong>color:transparent</strong><br>


<button type=”button”
class=”normal2″><span>
버튼이미지(버튼)</span></button>


<br>


<strong>color:transparent +
font-size:0</strong><br>


<button type=”button”
class=”normal3″><span>
버튼이미지(버튼)</span></button>


<br>


<strong>color:transparent + 가상선택자(:after)</strong><br>


<button type=”button”
class=”play2″>
버튼이미지(버튼)</button>


<br>


<strong>color:transparent + 가상선택자(:before)</strong><br>


<button type=”button”
class=”play”>
버튼이미지(버튼)</button>


 


[CSS]







/* 가상선택자 방법 */


.box{


             margin:20px;


             padding:50px;


             border:1px
solid #000


}


button.play,button.play2{


             position:relative;


             width:210px;


             height:63px;


             background:transparent
url(img/logo_tit.jpg) no-repeat;


             color:transparent;


             cursor:pointer


}


button.play:before,button.play2:after{


             position:absolute;


             top:0;


             left:0;


             width:210px;


             height:63px;


             background:transparent;


             color:red;


             z-index:-1;


             content:’버튼이미지(after)’;


             vertical-align:middle


}


button.play:before{


             content:’버튼이미지(before)’


}



/* 일반방법 */


.normal{


             overflow:hidden;


             width:210px;


             height:63px;


             background:url(img/logo_tit.jpg)
no-repeat;


             cursor:pointer;


             text-indent:-9999px


}


.normal2,.normal3{


             width:210px;


             height:63px;


             background:url(img/logo_tit.jpg)
no-repeat;


             cursor:pointer


}


.normal2 span{


             position:relative;


             color:transparent


}


.normal3 span{


             color:transparent;


             font-size:0;


             line-height:0


}


 

[PC 테스트 결과 (IE8 이상의 환경)]

(가상선택자는 IE7에서
적용되지 않습니다)

 

    1. 스크린리더 사용 시 정상으로 읽어 줌.

  (‘Content’ 의 내용은 읽지 않음.)

음성내용 :버튼이미지(버튼)’

 

 

 2. 고대비모드 확인 시 대체텍스트
정상출력 됨.

 

[PC_고대비모드 시 익스플로러 (7)]

PC_고대비시정상노출.png

 

 

 

 

 

 

3. 이미지가 로드 되지 않으면 가상선택자에 지정해놓은 content값이 보여짐

 

[PC_이미지 로딩지연&실패 시]

PC_이미지로딩X.png

 

 

 

 4. 시각적으로 감출 수 있음 (color:transparent _ But ! 드래그하여 영역을 잡으면 보임.)

 [PC_마우스 드래그 시]

PC_드래그시보임.png

  

 

 

[모바일 테스트 결과]

 


 

 1. 터치드래그 시 투명으로 되어있는 텍스트가 보이지 않습니다.

 

    [터치드래그 시]

영역을 잡았을때.png

 

 

 2. IOS에서 지원하는 ‘Voice Over’ Android‘Talk Back’ 에서도 정상적으로 읽어줍니다.

(‘Content’ 의 내용은 읽지 않음.)

음성내용 :버튼이미지(버튼)’

 

 3. 고대비 모드를 켠 상태에서도 정상 노출이 됩니다.

   [모바일 고대비모드 화면 (아이폰5 IOS:6.0.1)]

모바일_고대비일때.png

 

 

 4. 이미지가 로드 되지 않으면 가상선택자에
지정해놓은 content값이 보여짐.

   [Mobile_이미지 로딩지연&실패 시]

이미지로딩X.png

 

 

 

[결론]

 

 

[(터치)드래그 시]













PC



vs



Mobile



사용불가(텍스트 보임)



 



사용가능


 

 

 

[스크린 리더]













PC



vs



Mobile



정상



 



정상


 

 

 

[고대비모드]













PC



vs



Mobile



정상



 



정상


 

 

 

[종합]

































 



PC



vs



Mobile



(터치)드래그 시



사용불가(텍스트 보임)



 



사용가능



스크린리더



정상동작



 



정상동작



고대비모드



정상동작



 



정상동작



실제 사용여부



(IE7 X)사용 불가



 



사용가능


 

 

 

1.
스크린리더와 고대비모드 대응을 동시에
하기 위해선 빈 코드를 삽입하여 적용해야 함.

2.
빈 태그를 삽입하지 않고 두 가지
대응을 하기 위해 간략한 구조에 가상선택자텍스트 투명화를 사용.

3.
테스트 결과 스크린리더+고대비모드 동시 대응 가능하지만,

       IE7 을 대응하는
곳이 많기 떄문에 PC에서는 사용 불가능.

모바일에서는 사용가능.

 

 

 

테스트 환경

 

PC : Windows7 (IE8,9,10, FireFox, Chrome,
Opera, Safari)

 

Mobile : iPhone5 (6.0.1)

 

             GalaxyS2
(2.3.2)