Virtual Tour Apps - Accessibility Considerations

Owned by Solomon Hsu
May 06, 2024
3 min read

Objective:

This document aims to capture the accessibility features required for applications that look like the Google Map Street View. This type of application allows users to view the environment of a remote location where they may not be able to access the location due to distances.

This document was inspired by the request from ModernTO on the ModernTO - About and Benefits page.

Description of the application:

Below is a screenshot of the modernized floor at City Hall.

image-20240117-163650.png

Features observed:

This application allows users to interact in the following ways:

  • Press the locations in the left hand side navigation to “quick travel” to the location.

  • Press the up arrow key to the next photo capture location.

    image-20240117-164106.png

  • Use browse the surrounding 360 degrees by press and holding the primary mouse key. Then, move around the computer mouse to change the viewing angle.

  • Recognize the direction for North on the mini-map and the facing direction with the blue cylinder area.

  • Use the mini-map on the right hand side to “quick travel” to different photo capturing location.

  • Hover on the “i” icon to see the popup help text.

Accessibility Features to be Included:

  • Keyboard navigation functionalities when pressing WASD or the arrow keys.

    • Proposal:

      • W, S, Up and Down arrow keys to move forward and backward.

      • A, D, Left and Right arrow keys to pan the angle to left and right.

      • R and Right Shift to pan the angle up

      • F and Right Control to pan the angle down

  • Keyboard navigation to the interactive elements are still valid.

    • All links, buttons, and interactive areas also need to receive keyboard focus and can be interacted when pressing the Enter, Space, Arrow, Tab, Escape, and other related keys.

    • All interactive elements also need to be screen reader accessible.

  • All functions need to be operable with one pointer.

    • Users can zoom in and out by pressing certain buttons.

  • Text alternative for the visible photos.

    • A short description of the overall space.

    • A short description for the key areas. Currently considering leverage the dialog patter for the descriptions of the key areas.

  • Tooltips on the interactive elements need to be more visible with sufficient contrast.

  • Provide a keyboard interaction shortcut instruction for users.