How to implement

Question

Hi,

I have a website where a user has to solve problems.After user submits the solution,he is informed whether his solution was right or wrong.Now,the issue is when the user is using a screen reader.The reader reads the whole page again before it reaches the response(right/wrong).I want that as soon as response comes back, first thing screen reader reads is the correctness of solution.One way, is like the hidden "skip navigation". I can add dynamically hidden "right/wrong".Any suggestions? Is my solution fine?

Answer 1

Best answer I would think would be to place the answer first in the HTML source code, but move it further down using some sort of CSS, that the screen reader perhaps doesn't know how to interpret.

Alternatively, do the screen reader people have different HTML Headers? Perhaps they identify themselves. In that case, you could just format the site differently for screen readers.

Answer 2

Maybe put the answer first, but just hide it using the css display:none property. Yould probably want to put it inside the body tag though otherwise you might cause problems in the layout of the page in some browsers.

http://www.w3schools.com/css/pr_class_display.asp for more info on display none.

Answer 3

Maybe have a look into WAI-ARIA live regions? They're mainly aimed at AJAX apps as far as I can tell, but you might be able to put it to good use. You can use them to tell assistive technologies when you've updated a particular part of the page, and how important that change is, e.g.

<h2 aria-live="assertive">You're 100% of correct!</h2>

Take a look at http://dev.opera.com/articles/view/introduction-to-wai-aria/ for more on the subject.