samigo, accessibility: Fix usability/accessibility issues with the "Helper text" on numeric response
Description
Attachments
is related to
relates to
Activity
Tiffany Stull June 29, 2021 at 9:11 AM
UVA has a local fix for this to be contributed back eventually. Screenshots below show the fix for this and issues in SAK-45388.
Instruction text for accepted characters is displayed directly on the page at all times for each question (as it used to be prior to implementation of ).
If a student enters an invalid character, then removes focus from the affected field, the field is surrounded by a red dashed border and the following error message appears in between the instructions and message text:
Error: Invalid Answer
Please only use allowed characters within numeric response fields. Each field surrounded by a red dashed border below contained an invalid entry. See the Accepted Characters information above this error message for details.
The following reminder warning also appears at the bottom of the current page: "Some of your numeric response answers are invalid. Please review your answers and edit the fields marked with a red dashed border."
The error message, dotted border, and warning will go away after the student returns to each affected field and changes their answer to a valid entry, then removes focus from the field.
Tiffany Stull April 22, 2021 at 4:17 PM
I see that the "Helper text #1" was put behind the "Click to see additional instructions" link in SAK-34883, in response to complaints from instructors who place all assessment questions on a single page (too much text with multiple questions).
I hope that reverting will also help to discourage instructors from using multiple question per page layouts for assessments.
Details
Details
Priority
MajorComponents
Assignee
Mitchell DunnReporter
Tiffany Stull
There are two types of instructions (what I would call "helper text") associated with Numeric Response questions to tell students the acceptable characters. Neither type of "helper text" behaves correctly for accessibility, and one type of "helper text" gets in the way of students answering. These issues need to be addressed.
Helper Text #1:
The first "helper text" that a student encounters for a Numeric Response question is a Click to see additional instructions link that appears above the text of the question. If clicked, the link displays text in the form of a tooltip with the acceptable characters. The link is not accessible at all to sighted keyboard users. The link is only readable by screen reader users with great difficulty (and definitely would waste time for a user attempting to take a timed test).
Prior to Sakai 11, the instructions text just appeared as static text on the page above every numeric response question. Per SAK-34883, this was changed to reduce the amount of text on the page. What I'm calling "Helper Text #1" needs to be changed back to static text on the page so it is accessible to all users. Below is a screenshot from a previous version of Sakai where the text was just static on the page.
Helper Text #2:
When a student clicks into a numeric response field to answer the question, a second type of "helper text" pops up to display the acceptable characters. "Helper text #2" covers content on the page and is hard to get rid of. See video linked below.
https://drive.google.com/file/d/1fZDJ1ArJ24Xi6NItJm19y_5fOc6ljUXM/view?usp=sharing
Note: The issue only affects sighted mouse users. Keyboard focus on the fields is not triggering the pop-up for keyboard users.
Additionally, this "Helper Text #2" behaves inconsistently for screen reader users. Depending on how they navigate, they may either not hear it at all or they may hear it repeated on every text field.
The "Helper Text #2" needs to be removed.
Summary of recommended fixes:
Replace the "Click to see additional instructions" link with the textual contents of the instructions, i.e., make the "Accepted characters" display as static text on the page above the question text. Also:
Remove red from "Accepted Characters"
Add <h5></h5> around "Accepted Characters" so it is more noticeable as a distinct piece of info for screen reader users too.
Put the text in blue info style box. (Screenshot mock-up below)
Remove the pop-up text that appears when clicking into every field. It should be removed for all users, including screen reader users, so the test-taking experience is consistent for all students.