HTML for Presentations/Slideshows

Hello! It’s me again. This time I want to show the freeCodeCamp community the result of a question I had:

“Can I replace Libreoffice Impress, Microsoft PowerPoint or Google’s whatsitsname with HTML on my browser for presentations?”

After discovering Mozilla’s Summit presentation abouth MathML I wanted to try it myself!

My take on it at codepen.

I wanted to use accessKeys for direct access and CSS flex. Also there’s a little fade to get transitions here too. You can use the directional arrows for navigation. It doesn’t use JS.
I should certainly expand the CSS for the content, but I’m quite happy with this outline.

Thanks for your feedback and sorry for that! Are you using your keyboard’s arrows?
When the page loads there’s a out-of-page (position: absolute; left:-10%; ) radio input with the autofocus prop. After that and if focus is not lost you should be able to navigate using ← or → on your keyboard. If focus on the radio buttons is lost, you can regain focus using accessKeys (Alt+Shift+1 through 3 on Firefox)
(I thought I had disabled the on-page next and prev buttons)

Would you mind clicking on “Bienvenidos”, pressing Tab once and trying the arrows a last time?

Thanks for your time!
I didn’t know about the issue because it worked right away on my PC with Chromium 68 and Firefox 61+. I guess I ran afoul of good practices, I’m relying on bugs or got too hacky :sweat_smile:.

It might be something about the autofocus attribute (autofocus on w3schools).

Testing is very important.