[Accessibility] "I'm done now" and "Continue with lessons" are not buttons


#1

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).

HTML:

<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 :slight_smile:


#2

You can alternatively use the left arrow and right arrow/return key to use these buttons, but I agree that this functionality should be added if they are unclickable with accessibility tools.


#3

I never even tried to click those button. Just always use Arrow keys. :smiley: