부트스트랩3의 sr-only는 무엇입니까?

부트스트랩3의 sr-only는 무엇입니까?

what스 class what what what what 。sr-only떤떤용 ?도 ?? ????요한 、 니면 、 니면 、 니??없어도 동작합니다.

예를 들어 보겠습니다.

<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 전용 클래스를 사용하여 라벨을 숨길 수 있습니다.

다음은 사용된 스타일링의 예입니다.

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

중요한 건가요, 아니면 제거할 수 있나요?없어도 동작합니다.

중요하니까 제거하지 마세요.

접근성을 위해 항상 화면 판독기를 고려해야 합니다.클래스를 사용하면 요소가 숨겨지므로 시각적인 차이는 없습니다.

접근성에 대해 알고 싶은 경우:

• Web Accessibility Initiative(WAI)

• MDN 접근성 문서

말한 처럼, JoshC의 클래스, JoshC의 클래스, ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★..sr-only는 화면 판독기에만 사용되는 정보를 시각적으로 숨기기 위해 사용됩니다.하지만 라벨을 숨기기 위해서만이 아닙니다.", 가 있는 등 다양한 .기본 콘텐츠로 건너뛰기" 링크, 대체 텍스트가 있는 아이콘 등과 같은 다양한 다른 요소를 숨기는 것을 고려할 수 있습니다.

이 이, 이, 이, 이, 이, 이도 사용할 수 ..sr-only sr-only-focusable를 맞췄을 때 를 표시할 가 있는 , 예를 들어 "는 "메인 콘텐츠로"입니다.

웹 사이트를 더욱 쉽게 액세스할 수 있도록 하려면 여기서 시작하는 것이 좋습니다.

• 접근성 @Google - 웹 기초
• 내게 필요한 옵션 개발자 가이드 (개인적으로 마음에 드는 것)
• WebAIM 원칙 + WebAIM WCAG 체크리스트
• 접근성 @ReactJs(양질의 자원과 일반적인 것이 많다)

왜요?

세계보건기구에 따르면, 2억8천5백만 명의 사람들이 시력 장애를 가지고 있다.따라서 웹 사이트에 액세스할 수 있도록 하는 것이 중요합니다.

중요: 장애가 있는 사용자를 다르게 취급하지 마십시오.일반적으로 사용자 그룹별로 다른 콘텐츠를 개발하지 않도록 합니다.기존의 컨텐츠에 액세스 할 수 있도록 해, 개봉 즉시 사용할 수 있도록 해 주세요.또, 화면 리더등의 특정의 타겟이 아닌 모든 컨텐츠에 대해서도 사용할 수 있도록 합니다.다시 말해, 바퀴를 재창조하려고 하지 마세요.그렇지 않으면 개발되지 않은 경우보다 접근성이 더 나빠지는 경우가 많습니다.개발자들은 그 사용자들이 우리 웹사이트를 어떻게 이용할지 추측하지 말아야 한다.따라서 이러한 솔루션을 개발해야 할 때는 매우 주의해야 합니다.포커스를 맞추었을 때 '건너뛰기 링크'가 이러한 컨텐츠의 좋은 예입니다.하지만 나쁜 예도 많이 있습니다.이러한 버튼은 시각장애인 사용자와 관련이 없다고 가정할 때 지도상의 화면 판독기에 숨겨져 있을 것입니다.하지만 놀랍게도, 시각장애인 사용자들 사이에서 줌 기능이 사용되고 있습니다!다른 유저와 같이(고해상도에서도), 다른 유저에게 송신하거나, 다른 컨텍스트에서 사용하기 위해서, 다운로드하는 것을 좋아합니다.출처 - 자세한 내용은 @ADG: 잘못된 ARIA 프랙티스 참조

네비게이션 바의 예에서 이것을 찾아 단순화했습니다.

<ul class="nav">
  <li><a>Default</a></li>
  <li><a>Static top</a></li>
  <li><b><a>Fixed top <span class="sr-only">(current)</span></a></b></li>
</ul>

되었는지 알 수 .sr-only부품이 숨겨져 있습니다.

• 체납
• 스태틱 탑
• 고정 톱

화면 리더를 사용하면, 어느 쪽이 선택되고 있는지가 표시됩니다.

• 체납
• 스태틱 탑
• 고정 톱(현재)

이 기술을 통해 시각장애인은 웹사이트에서 쉽게 탐색할 수 있습니다.

.sr-only는 화면 리더 전용 클래스 이름입니다.할 수 , 「」는 할 수 없습니다..sr-only많이 사용되고 있습니다.컴플라이언스 개발에 관심이 없는 경우 제거할 수 있습니다.이 클래스의 CSS는 데스크톱 및 모바일 디바이스브라우저에 표시되지 않기 때문에 삭제해도 UI에는 영향을 주지 않습니다.

사용법에 대한 정보가 여기에 누락된 것 같습니다..sr-only화면 판독기를 위한 목적과 존재에 대해 설명합니다.무엇보다도, 장애가 있는 사용자를 항상 염두에 두는 것이 매우 중요합니다.508 준거의 목적은 장애입니다.https://www.section508.gov/, 입니다.부트스트랩에서는 이를 고려하는 것이 좋습니다.단, 의 사용은.sr-only를 위해 .508 준준 is 、 508 、 is is is is is is is 。색상, 글꼴 크기, 네비게이션을 통한 접근성, 디스크립터, 아리아 등을 사용할 수 있습니다.

, 지만 for 에 대해서는.sr-only 무엇을 - 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 요 0, DOM 에 그 、 DOM 에 0으로 .이 바로 가 CSS를 사용하는 입니다.width: 1px; height: 1px;여 . . . .display: none를 CSS로 합니다.height: 0 ★★★★★★★★★★★★★★★★★」width: 0이 요소는 DOM에서 인식되지 않기 때문에 문제가 있습니다.는 "CSS"를 사용합니다.width: 1px; height: 1px;콘텐츠를 데스크톱 및 모바일브라우저에 보이지 않게 하는 것만이 아닙니다(없음).overflow: hidden컨텐츠는 화면에 계속 표시됩니다.) 및 화면 판독기에 표시됩니다.및 , 「Desktop and Browser」로부터 합니다.width: 1px ★★★★★★★★★★★★★★★★★」height: 1px하다

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

마지막으로 화면 리더가 무엇을 보고 장애가 있는 사용자에게 전달하는지 알기 위해서는 브라우저의 페이지 스타일링을 해제하십시오.Firefox의 경우 다음을 수행하여 이 작업을 수행할 수 있습니다.

View > Page Style > No Style

제가 여기에 제공한 정보가 다른 답변과 더불어 다른 사람에게도 도움이 되었으면 합니다.

오브젝트가 리더 및 유사한 디바이스에만 표시(또는 표시되어야 함)되도록 합니다.속성 aria-hidden="true"인 다른 요소와의 컨텍스트에서 더 의미가 있습니다.

<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>

글리피콘은 다른 모든 장치(Error: 단어)에 텍스트 리더에 표시됩니다.

.sr-only는 class를 제외한 모든 .screen readers:

메인 콘텐츠로 건너뜁니다. .sr-only와 .sr-only-focusable을 조합하여 포커스가 있을 때 요소를 다시 표시합니다.

.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important; /* 2 */
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important; /* 3 */
}

언급URL : https://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3