Form field labeling is missing in many areas

Description

The use of forms in Sakai's delivered assessments are not structured properly. Labels are missing, fieldsets are not used. Relationships between form items are not represented non-visually.

Two accessibility audits of Sakai 2.9 identified these issues in Tests & Quizzes
• Radio buttons have a label for / id association. These should also be part of a fieldset with the question as a legend.
• Text input fields are missing the label for / id association.

The Mozilla Developer Network has an article on How to structure an HTML form at https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form

Split into two issues for radio/checkbox input items and other form items.

100% Done
Loading...

Activity

Show:

Matthew Jones November 15, 2017 at 3:34 PM

All subtasks here are resolved but there's some new related issues that came up on 

Matthew Jones October 12, 2016 at 12:42 PM

The fix is to add this JSF outputLabel http://www.jsftoolbox.com/documentation/help/12-TagReference/html/h_form.html

But finding where to add them (mostly in samigo-app/src/webapp/jsf/delivery/item) around the <h:input* tags ? isn't completely obvious. Then you'd need to test that it's working.

Matt Clare August 4, 2015 at 10:40 PM

Issue two: Text input fields are missing the label for / id association.

Still in trunk.

This is a little different per question type.

Other non-radio form/response types:
File Upload: Label should be question instructions, possibly using aria-labelledby.
Fill in the Blank: I'd recommend a title property on each blank of "please fill in the blanks" OR a label preceding the question of something like "Please fill in the following N blanks"
Matching: Label should be the choice
Extended Matching Items: That's for SAM-2342.
Numeric Response: I'd recommend a title property on each blank of "please fill in the blanks" OR a label preceding the question of something like "Please fill in the following N blanks with a numeric response"
Short Answer/Essay: Character count should be labelled. Text area should have the question stem as the label.
Student Audio Response: ...I think this is fine. I'm not familiar with best practices here.

Others I'm noting I don't have a suggestion for:
Survey matrix: Maybe a title combining row and column?
Calculated Question: Tried the example "Kevin has {x} apples. Jane eats {y}. How many does Kevin have now? z" but there was no input box in the preview?

Anyone else's thoughts are more than welcome.

Matt Clare August 4, 2015 at 9:42 PM

First form issue: Radio buttons have a label for / id association. These should also be part of a fieldset with the question as a legend.

Still in trunk.

Here's a multiple choice test example http://www.w3.org/TR/WCAG20-TECHS/H71.html#H71-examples

Fixed

Details

Priority

Affects versions

Fix versions

Components

Assignee

Reporter

Created October 2, 2013 at 10:30 PM
Updated April 17, 2018 at 8:39 AM
Resolved November 15, 2017 at 3:34 PM