New tabs UI not keyboard accessible

  • Hi, Takayuki –

    The new tabs for managing Contact Form 7 panels aren’t accessible by keyboard. You’re using tabindex=-1 on the inactive tabs, which means that they can’t be accessed from the keyboard.

    Using tabindex=-1 means that the control can receive programmatic focus (e.g., you can assign focus using JavaScript $(this).focus()); using tabindex=0 means that the control is placed in the natural tab order. Since you’ve added tabindex=-1 to both the anchor and the list item, the unfocused tabs can’t be reached from the keyboard.

    All you need to do is change it so that inactive tabs have tabindex of 0.

    Thanks!

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Takayuki Miyoshi

    (@takayukister)

    Hi, Joe. Thank you for the advice.

    The tabindex attribute is actually not in Contact Form 7’s code but coming from the jQuery-UI Tabs library. I thought they put them for accessibility purpose.

    Looking at the source code, they seem to be very careful about accessibility and have had an intention to control tabindex values finely as well.

    So, I think I need to study their code first to figure out what is the right way to handle this. I’ll come back to write here if I figure out something.

    If you find other issues about the new UI, please let me know. I have concern that tag-generator buttons on the “Form” tab (using ThickBox) might cause issues.

    Thread Starter Joe Dolson

    (@joedolson)

    They probably did put them there for accessibility purposes; but if so, they made a mistake – with that tabindex choice, the inactive tabs are completely inaccessible.

    I haven’t looked at the new tag generator interface yet; but I’ll share my comments when I get an opportunity.

    Plugin Author Takayuki Miyoshi

    (@takayukister)

    I found that jQuery-UI Tabs allows to switch tabs and panels using LEFT and RIGHT keys.

    https://api.jqueryui.com/tabs/

    Keyboard interaction

    When focus is on a tab, the following key commands are available:

    • UP/LEFT: Move focus to the previous tab. If on first tab, moves focus to last tab. Activate focused tab after a short delay.
    • DOWN/RIGHT: Move focus to the next tab. If on last tab, moves focus to first tab. Activate focused tab after a short delay.

    I’m considering displaying a message like “Switch panels with LEFT/RIGHT key” during a tab has focus. Do you think this can resolve the issue?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘New tabs UI not keyboard accessible’ is closed to new replies.

Tags