Create an Intuitive Backtracking and Review Interface for Visually Impaired Users

[Taehyun-Alex]

User Story:

As Dan, I want an intuitive interface for backtracking and reviewing content, so that I can easily understand the material despite my recent loss of sight.

Interaction Pattern:

Upload and Start Video Playback

1. Navigate to OcrRoo Website

• Dan opens his preferred web browser and navigates to the OcrRoo website using his screen reader
• He logs in using his credentials by typing in the fields and pressing enter after each input, guided by the screen reader.

2. Upload Coding Tutorial

• Dan uses the Tab key to navigate through the homepage options until he hears "Upload Video."
• He presses Enter to open the upload dialog.
• Using keyboard shortcuts or screen reader guidance, Dan selects the file from his local system and uploads it.
• The screen reader confirms, "Video uploaded successfully."

Access Code Snippet Container

3. Access Code Snippet Container

• Once the video starts playing, Dan hears a confirmation, "Video playing, current timestamp [timestamp]."
• He uses the Tab key to move the focus until the screen reader announces, "Code Snippet container."

4. Navigate Code Snippet Container

• Dan presses Enter to enter the Code Snippet container.
• He hears, "Code Snippet container, use arrow keys to navigate snippets."

Navigate Through Code Snippets

5. Move Between Snippets

• Dan presses the Left Arrow or Right Arrow keys to shuffle to the previous or next code snippet.
• Each time he presses the Left Arrow or Right Arrow keys, the screen reader reads out the content of each snippet, e.g. "Code snippet at timestamp [timestamp], content: [code]."
• Dan presses the Spacebar to replay the current snippet. The screen reader says, "Replaying code snippet."

Copy Code Snippets

6. Select Snippet for Copying

• When Dan finds a code snippet he wants to copy, he navigates to it using the arrow keys until the screen reader reads out the desired snippet.

7. Copy the Snippet

• Dan presses a combination of Ctrl+C (or Command+C on macOS) to copy the currently selected code snippet.
• The screen reader confirms, "Code snippet copied."

Paste Code in IDE

8. Switch to IDE

• Dan switches to his preferred Integrated Development Environment (IDE) using Alt+Tab (or Command+Tab on macOS) guided by his screen reader.

9. Paste Code

• Dan uses keyboard shortcuts or navigates the IDE's menu to open a new or existing file.
• The code editor announces when the code editor is in focus, "Code editor focused."
• He presses Ctrl+V (or Command+V` on macOS) to paste the code snippet.
• His screen reader confirms, "Code pasted in IDE".

Features:

• Design a user-friendly navigation bar or timeline to allow easy backtracking.
• Ensure the interface supports keyboard navigation.
• Ensure that backtracking features are easily discoverable and usable with screen readers.