2017-04-19 3 views
1

Ich habe ein Plugin jQuery Terminal und ich möchte es für Screenreader zugänglich machen. Was muss ich tun, um die Eingabe von Text zu ermöglichen?Wie mache ich ein benutzerdefiniertes Eingabefeld für Screenreader zugänglich?

erzeugten HTML aussehen:

<div class="cmd" style="width: 100%; visibility: visible;"> 
    <span class="prompt"> 
     <span>&gt;&nbsp;</span> 
    </span> 
    <span>Before curosr</span> 
    <span class="cursor">&nbsp;</span> 
    <span>after cursor</span> 
    <textarea autocapitalize="off" spellcheck="false" class="clipboard"> 
    </textarea> 
</div> 

Soweit ich das Textfeld immer im Fokus sagen kann, ist, wenn die Eingabe von Text (ich es für mobiles hatte, aber es dann für alle Browser einschalten).

+1

Grundsätzlich kann man nicht. Screenreader, die ich das letzte Mal überprüft habe, analysieren JavaScript nicht und führen es auch nicht aus. Ihr dynamisch hinzugefügtes "Terminal" existiert also nicht einmal soweit es sie betrifft. – gforce301

+0

@ gforce301 so ist das einzige, was ich tun kann, ist eine Beschreibung innerhalb div hinzuzufügen, die terminal sein wird und es in Javascript entfernen, habe ich recht? – jcubic

+1

@ gforce301 Das ist falsch. Der Bildschirmleser wird den JS nicht ausführen, aber der Browser wird und der Bildschirmleser liest, was der Browser basierend auf dem Markup rendert. – zero298

Antwort

2

Ich teste mit NVDA auf der jQuery Terminal Testseite. Es gibt ein <div class="terminal-output"> Ich fügte ein role="alert" Attribut hinzu und mein Bildschirmleser liest den gesamten Textinhalt vor, der dem terminal-output hinzugefügt wird.

Allerdings hängt es wirklich davon ab, was Sie eigentlich mit Ihrer Zugänglichkeit erreichen möchten. Was soll der Bildschirmleser eigentlich lesen? Sie müssen experimentieren, aber werfen Sie einen Blick auf Arien-Rollen und Möglichkeiten, Dinge auszusprechen, die der Leser lesen und Ihrem Benutzer präsentieren soll.

Siehe mein Bildschirmleseprotokoll und wie es liest, was in der „Konsole“ Fenster enthalten ist:

Screen Reader Log

+0

Danke, muss ein paar Tests machen, schade, NVDA ist nur für Windows. – jcubic

Verwandte Themen