w3schools - html 튜토리얼




웹 사이트에 스크린 리더가 없다는 것을 알리는 방법은 무엇입니까? (3)

WAI ARIA에는 보조 기술 / 스크린 리더에 대한 가시적 인 JS 경고 상자와 유사한 role 하는 "경고" role 속성이 있습니다. 즉, 기본적으로 페이지로드 후 텍스트가 기본적으로 읽혀집니다.

(WAI ARIA는 스크린 리더와 같은 보조 기술을위한 웹 응용 프로그램의 가능성을 확대하는 W3C의 "웹 접근성 이니셔티브 - 접근성이 풍부한 인터넷 응용 프로그램"

그래서 아래의 예제와 같이 <body> 의 시작 부분에 직접 속성을 포함하는 보이지 않는 요소를 만들 수 있습니다.

(참고 : 그런 메시지에는 display: none 을 사용하지 마십시오 display: none 대부분의 스크린 리더는 텍스트를 읽지 display: none 위해 명령을 사용합니다!)

#screenreader_alert {
  position: fixed;
  left: -50px;
  width: 1px;
  height: 1px;
  color: transparent;
  overflow: hidden;
}
<div id="screenreader_alert" role="alert">Please note: This web page contains no text at all and therefore does not support screenreaders.</div>
<div>There is a DIV element <em>before</em> this one which is invisible due to its CSS settings, but whose text will be read by screenreaders immediately after the page is loaded, due to its ARIA attribute <em>role="alert"</em>. Check the HTML code to see it.</div>

추가 정보 : https://w3c.github.io/aria-practices/#alert

<noscript> 를 사용하여 죄송합니다.이 웹 사이트에서는 JavaScript를 실행해야합니다 .

사이트가 스크린 리더를 지원하지 않는다는 것을 알리는 유사한 방법은 무엇입니까? <noscreenreader>Sorry, ...</noscreenreader> 와 같은 것. <noscreenreader>Sorry, ...</noscreenreader> .

(짧은 backstory : 단어를 전혀 사용 하지 않는 아이디어에 의존하는 앱입니다. 정보를 전달하기 위해 이미지를 많이 사용합니다. 음성 언어로 내용을 발표하는 것은 의미가 없습니다.)


초기 요소에 초점을 맞추고 있습니까? 그렇다면 포커스가있는 요소와 함께 읽을 수없는 화면 판독기 텍스트를 추가 할 수 있습니다. 다른 사람들이 언급했듯이 "sr-only"클래스에 대한 Google 검색을하거나 다음을 참조하십시오 : 부트 스트랩 3에서 sr-only는 무엇입니까? . 아마도 이런 식으로 :

<button>
  I'm the first focusable element
  <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
</button>

초기 포커스가 없다면 DOM의 첫 번째 요소에 숨겨진 텍스트가 포함 된 tabindex="0" 을 만들면 화면 판독기 사용자가 인터페이스를 통해 탭 이동을 시작할 수 있습니다. 텍스트를 가장 먼저 사용하지만, 일반적으로 비대화 형 요소가 tabindex="0" 이 아니기 때문에 덜 바람직한 솔루션입니다. 이 같은:

<html>
  <body>
    <span tabindex="0" class="sr-only">Sorry, this page is not accessible to screen readers</span>
    <!-- the rest of your real code -->
  </body>
</html>

첫 번째 방법과 비슷한 가능한 세 번째 해결 방법은 첫 번째 제목 또는 주 요소와 관련된 추가 텍스트를 가지고 tabindex="-1" 사용하여 해당 요소에 포커스를 지정하는 것입니다. "-1"은 사용자가 Tab 키를 사용하여 이동할 수 없음을 의미합니다. 같은 것 :

<html>
  <script>
    function myload() {
      document.getElementById("myid").focus();
    }
  </script>
  <body onload="myload()">
    <h1 id="myid" tabindex="-1">
      Welcome to my site
      <span class="sr-only"> Sorry, this page is not accessible to screen readers</span>
    </h1>
  </body>
</html>

<h1 style="text-indent: -9999px;"> Sorry, this site does not support screen readers </h1>  

FWIW, 화면 판독기를 사용하지 않는 사용자에 대해서는 다른 옵션보다 텍스트를 숨기기 위해 텍스트 들여 쓰기를 사용하는 것이 유리하다고 생각합니다.

OSX의 내장 스크린 리더로 아래의 테스트를 확인하면 처음 두 단락은 읽히지 만 세 번째 단락은 읽지 않습니다.

<p>hello world</p>
<p style="text-indent: -9999px;"> Sorry, this site does not support screen readers </p>
<p style="display:none;">display hidden paragraph</p>

https://s.codepen.io/panchroma/debug/yReWOa/PBrNWNdjpnWA https://codepen.io/panchroma/pen/yReWOa





screen-readers