Question on Test your skills: CSS and JavaScript accessibility, JavaScript accessibility 1

I’m working on the following challenge:

You’re asked to use HTML & JavaScript to make this example keyboard accessible.
The article on “Building keyboard accessibility back in” ( is a helpful reference point for this task.

I’ve used the tabindex = “0” attribute to make the list of animal names “tabbable”. The activity instructions are vague, but I think I am also trying to make the animal descriptions appear if you hit Enter when an animal name is highlighted by the tab feature.

According to the Building Keyboard Accessibility Back In article, I think some variation of this will help me achieve that goal:
document.onkeydown = function(e) {
if(e.key === ‘Enter’) { // The Enter/Return key
but I’m not sure how to apply it correctly to my code.

Here is the link to my code:!/tropical-handsomely-cork. I’ve only added the tabindex attribute. I’ve experimented with adding the above function(?) to various places in the script area, and I’ve copied and pasted the whole script section from the fake div buttons example (, but that didn’t work either.

Any hints for how to proceed are welcome!

As someone new to MDN, I’m also not sure where to find solutions for this Test your Skills section–I’m not sure if I’m missing something or if it is just expected that there will be a forum post on any topic.


Your tabindex="0" additions are correct.

I think the easiest way would be to add the event on the element itself. I would also recommend to generally use the keyup event. This is fired when the key is released.

Does that get you further? Feel free to ask if you need more help. :slightly_smiling_face:

For smaller exercises the solutions are in the same folder as the starting code in file called “”. For bigger exercises they are in their own folder next to the folder with the starting code. In this case the solution folder is called “aria” and is located here:

Have a nice day,