Skip to content

Commit 346efc7

Browse files
Sprint 37 Updates to: Alerts, Patient deceased, No vaccines/clinicians and more (#243)
This pull request includes updates to: - Alerts feature - patient-deceased - What's new (formally updates) - added to footer - /Vaccinate pg empty state(s) when no vaccines + no clinicians available - adding GP clinic to location pg. (Where is the vaccination taking place?) - accessibility statement - Updated footer --------- Co-authored-by: Frankie Roberto <[email protected]>
1 parent d8496d0 commit 346efc7

25 files changed

+1907
-6
lines changed
Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
{% extends 'layout.html' %}
2+
3+
{% block pageTitle %}
4+
Accessibility statement
5+
{% endblock %}
6+
7+
{% block content %}
8+
<div class="nhsuk-grid-row">
9+
10+
<div class="nhsuk-grid-column-two-thirds">
11+
12+
<h1>Accessibility statement</h1>
13+
14+
<p>This accessibility statement applies to the Record a vaccination service
15+
(<a href="www.ravs.england.nhs.uk">www.ravs.england.nhs.uk</a>)</p>
16+
17+
<p>This service is run by NHS England. <br> <br>
18+
<a href="https://mcmw.abilitynet.org.uk/">AbilityNet</a> has advice on making your device easier to use if you have a disability.</p>
19+
20+
<h2>How accessible this service is </h2>
21+
<p>We know parts of this service are not fully accessible. For example: </p>
22+
23+
<ul class="nhsuk-list nhsuk-list--bullet">
24+
<li>some content is not displayed correctly when you zoom in</li>
25+
<li>some interactive elements are not announced to screen readers</li>
26+
<li>some interactive elements are not accessible to keyboard users</li>
27+
<li>some error messages are not optimised for screen readers and keyboard users</li>
28+
<li>some tables have missing headers</li>
29+
<li>some focus states are missing</li>
30+
</ul>
31+
32+
33+
34+
<h2>Enforcement procedure</h2>
35+
<p>We want to improve the accessibility of the Record a vaccination service. If you find any problems not listed on this page or think we’re not meeting accessibility requirements, email <a href="[email protected]">[email protected]</a>.</p>
36+
37+
38+
<h2>Give feedback and report accessibility problems</h2>
39+
<p>The Equality and Human Rights Commission (EHRC) is responsible for enforcing the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 (the ‘accessibility regulations’). If you’re not happy with how we respond to your complaint, <a href="https://www.equalityadvisoryservice.com/">contact the Equality Advisory and Support Service (EASS)</a>.</p>
40+
41+
<h2>Technical information about this website’s accessibility</h2>
42+
<p>NHS England is committed to making this service accessible, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.</p>
43+
44+
<h2>Compliance status</h2>
45+
<p>This service is partially compliant with the <a href="https://www.w3.org/TR/WCAG22/">Web Content Accessibility Guidelines version 2.2 </a>AA standard, due to the non-compliances listed below..</p>
46+
47+
48+
<h2>Non-accessible content</h2>
49+
<p>The content listed below is non-accessible for the reasons provided.</p>
50+
51+
<h4>Various pages</h4>
52+
<ul class="nhsuk-list nhsuk-list--bullet">
53+
<li>Links from error summaries do not always go to the relevant input fields and the summary is not always properly focused to. (3.3.1 Error Identification and 3.3.3 Error Suggestion) </li>
54+
<li>Some error messages appear when leaving required input fields. This is not announced by screen readers. (3.3.1 Error Identification and 3.3.3 Error Suggestion) </li>
55+
<li>System JavaScript pop-ups are used in some places to signify an error. They can interrupt user flow, do not always work with assistive technologies and can affect focus management. (3.3.1 Error Identification) </li>
56+
<li>Some tables have missing column headings. (1.3.1 Info and Relationships) </li>
57+
<li>Some items are not highlighted by the keyboard focus indicator when accessed via keyboard navigation. (2.4.7 Focus Visible) </li>
58+
<li>Some content is not displayed correctly when using your browser to zoom in. (1.4.10 Reflow) </li>
59+
</ul>
60+
61+
62+
<h4>Record a vaccination section</h4>
63+
<ul class="nhsuk-list nhsuk-list--bullet">
64+
<li>On the Find a patient page, Aria labels are used when not needed. (4.1.2 Name, Role, Value) </li>
65+
<li>On the Find a patient page, when clicking on search, results appear at the bottom of the page. This is not announced to screen readers and focus moves to the top of the page. (1.3.2 Meaningful Sequence) </li>
66+
<li>On the Patient details page, there are empty fieldsets in the tables which may cause confusion. (1.3.1 Info and Relationships)  </li>
67+
<li>On the Patient details page, the 'Continue' button appears before the vaccination history. Screen reader users many never get to this content. (1.3.2 Meaningful sequence) </li>
68+
<li>On the Assess and Vaccinate pages, the date picker does not work well with keyboard navigation and screen readers. (1.3.1 Info and Relationships)  </li>
69+
<li>On the Vaccinate page, disabled fields are used for dose and expiry date which may cause confusion for some users. (1.3.3 Sensory Characteristics) </li>
70+
<li>On the Check and confirm page, all the content is contained within a fieldset. This can create extra confusion for screen reader users. (1.3.1 Info and Relationships) </li>
71+
<li>On the Check and confirm page, there are no focus states on the 'Change' links. (2.4.7 Focus Visible) </li>
72+
<li>In the 'Record saved' banner, the link to 'View record' is not marked up correctly as a link so it is just read out as text to screen readers. (1.3.1 Info and Relationships and 1.3.5 Identity Input Purpose) </li>
73+
</ul>
74+
75+
<h4>Vaccines section</h4>
76+
<ul class="nhsuk-list nhsuk-list--bullet">
77+
<li>There are multiple links named 'View product' and 'Add batch' in a table, with no visually hidden text. (1.3.1 Info and Relationships)</li>
78+
<li>On the Choose site page, the autocomplete dropdown is not announced to screen readers. (3.3.2 Labels or Instructions, 4.1.2 Name, Role, Value and 4.1.3 Status Messages)</li>
79+
<li>On the Choose vaccine page, the secondary options are not conditionally revealed. (1.3.1 Info and Relationships)</li>
80+
<li>On the Vaccine batches page, the modal dialogue to reactivate a batch cannot be closed with the escape key. (2.2.2 Pause, Stop, Hide)</li>
81+
<li>On the Vaccine batches page, the definition list to describe a vaccine is incorrectly using labels for the key value. (1.3.1 Info and Relationships)</li>
82+
<li>When you add a vaccine, there is no confirmation message. This might cause confusion. (4.1.2 Name, Role, Value)</li>
83+
</ul>
84+
85+
<h4>Manage users section</h4>
86+
<ul class="nhsuk-list nhsuk-list--bullet">
87+
<li>In Manage users, when you add a user, there is no confirmation message. This might cause confusion. (4.1.2 Name, Role, Value) </li>
88+
</ul>
89+
90+
91+
<h4>Header and banner</h4>
92+
<ul class="nhsuk-list nhsuk-list--bullet">
93+
<li>When clicking on the user's email address in the site header, it's not clear where the link goes and focus remains on the link. (2.4.4 Link Purpose and 2.4.3 Focus Order) </li>
94+
<li>When selecting either option from the cookies banner, focus does not go back to the top of the page. (1.3.2 Meaningful Sequence) </li>
95+
</ul>
96+
97+
98+
99+
<h2>What we’re doing to improve accessibility</h2>
100+
<p>We are working to fix all content that fails to meet the WCAG 2.2 AA standard.</p>
101+
<p>We are planning significant changes to the service in the next 6 to 12 months.</p>
102+
<p>Following these changes, we will carry out another assessment of the service and update this statement.</p>
103+
104+
<h4>Preparation of this accessibility statement</h4>
105+
<p>This statement was prepared on [date when it was first published].</p>
106+
<p>The Record a vaccination service (<a href="www.ravs.england.nhs.uk">www.ravs.england.nhs.uk</a>) was tested on 4 October 2024 against the WCAG 2.2 AA standard by the NHS Accessibility Lab team. We also used findings from the Record a vaccination team's own testing when preparing this statement.</p>
107+
108+
109+
</div>
110+
111+
</div>
112+
{% endblock %}

app/views/alerts/high-alert.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
{% extends 'layout.html' %}
2+
3+
{% block pageTitle %}
4+
Record a vaccination
5+
{% endblock %}
6+
7+
{% block header %}
8+
{% include "includes/header-logged-out.html" %}
9+
{% endblock %}
10+
11+
{% block content %}
12+
<div class="nhsuk-grid-row">
13+
<div class="nhsuk-grid-column-full nhsuk-u-margin-bottom-5">
14+
15+
16+
<div class="nhsuk-panel" style="background-color:#005eb8;">
17+
<h1 class="nhsuk-panel__title">
18+
New section to record vaccinations
19+
</h1>
20+
21+
<div class="nhsuk-panel__body">
22+
We've updated the user journey for recording vaccinations. From now on, select 'Record vaccinations' from the header to start recording a vaccination.
23+
</div>
24+
25+
<br>
26+
27+
<a href="/updates" style="color:#FFFFFF;">Read more</a>
28+
29+
30+
<br><br>
31+
32+
33+
{% from 'button/macro.njk' import button %}
34+
35+
{{ button({
36+
text: "Continue",
37+
classes: "nhsuk-button--reverse",
38+
href: "/home"
39+
}) }}
40+
41+
</div>
42+
43+
44+
45+
46+
47+
{% endblock %}
48+

app/views/alerts/inset-1.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
{% extends 'layout.html' %}
2+
3+
{% block pageTitle %}
4+
Add batch
5+
{% endblock %}
6+
7+
{% set currentSection = "vaccines" %}
8+
9+
{% block beforeContent %}
10+
{{ backLink({
11+
href: "/vaccines/choose-vaccine",
12+
text: "Back"
13+
}) }}
14+
{% endblock %}
15+
16+
17+
{% block content %}
18+
19+
<h1 class="nhsuk-heading-l">Add batch</h1>
20+
21+
<div class="nhsuk-grid-row">
22+
<div class="nhsuk-grid-column-two-thirds">
23+
24+
<div class="nhsuk-inset-text">
25+
<span class="nhsuk-u-visually-hidden">Information: </span>
26+
<h2 class="nhsuk-heading-m">Example heading</h2>
27+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
28+
<ul class="nhsuk-list nhsuk-list--bullet">
29+
<li>tiredness and lack of energy</li>
30+
<li>shortness of breath</li>
31+
</ul>
32+
<p class="nhsuk-body-m"><a href="/updates/previous" class="nhsuk-link">Previous updates</a></p>
33+
<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
34+
I have read and understand
35+
</button>
36+
</div>
37+
38+
39+
<form action="/vaccines/check" method="post" novalidate="true">
40+
41+
{{ input({
42+
"label": {
43+
"text": "Batch number",
44+
classes: "nhsuk-label--s"
45+
},
46+
hint: {
47+
text: "For example, XX123456"
48+
},
49+
"id": "batch-number",
50+
"name": "batchNumber",
51+
classes: "nhsuk-input--width-20",
52+
value: data.batchNumber
53+
}) }}
54+
55+
56+
{{ dateInput({
57+
"id": "batchExpiryDate",
58+
"namePrefix": "batchExpiryDate",
59+
"fieldset": {
60+
"legend": {
61+
"text": "Expiry date",
62+
"classes": "nhsuk-label--s"
63+
}
64+
},
65+
values: data.batchExpiryDate
66+
}) }}
67+
68+
{% from 'inset-text/macro.njk' import insetText %}
69+
70+
71+
72+
{{ radios({
73+
"idPrefix": "pack-type",
74+
"name": "packType",
75+
"fieldset": {
76+
"legend": {
77+
"text": "Pack size",
78+
classes: "nhsuk-fieldset__legend--s"
79+
}
80+
},
81+
"items": [
82+
{
83+
"value": "Single vial",
84+
"text": "Single vial",
85+
checked: (data.packType == "Single vial")
86+
},
87+
{
88+
"value": "10 vials",
89+
"text": "10 vials",
90+
checked: (data.packType == "10 vials")
91+
}
92+
]
93+
}) }}
94+
95+
96+
97+
{{ button({
98+
"text": "Continue"
99+
}) }}
100+
</form>
101+
102+
103+
</div>
104+
</div>
105+
106+
107+
{% endblock %}

app/views/alerts/inset-2.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
{% extends 'layout.html' %}
2+
3+
{% block pageTitle %}
4+
{{ currentOrganisation.name }} – Home
5+
{% endblock %}
6+
7+
{% set currentSection = "home" %}
8+
9+
10+
11+
{% block content %}
12+
13+
14+
<div class="nhsuk-grid-row">
15+
<div class="nhsuk-grid-column-two-thirds">
16+
<h1 class="nhsuk-heading-l nhsuk-u-margin-bottom-6">{{ currentOrganisation.name }}</h1>
17+
18+
<form action="/home/no-records" method="post" novalidate>
19+
<div class="nhsuk-inset-text">
20+
<span class="nhsuk-u-visually-hidden">Information: </span>
21+
<h2 class="nhsuk-heading-m">Example heading</h2>
22+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
23+
<ul class="nhsuk-list nhsuk-list--bullet">
24+
<li>tiredness and lack of energy</li>
25+
<li>shortness of breath</li>
26+
</ul>
27+
<p class="nhsuk-body-m"><a href="/updates/previous" class="nhsuk-link">Tell me more</a></p>
28+
<button class="nhsuk-button nhsuk-button--secondary" data-module="nhsuk-button" type="submit">
29+
I have read and understand
30+
</button>
31+
</div>
32+
33+
<p>You have not yet recorded a vaccination.</p>
34+
35+
<p class="nhsuk-body"><a href="/vaccines/choose-site">Add vaccines</a></p>
36+
37+
<p class="nhsuk-body"><a href="/user-admin/add-user">Add users</a></p>
38+
39+
<p class="nhsuk-body"><a href="/find-a-patient">Find a patient</a></p>
40+
41+
<p>Find help and guidance at <a href="/reports">guide.ravs.england.nhs.uk</a></p>
42+
43+
44+
45+
<h2 class="nhsuk-heading-m">Total vaccinations</h2>
46+
47+
</div>
48+
</div>
49+
50+
51+
<ul class="nhsuk-grid-row nhsuk-card-group">
52+
53+
<li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
54+
{% set cardHtml %}
55+
<p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">0</p>
56+
Today
57+
{% endset %}
58+
59+
{{ card({
60+
headingHtml: cardHtml
61+
}) }}
62+
</li>
63+
64+
<li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
65+
{% set cardHtml %}
66+
<p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">0</p>
67+
Past 7 days
68+
{% endset %}
69+
70+
{{ card({
71+
headingHtml: cardHtml
72+
}) }}
73+
</li>
74+
75+
76+
<li class="nhsuk-grid-column-one-quarter nhsuk-card-group__item">
77+
{% set cardHtml %}
78+
<p class="nhsuk-heading-xl nhsuk-u-font-size-64 nhsuk-u-margin-bottom-1">0</p>
79+
November so far
80+
{% endset %}
81+
82+
{{ card({
83+
headingHtml: cardHtml
84+
}) }}
85+
</li>
86+
87+
</ul>
88+
89+
90+
</div>
91+
</div>
92+
{% endblock %}

0 commit comments

Comments
 (0)