Return to Answer

The answer is simply yes. But I see where your question comes from: it is designed for mouse users. It is the same problem as with fly-out mega menu's, where a sub menu shows when the mouse hovers an item.

I suggest to make the chat icon a button that allows opening the popup with the enter key. The popup should have focus when it opens. See this example of an accessible modal: https://ireade.github.io/accessible-modal-dialog/. It should also work for the popup. Explanation and code can be found here: https://bitsofco.de/accessible-modal-dialog/.

Important is:

• Make the popup part of the flow (give it focus)
• Don't open it automatically for keyboard users, let them press enter on the button
• Add a button to the popup to close it and allow it to close with the escape key
• Use aria-label on the chat icon-button that tells that it opens a popup with.. messages(?)

The answer is simply yes. But I see where your question comes from: it is designed for mouse users. It is the same problem as with fly-out mega menu's, where a sub menu shows when the mouse hovers an item*.

I suggest to make the chat icon a button that allows opening the popup with the enter key. The popup should have focus when it opens. See this example of an accessible modal: https://ireade.github.io/accessible-modal-dialog/. It is close to (if not exactly) what you want for the popup. Explanation and code can be found here: https://bitsofco.de/accessible-modal-dialog/.

Important is:

• Make the popup part of the flow (set focus on the first focussable element in the popup)
• Don't open it automatically for keyboard users, let them press enter on the button
• Add a button to the popup to close it and allow it to close with the escape key
• Use aria-label on the chat icon-button that tells that it opens a popup with.. messages(?)

*A tutorial how to make fly-out/mega menu's accessible and an example

The answer is simply yes. But I see where your question comes from: it is designed for mouse users. It is the same problem as with fly-out mega menu's, where a sub menu shows when the mouse hovers an item. There is a good tutorial how to make hover work for keyboard users here: https://www.w3.org/WAI/tutorials/menus/flyout/.

But I suggest to make the chat icon a button that allows opening the popup with the enter key. The popup should have focus when it opens. See this example of an accessible modal: https://ireade.github.io/accessible-modal-dialog/. It should also work for the popup. Explanation and code can be found here: https://bitsofco.de/accessible-modal-dialog/.

Important is:

• Make the popup part of the flow (give it focus)
• Don't open it automatically for keyboard users, let them press enter on the button
• Add a button to the popup to close it and allow it to close with the escape key
• Use aria-label on the chat icon-button that tells that it opens a popup with.. messages(?)

The answer is simply yes. But I see where your question comes from: it is designed for mouse users. It is the same problem as with fly-out mega menu's, where a sub menu shows when the mouse hovers an item.

I suggest to make the chat icon a button that allows opening the popup with the enter key. The popup should have focus when it opens. See this example of an accessible modal: https://ireade.github.io/accessible-modal-dialog/. It should also work for the popup. Explanation and code can be found here: https://bitsofco.de/accessible-modal-dialog/.

Important is:

• Make the popup part of the flow (give it focus)
• Don't open it automatically for keyboard users, let them press enter on the button
• Add a button to the popup to close it and allow it to close with the escape key
• Use aria-label on the chat icon-button that tells that it opens a popup with.. messages(?)

The answer is simply yes. But I see where your question comes from: it is designed for mouse users. It is the same problem as with fly-out mega menu's, where a sub menu shows when the mouse hovers an item. There is a good tutorial how to make hover work for keyboard users here: https://www.w3.org/WAI/tutorials/menus/flyout/.

But I suggest to make the chat icon a button that allows opening the popup with the enter key. The popup should have focus when it opens. See this example of an accessible modal: https://ireade.github.io/accessible-modal-dialog/. It should also work for the popup. Explanation and code can be found here: https://bitsofco.de/accessible-modal-dialog/.

The answer is simply yes. But I see where your question comes from: it is designed for mouse users. It is the same problem as with fly-out mega menu's, where a sub menu shows when the mouse hovers an item. There is a good tutorial how to make hover work for keyboard users here: https://www.w3.org/WAI/tutorials/menus/flyout/.

But I suggest to make the chat icon a button that allows opening the popup with the enter key. The popup should have focus when it opens. See this example of an accessible modal: https://ireade.github.io/accessible-modal-dialog/. It should also work for the popup. Explanation and code can be found here: https://bitsofco.de/accessible-modal-dialog/.

Important is:

• Make the popup part of the flow (give it focus)
• Don't open it automatically for keyboard users, let them press enter on the button
• Add a button to the popup to close it and allow it to close with the escape key
• Use aria-label on the chat icon-button that tells that it opens a popup with.. messages(?)