웹접근성 고려한 텍스트 숨기기

 

 

.a11y-hidden {
  overflow: hidden;
  position: absolute;
  clip:     rect(0 0 0 0); /* IE 6,7 */
  clip:     rect(0,0,0,0);
  width:    1px;
  height:   1px;
  margin:   -1px;
  border:   0;
  padding:  0;
}
caption.a11y-hidden {
  position: static;
}
.a11y-hidden.focusable:focus {
  overflow: visible;
  position: static;
  clip:     auto;
  width:    auto;
  height:   auto;
  margin:   0;
}

 

 

 

 

 

 

 

 

출처 : https://gist.github.com/yamoo9/9083f52066a078b7d8b86f36b3e81155