.sr-only스크린 리더에 특별히 사용되는 클래스 이름입니다. 모든 클래스 이름을 사용할 수 있지만 .sr-only일반적으로 사용됩니다. 규정 준수를 염두에두고 개발하는 데 신경 쓰지 않으면 제거 할 수 있습니다. 이 클래스의 CSS는 데스크탑 및 모바일 장치 브라우저에서 볼 수 없으므로 제거되면 UI에 영향을 미치지 않습니다.

.sr-only목적을 설명하고 스크린 리더를 사용하는 방법에 대한 정보가 누락 된 것 같습니다 . 무엇보다도 장애가있는 사용자를 항상 염두에 두는 것이 매우 중요합니다. 손상은 508 준수의 목적 ( https://www.section508.gov/ )이며 부트 스트랩이이를 고려하는 것이 좋습니다. 그러나 .sr-only508 준수를 위해 고려해야 할 전부는 아닙니다. 색상, 글꼴 크기, 탐색을 통한 접근성, 설명자, aria 사용 등을 사용할 수 있습니다.

그러나 .sr-onlyCSS는 실제로 무엇을합니까? 에 사용되는 CSS에는 약간 다른 변형이 .sr-only있습니다. 내가 사용하는 몇 가지 중 하나는 다음과 같습니다.

.sr-only {
    position: absolute;
    margin: -1px 0 0 -1px;
    padding: 0;
    display: block;
    width: 1px;
    height: 1px;
    font-size: 1px;
    line-height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
    outline: 0;
    }

데스크톱 및 모바일 브라우저에서 위의 CSS의 가죽 내용이 클래스에 싸여 있지만, JAWS 같은 화면 리더로 볼 수 있습니다 : http://www.freedomscientific.com/Products/Blindness/JAWS . 마크 업 예는 다음과 같습니다.

<a href="#" target="_blank">
    Click to Open Site
    <span class="sr-only">This is an external link</span>
</a>

또한 DOM 요소의 너비와 높이가 0이면 DOM에서 해당 요소를 볼 수 없습니다. 이것이 위의 CSS가를 사용하는 이유 width: 1px; height: 1px;입니다. 사용하여 display: none과에 CSS를 설정 height: 0하고 width: 0, 요소는 DOM 볼 때문에 문제가되지 않습니다. 위의 CSS를 사용하는 width: 1px; height: 1px;것은 데스크탑 및 모바일 브라우저에서 컨텐츠를 볼 수 없게하고 (화면없이 overflow: hidden컨텐츠가 화면에 계속 표시됨) 스크린 리더에게 보이도록 하기위한 것만은 아닙니다 . 데스크톱 및 모바일 브라우저에서 콘텐츠를 숨기는 것은이 오프셋을 추가하여 수행 width: 1px하고 height: 1px사용하여 앞서 언급 한 :

position: absolute;
margin: -1px 0 0 -1px;
overflow: hidden;

마지막으로, 화면 판독기가 장애가있는 사용자에게보고 릴레이하는 내용을 잘 이해하려면 브라우저의 페이지 스타일을 끄십시오. Firefox의 경우 다음을 수행하여이를 수행 할 수 있습니다.

View > Page Style > No Style

여기에 제공된 정보가 다른 답변 외에 다른 사람에게도 추가로 사용되기를 바랍니다.

답변

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Error:</span>
  Enter a valid email address
</div>