How long should a correct/incorrect interstitial notification be shown?

Question

I have a game: knowitornot.com that shows interstitial "correct" or "incorrect" screens between questions. I was wondering how long those screens should last to be considered accessible. Or if there is any alternative.

Answer

The situation being described here is that upon selecting an answer to a question, the user is presented with a screen containing the text “Correct” or “Incorrect” that lasts for about one full second.

Based on the exact situation for the game mentioned in the question, we believe it currently meets WCAG AA standards. The interstitial that states "Correct” or “Incorrect” as it relates to your answer to the question can be considered decorative because that same information (and more) is shown on the next screen. That being said, extending the time a bit to 2 or 3 seconds would help it feel less of a “flash” on the screen and would be beneficial for some users.

In most cases, we would recommended to not limit the amount of time this text/screen is visible. Instead, we would encourage adding the ability to let the user decide when to dismiss this screen (i.e. dismiss/close <button>). 

From a AAA conformance standpoint, this interstitial would fail 2.3.3 Animation from Interactions. In order to comply with this success criterion, you would need to offer the ability to turn off the animations.

Additionally, to ensure that users of assistive technology also get this immediate feedback when an answer is correct or incorrect, we suggest adding an alert to inform them of the result. Since (in this case) the user stays on the same page without refreshing upon answering a question, an assertive alert would do the trick. This can be done by placing an empty `<div>` on the web page and giving that `<div>` an attribute of `role="alert"`. Then, when you wish to present the status message (i.e. right as the text “Correct” or “Incorrect” is displayed), inject the text into that `<div>`. This will give the message an implied role of `aria-live="assertive"`, which means that assistive technologies (such as a screen reader) will announce it immediately.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.