Bootstrap 3의 SR 전용은 무엇입니까? 있습니까? 없이 잘 작동합니다. 내

수업은 무엇입니까 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>

답변

부트 스트랩의 documentation 에 따르면 이 클래스는 렌더링 된 페이지의 레이아웃에서 스크린 리더 전용 정보를 숨기는 데 사용됩니다 .

모든 입력에 레이블을 포함시키지 않으면 화면 판독기에 양식에 문제가 있습니다. 이러한 인라인 양식의 경우 .sr 전용 클래스를 사용하여 레이블을 숨길 수 있습니다.

사용 된 스타일링 예제 는 다음과 같습니다 .

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

중요합니까 아니면 제거 할 수 있습니까? 없이 잘 작동합니다.

중요합니다. 제거하지 마십시오.

접근성을 위해 항상 스크린 리더를 고려해야합니다. 어쨌든 클래스를 사용하면 요소가 숨겨져 시각적 차이가 없어야합니다.

내게 필요한 옵션에 대해 읽으려면 다음을 수행하십시오.

답변

JoshC가 말했듯이 클래스는 스크린 리더에 사용되는 정보를 숨기는 데 사용됩니다. 그러나 라벨을 숨길뿐만 아니라, 주요 콘텐츠보다 복잡한 탐색이나 광고가있는 경우 시각 장애인에게 바람직한 내부 링크 “주 콘텐츠로 건너 뛰기”를 숨길 수 있습니다.

귀하의 사이트가 스크린 리더와 더 많은 상호 작용을하도록하려면 W3C 표준화 된 ARIA 속성을 사용하십시오. Google 온라인 코스 를 방문하는 것이 좋습니다. 최대 1-2 시간이 걸리거나 적어도 Google의 40 분 비디오를 볼 것 입니다.

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

2019 업데이트 :

개발자로서 우리는 스크린 리더를 대상으로하지 않고 모든 즉시 사용 가능한 컨텐츠에 액세스 할 수 있어야합니다. 항상 가능한 것은 아니지만 ARIA 및 “스크린 리더 전용”조정을 사용하여주의하십시오 . 완전히 이해하지 못하면하지 마십시오. 잘못 구현하면 사용하지 않는 것보다 훨씬 나쁠 수 있습니다. ARIA 나쁜 예에 대한 접근성 개발자 안내서를 읽으십시오 . 거기에는 “스크린 리더 전용”개입이 필요하지 않은 완전히 액세스 가능한 구성 요소 / 위젯이 있습니다.

답변

navbar 예제 에서 이것을 발견 하고 단순화했습니다.

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

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

답변

개체가 독자 및 유사한 장치에만 표시되도록해야합니다. 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>

Glyphicon은 다른 모든 장치에 표시 되며 텍스트 리더에는 Error : 라는 단어가 표시됩니다 .

답변

.sr-only클래스는 모든 장치에 대한 요소를 제외하고 숨 깁니다screen readers:

주요 콘텐츠로 건너 뛰기 .sr-only와 .sr-only-focusable을 결합하여 요소에 포커스가있을 때 요소를 다시 표시

답변