SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Threaded View

  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    0 Post(s)
    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.

    jsDlgMsgBox.prototype = new jsDialog();
    jsDlgMsgBox.prototype.create = function(doc)
    {, doc);
    jsDlgMsgBox.prototype.onInitDialog = function()
    	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
    <div id="text48086" style="visibility: inherit; "><a name="text48086anc"></a>
    <a name="skip" id="skiplink"></a>
    		<span class="text48086Font1">COOP stands for:
    <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
    <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 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
    <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 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
    <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 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">
    <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 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
    <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" />
    Last edited by spikeZ; Jan 22, 2011 at 06:01. Reason: added code tage

Tags for this Thread


Posting Permissions

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