HelpHero tours, hotspots and checklists include appropriate roles and attributes to ensure they are accessible to people with disabilities. We are always open to accessibility improvements if you have any feedback please send us an email.
We recommend adding the following custom CSS to give users a visual indicator of what element within HelpHero content currently has keyboard focus. You may need to adjust the colors to ensure good contrast with your chosen theme.
:host { --outline-color: rgb(85, 85, 85); } .hlp-checklist-button:focus-within, .hlp-dialog-btn:focus-within, .hlp-checklist-back:focus-within { outline: 2px solid var(--outline-color) !important; } .hlp-checklist-dialog-item:focus-within { outline: 2px solid var(--outline-color) !important; outline-offset: -4px; border-radius: 8px !important; } button[title="Close"]:focus-within svg, button[title="Quit Tour"]:focus-within svg { outline: 2px solid var(--outline-color) !important; outline-offset: 2px; border-radius: 50% !important; }
Focusable elements on a webpage can be navigated to using the tab key, this is standard functionality which comes built into browsers. Pressing the tab key allows users to jump from one focusable element on the page to another. The HelpHero checklist beacon can be navigated to in this way. Once the checklist beacon is focused the user can use the enter key to open the checklist menu. The checklist menu can be closed using the escape key. When the checklist is opened the first item in the checklist menu is focused. The user can navigate to other items in the checklist menu using the tab key and press enter to start the corresponding tour.
When a step in a HelpHero tour is displayed the primary/next button is automatically focused. This means the user can proceed to the next step by pressing the enter key. HelpHero tours can be cancelled/closed by pressing the escape key.