it-swarm.com.de

Wie kann ich sagen, dass eine Website keine Unterstützung für Bildschirmleseprogramme hat?

Wir können <noscript> verwenden, um zu sagen. Diese Website erfordert JavaScript zum Ausführen von.

Was ist der analoge Weg zu verkünden, dass die Site keine Screenreader unterstützt ? So etwas wie <noscreenreader>Sorry, ...</noscreenreader>.


(Kurze Hintergrundgeschichte: Es handelt sich um eine App, die von der Idee abhängt, niemals Wörter zu verwenden. Sie ist stark auf Bilder angewiesen, um Informationen zu vermitteln. Es wäre nicht sinnvoll, alles in gesprochener Sprache anzukündigen.)

16

Bildschirmleser arbeiten über dem Browser, so dass es keinen einfachen Weg gibt (nur einige verwirrte Flash-Techniken ), um festzustellen, ob jemand einen verwendet. 

Am besten setzen Sie die Warnung am Anfang des Inhalts und verbergen sie für sehende Benutzer. Dieser Artikel erwähnt verschiedene Techniken. 

.hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
<div class="hidden">Sorry, this website requires JavaScript to run.</div>
10
David

Es gibt ein "alert" role-Attribut in WAI ARIA, das sich ähnlich wie eine sichtbare JS-Alert-Box für Hilfstechnologie/Bildschirmleser verhält, d. H. Standardmäßig wird der Text unmittelbar nach dem Laden der Seite gelesen.

(WAI ARIA steht für "Web Accessibility Initiative - Accessible Rich Internet Applications" des W3C, das die Möglichkeiten von Webanwendungen für assistive Technologien wie Bildschirmlesegeräte erweitert.)

Sie könnten also ein unsichtbares Element erstellen, das dieses Attribut direkt am Anfang Ihres <body> enthält, ähnlich wie in meinem Beispiel unten.

(Hinweis: Verwenden Sie nicht display: none für eine solche Nachricht - die meisten Screenreader nehmen dies als eine Anweisung an, den Text NICHT zu lesen!)

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

Für weitere Lektüre: https://w3c.github.io/aria-practices/#alert

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

FWIW, in Bezug auf Benutzer, die keine Bildschirmleseprogramme verwenden, ist es meines Erachtens von Vorteil, den Texteinzug zum Ausblenden des Texts anstelle von anderen Optionen zu verwenden. 

Wenn Sie den Test mit dem integrierten Bildschirmleser unter OSX überprüfen, werden die ersten beiden Absätze gelesen, nicht jedoch der dritte. 

<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/PBrNWNdjpnWAhttps://codepen.io/panchroma/pen/yReWOa

4
David Taiaroa

Konzentrieren Sie sich auf ein erstes Element? In diesem Fall können Sie zusätzlichen Bildschirmlese-Text hinzufügen, der nicht sichtbar ist und zusammen mit dem Element gelesen wird, das den Fokus hat. Führen Sie, wie andere bereits erwähnt haben, eine Google-Suche nach der Klasse "sr-only" durch, oder lesen Sie Folgendes: Was ist sr-only in Bootstrap 3? . Vielleicht so etwas:

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

Wenn Sie keinen anfänglichen Fokus haben, können Sie dafür sorgen, dass das erste Element im DOM einen tabindex="0" enthält, der den verborgenen Text enthält, sodass der Benutzer des Bildschirmlesegeräts den Text als erstes hört, wenn er über die Benutzeroberfläche tippt Dies ist jedoch eine weniger wünschenswerte Lösung, da Sie normalerweise nicht möchten, dass ein nicht interaktives Element tabindex="0" enthält. Etwas wie das:

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

Eine mögliche dritte Lösung, ähnlich der ersten, besteht darin, zusätzlichen Text mit Ihrer ersten Überschrift oder Ihrem Hauptelement zu verknüpfen und den Fokus mit tabindex="-1" auf dieses Element zu setzen. Das "-1" bedeutet, dass ein Benutzer das nicht verwenden kann Tab Schlüssel, um dorthin zu gelangen. So etwas wie:

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