Skip to content

Commit

Permalink
Feature/51911 accessibility checkboxes (#2159)
Browse files Browse the repository at this point in the history 
* html cleanup

* Fix incorrect html

* Tighten up the definition text to the heading

* Update assets version

Co-authored-by: Mohsen Qureshi <[email protected]>
  • Loading branch information
@jon-shipley @activemq
jon-shipley and activemq authored Mar 30, 2022
1 parent 76c433a commit 73cea4c
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 40 deletions.
6 changes: 6 additions & 0 deletions admin/assets/stylesheets/application.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,9 @@ $govuk-global-styles: true;
.mtc-not-visible-not-accessible {
visibility: hidden;
}

// access arangements panel details - dt headings space
.govuk-panel-list dt {
margin-top: 20px;
margin-bottom: 5px;
}
82 changes: 42 additions & 40 deletions admin/views/access-arrangements/select-access-arrangements.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,48 +30,53 @@
</summary>
<div class="govuk-details__text">
<dl class="govuk-panel-list">
<dt>
<div><strong>Audible time alert</strong></div>
<div>
A beep that sounds two seconds before the end of each question, then a different beep will sound to signal the end of each question.
</div>
</dt>
<dt>
<div><strong>Audio version</strong></div>
<div>
The screen reader will read out all text displayed on the screen, including instructions and questions and the answer inputted after each key press. Please note, the MTC does not support third-party screen readers. All pupils requiring this functionality will need to use the in-built screen reader due to incompatibility with the timed function.
</div>
</dt>
<dt>
<div><strong>Colour contrast</strong></div>
<div>Change the text and background colours.</div>
</dt>
<dt>
<div><strong>Font size</strong></div>
<div>Increase or decrease the size of the text and number pad on the screen.</div>
</dt>
<dt>
<div><strong>Input assistance</strong></div>
<div>An input assistant is someone who enters answers dictated by the pupil. An input assistant can be
used when a pupil is physically:
<dt><strong>Audible time alert</strong></dt>
<dd> A beep that sounds two seconds before the end of
each question, then a different beep will sound to
signal the end of each question.
</dd>

<dt><strong>Audio version</strong></dt>
<dd>The screen reader will read out all text displayed
on the screen, including instructions and questions
and the answer inputted after each key press. Please
note, the MTC does not support third-party screen
readers. All pupils requiring this functionality will
need to use the in-built screen reader due to
incompatibility with the timed function.
</dd>

<dt><strong>Colour contrast</strong></dt>
<dd>Change the text and background colours.</dd>

<dt><strong>Font size</strong></dt>
<dd>Increase or decrease the size of the text and
number pad on the screen.
</dd>

<dt><strong>Input assistance</strong></dt>
<dd>An input assistant is someone who enters answers
dictated by the pupil. An input assistant can be
used when a pupil is physically:
<ul class="govuk-list govuk-list--bullet">
<li>unable to enter their own answers</li>
<li>able to input but inputting causes physical discomfort</li>
<li>able to input but inputs very slowly</li>
<li>able to input but finds inputting very difficult</li>
</ul>
</div>
</dt>
<dt>
<div><strong>Pause — 'next' button between questions</strong></div>
<div>
Instead of a 3–second pause between questions, the pupil can press a ‘Next’ button when they are ready to start a new question. There is a 30–minute time limit to complete the check using this access arrangement.
</div>
</dt>
<dt>
<div><strong>Remove on–screen number pad</strong></div>
<div>Only the question–and–answer box will show on screen. The pupil will need a keyboard to enter their response.</div>
</dt>
</dd>

<dt><strong>Pause — 'next' button between questions</strong></dt>
<dd>
Instead of a 3–second pause between questions, the pupil can
press a ‘Next’ button when they are ready to start a new
question. There is a 30–minute time limit to complete the
check using this access arrangement.
</dd>


<dt><strong>Remove on–screen number pad</strong></dt>
<dd>Only the question–and–answer box will show on screen. The pupil will need a keyboard to enter their response.</dd>
</dl>
</div>
</details>
Expand All @@ -91,9 +96,6 @@
class="govuk-checkboxes__input"
type="checkbox"
value="<%= accessArrangement.code %>"
aria-label="Tick accessArrangement <%= accessArrangement.description %>."
aria-checked="false"
role="checkbox"
<%= formData['accessArrangements'] && formData['accessArrangements'].includes(accessArrangement.code) && 'checked' %>
>
<div></div>
Expand Down Expand Up @@ -200,7 +202,7 @@
<option value="">Select a pupil</option>
<% pupils.forEach(p => { %>
<option
value="<%= p.urlSlug %>" <%= p.urlSlug === formData['pupilUrlSlug'] && 'selected' %>><%= p.fullName %></option>
value="<%= p.urlSlug %>" <%= p.urlSlug === formData['pupilUrlSlug'] ? 'selected' : ''%>><%= p.fullName %></option>
<% }) %>
</select>
</div>
Expand Down

0 comments on commit 73cea4c

Please sign in to comment.