Voiceover screen reader guide for Digication works

Related article

JAWS screenreader guide for Digication ePortfolios

NVDA screenreader guide for Digication ePortfolios

---

In keeping with our commitment to providing a product that is fully accessible for all users, Digication continuously works to ensure that as many actions as possible can be completed using a screen reader.  This guide is meant for any users accessing Digication with VoiceOver screen reader to help accomplish common tasks associated with using a Digication ePortfolio.

Using a modifier key

A modifier key is the particular keyboard key, or combination of keys, that initiates a command when using a screen reader. The key or combination that serves as the modifier will depend on which screen reader you are using. To execute the commands included in this guide, you will need to hold down the modifier key or keys, which we refer to as “VO”, and then enter the command. Please note that these shortcuts will not work if you are not actively using a screen reader.

Page structure of Digication ePortfolios

Each ePortfolio page consists of one or more Sections which are used to organize your content. Each page can contain multiple sections, and each section can contain multiple modules. Modules hold different kinds of content such as text, documents, images and videos.

The first section of each page is the header section.  Some important things to note about the header section:

• It is shared across all pages.  A change to the header section will be in effect across the whole ePortfolio, regardless of which page you are on when the change is made.
• It must be unlocked by selecting the lock icon before any changes can be made.
• To interact with the content of an individual page, you will need to navigate past the header section.

The order of the different buttons/items on the ePortfolio page is as follows

1. 1. Section
   2. Modules inside the section
   3. Module buttons are available only if module is selected by pressing Enter.
   4. The section buttons like the lock/unlock section(in case of instructional section),move section, open settings and delete section are available after the last module of the section.

Steps for common ePortfolio tasks

Steps for adding a module to an ePortfolio page

1. VO + U to open rotor.
2. Left & Right Arrow to select Form Controls. 
3. Type in “Add content to this page.”
4. VO + Space to select.
5. VO + Space to select the “add content” button.
6. VO + Shift +Left/Right arrows to Navigate between control groups.
7. Press Enter to interact with a control group.
8. VO + Space to add a module and begin updating.
9. Press Esc to cancel.

Steps to edit content of a text module in the first section below the header

1. VO + Right arrow to skip to main content.
2. VO + Space to go to the main content group of ePortfolio.
3. VO + Right arrow to go to main.
4. VO + Right arrow to go to the first section.
5. VO + Shift + Right arrow to go to the next section.
6. VO + Right arrow to go to the first module in the selected section.
7. VO + Space to toggle the module editing toolbar.
8. VO + Right arrow to go into the module.
9. VO + Shift + Right arrow to go into the module editing toolbar.
10. VO + Space to toggle editing mode. The text area element is in focus.
11. VO + Shift + Down arrow to go into the text area to start editing.
12. Use Left/Right arrows to navigate between characters.
13. Use Option + Left/Right arrows to navigate between words.

Note: Remember to turn off VO lock (VO + Left arrow + Right arrow) so that it doesn’t lose focus when you start typing.

Steps to edit text using the rich text toolbar inside of a text module

1. Repeat the steps for “Edit content of text-module in the first section below the header” to go into the text area for editing.
2. Use Shift + Left/Right arrows to select text by characters.
3. Use Shift + Option + Left/Right Arrows to select text by words.
4. VO + Shift + Up arrow get out of the text area.
5. VO + Shift + Right arrow to go to the rich text toolbar.
6. VO + Left/Right arrows to navigate to the desired toolbar button.
7. VO + Space to select the button.

Steps to upload a file to an ePortfolio page

1. VO + U to open Rotor.
2. VO + Right arrow to select “Form Controls” panel.
3. Type in “Add content to this page” to filter for the add content button then select it.
4. VO + Space to open the modal.
5. VO + U to Open Rotor.
6. Use Left & Right Arrow to select the Form Controls panel.
7. Type in “upload file button”, then select “Create new Upload File module button”
8. VO + Space to open the upload file modal.
9. VO + Shift + Down arrow to go in the iframe.
10. VO + Right arrow to go to “Select Files to Upload.
11. VO + Space to open the system file dialog then select file to upload.
12. VO + U to open Rotor, “Form Controls” panel.
13. Type in “upload” and use the Down arrow to select “Upload empty group.”
14. VO + space to upload the file.

Steps to edit content of a gallery / file module

1. VO + Right arrow to skip to main content.
2. VO + Space to access main content group
3. VO + Right arrow to go to main.
4. VO + Right arrow to go to the first section.
5. VO + Shift + Right arrow to go to the next section.
6. VO + Right arrow to navigate to Media Module.
7. VO + Space to toggle the module editing toolbar.
8. VO + Right arrow to go to “Edit current Media module” button.
9. VO + Space to open the gallery editing toolbar.
10. VO + Left arrow to select edit caption, replace this item, add more items.
11. VO + Space to open the Library modal.
12. VO + Left/Right arrows to navigate to the desired action group.
13. Use Shortcut: VO + Space to trigger the action then get the new file.

Steps to edit the navigation module

1. VO + U to open Rotor.
2. VO + Right arrow to select “Form Controls” panel.
3. Type in “Header Section group” to filter the elements list then select it.
4. VO + Shift + Down arrow to go into “Header Section group.”
5. VO + Shift + Right arrow to go to the header section’s lock icon.
6. VO + Space to unlock editing.
7. VO + Left arrow to go to the container group of the Navigation module.
8. VO + Space to toggle the Navigation module settings toolbar.
9. VO + Shift + Down arrow to go into the Navigation Module group.
10. VO + Shift + Right arrow to go to the “Edit current Navigation module” button.
11. VO + Space to open the Nav editing modal.
12. VO + Left/Right arrows to navigate to modal elements such as drag icon, page name input, settings icon, delete icon, etc.
13. Navigate to the Save button and click to save.
14. Use Esc to quickly close the modal without saving.

Note: A page can be moved up or down in the page order by first using VO + Space to select the  “Use arrow keys to organize page, button.” Once selected, use Option + Up and down arrows to move the page up and down in the page order.

 

Steps to open section settings sidebar 

1. VO + Right arrow to skip to main content.
2. VO + Space to go to the main content group.
3. VO + Right arrow to go to the main header section.
4. VO + Right arrow to go to the first section.
5. VO + Shift + Right arrow to go to the next section.
6. VO + Shift + Down arrow to go into the selected section.
7. VO + Shift + Right arrow to go to the first element of the section toolbar, which is the Move section button.
8. VO + Right arrow to select Open settings icon.
9. VO + Space to click the button and open the settings sidebar.
10. VO + Space to move between items and update settings value.

Steps to open module settings sidebar 

1. VO + Right arrow to skip to main content.
2. VO + Space to go to the main content group of ePortfolio.
3. VO + Right arrow to go to main.
4. VO + Right arrow to go to the first section.
5. VO + Shift + Right arrow to go to the next section.
6. VO + Right arrow to go into the first module of the selected section.
7. VO + Space to toggle the module editing toolbar.
8. VO + Right arrow to go into the module.
9. VO + Shift + Right arrow to go into the module editing toolbar. 
10. VO + Right arrow to select "Open Settings menu for current Text module" 
11. VO + Space to click the button 
12. VO + Space to move between items and update settings value

Steps to publish a page or pages

1. VO + U to open Rotor.
2. VO + Right arrow to select “Form Controls” panel.
3. Use VO + Down arrow to select “portfolio actions menu”.
4. VO + Space to expand the portfolio actions menu.
5. VO + Right arrow to navigate to the “PUBLISH THIS PAGE” or “PUBLISH PAGES” menu items.
6. VO + Space to click on the menu then open the submission modal.
7. VO + Left/Right arrows to navigate between elements such as pages' checkbox, close, cancel or submit buttons.
8. VO + Space to select an element.
9. Navigate to the Publish button and use VO + Space to submit.

Note: In the publish pages modal, if no page is selected, the Submit button is disabled. When navigating to the Submit button, it will be read as “Publish, dimmed button.” Otherwise, it will read “Publish, button”.

Steps for switching between edit and publish mode

1. VO + U to open Rotor.
2. VO + Right arrow to select “Form Controls” panel
3. Type in “ePortfolio is in Edit Mode” or simply “Edit Mode” to filter for the switch edit mode button.
4. VO + Space to toggle Edit and publish mode

Steps to submit an ePortfolio and access other items in the ePortfolio menu

1. VO + U to open Rotor.
2. VO + Right arrow to select “Articles Form Controls” panel.
3. Type in “portfolio actions menu” to filter for the Portfolio Actions Menu group.
4. VO + Space to expand the portfolio actions menu.
5. VO + Right arrow to navigate to “SUBMIT TO ASSIGNMENT” menu item.
6. VO + Space to click on the menu then open the submission modal.
7. VO + Left/Right arrows to navigate between elements such as left nav items, assignment elements, page elements.
8. VO + Space to select an element.
9. Navigate to submit buttons and use VO + Space to submit.
10. Press Esc. to quickly close the modal without saving.

Steps to view Conversations

1. VO + U to open Rotor.
2. VO + Right arrow to select “Form Controls” panel.
3. Type in “toggle conversation” to filter for the “toggle conversation sidebar” button. Select the button.
4. VO + Space to click the button and open the conversation sidebar. The input to start the conversation is focused if no conversation exists. Otherwise, the comment input “Write a comment” is focused.
5. VO + U to open the Rotor and select the “Form Controls” panel.
6. Type in “conversation thread” to filter the elements to conversation thread elements.
7. VO + U to select a conversation thread.
8. VO + Left/Right arrows to navigate between conversation threads.
9. VO + Space to open a conversation thread.
10. VO + Shift + Right arrow to navigate to content of the conversation thread.

Shortcuts to close the Conversations sidebar

1. VO + U to open Rotor.
2. VO + Right arrow to select “Form Controls”. 
3. Type in “Close Conversation” to filter for the “Close Conversation Sidebar button.”
4. VO + Space to click the button

Steps to add Conversations

1. VO + U to open Rotor.
2. VO + Right arrow to select “Form Controls” panel.
3. Type in “toggle conversation” to filter for the “toggle conversation” sidebar button.
4. VO + Space to click the button and open the conversations sidebar. The input to start the conversation is focused if no conversation exists, otherwise the comment input “Write a comment” is focused.

If there is no existing Conversation 

1. Use the keyboard to type your conversation/comment.
2. VO + Right arrow to navigate to “Who should see this” section.
3. VO + Right arrow to select a role item.
4. VO + Space to choose the role.
5. VO + Right arrow to navigate to “Remember this selection” button.
6. VO + Space to toggle the button if needed.
7. VO + Right arrow to navigate to the SEND button.
8. VO + Space to click the button and submit.

If there is an existing Conversation

1. VO + U to open Rotor.
2. VO + Right arrow to select “Form Controls”.
3. Type in “Start typing to begin a conversation” to filter for “edit text”. 
4. Type in the comment content.
5. Use the same steps from the “No existing conversation” case above to save the conversation.

To comment on an existing Conversation

1. Type in the comment content and press Enter to add a comment.