Many question types lack proper HTML structures (SAK-34129)

[SAK-34555] Add hidden text meaning for blank and numeric questions Created: 01-Feb-2017  Updated: 17-Apr-2018  Resolved: 23-May-2017

Status: Verified
Project: Sakai
Component/s: Tests & Quizzes (Samigo)
Affects Version/s: 11.2
Fix Version/s: 11.5 [Tentative], 12.0

Type: Sub-task Priority: Blocker
Reporter: Matt Clare Assignee: Sam Ottenhoff
Resolution: Fixed Votes: 1
Labels: a11y:, a11y:Forms, rA11y
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Screen Shot 2017-05-19 at 10.21.26 AM.png    
Issue Links:
Cloners
cloned as SAK-37161 Provide a valid label for form fields CLOSED
Relate
is related to SAK-34129 Many question types lack proper HTML ... OPEN
is related to SAK-36855 Safari issue with multiple input elem... Verified
11 status: Resolved

 Description   

SAM-2995 added labels to fill in the blank questions. This meets accessibility specs, but in complex scenarios with multiple blanks and poorly designed questions that form a sentence without the blanks, a sighted user has an advantage still.

After discussing with Sakai Accessibility Working Group and reviewing other solutions, a proposed solution was to provided hidden text that notes the number of blanks, reads out "blank space 1" etc. and the labels number off.

Example markup text:

A Light Year is a measure of {distance}, specifically the distance light travels in a {vacuum} in one year. 

Currently creates:

<label for="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:0:fib">
A Light Year is a measure of  </label>&nbsp;<input id="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:0:fib" type="text" name="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:0:fib" value="" onkeypress="return noenter()" size="20"> <label for="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:1:fib">
, specifically the distance light travels in a  </label>&nbsp;<input id="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:1:fib" type="text" name="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:1:fib" value="" onkeypress="return noenter()" size="20"> <label for="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:2:fib">
 in one year.  </label>&nbsp;<br><br>

Better would be to actually remove the dynamic labels added in SAM-2995 and use:

<div class="skip" id="WHATEVER ID ASSIGNED PROGRAMMATICALLY">What follows is a fill in the blank question with 2 blanks</div>

A Light Year is a measure of &nbsp;<input id="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:0:fib" type="text" name="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:0:fib" value="" onkeypress="return noenter()" size="20" aria-describedby="WHATEVER ID ASSIGNED PROGRAMMATICALLY" aria-label="Blank 1.  Fill in the blank, read surrounding text"> 
, specifically the distance light travels in a  &nbsp;<input id="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:1:fib" type="text" name="takeAssessmentForm:j_id_jsp_1255670694_141:0:j_id_jsp_1255670694_201:0:deliverFillInTheBlank:j_id_jsp_1255670694_656:1:fib" value="" onkeypress="return noenter()" size="20" aria-describedby="WHATEVER ID ASSIGNED PROGRAMMATICALLY" aria-label="Blank 2.  Fill in the blank, read surrounding text"> 
 in one year. &nbsp;<br><br>

If there is agreement on this a related approach could be taken for numeric questions.



 Comments   
Comment by Sam Ottenhoff [ 03-Apr-2017 ]

The new label explaining the FIB setup makes sense to me. But I don't understand why we would revert the positive change made in SAM-2995

Comment by Matt Clare [ 03-Apr-2017 ]

2 reasons reason:

  1. I didn't fully appreciate how well multiple full in the blanks are labelled with SAM-2995 because of issues with Markup text I used for testing (good example based on above question https://www.screencast.com/t/sgkvw3ok )
  2. Other LMS uses the pattern recommended

I still think 2+ blanks FIB questions require a more systematic approach for navigation blanks with an assistive device, but this is perhaps better handled as a feature request and uncoupled as a subtask?

Comment by Sam Ottenhoff [ 19-May-2017 ]

I am attaching the new markup. Note that JSF can't do an aria-labelledby so I use <label>s with sr-only class

Comment by Matt Clare [ 24-May-2017 ]

Looks and sounds good in Master on Wednesday May 24, 2017

https://brocku-my.sharepoint.com/personal/mclare_brocku_ca/_layouts/15/guestaccess.aspx?docid=1a6a51aff9304475ea47d2c61968c3a7b&authkey=AT9Wrw2S-ckhBf84sZ8Runs

Comment by Stephen Marquard [ 29-May-2017 ]

I understand this fixes an issue with clicking on input fields in FIB in 11.x using Safari, so it would be good to merge this back to 11.x if possible.

Generated at Tue Sep 17 20:49:02 CDT 2019 using Jira 8.0.3#800011-sha1:073e8b433c2c0e389c609c14a045ffa7abaca10d.