Appearance

Keyboard Accessibility for Videobot Embeds ​

Overview ​

This guide explains how to implement proper keyboard accessibility for Videobot iframe embeds on your website. Ensuring your embedded Videobots are keyboard accessible is essential for users who rely on keyboard navigation and for compliance with accessibility standards such as WCAG 2.1.

Default Keyboard Behavior ​

Videobot embeds include built-in keyboard support:

  • Tab Navigation: Users can tab through interactive elements within the player
  • Enter/Space: Activates buttons and controls
  • Escape Key: Closes the full-screen player view
  • Focus Trap: When the full-screen player is open, keyboard focus remains within the player until it is closed

Managing Focus Between Your Website and Videobot ​

The Focus Challenge ​

When embedding Videobots in iframes, users may encounter a "focus trap" where they cannot tab out of the iframe back to the parent page. This happens due to browser security limitations when dealing with cross-origin iframes.

Videobot includes built-in support to help solve this issue by sending a VIDEOBOT_FOCUS_OUT message with information about the tab direction when users reach the boundaries of focusable elements.

Solution: Handle Focus Exit Messages ​

To ensure users can properly tab out of the Videobot iframe and back to your website content, implement this solution on your website:

javascript
// Add event listener to handle focus when it exits the Videobot iframe
window.addEventListener('message', function(event) {
  // Focus management handler
  const handleFocusOut = (event) => {
    if (event.data.action !== 'VIDEOBOT_FOCUS_OUT') {
      return
    }
    
    const focusableElements = document.querySelectorAll(
      'button, a[href], [tabindex]:not([tabindex="-1"]), input, select, textarea'
    )
    
    if (!focusableElements.length) {
      return
    }
    
    const direction = event.data.direction || 'forward'
    
    if (direction === 'backward') {
      focusableElements[focusableElements.length - 1].focus()
    } else {
      focusableElements[0].focus()
    }
  }
  
  // Call the handler with the event
  handleFocusOut(event)
})

This code handles the VIDEOBOT_FOCUS_OUT message that Videobot sends when a user tabs to the boundary of focusable elements inside the player. It intelligently moves focus to either the first or last focusable element on your page, depending on the tab direction.

Cross-Browser Considerations ​

Focus management works differently across browsers:

  • Chrome/Firefox: Focus typically returns to the element that had focus before the player opened
  • Safari/WebKit: Focus often returns to document.body after closing modals

The solution above works consistently across all browsers since it explicitly sets focus on specific elements rather than relying on browser-specific focus management behaviors.

Testing Keyboard Accessibility ​

To verify your implementation is working correctly:

  1. Use the Tab key to navigate to the Videobot iframe
  2. Press Enter to activate the videobot player
  3. Tab through the controls in the player
  4. Press Tab until you reach the last focusable element in the player
  5. Verify focus moves to the first focusable element on your page
  6. Navigate back to the player using Shift+Tab from the first element on your page
  7. Verify focus moves to the last element in the player
  8. Press Escape to close the player
  9. Verify focus returns to your page appropriately

Troubleshooting ​

  • Focus not moving out of iframe: Ensure you've implemented the message listener exactly as shown
  • Wrong elements receiving focus: Check your selector for focusable elements and consider filtering out any hidden elements
  • Browser-specific issues: Verify the solution works across all major browsers

Additional Resources ​