Accessibility improvements to Question Set
- When "show solution" button is pressed on a Question Set, a user sees their answers highlighted with a red border and an "x". The correct answer is only identified visually by the selected radio button, at the far right of the screen. This means a screen magnification user has to pan right to find it and they can't see the text and radio button at the same time.
- Your result text at the end of quizzes is too low contrast. Change current colour #777777 to #666666.
The screen reader does not announce the feedback information about incorrect or correct answers for all quizzes. This information is visible at the end of a quiz when you select “Show solution.” The bug is caused by aria-hidden="true" on the feedback text. This attribute needs to be removed.
<div class="h5p-feedback-text" aria-hidden="true">
The “Next activity” button is disabled when completing a quiz using the keyboard only.
To replicate this bug, complete a quiz using the keyboard only – tab into the radio controls, use arrow keys and spacebar to select an answer and tab to the next question button until all questions are completed.
This is caused by the disabled attribute :
<input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Next Activity" class="button button--primary js-form-submit form-submit btn btn-success" disabled="disabled">Quiz titles don't use HTML headings. Replace <div class="title"> with <h2>
<div class="h5p-content h5p-initialized h5p-frame using-mouse" data-content-id="41">
<div class="h5p-container h5p-standalone">
<div class="intro-page">
<div class="title"><span>TItle of my quiz</span></div>Scoring results of quizzes (x/y) aren't read by screen readers because of aria-hidden="true" on the numeric score. This attribute needs to be removed. <div class="h5p-joubelui-score-numeric" aria-hidden="true">
