Time slots not keyboard-accessible

  • Resolved JB Christy

    (@jbchristy)


    7 years, 8 months ago

    This plugin looks fabulous, and just exactly what we need to allow scheduling appointments during recurring office hours. However, we are not just morally but also legally required to ensure that our websites are accessible in accordance with WCAG guidelines. This includes allowing users who use keyboards to trigger links (vs. a mouse), as well as screen-reader users, to access all core content and functionality.

    Most of your front end is keyboard and screen-reader accessible. However, your time slots in .time-row .time.well are invisible to keyboard navigation and screen readers, as they are implemented as <div>s, not <a>s.

    Would it be possible for you to (reasonably quickly) make your time slots accessible to screen readers and keyboard-navigators? It may be as simple as changing your <div>s to <a>s, depending of course on your JS.

    If you can’t do it, or can’t do it quickly, I like this plugin enough that I’m willing to do some work to make it accessible. Is your code in git repo somewhere (github, bitbucket, …)? I’d be happy to fork and do a pull request.

    Note: I found this repo on github, but the last commit was on Nov 21, 2015, whereas wordpress.org says the plugin was just updated 2 days ago.

    Thanks for an awesome plugin! I hope I’ll be able to use it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Nikola Loncar

    (@loncar)

    7 years, 8 months ago

    Hi @jbchristy,

    so only time value has to improved to be selectable via keyboard other fields are fine? I can fix that for you and add it to next version of plugin.

    Regarding repo on github is old and it is just a copy from WordPress repo from long time ago. Official repo is one on WordPress.org.

    Best regards,
    Nikola

    Thread Starter JB Christy

    (@jbchristy)

    7 years, 8 months ago

    Hi @loncar,

    Thanks for the swift reply! I haven’t done thorough testing of all cases, but yes, the time value is the only issue I’ve found so far, and it’s a show-stopper for me.

    I fiddled around myself and found that if I changed

    next_element.append('<div class="time-value' + classAMPM +'" data-val="' + element.value +'">' + element.show + '</div>');

    to

    next_element.append('<a tabindex="0" class="time-value' + classAMPM +'" data-val="' + element.value +'">' + element.show + '</a>');

    tabbing became possible. Unfortunately, after inserting next_element into the DOM, tabbing reverts to the first day in the calendar with available time slots, rather than proceeding to the newly added time slots. I was just fiddling with where to place .focus() when my boss told me to stop working on it. 😉

    Note that I had to explicitly add tabindex="0" in order for the browser to pick up the newly added element.

    Anyway, if you could fix this in the next release of the plugin, that would be stellar. Thanks, Nikola!

    • This reply was modified 7 years, 8 months ago by JB Christy.
    Plugin Author Nikola Loncar

    (@loncar)

    7 years, 8 months ago

    Hi @jbchristy I was faster then you, new version is live 😉 I have altered it so can you please try it out and see if that suit your requirements.

    Best regards,
    Nikola

    Thread Starter JB Christy

    (@jbchristy)

    7 years, 8 months ago

    Nikola, you’re AWESOME! I was able to schedule a time slot without touching my mouse. Phew! I think this means I’ll be able to use this plugin.

    I recommend adding some screen-reader text here and there to ensure screen-reader users know what to expect when they click on various links. That’s quite important, but I don’t think it’s an actual show-stopper, in the way that not being able to use the scheduling tool at all stopped the show.

    Thanks so much for addressing my issue, and so quickly!

    Best,
    -JB

    Plugin Author Nikola Loncar

    (@loncar)

    7 years, 8 months ago

    You’re welcome, you can add short user guide before plugin form just to inform users. If you have any problems feel free to open new topic here on support forum.

    Best regards,
    Nikola

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Time slots not keyboard-accessible’ is closed to new replies.