From 1229c2b1efb9bf638951f2f65f21b3f08e2a4bd2 Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Tue, 19 Nov 2024 18:08:28 +0800 Subject: [PATCH 1/3] MDL-83654 qtype_match: Provide better information to answer fields * In order to provide better context for screen reader users about the answer fields in matching questions, the question text and the corresponding item to be matched are included to the answer fields via the aria-describedby attribute. --- question/type/match/renderer.php | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/question/type/match/renderer.php b/question/type/match/renderer.php index 5954422f965..37e76f93d27 100644 --- a/question/type/match/renderer.php +++ b/question/type/match/renderer.php @@ -43,9 +43,10 @@ class qtype_match_renderer extends qtype_with_combined_feedback_renderer { $choices = $this->format_choices($question); + $questiontextid = $qa->get_qt_field_name('qtext'); $result = ''; $result .= html_writer::tag('div', $question->format_questiontext($qa), - array('class' => 'qtext')); + array('class' => 'qtext', 'id' => $questiontextid)); $result .= html_writer::start_tag('div', array('class' => 'ablock')); $result .= html_writer::start_tag('table', array('class' => 'answer')); @@ -58,8 +59,9 @@ class qtype_match_renderer extends qtype_with_combined_feedback_renderer { $result .= html_writer::start_tag('tr', array('class' => 'r' . $parity)); $fieldname = 'sub' . $key; + $itemtextid = $qa->get_qt_field_name($fieldname . '_itemtext'); $result .= html_writer::tag('td', $this->format_stem_text($qa, $stemid), - array('class' => 'text')); + array('class' => 'text', 'id' => $itemtextid)); $classes = 'control'; $feedbackimage = ''; @@ -83,7 +85,12 @@ class qtype_match_renderer extends qtype_with_combined_feedback_renderer { 'menu' . $qa->get_qt_field_name('sub' . $key), false, array('class' => 'accesshide')) . html_writer::select($choices, $qa->get_qt_field_name('sub' . $key), $selected, - ['0' => 'choose'], ['disabled' => $options->readonly, 'class' => 'form-select d-inline-block ms-1']) . + ['0' => 'choose'], + [ + 'disabled' => $options->readonly, + 'class' => 'form-select d-inline-block ms-1', + 'aria-describedby' => "$questiontextid $itemtextid", + ]) . ' ' . $feedbackimage, array('class' => $classes)); $result .= html_writer::end_tag('tr'); From edcff121919f6bf6e4f55e34891d9485a13e10a1 Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Tue, 19 Nov 2024 18:10:34 +0800 Subject: [PATCH 2/3] MDL-83654 qtype_match: Add presentation role to table-related elements The question and answer are displayed on a layout table and does not really help with accessibility. We need to set a presentation role for the table-related elements. --- question/type/match/renderer.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/question/type/match/renderer.php b/question/type/match/renderer.php index 37e76f93d27..ad8923d036d 100644 --- a/question/type/match/renderer.php +++ b/question/type/match/renderer.php @@ -49,19 +49,19 @@ class qtype_match_renderer extends qtype_with_combined_feedback_renderer { array('class' => 'qtext', 'id' => $questiontextid)); $result .= html_writer::start_tag('div', array('class' => 'ablock')); - $result .= html_writer::start_tag('table', array('class' => 'answer')); - $result .= html_writer::start_tag('tbody'); + $result .= html_writer::start_tag('table', array('class' => 'answer', 'role' => 'presentation')); + $result .= html_writer::start_tag('tbody', ['role' => 'presentation']); $parity = 0; $i = 1; foreach ($stemorder as $key => $stemid) { - $result .= html_writer::start_tag('tr', array('class' => 'r' . $parity)); + $result .= html_writer::start_tag('tr', array('class' => 'r' . $parity, 'role' => 'presentation')); $fieldname = 'sub' . $key; $itemtextid = $qa->get_qt_field_name($fieldname . '_itemtext'); $result .= html_writer::tag('td', $this->format_stem_text($qa, $stemid), - array('class' => 'text', 'id' => $itemtextid)); + array('class' => 'text', 'id' => $itemtextid, 'role' => 'presentation')); $classes = 'control'; $feedbackimage = ''; @@ -91,7 +91,7 @@ class qtype_match_renderer extends qtype_with_combined_feedback_renderer { 'class' => 'form-select d-inline-block ms-1', 'aria-describedby' => "$questiontextid $itemtextid", ]) . - ' ' . $feedbackimage, array('class' => $classes)); + ' ' . $feedbackimage, array('class' => $classes, 'role' => 'presentation')); $result .= html_writer::end_tag('tr'); $parity = 1 - $parity; From 8d57b56b5ab3768153342218792c54eecda70c0a Mon Sep 17 00:00:00 2001 From: Jun Pataleta Date: Fri, 31 Jan 2025 17:11:15 +0800 Subject: [PATCH 3/3] MDL-83654 qtype_match: Only add the question text to the first field In order to avoid repetition of the question text as the user navigates to each answer field in a matching question (e.g. by tabbing). --- question/type/match/renderer.php | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/question/type/match/renderer.php b/question/type/match/renderer.php index ad8923d036d..1b1810564fc 100644 --- a/question/type/match/renderer.php +++ b/question/type/match/renderer.php @@ -79,6 +79,14 @@ class qtype_match_renderer extends qtype_with_combined_feedback_renderer { $feedbackimage = $this->feedback_image($fraction); } + // We only want to add the question text to the first answer field to + // avoid repetition of the question text for the subsequent answer fields. + if ($i == 1) { + $ariadescribedbyids = $questiontextid . ' ' . $itemtextid; + } else { + $ariadescribedbyids = $itemtextid; + } + $labeltext = $options->add_question_identifier_to_label(get_string('answer', 'qtype_match', $i)); $result .= html_writer::tag('td', html_writer::label($labeltext, @@ -89,7 +97,7 @@ class qtype_match_renderer extends qtype_with_combined_feedback_renderer { [ 'disabled' => $options->readonly, 'class' => 'form-select d-inline-block ms-1', - 'aria-describedby' => "$questiontextid $itemtextid", + 'aria-describedby' => $ariadescribedbyids, ]) . ' ' . $feedbackimage, array('class' => $classes, 'role' => 'presentation'));