SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    JavaScript to move the focus from the radibutton to the beginning of the new content

    I have an online HTML and JavaScript course that I am trying to make accessible. The quizzes have radio buttons for the answers and when a radio button is selected, a message box (a hidden div generated by JavaScript) pops up with feedback. The div only shows when a radio button is selected. When it pops up the main window goes gray. The problem I am trying to resolve is that when the div shows on screen the screenreader doesn't read the new content, it only reads the okay button (to hide the div). I think if the cursor moved to that div, the screenreader would read the text.
    I need a way new JavaScript to move the focus from the radio button (onclick) to the beginning of the new content. Assistance with this problem is greatly appreciated.

    Code:
    <javascript>
    jsDlgMsgBox.prototype = new jsDialog();
    
    jsDlgMsgBox.prototype.create = function(doc)
    {
    	jsDialog.prototype.create.call(this, doc);
    };
    
    jsDlgMsgBox.prototype.onInitDialog = function()
    {
    	this.getEles();
    
    	var textTable = "<table width=100% height=100% border=0><tr valign='middle'>";
      	textTable += "<td align='center' width=*>";
    
    	// add text message
    
    	this.elements[this.EID_MSG_DIV].innerHTML = textTable + this.text + "</td></tr></table>";
    
    	// update buttons
    </javascript>
    
    <html>
    <div id="text48086" style="visibility: inherit; "><a name="text48086anc"></a>
    <a name="skip" id="skiplink"></a>
    		<span class="text48086Font1">COOP stands for:
    </span></div>
    
    <div id="text48087" style="visibility: inherit; "><a name="text48087anc"></a>
    <label id="label48088id" for="radio48088id"><span style="margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text48087Font1">A. Consideration of Others Program
    </span></span>
    </label></div>
    <div id="radio48088" style="visibility: inherit;"><a name="radio48088anc" title="A"></a>
    <input type="radio" name="qu48083" id="radio48088id" value="A. Consideration of Others Program" onClick="VarMod1_Q1.set(this.value);Update_qu48083();doImmFeedback('qu48083');radio48088.onSelChg();" tabindex="7" />
    </div>
    
    
    <div id="text48089" style="visibility: inherit; "><a name="text48089anc"></a>
    <label id="label48090id" for="radio48090id"><span style="margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text48089Font1">B. Cooperative Operations
    </span></span>
    </label></div>
    <div id="radio48090" style="visibility: inherit; "><a name="radio48090anc" title="B"></a>
    <input type="radio" name="qu48083" id="radio48090id" value="B. Cooperative Operations" onClick="VarMod1_Q1.set(this.value);Update_qu48083();doImmFeedback('qu48083');" tabindex="8" />
    </div>
    <div id="text48091" style="visibility: inherit; "><a name="text48091anc"></a>
    
    <label id="label48092id" for="radio48092id"><span style="margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text48091Font1">C. Continue to Operate
    </span></span>
    </label></div>
    <div id="radio48092" style="visibility: inherit; "><a name="radio48092anc" title="C"></a>
    <input type="radio" name="qu48083" id="radio48092id" value="C. Continue to Operate" onClick="VarMod1_Q1.set(this.value);Update_qu48083();doImmFeedback('qu48083');" tabindex="9" />
    </div>
    <div id="text48093" style="visibility: inherit; "><a name="text48093anc"></a>
    
    <label id="label48094id" for="radio48094id"><span style="margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text48093Font1">D. Continuity of Operations</span><span class="text48093Font2" style="background-color:transparent">
    </span></span>
    </label></div>
    <div id="radio48094" style="visibility: inherit; "><a name="radio48094anc" title="D"></a>
    <input type="radio" name="qu48083" id="radio48094id" value="D. Continuity of Operations" onClick="VarMod1_Q1.set(this.value);Update_qu48083();doImmFeedback('qu48083');" tabindex="10" />
    </div>
    
    <div id="text48095" style="visibility: inherit; "><a name="text48095anc"></a>
    <label id="label48096id" for="radio48096id"><span style="margin-left:0px;text-indent:0px;margin-top:0px;margin-bottom:0px;text-align:left;">
    <span class="text48095Font1">E. Cooperative Education
    </span></span>
    </label></div>
    <div id="radio48096" style="visibility: inherit; "><a name="radio48096anc" title="E"></a>
    <input type="radio" name="qu48083" id="radio48096id" value="E. Cooperative Education" onClick="VarMod1_Q1.set(this.value);Update_qu48083();doImmFeedback('qu48083');" tabindex="11" alt="Cooperative Education" />
    </div>
    </html>
    Last edited by spikeZ; Jan 22, 2011 at 06:01. Reason: added code tage


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •