Issue
I'm using voiceover on MacOS and the latest version of Safari. If I do the following then the described text is not read out when on one of the radio button.
<fieldset aria-describedby="described">
<legend>Legend</legend>
<div id="described"><ul><li>described text</li></ul></div>
<div>
<input type="radio" name="question-2" id="question-2-yes" value="yes">
<label for="question-2-yes">Yes</label>
</div>
<div>
<input type="radio" name="question-2" id="question-2-no" value="no">
<label for="question-2-no">No</label>
</div>
</fieldset>
However if the text isn't in a list then it is read out like follows
<fieldset aria-describedby="described">
<legend>Legend</legend>
<div id="described">described text</div>
<div>
<input type="radio" name="question-2" id="question-2-yes" value="yes">
<label for="question-2-yes">Yes</label>
</div>
<div>
<input type="radio" name="question-2" id="question-2-no" value="no">
<label for="question-2-no">No</label>
</div>
</fieldset>
Is there any way around this? I need the described by text to be in a list format.
Edit: the format of the fieldset is in question form where the description is integral to the question, see an example here:
<form>
<h2>Question 1</h2>
<fieldset aria-describedby="eligibility-quiz-description-1">
<legend>Are you applying for any of the following:</legend>
<div id="eligibility-quiz-description-1">
<ul>
<li>One off or annual events e.g. festivals and galas</li>
<li>Sponsorship</li>
<li>Feasibility and development studies</li>
<li>Round-robin fundraising appeals</li>
<li>Endowment appeals</li>
<li>Animal welfare charities</li>
</ul>
</div>
<div>
<input type="radio" name="question-1" id="question-1-yes" value="yes">
<label for="question-1-yes">Yes</label>
</div>
<div>
<input type="radio" name="question-1" id="question-1-no" value="no">
<label for="question-1-no">No</label>
</div>
</fieldset>
</form>
Solution
This is how I resolved it in my case. I had no control over what would be added to the description as it came from a CMS' WYSIWYG area. So I restructured the HTML so the whole thing wasn't wrapped in a fieldset, changed the legend to a heading and then added a summary question and used that as the radio legend instead. Example as follows:
<form>
<h2>Question 1</h2>
<h3>We are not able to fund any of the following:</h3>
<div>
<ul>
<li>One off or annual events e.g. festivals and galas</li>
<li>Sponsorship</li>
<li>Feasibility and development studies</li>
<li>Round-robin fundraising appeals</li>
<li>Endowment appeals</li>
<li>Animal welfare charities</li>
</ul>
</div>
<fieldset>
<legend>Can you confirm that you are not applying for any of the above?</legend>
<div>
<input type="radio" name="question-1" id="question-1-yes" value="yes">
<label for="question-1-yes">Yes</label>
</div>
<div>
<input type="radio" name="question-1" id="question-1-no" value="no">
<label for="question-1-no">No</label>
</div>
</fieldset>
</form>
Answered By - tay
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.