Wie verstecke ich einen Text und mache ihn per Screenreader zugänglich?

Question 1

Ich habe einen einfachen Text, der bei einer Aktion aktualisiert wird, und ich möchte, dass dies vom Screenreader angekündigt wird. Aber ich möchte nicht, dass dieser Text auf der Webseite sichtbar ist. Ich habe es versucht display: none und visibility: hidden, aber es scheint, als ob sie für die Screenreader-Software nicht zugänglich sind. Ich habe einen Weg gefunden, dies zum Laufen zu bringen – das heißt, das Element vollständig mit einem negativen Wert von 999999 zu positionieren, wodurch es vom Bildschirm und von der Webseite ausgeblendet wird. Ich bin nicht wirklich ein Fan dieser Lösung. Gibt es einen eleganteren Weg, dies zu erreichen?

<span class="aria-invisible" aria-live="polite">5 selections have been made.</span>

.aria-invisible {
   display: none; //either of these two attributes
   visibility: hidden;
}

Question 2

Eine bessere Lösung für die Bootstrap-Klasse “nur SR”.

Es gibt zahlreiche Probleme mit der Bootstrap “sr-only”-Klasse.

Zunächst werden Sie sehen aus dieser Diskussion dass eine negative Marge Probleme bei VoiceOver verursachen kann.

Zweitens müssen Sie Rechenschaft ablegen Wörter, die pro Zeile umgebrochen werden, da Bildschirmlesegeräte Zeilenumbrüche nicht lesen
Endlich clip ist veraltet.

Um Punkt 1 zu beheben, fügen Sie einfach keine negative Marge hinzu.

Um Punkt 2 zu beheben, fügen Sie hinzu white-space: no-wrap um sicherzustellen, dass Wörter nicht „eins pro Zeile“ enden und dazu führen, dass Wörter zusammengequetscht werden.

Um Punkt 3 zu beheben, fügen wir hinzu clip-path: inset(50%) Da dies auf ein 0px-Quadrat gekürzt wird, behalten wir es bei clip Da dies im Moment eine große Reichweite hat, clip-path wird verwendet, um Ihre Lösung zukunftssicher zu machen.

Bitte finden Sie unten eine viel robustere Klasse, bis jetzt habe ich noch keine Screenreader / Browser-Kombination gefunden, die damit nicht wie erwartet funktioniert.

Ich habe diese Klasse in ein paar verschiedenen Foren getestet, so weit, so gut, aber wenn jemand ein Problem damit findet, lass es mich bitte wissen, da ich sie überall einreichen werde.

.visually-hidden { 
    border: 0;
    padding: 0;
    margin: 0;
    position: absolute !important;
    height: 1px; 
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
    clip: rect(1px, 1px, 1px, 1px); /*maybe deprecated but we need to support legacy browsers */
    clip-path: inset(50%); /*modern browsers, clip-path works inwards from each corner*/
    white-space: nowrap; /* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
}

<p>visible text <span class="visually-hidden">hidden text</span></p>

Question 3

Ich hatte dieses Problem in der Vergangenheit. Bootstrap hat diese süße Klasse sr-only die eigentlich den Inhalt auf der Webseite verbirgt, aber für die Screenreader zugänglich ist. Sie können dies überprüfen Verknüpfung

Wenn Sie Bootstrap nicht verwenden, können Sie die Klasse außerdem einfach selbst in Ihren Code implementieren.

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

<span class="aria-invisible">5 selections have been made. </span>

Ich hoffe das hilft.

Question 4

Verwenden aria-label Attribute ist der Weg zu tun (Beispiel unten)

Gibt es einen eleganteren Weg, dies zu erreichen?

Blenden Sie das Element nicht aus. Jawohl. Ich beantworte Ihre Frage nicht, aber ich spreche das Problem an.

Screenreader sind nur ein Teil der Hilfstechnologien, die von einem kleinen Teil der Menschen verwendet werden, auf die die Richtlinien zur Barrierefreiheit abzielen.

Stellen Sie sich vor, Sie verwenden beispielsweise eine Bildschirmlupe, wenn Sie keine globale Ansicht auf dem gesamten Bildschirm haben. Stellen Sie sich vor, Sie haben einige kognitive Behinderungen, die es Ihnen erschweren, Elemente zu zählen oder sich daran zu erinnern.

Wenn Sie der Meinung sind, dass eine Information für blinde Menschen wichtig ist, dann ist sie es sicherlich für sie UND für andere Menschen.

Anstelle eines langen Textes kann es nun auch ein kleiner Zähler mit entsprechender Arienbeschriftung sein:

<div role="status" aria-live="polite" aria-label="5 selections have been made.">
  5 selections
</div>