Wie man einen Bildschirmleser erhält, um zu stoppen, andere Inhalte zu lesen und zu lesen

Question

Ich habe eine Site geschrieben, die jQuery verwendet, um ein modales Popup anzuzeigen. Es deckt im Wesentlichen den gesamten sichtbaren Bereich des Bildschirms mit einem Overlay ab und zeigt dann ein DIV, das das eigentliche Popup über dem Overlay enthält. Eine der Voraussetzungen für dieses Projekt ist Barrierefreiheit.

Wenn die Seite geladen wird, liest der Bildschirmleser vom oberen Rand der Seite. Wenn ein Benutzer auf einen bestimmten Link klickt, zeigen wir einen modalen Dialog an. Meine Frage ist: Wie unterbreche ich das Lesen des Hauptteils der Seite durch den Bildschirmleser und sage ihm, dass er anfangen soll, den Dialogtext zu lesen?

Mein modal Behälter in einem div wie folgt gewickelt:

<div id="modalcontainer" tabindex="0" class="popup" role="dialog" aria-labelledby="dialog-label" > 

Die jQuery, die die modalen das sieht aus wie feuert:

$("#modalLink").click(function (e) { 
    e.preventDefault(); 

    $("#modalcontainer").center(); 
    $("#modalcontainer").show(); 
    $("#closeBtnLink").focus(); 
    $("#wrapper").attr('aria-disabled', 'true'); 
}); 

Die "closeBtnLink" ist die Schließen-Schaltfläche in der modal Dialog. Ich hätte gedacht, dass das Einstellen des Fokus darauf den Bildschirmleser anweisen würde, von diesem Element zu lesen.

Das "Wrapper" -Element ist ein SIBLING des modalen Dialogs. Nach einem Vorschlag von einem anderen SO-Benutzer aus verschiedenen Gründen, setze ich "aria-disabled = true" auf das Wrapper-Element, das die gesamte Seite enthält. Der modale Dialog existiert als ein Geschwister außerhalb dieses Containers.

Mein Hauptziel hier ist, den Bildschirmleser zu bekommen, den Inhalt meines modalen DIV-Elements zu lesen, wenn sie auf einen bestimmten Link klicken. Jede Hilfe wäre willkommen.

Answer 1

Es liegt in Ihrer Verantwortung als Entwickler, den Inhalt einer Seite so darzustellen, dass er für den Screenreader lesbar ist.

von http://www.anysurfer.be/en/index.html:

• Verwenden Sie die richtigen HTML-Tags Ihre Dokumente zu strukturieren. Auf diese Weise können assistive Technologien Überschriften, Absätze, Listen und Tabellen auf verständliche Weise in Blindenschrift oder Sprache übersetzen.
• Stellen Sie sicher, dass die Website auch ohne Maus bedienbar ist. In den meisten Situationen sind keine speziellen Aktionen erforderlich, außer wenn Sie beispielsweise Dropdown-Menüs verwenden. Diese spezielle Richtlinie ist sehr wichtig für Besucher, die nur die Tastatur benutzen können.
• Sie können Ihre Audio- und Videofragmente mit einem auditiven oder visuellen Constraint für Besucher zugänglich machen, indem Sie Untertitel hinzufügen oder eine Transkription anbieten.
• Verlassen Sie sich niemals ausschließlich auf Farben, um strukturelle Informationen zu übermitteln. Die Meldung "Die Felder in Rot sind Pflichtfelder" hat für blinde oder farbblinde Personen keine Verwendung.
• Eine aktualisierbare Braillezeile kann keine Bilder anzeigen. Daher sollten Sie kurze Beschreibungen für Bilder und grafische Schaltflächen hinzufügen. Sie erscheinen nicht auf dem Bildschirm, werden aber von der Screenreader-Software von Blinden und Sehbehinderten aufgenommen.
• Die Verwendung von Technologien wie Flash und JavaScript sollte gut überlegt werden. Außerdem sind starke Animationen und Flackern für Leute, die an Dyslexie oder Epilepsie leiden, sehr störend.

aber letztlich in der Verantwortung des Lesers Bildschirm sicher, dass es stoppt und beginnt zu machen, wenn es sinnvoll, für den Benutzer macht, wenn nicht möglich, dem Benutzer den Leser selbst anhalten sollte.

Wegen der großen Vielfalt der Bildschirmleser da draußen, was Sie fragen, scheint ziemlich unmöglich.

Answer 2

Können Sie ARIA Live-Regionen verwenden? https://developer.mozilla.org/en/ARIA/Live_Regions Dann in Javascript während der modalen Anzeige, tauschen Sie die Regionen mit durchsetzungsfähigen und aus.

Answer 3

Dies kann mit ARIA role="dialog" erreicht werden. Sie müssten diesen Code für Ihr Beispiel ändern, es ist Vanille js, also wird Ihre wahrscheinlich kürzer/einfacher über jQuery sein.

HTML:

<div role="dialog" aria-labelledby="myDialog" id="box" class="box-hidden" tabindex="-1"> 
    <h3 id="myDialog">Just an example.</h3> 
    <button id="ok" onclick="hideDialog(this);" class="close-button">OK</button> 
    <button onclick="hideDialog(this);" class="close-button">Cancel</button>  
</div> 

JavaScript:

var dialogOpen = false, lastFocus, dialog, okbutton, pagebackground; 

function showDialog(el) { 
    lastFocus = el || document.activeElement; 
    toggleDialog('show'); 
} 
function hideDialog(el) { 
    toggleDialog('hide'); 
} 

function toggleDialog(sh) { 
    dialog = document.getElementById("box"); 
    okbutton = document.getElementById("ok"); 
    pagebackground = document.getElementById("bg"); 

    if (sh == "show") { 
     dialogOpen = true; 

     // show the dialog 
     dialog.style.display = 'block'; 

     // after displaying the dialog, focus an element inside it 
     okbutton.focus(); 

     // only hide the background *after* you've moved focus out of the content that will be "hidden" 
     pagebackground.setAttribute("aria-hidden","true"); 

    } else { 
     dialogOpen = false; 
     dialog.style.display = 'none'; 
     pagebackground.setAttribute("aria-hidden","false"); 
     lastFocus.focus(); 
    } 
} 


document.addEventListener("focus", function(event) { 

    var d = document.getElementById("box"); 

    if (dialogOpen && !d.contains(event.target)) { 
     event.stopPropagation(); 
     d.focus(); 
    } 

}, true); 


document.addEventListener("keydown", function(event) { 
    if (dialogOpen && event.keyCode == 27) { 
     toggleDialog('hide'); 
    } 
}, true); 

Quelle: http://3needs.org/en/testing/code/role-dialog-3.html
mehr reading: http://juicystudio.com/article/custom-built_dialogs.php

Answer 4

ich das gleiche Problem konfrontiert und gelöst mit folgenden setp der

• erstellt ein weiteres div (#message) innerhalb Wrapper modal Behälter alle Nachricht platzieren
• und setzen aria-labelledby Attribut auf die Schaltfläche zum Schließen #message Behälter

Answer 5

aria-hidden =-zu-Punkt "Wahr" wird Screenreader dazu bringen, dieses Element und seinen Inhalt nicht wahrzunehmen, was bedeutet, dass es nicht ausgelesen wird.

aria-label wird den Text einstellen, den assistive Technologien (Bildschirmleser usw.) wahrnehmen.

http://www.w3.org/TR/wai-aria/states_and_properties