Move browser-focus to website-widget on TAB+ENTER

For accessibility-purposes, it's important that websites are as accessible as possible. Some people are required to ónly using their keyboards and are less able to accurately use a mouse. For this purpose we use :focus. When hitting TAB on your keyboard on a website, you move from button/link to button/link. Pressing ENTER opens the link or triggers an action. Just try to navigate a website without using your mouse and only using your keyboard. A well designed website is still fully accessible. 

 

On one of our link-buttons, we use a piece of jQuery-JavaScript to open the Website-widget when the button is clicked. When a link with the href-atrribute "#chatten" is clicked, the window.Trengo.Api.Widget.Open('chat') action is triggered, opening the chat-window. 

jQuery(document).ready(function($){
    $('a[href="#chatten"]').click(function(){
        event.preventDefault();
        window.Trengo.Api.Widget.open('chat');
    });
});

This all works fine when clicking the button with a mouse. Ans also when the user navigates to the button using TAB and presses ENTER on the button, the chat-window opens as intended. 

 

And here is where it gets interesting. Because the problem is that the focus remains on the button the user just clicked / triggers. When using only your keyboard, the user should be able to immediately start typing in the chat, or at least be focused on the chat-window, to quickly TAB his way to the entryfield. Now, if the user TAB's further, he moves to the next button on the website, instead of the website-widget.

Only when TABbing all the way to the bottom of the page, the next TAB will focus him on the website-widget.  

Please put a fix of this issue on the development-roadmap, because the chat-option is especially important for people who are less able to navigate themselves digitally. 

1reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
  • Thanks for sharing this wish! I see how this would add on to the usability! Will keep you posted if there's any news worth mentioning. 

    Like
Like1 Follow
  • 1 Likes
  • 1 mth agoLast active
  • 1Replies
  • 5Views
  • 2 Following