The Department for Environment, Food & Rural Affairs (Defra) is the UK government department responsible for safeguarding our natural environment, supporting our world-leading food and farming industry and sustaining a thriving rural economy.
Defra services are designed to meet user needs and to protect the environment.
All Defra's online services must:
-
Be designed to meet the Government service standard
-
Be designed based on user needs
Contents:
- Defra design standards
- non-GOV.UK domains
- cookies and similar technologies
- inclusive design
- accessibility
- maps
- data and charts
- internal services
- components and patterns
Services and websites hosted on non-GOV.UK domain names must still meet the government service standard.
All public-facing services should look and feel like part of GOV.UK, so users know they're in the right place.
Non-GOV.UK domains should not use the:
- 'New Transport' font
- GOV.UK Header or crown logo
- GOV.UK footer
Use the Helvetica or Arial CSS font stacks.
Colours should be consistent with the GOV.UK front end kit.
Agency or department colours can be used sparingly, for example in headers or navigation.
You must make sure that the contrast ratio of text and interactive elements in your service meets level AA of the Web Content Accessibility Guidelines (WCAG 2.1).
| Department | |||
|---|---|---|---|
| Defra | #008938 | rgb(0, 163, 59) | hsl(142, 100%, 32%) |
| Environment Agency | #009E43 | rgb(0, 158, 67) | hsl(145, 100%, 31%) |
| Natural England | #00AB52 | rgb(0, 173, 84) | hsl(149, 100%, 34%) |
| APHA | #008938 | rgb(0, 163, 59) | hsl(142, 100%, 32%) |
| MMO | #008938 | rgb(0, 163, 59) | hsl(142, 100%, 32%) |
| RPA | #008938 | rgb(0, 163, 59) | hsl(142, 100%, 32%) |
Defra or supporting agency page templates should be used in place of the GOV.UK templates for:
- internal facing services (case management systems, intranets etc)
- external facing services not hosted on GOV.UK
Example Defra header
Example Defra header
For external facing sites not on Gov.uk a Defra or supporting agency logo must be used.
Organisation logos must be included as an SVG where possible. The crest image itself must be presentational and ignored by screen readers.
Links in the logo must:
- accept focus
- be focusable with a keyboard
- be usable with a keyboard
- indicate when they have focus
- change in appearance when touched (in the touch-down state)
- change in appearance when hovered
- be usable with touch
- be usable with voice commands
- have visible text
- have meaningful text
View the organisation logo component
To comply with the Privacy and Electronic Communications Regulations (PECR) you must:
- tell people if your site uses cookies or similar technologies
- clearly explain what the cookies do and why
- not store cookies for longer than is necessary
- get a user's explicit consent before storing or retrieving non-essential cookies on their device
- save a user's consent preferences for 1 year only
- not store any unique identifiers in the consent preferences cookie
A user must be able to:
- withdraw consent as easily as they give it
- make changes to their cookie settings
- use the service without consenting to the use of cookies
Read the full compliance guidance document
All Defra services must be designed to be inclusive. Inclusive design aims to remove barriers that create extra effort for some groups of users.
In general, inclusive design lets everyone participate equally, confidently and independently in everyday activities.
Principles of inclusive design:
- inclusive -- so everyone can use it safely, easily and with dignity
- responsive -- taking account of what people say they need and want
- flexible -- so different people can use it in different ways
- convenient -- so everyone can use it without too much effort or separation
- accommodating for all people, regardless of their age, gender, mobility, ethnicity or circumstances
- welcoming -- with no disabling barriers that might exclude some people
- realistic -- offering more than one solution to help balance everyone's needs and recognising that one solution may not work for all
Making a website or mobile app accessible means making sure it can be used by everyone, including those with:
- impaired vision
- motor difficulties
- cognitive impairments or learning disabilities
- deafness or impaired hearing
Public Sector Body Accessibility Regulations 2018 became UK law in September 2018, meaning public sector organisations have a legal duty to make sure websites and apps meet accessibility requirements.
To meet accessibility requirements, digital services must:
- meet level AA of the Web Content Accessibility Guidelines (known as WCAG 2.1) as a minimum
- work on the most commonly used assistive technologies -- including screen magnifiers, screen readers and speech recognition tools
- include people with disabilities in user research
- publish an accessibility statement that explains how accessible your website or mobile app is
WCAG stands for Web Content Accessibility Guidelines and is the standard by which accessibility is measured regardless of whether the digital service is a website, product or app.
WCAG 2.1 is an extension to WCAG 2.0. To be accessible, the guidelines say, services must be:
- perceivable - designed in ways that can be accessed by everyone
- Operable - designed in ways that can be operated by everyone
- Understandable - designed in ways that can be understood by everyone
- Robust - reliable and compatible with assistive technology and standards
All services must be manually tested against the WCAG 2.1 criteria.
View the Defra accessibility checklist
Automated tools are available but tools alone are not able to to identify all accessibility issues. See the GDS accessibility team’s audit of the most used accessibility tools.
All public sector websites will need to publish an accessibility statement. The accessibility statement should:
- list any inaccessible parts of the website or app
- show how people with access needs can get alternatives to content that's not accessible
- provide details on who to contact to report accessibility issues
- provide information on the enforcement procedure if people are not happy with the response
- be published in a fully accessible form and comply with the GOV.UK style guide
- follow a consistent format
View a sample accessibility statement
All Defra services must work with common assistive technologies.
This means:
-
testing with assistive technology
-
finding user research participants who use assistive technology
-
asking for assistive technology testing to be included in your accessiblity audit
You must get an accessibility audit and fix any issues before a service can move into public beta.
All essential geographic information must be available in non visual formats such as text or lists.
Maps should be used as visual enhancements of this information for people who choose to use them.
Interactive maps should only be used when there is a user need.
Read the full guidance on working with maps
All essential data and information must be available in non visual formats such as text or lists.
Charts and graphs should be used as visual enhancements of this information for people who chose to use them.
Internal facing services and case management tools need to be consistent across Defra.
Standardisation increases usability and familiarity, making systems more efficient, easy to use and accessible.
Any products bought from external suppliers need to meet the Technology code of practice
Design patterns solve common problems so teams can focus on the things unique to their service and its users.
Check the GOV.UK Design System to see if the component or pattern you need is already being in government.
If you cannot find what you need in the GOV.UK Design System you can:
-
see if it is being worked on by other teams across government and add your findings
-
see if it is being worked on by someone in Defra and add your findings
-
Check other departments for design patterns and design resources
All patterns must be useful and unique.
Existing design patterns can be used as starting points but may need to be iterated to suit the needs of users of a particular service.
Before iterating a component or pattern make sure there is a clear user need to do so. Share any changes you make or research findings to the GOV.UK design system backlog.
To do this add a class to the component with a Defra namespace.
<button type="submit" class="govuk-button">
Save and continue
</button>
<button type="submit" class="govuk-button defra-button">
Save and continue
</button>
To create a new pattern, use a Defra namespace to avoid issues with CSS inheritance.
<header role="banner" class="defra-internal-header">
<div class="defra-logo">
<a href="#" title="#" class="defra-logo__link">
<span class="c-defra-logo__title"> Logo text</span>
</a>
</div>
<div class="defra-internal-service-name">
<a href="/" title="Go to the homepage" class="defra-internal-service-name__link">
Internal service name
</a>
</div>
</header>