Common Focus Order Issues in Video Conferencing Apps: Causes and Fixes

Focus order issues refer to the incorrect or illogical sequence in which interactive elements, such as buttons and form fields, receive focus when navigating through a user interface using a keyboard

Introduction to Focus Order Issues in Video Conferencing Apps

Focus order issues refer to the incorrect or illogical sequence in which interactive elements, such as buttons and form fields, receive focus when navigating through a user interface using a keyboard or assistive technologies. In video conferencing apps, these issues can significantly hinder the user experience, particularly for users relying on screen readers or keyboard navigation.

Technical Root Causes of Focus Order Issues

The technical root causes of focus order issues in video conferencing apps can be attributed to several factors:

• Inadequate HTML structure: Incorrect use of HTML elements, such as using div elements for buttons instead of button elements, can lead to focus order issues.
• Insufficient ARIA attributes: Failure to provide proper ARIA (Accessible Rich Internet Applications) attributes, such as role and aria-label, can make it difficult for screen readers to understand the purpose and sequence of interactive elements.
• Inconsistent styling: Using CSS to remove the default focus styles from elements can make it difficult for users to visually track the focus order.
• Dynamic content loading: Loading content dynamically without properly updating the focus order can cause elements to be skipped or focused out of order.

Real-World Impact of Focus Order Issues

Focus order issues in video conferencing apps can lead to a range of negative consequences, including:

• User complaints and frustration: Users may struggle to navigate the app, leading to frustration and potential abandonment.
• Poor store ratings: Apps with focus order issues may receive low ratings and negative reviews, deterring potential users.
• Revenue loss: By failing to provide an accessible experience, video conferencing apps may lose revenue from users who are unable to effectively use the app.

Examples of Focus Order Issues in Video Conferencing Apps

Here are 7 specific examples of how focus order issues can manifest in video conferencing apps:

1. Join meeting button is focused before the meeting ID field: When joining a meeting, the user is expected to enter the meeting ID before clicking the join button. However, if the join button receives focus first, the user may accidentally join a meeting without entering the correct ID.
2. Mute microphone button is skipped in focus order: During a meeting, the user may want to mute their microphone. If the mute button is skipped in the focus order, the user may need to use a mouse to access the button, which can be inconvenient.
3. Screen sharing options are not focusable: When sharing screens, the user may want to select from different sharing options (e.g., entire screen, window, or tab). If these options are not focusable, the user may struggle to select the desired option using a keyboard.
4. Chat input field is focused before the chat button: When sending a chat message, the user is expected to type the message before clicking the send button. However, if the chat input field receives focus after the send button, the user may accidentally send an empty message.
5. Participant list is not navigable using a keyboard: During a meeting, the user may want to view the list of participants. If the participant list is not navigable using a keyboard, the user may struggle to access this information.
6. Recording buttons are not focusable: When starting or stopping a recording, the user may want to use a keyboard to access the recording buttons. If these buttons are not focusable, the user may need to use a mouse.
7. Settings menu is not accessible using a keyboard: The settings menu may contain important options for customizing the video conferencing experience. If the settings menu is not accessible using a keyboard, the user may struggle to access these options.

Detecting Focus Order Issues

To detect focus order issues, developers can use a range of tools and techniques, including:

• Keyboard navigation: Navigate through the app using a keyboard to identify any focus order issues.
• Screen readers: Use screen readers, such as JAWS or VoiceOver, to test the app's accessibility and identify focus order issues.
• Accessibility auditing tools: Utilize tools, such as Lighthouse or WAVE, to identify potential accessibility issues, including focus order issues.
• Automated testing tools: Use automated testing tools, such as SUSA, to test the app's accessibility and identify focus order issues.

Fixing Focus Order Issues

To fix focus order issues, developers can follow these steps:

• Join meeting button: Ensure that the meeting ID field receives focus before the join button by using the tabindex attribute or reordering the HTML elements.
• Mute microphone button: Add the tabindex attribute to the mute button to ensure it is included in the focus order.
• Screen sharing options: Use the role attribute to define the screen sharing options as a list, and ensure that each option is focusable using the tabindex attribute.
• Chat input field: Ensure that the chat input field receives focus before the send button by using the tabindex attribute or reordering the HTML elements.
• Participant list: Use the role attribute to define the participant list as a list, and ensure that each participant is focusable using the tabindex attribute.
• Recording buttons: Add the tabindex attribute to the recording buttons to ensure they are included in the focus order.
• Settings menu: Ensure that the settings menu is accessible using a keyboard by adding the tabindex attribute to the menu items.

Preventing Focus Order Issues

To prevent focus order issues, developers can follow these best practices:

• Use semantic HTML: Use semantic HTML elements, such as button and input, to define the purpose and structure of interactive elements.
• Test with keyboard navigation: Regularly test the app using keyboard navigation to identify any focus order issues.
• Use accessibility auditing tools: Utilize accessibility auditing tools to identify potential accessibility issues, including focus order issues.
• Implement automated testing: Use automated testing tools, such as SUSA, to test the app's accessibility and identify focus order issues.
• Conduct user testing: Conduct user testing with users who rely on screen readers or keyboard navigation to identify any focus order issues.