CSS IR 기법

CHan·2022년 11월 30일
0
  1. IR(Image Replacement) 기법

    웹 접근성을 따르기 위해 이미지가 표시되지 않을 경우나
    시각적 도움이 필요한 이들에게 이미지 대신 대체 텍스트를
    제공하는 기법을 의미한다.
  2. img 태그의 alt 속성은?

    대체 텍스트를 사용하는 방법 중 하나는 img 태그의 alt 속성을
    이용하는 것이다. 하지만 IS(Image Sprite) 기법을 사용하는 경우가
    많기 때문에 대체 텍스트를 따로 분리도하고 화면에 보이지 않으면서도
    스크린리더에 읽힐 수 있도록 웹 접근성에 맞춰주어야 한다.
  3. 다양한 IR 기법

    !! BAD

    1) display: none
    	
        	시각적으로 표시가 되지 않고 영역도 차지하지 않는다.
            하지만 보조기기에도 정보를 전달하지 않도록 처리된다.
            
     2) visibility: hidden
     
     		시각적으로 표시가 되지 않으나 영역은 차지하게 된다.
            그렇기에 display와 마찬가지로 사용되지 않는다.
            
     3) zero pixel sizing
     
     		width와 height 그리고 font-size 모두 크기를 
            0으로 지정하는 방법이다.
            하지만 이 방법도 스크린리더가 읽지 못하고 스킵하는
            현상을 겪게 된다.   

    !! So So

     4) text-indent: -9999px
     
     		Phark method 방법으로 알려져 있으며, css의 들여쓰기
            기능을 이용하여 텍스트를 보이지 않게 하는 방법이다.
            하지만 텍스트 위치로 인해 업로드시 성능 저하와 구글 seo
            가이드에서 특정 텍스트를 사용자에게는 숨기고 검색엔진에는
            표시하는 경우를 피해야 할 사항이라고 말하고 있다.
            
            !! 하단 구글 SEO 기본 가이드 참조
            
     5) opacity: 0
     
     		투명하게 만드는 css 속성을 사용하는 것이지만
            위치를 그대로 잡고 있기 때문에 적합하지 않다.
            
     6) z-index: -1
     
     		텍스트를 컨텐츠 밑으로 숨기는 방법이지만 position 속성을 
            사용하여야 하고 초점 이동, 마우스 포인터 반응과 성능 이슈가 있다.         

    !! Best

     7) H5BP clip
     
     		H5BP(HTML5 Boilerplate)에서 사용하는 방법 중 하나로
            css 코드는 다음과 같다.
            
            .sr-only {
            	position: absolute;
                margin: -1px;
                width: 1px;
                height: 1px;
                white-spac: nowrap;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                clip-path: inset(50%);
              }
              
              !! size 이슈를 없애고자 width와 height 값을 1px 씩 준다
              !! clip은 position: absolute, fiexd와
                 overflow: hidden일 경우 적용된다.
                 
     8) H5BP 보완
     
     		.sr-only {
            	position: relative;
                z-index: -1px;
                display: inline-block;
                overflow: hidden;
                width: 1px;
                height: 1px;
                border: 0;
                clip: rect(1px, 1px, 1px, 1px);
                clip-path: inset(50%);
                word-break: initial;
                word-wrap: initial;
              }
              
              !! position: absolute일 경우 해당 요소가
                 BFC(block formatting context)로 변경되기
                 때문에 스크린 리더에 끊겨서 읽힐 수가 있다.
              !! inline-block 속성을 넣어줘서 너비와 높이값이
                 적용되도록 한다.
              !! margin에 음수값을 넣어주면 읽기 순서에 변형이 
                 되므로 z-index를 사용한다.
              !! clip의 최신 표준을 사용한다.
              

구글 seo 기본 가이드

            
profile
Hello World!

0개의 댓글