WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [EXTERNAL] Addressing accessibility of simulated discussions

for

From: Mark Magennis
Date: Aug 15, 2019 3:49AM

Hello Itzel.

I don't think this is going to be difficult, unless there are complications that you haven't yet described. Assuming the screen is an HTML page I think the main things you need to do are:

* structure the page content so that it is easy for screen reader users to navigate and understand and so that the ordering takes them logically through the scenario description, then the question, then the answer choices,
* give screen reader users access to all the text, even if some of it is read out as audio because they may ned to review it more than once,
* provide alternative text for the informational images,
* provide the answers as a simple form using relevant form fields with a submit button.

An appropriate structure might be something like the following.

<h1>Discussion title goes here</h1>

<h2>Scenario</h2>
<img src="background_photo.jpg" alt="description of the scenario that the background photo represents, e.g. the scene of a road traffic accident where two drivers stand by their cars arguing">
<img src="photo_of_character.jpg" alt="description of the character, e.g. Sarah Dane, Police Officer">

<h2>Question</h2>
<p>Text that the character says.</p>

<h2>Your answer</h2>
<form>
<fieldset>
<legend>Answer choices</legend>
<input id="one" type="radio" name="answer" value="one">
<label for="one">Answer choice one</label><br>
<input id="two" type="radio" name="answer" value="two">
<label for="two">Answer choice two</label><br>
<input id="three" type="radio" name="answer" value="three">
<label for="three">Answer choice three</label>
</fieldset>
<input type="submit" name="submit" value="Submit answer">
</form>

How you provide the feedback - were they correct and if not what should they have answered - is a different matter and more difficult. It can be tricky to do this well and make it understandable. If you try to do it by updating the question page, e.g. by disabling the radio buttons, replacing them with ticks (correct) and crosses (incorrect), and adding text feedback messages, it can get messy and it will need a lot of testing to check that it is understandable both visually and to screen reader users. It can be particularly difficult to be clear on what feedback like "correct" next to an answer choice actually means. Does it apply to the choice or to your action of selecting or not selecting that choice? E.g. does it mean "you were correct (even though this may have been a wrong answer)"? Or does it mean "This option was correct (even though you may not have selected it so you were wrong)"? The simplest approach may be to provide the feedback on a separate page using a clear stateme
nt that says "you answered ... You were correct/incorrect. The correct answer was ...".

I hope this helps. Let us know if you need any more help with this.

Mark

Mark Magennis
Skillsoft | mobile: +353 87 60 60 162
Accessibility Specialist