CPM Staff Tutorials

Procedure for Making Sequence Containers Screen Reader Accessible

Updated on

Sequence containers in Homework Help usually do not display or read correctly by the screen reader. If you encounter a sequence container in C3PO, please take these steps to make sure the sequence container is accessible.

1. Locate a Sequence Container

You can tell if it is a sequence container by the red bar with three stars on the left side.

Sequence containers are convenient to use because it allows images to be displayed in a sequence in the same spot. These images are essentially duplicated on top of each other; so while the images change, the placement of the image does not change. This saves space on the page so when the user clicks on a new hint, they do not have to keep scrolling down for each new image to appear.

Due to screen reader accessibility, we generally DO NOT use sequence containers unless they are already in C3PO. If you wish to use a sequence container while editing in C3PO, please consult Carol or Renae first.

Below is an example of a sequence container found in Algebra Connections problem 9-40. If you scroll further down the page, the sequence container is used for hints 1&2 and then finally the answer.

2. Add Screen Reader Only Text
  1. After you have located the sequence container, find the image to its corresponding hint box. Add the image's alt text right after the hint box.
  2. Highlight the alt text and use the toggle screen reader only button.  
  3. Repeat steps 1-2 until the sequence container is complete.
  4. Save and publish your work.

You can locate the alt text written for those specific sequence container images by referring to the {eBook} Images Smartsheet. If there is no Images sheet, or if there is no alt text written, please contact Carol or Renae for assistance. After they have written the appropriate alt text, you can copy and paste it into C3PO.

3. Set the Sequence Container Images to Presentation Only
  1. Go into the Images page in C3PO and make sure the images are set to presentation only.
  2. Add the appropriate tags to the sequence container images. Refer to the Tag Standards Sheet for more information.
  3. Save your work.
4. Go to Homework Help to Check Your Work
  1. After you have saved your work, go to Homework Help in Safari to check the problem you worked on.
  2. Turn on the screen reader (Command + F5).

To move down the page/move left to right, use (Control + option + left or right arrow key).

To select the hint box, use (Control+option+space bar). After selecting the hint box, use (control + option + right arrow key) to listen to the text that follows.

3.    Start going through the problem and select the hint boxes. Listen for if the screen reader reads the sequence container images/invisible text in the correct order or if they are skipped over.

4.    If everything is correct, you are done!

Previous Article Creating a New Sequence Container
Next Article How to create Standards in IC1