After I finish a session, I’m greeted with two “buttons” one for going back, one for continuing lessons (if there is more).
However, as a user using accessibility tools, I can not click these items because they are not buttons. (they might have click events on them, but a user that has muscle disease, or missing limbs, may be unable to click the button).
<ul class="btn-set"> <li id="lesson-ready-end"> <i class="icon-arrow-left"></i>I'm done for now </li><li id="lesson-ready-continue" class="dominant"> Continue with new lessons<i class="icon-arrow-right"></i> </li> </ul>
and here is something on the topic from Mozilla, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role
You need to use ARIA to let a screen reader know, “hey I made my own button, the user can interact with it by pressing on it.” Also note, that you will have to add ability for spacebar and tab navigation of the element. If you’re using a framework they probably have their own buttons that support all of that, if not, something worth adding