WebAIM - Web Accessibility In Mind

E-mail List Archives

alert issue

for

From: Schafer, Carmen
Date: Jul 2, 2018 11:08AM

Hello, we have an online form with radio buttons and combo boxes. As you fill out the form any changes automatically update the cost of attendance which is located in a table below the form. I tested this form using Firefox 60 and NVDA 2018.2.1 and JAWS 2018. I found the following accessibility issues:

* The radio button labels (In-state & Out-of State) are correctly read by NVDA and JAWS until you select the 'Out-of State' radio button. The total is updated in the table below the form and the cost of attendance amount alert is announced to the SR user, but NVDA no longer reads either radio button label and only the alert is announced using the Arrow keys to navigate the radio buttons. The screen reader user must Tab (key) to the next form control and Tab (key) back to the radios buttons for the labels to be read again by NVDA.



* On the combo boxes, the alert is read before the drop down list items. I'm not sure whether this is an issue since the screen reader does read the list items after the alert message.

Code snippets:
Form
<p>
Please fill out the form below to estimate your cost of attendance.
</p>

<form action="#" style="margin-bottom: 1em;">
<fieldset>
<legend>Select your residency</legend>
<label for="in-state">In-State</label>
<input type="radio" name="residency" id="in-state" value="resident" checked="checked" />

<label for="out-of-state">Out-of State</label>
<input type="radio" name="residency" id="out-of-state" value="non-resident" />
</fieldset>

<fieldset>
<legend>Student level</legend>
<label for="level">Select your student level</label>
<select id="level" name="level">
<option value="undergraduate" selected="selected">Undergraduate</option>
<option value="graduate">Graduate</option>
<option value="law-jd">Law, JD</option>
<option value="law-llm">Law, LLM</option>
<option value="medicine-md">Medicine, MD</option>
<option value="vet-med-dvm">Veterinary Medicine, DVM</option>
</select>
</fieldset>

Table with Alert
<td role="alert">
<a href="#" id="marker-cost-total-anchor" style="text-decoration: none;">
<span class="sr-only">Your estimated cost of attendance is:</span>
<span id="marker-cost-total"></span>
</a>
</td>

Here's a synopsis of how the developer approached the solution:
I was using aria-live polite/assertive on a region to announce changes to the cost of attendance, however I wasn't happy with how quickly the screen reader was announcing changes. It seemed to always read them last, and depending on how the user was interacting with the form, this could cause a significant delay between when the form was changed, and when the result of that change were announced. I replaced the aria-live method with a role of alert, and this caused the change to be announced immediately but has the added side effect of not announcing further information about the form. The only mechanism present on the page now is role="alert."


Does anyone have any suggestions on how to fix the radio button label issue and improve the notification of changes to a screen reader user? Also, let me know if I did not provide enough information.


Thanks for any guidance.

Carmen Schafer
University of Missouri