I’m working on the following challenge: https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility#javascript_accessibility_1.
You’re asked to use HTML & JavaScript to make this example keyboard accessible.
The article on “Building keyboard accessibility back in” (https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#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
document.activeElement.onclick(e);
}
};
but I’m not sure how to apply it correctly to my code.
Here is the link to my code: https://glitch.com/edit/#!/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 (https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html), 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.
