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

Accessibility
1

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.


<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>
2

It sounds like you are using a screen reader who has a Forms Mode. In forms mode, buttons and form controls are read out, but non-form text may be skipped.

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.

I have to be very very honest here, and you may not like this: your markup is very, very poor. What this means is, YOU are doing a LOT of work that you don’t need to do.

I’m not sure if you have a doctype, or if your <html> I saw was you just stating “here’s the HTML”. This forum uses BBcode, so you can wrap whatever is code inside code tags like
[code]
some code here
[/code]

So first, be certain to have a complete doctype, so browsers the screen reader is using don’t go into Quirks or Not-Standard mode. Most browsers have a non-standard mode for missing or incomplete doctypes.

Second: when you have a form, use form tags, label tags, input tags… and you generally don’t need much more than that. Screen readers are generally pretty good with forms. If you want an example of how I would do your markup (based on markup alone since I don’t know visually what it’s supposed to look like), I can give you one.

Third: your Javascript can and should be pulled from the HTML. Since form controls aree associated with labels, they have a unique ID on them… and you can use that ID also for Javascript to grab that element as well instead of inline onclick stuff.

Fourth: if this message box is presenting information that should only be read if the user has made a choice with the radio button, then generated-by-Javascript is ok, though you also have the option to have that box sitting in the markup in the first place and have Javascript do nothing more than add and remove a class on that div and the class in your stylesheet has display: none or visibility: hidden (both of which are honoured by screen readers… display: none content is not read out). This can also maybe get around the problem of alerting the user that new content has arrived. Older readers with a virtual buffer won’t do this: since the content was not there at the time of page load, it’s never given to the copy the reader has made of the page. Newer readers often look to see if there was a Javascript event and might refresh their virtual buffers. Of course readers like Orca don’t even have a buffer, but the Big 2 do and NVDA as well I believe. Not sure about VoiceOver.

Your reader is clearly finding the new content, so this is good.

If the text is relating specifically to the radio button, you can investigate ARIA roles. Specifically, I’m thinking of the [url=http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby]aria-describedby attribute, which would go on the radio button or its label and would point the reader to the div text (who must have an id matching the aria-describedby attribute) and the most recent versions of the big-name readers would see that text as associated with the form control and could read it out. ([url=http://www.marcozehe.de/2008/03/23/easy-aria-tip-2-aria-labelledby-and-aria-describedby/]Marco’s example in English of using the attribute, though the actual markup used is not great.)
There is also a set of ARIA attributes for alerting users of new page content, with “politeness” settings (how urgent is it that the user go directly to the new content? Or can they finish whatever they’re busy doing first?).

Are these radio buttons choosing and answer and then the popup is telling students that the answer is correct or not and why?
Does everyone know they are supposed to hit ENTER when they are on the correct radio button?

NVDA would probably read out your div, but I believe JAWS wouldn’t unless you first existed Forms Mode first to read the plain text (but I’m not sure unless I were testing the page).

Anyway I’m thinking right now you have a reader that’s reading the text rather blindly (not a bad pun but I mean, with no knowledge of the relationship of the content to each other) and may be switching to a Forms Mode whenever it sees a radio button and only switching back out when the cursor completely leaves the radio.

Also it looks like the JS is adding a table? A whole table for a line or two of text is overdoing it majorly. Plus NVDA bothers telling me every time I hit a row or column, which is not useful information. General rule of thumb: if it’s got one cell, you don’t need a table. Think table == excel sheet. If the data doesn’t look normal in an Excel sheet, you want other tags.

You might also need to add a negative tab index (with javascript) to this answer box (or the text in it), which makes it focusable by keyboard, and then onsubmit or onclick, you can change that to a positive number and move the focus to that box.

I don’t have a lot of user experience with actual popup dialogues, except that the ones created with window.open() work fine IF I don’t have a browser that blocks popups, because it’s built by the browser, but the modus-window stuff I know less about. Lightboxes use modus-window and they can be accessible but I haven’t used a lightbox with text in them besides “close” : )

3

I agree with you. The JavaScript and the html and css was generated by Saba Publisher. I am only trying to make it accessible to the users. I have decided to use a javascript alert function to replace the the hidden div since there seems to be no way to make it accessible.

4

I have decided to use a javascript alert function to replace the the hidden div since there seems to be no way to make it accessible.

Did you try ARIA roles?

Or having Javascript assign a temporary tab index to the popup div/table so it is focussable and then manually moving the focus there with Javascipt?

Though I have to admit alerts always were announced for me so this might indeed be the easiest.

5

we tried that, but no luck.

6

The alert, or the other stuff?

7

we tried assigning a temporary tab index to the popup div/table

8

Temporary tab? what is that? Try tabindex=“-1”