Skip to content

Tailwind:ScreenReaders

Tailwind에서 Screen reader를 적용하는 방법.

sr-only 

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

ScreenReaders에서 요소를 숨기지 않고 시각적으로 숨기는 데 사용합니다. 

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

not-sr-only 

position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;

See also

Favorite site