Quick and Dirty Accessible Self-Check Quiz with Just CSS and Tabindex

Something instructional designers like to do is build in self-check quizzes into online tutorials. It’s just a quick way to help learners determine if they are “getting” it or not.

Unfortunately interactive elements have been notorious for presenting problems to different audiences. The issue is generally making sure a blind user can see the answer once it’s revealed. Fortunately, advances in CSS and browser technology allow one to create better self checks.

In fact, I’ve updated one self-check in a database tutorial so that the answer is disguised in a box where the color the text and background match – until a mouse or tab key hits it to reveal the answer.

Hiding and Revealing Answer

The answers are visually hidden and revealed based on CSS of the background color. In the “hidden” state, the text and background are the same color and in the revealed state, the colors are different.

To enact hover states, the entire answer was placed in a link tag. The crucial parts of the style are display:block (to make the link act like a paragraph box), text-decoration:none and matching the color and background-color attributes. Add padding and margins as needed.

View the CSS

Note that it doesn’t necessarily “hide” text from blinder users on a screen reader, but since text is presented in linear order, that is not as serious an issue as it could be IMHO. I would however ensure that 1) the question is an H tag and that the answer text in the link begin with “Answer”. And then you can hush the screen reader.

To reveal the answer, it’s important to create an appropriate CSS for BOTH the a:hover (mouseover) and a:focus (keyboard focus). Here is the CSS below.

Tabindex

Assuming the answer is in a link, most browsers will allow you to tab right to the answer and hit ENTER or the DOWN ARROW (Chrome) to reveal the answer. But what about the question?

You could embed the question in a link, but another option is to embedd the tabindex="0" attribute in whatever tag the question lives in (it could be an H tag or P tag). The Tab Index is a signal to “stop here”, but setting the value to “0” doesn’t make any changes to order.

You can also add a tabindex to the answer, but since I buried it in A tag to use its hover effects, it’s redundant. So let’s look at the HTML for this.

View the HTML