Bootstrap 3의 'sr-only' 클래스는 스크린 리더 접근성을 어떻게 향상시킵니까?

스크린 리더 지원: Bootstrap 3에서 sr-only의 역할 발견

Bootstrap 3에서 sr-only 클래스는 중요한 역할을 합니다. 웹 접근성에서의 역할. 화면 판독기에 대한 정보만 숨기므로 보조 기술 사용자가 웹 페이지를 효과적으로 탐색하고 이해할 수 있습니다.

Bootstrap 문서에 따르면 sr 전용 요소는 시각적 렌더링에서 숨겨지며 레이아웃에서 공간을 차지하지 않습니다. 이를 통해 개발자는 사용자 인터페이스를 복잡하게 하지 않고도 화면 판독기에 레이블 및 기타 정보 텍스트를 제공할 수 있습니다.

다음 예를 고려하세요.

<div class="btn-group">
    <button type="button" class="btn btn-info btn-md">Departments</button>
    <button type="button" class="btn btn-info dropdown-toggle btn-md" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Sales</a></li>
        <li><a href="#">Technical</a></li>
        <li class="divider"></li>
        <li><a href="#">Show all</a></li>
    </ul>
</div>

이 예에서 sr 전용 클래스는 범위 요소는 시각적 보기에서 "Toggle Dropdown" 텍스트를 숨깁니다. 그러나 보조 기술은 이 텍스트를 소리내어 읽어 사용자에게 버튼의 기능을 알려줍니다.

접근성을 위해 sr 전용 클래스를 유지하는 것이 중요합니다. 이를 제거하면 화면 판독기 기능이 방해되고 웹사이트의 포용성이 저하될 수 있습니다.

클래스는 다음을 포함하여 CSS 스타일을 적용하여 요소를 숨깁니다.

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

접근성을 우선시하는 경우 다음과 같은 리소스를 고려하세요. 장애가 있는 개인의 사용자 경험을 향상시키기 위한 WAI(Web Accessibility Initiative) 및 MDN 접근성 문서.

위 내용은 Bootstrap 3의 'sr-only' 클래스는 스크린 리더 접근성을 어떻게 향상시킵니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!