From 709acdc215ec4233193acb71c8abd885845e647f Mon Sep 17 00:00:00 2001 From: Antony Bishop <36888942+AntonyBishop@users.noreply.github.com> Date: Tue, 23 Jan 2024 16:50:00 +0000 Subject: [PATCH 1/2] Update Accessibility Standards Guidance --- ...rontend-development-principles.html.md.erb | 55 +++++++++++++++---- 1 file changed, 45 insertions(+), 10 deletions(-) diff --git a/source/documentation/principles/frontend-development-principles.html.md.erb b/source/documentation/principles/frontend-development-principles.html.md.erb index 5aacf0e..f4098ee 100644 --- a/source/documentation/principles/frontend-development-principles.html.md.erb +++ b/source/documentation/principles/frontend-development-principles.html.md.erb @@ -1,7 +1,7 @@ --- owner_slack: "#operations-engineering-alerts" title: Frontend Development Principles -last_reviewed_on: 2023-12-12 +last_reviewed_on: 2024-01-23 review_in: 1 months --- @@ -22,15 +22,50 @@ because it covers the broad principles and is generally right. What follows are MOJ-specific recommendations. ## 2. Make your service accessible -Your site must be compliant with level AA of the [Web Content Accessibility Guidelines 2.0](https://www.w3.org/WAI/intro/wcag). You should also try assistive -technology tools as much as you can. However that’ll be far from giving you a -complete view of the issues your service might have. With a bit of luck to will -be assessed by proper accessibility experts (like the [Digital Accessibility Centre](https://www.digitalaccessibilitycentre.org/)). But don’t wait for it to -happen to implement accessibility principles. Another helpful thing to do is -automatic accessibility testing as part of your continuous integration. - -- [pa11y](https://github.com/springernature/pa11y) -- Automated Accessibility Testing in Rails with capybara-accessible: `https://blogs.vmware.com/vsphere/2012/03/creating-custom-metadata-using-the-vcloud-api.html` + +In the UK, the [Public Sector Bodies Accessibility Regulations](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps) mean we are legally required to make sure our digital services meet level AA of the latest version of the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG22/). The latest version of these guidelines is 2.2, which was released in October 2023. + +You should make efforts to ensure what you are designing and developing is accessible as you go, rather than waiting until the end to think about and test for accessibility. + +Some things you can do as a designer or developer include: +- Using the [GOV.UK design system components](https://design-system.service.gov.uk/) as much as possible. These have all been carefully built and tested to be as accessible as possible. +- Using automated accessibility testing tools. These tools can help you catch 20-30% of accessibility issues early. The rest require manual testing by people. Links to popular options are provided in the further resources section. +- Ensuring all of your colours provide good colour contrast. +- Providing a descriptive page title on each page. +- Using logical heading structures. +- Writing meaningful link texts. +- Ensuring images have appropriate alt text. +- Making sure you can access all parts of your service just using the keyboard alone. +- Making sure the site accommodates browser zooming up to 400% without any loss of content or functionality. + +Further details on these points can be found in this guide to [content accessibility](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/content-accessibility.aspx?csf=1&web=1&e=xcZDJE). + +If you feel comfortable, you should try testing your service using some of the assistive technologies built-into your computer. Testing with a screen reader is a good way to check for issues that might affect other assistive technologies as well. + +These resources will help you get started with screen reader testing: +- [Desktop Screen Readers Survival Guide - Basic Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/survival-guide) +- [Desktop Screen Readers Forms Guide](https://dequeuniversity.com/screenreaders/forms-guide) + +### MoJ Digital Accessibility Team + +The MoJ has an in-house digital accessibility team that can support you with your accessibility needs. They provide consultancy, training and run an accessibility champions network. These services can be used at no cost to your team. They can also help you arrange a full accessibility audit using our approved external supplier. There is normally a cost for that service. + +- [Digital Accessibility Team - what we do](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/digital-accessibility-team-what-we-do.aspx?csf=1&web=1&e=gBFvQA) +- [Accessibility consultancy service](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/accessibility-consultancy-service.aspx?csf=1&web=1&e=ddI9hd) +- [Accessibility training courses](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/accessibility-training-courses.aspx?csf=1&web=1&e=NUjm99) +- [Accessibility training recordings](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/accessibility-training-webinar-recordings.aspx?csf=1&web=1&e=IbZtVr) +- [Accessibility Champions Network at MoJ](https://justiceuk.sharepoint.com/sites/knowthething/SitePages/accessibility-champions-network.aspx) +- [Get an accessibility audit](https://justiceuk.sharepoint.com/sites/knowthething/SitePages/Get-an-accessibility-audit.aspx) + +### Further resources +- [What you need to know about the new version of the Web Content Accessibility Guidelines (WCAG)](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/what-you-need-to-know-about-the-new-version-of-the-web-content-accessibility-guidelines.aspx?csf=1&web=1&e=78BjiZ) +- [What projects and service teams need to do about accessibility](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/what-projects-service-teams-do-about-accessibility.aspx?csf=1&web=1&e=fYSxdN) +- [How to test for accessibility](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/how-to-test-for-accessibilty.aspx?csf=1&web=1&e=Jvscyw) +- [Write an accessibility statement](https://justiceuk.sharepoint.com/:u:/r/sites/knowthething/SitePages/write-accessibility-statement.aspx?csf=1&web=1&e=CVSpHD) +- [Axe accessibility testing tool](https://www.deque.com/axe/) +- [Pa11y accessibility testing tool](https://pa11y.org/) +- [Accessibility Insights accessibility testing tool](https://accessibilityinsights.io/) +- [WAVE accessibility testing tool](https://wave.webaim.org/) ## 3. Make it easy to change your code for copy and translation All the user-facing text in your application should be in the same place in the From 60d145ed72e0facd53a6fcaffcfc5c4aa98d5756 Mon Sep 17 00:00:00 2001 From: Antony Bishop <36888942+AntonyBishop@users.noreply.github.com> Date: Tue, 23 Jan 2024 17:12:55 +0000 Subject: [PATCH 2/2] Remove version specific text This has the potential to create a maintenance overhead. Text removed and content now references where latest version of guidance can be found. --- .../principles/frontend-development-principles.html.md.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/documentation/principles/frontend-development-principles.html.md.erb b/source/documentation/principles/frontend-development-principles.html.md.erb index f4098ee..de647a3 100644 --- a/source/documentation/principles/frontend-development-principles.html.md.erb +++ b/source/documentation/principles/frontend-development-principles.html.md.erb @@ -23,7 +23,7 @@ MOJ-specific recommendations. ## 2. Make your service accessible -In the UK, the [Public Sector Bodies Accessibility Regulations](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps) mean we are legally required to make sure our digital services meet level AA of the latest version of the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG22/). The latest version of these guidelines is 2.2, which was released in October 2023. +In the UK, the [Public Sector Bodies Accessibility Regulations](https://www.gov.uk/guidance/accessibility-requirements-for-public-sector-websites-and-apps) mean we are legally required to make sure our digital services meet level AA of the latest version of the [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG22/). You should make efforts to ensure what you are designing and developing is accessible as you go, rather than waiting until the end to think about and test for accessibility.