The team made sure the component is accessible, for example that users can interact with it using just the keyboard. The details component might be better if you only have one or 2 sections of content. If there is no content for a section, either remove the section or, if this would be confusing for your users, explain why there is no content when the section is opened. This component is experimental because there are different approaches to accordions in services. Published 3 April 2012 Last updated 10 September 2019 — see all updates Such as GOV.UK Verify’s architecture using a federated identity model to h… on 19 November 2020. The time-limited Document Checking Service (DCS) pilot has launched with a small group of participants in order to investigate how government can support the growing digital identity market. Whether the section should be expanded upon initial load or not. on 12 November 2020. Great to see gov.uk continuing to be at the cutting edge of content! By submitting a comment you understand it may be published on this public website. We’ll be blogging more on this as our work continues. Some people use the tab key on their keyboard to navigate through the links and form elements on a web page. Elisa has gone even further in giving users a succinct, personalised view of information that spans multiple sets of user needs. In the meantime, you should continue to use the design patterns, components and styles found in Frontend Toolkit and GOV.UK Elements. Managing Director For the first time, government is making real-time passport validity checks available to the private sector. Accordions, tabs and details all hide sections of content which a user can choose to reveal. GOV.UK Elements: is no longer maintained; will only be updated for major bug fixes and security patches; does not meet the Web Content Accessibility Guidelines (WCAG 2.1 level AA) accessibility standard; This framework will remain available in case you’re currently using it. posted on This fails WCAG 2.1 success criterion 1.3.1 Info and Relationships. If you struggle to come up with clear labels, it might be because the way you’ve separated the content is not clear. The accordion component lets users show and hide sections of related content on a page. When JavaScript is not available, users will see all the content displayed with the section labels as headings. Accessibility is so very vital, as all too often those browsing websites differently (such as using text to speech readers as one example) are often overlooked. Some options are required for the macro to work; these are marked as "Required" in the option description. All GOV.UK pages must include a skip link in the header. Defaults to, see an overview of multiple, related sections of content, simplify and reduce the amount of content, keep the content on a single page, separated by headings, use a list of links to let users navigate quickly to specific sections of content. Whether you’re navigating through a menu structure or searching for a term or phrase, GOV.UK helps you get to a page that is relevant to the thing you are looking for. How we document components and patterns in the GOV.UK Design System Posted by: Amy Hupe , Posted on: 5 November 2018 - Categories: Design , Frontend , Service Design , Service Patterns We’ve talked before about the GOV.UK Design System and how we’ve worked to make everything it contains accessible, easy to implement and of a high quality. Find out how your organisation is impacted at GOV.UK/accessibility-regulations. on 16 November 2020, Hi Emma-Jane, indeed not! Stuart Jones GOV.UK Publishing Components is a Ruby gem to document and distribute components for GOV.UK applications. Contact the team. Data architects are forging new relationships with service designers who take a more holistic view of the entire services, and the evolution of the content designer’s relationship is with the data architect and service designer to ensure there’s a coherent structure to the content, data and service. If you want to know more about GOV.UK Frontend, please email the Design System team or get in touch with them on Slack. It could also offer new ways to reduce duplication and efforts in content management. offering a more personalised experience for users and delivering information to the channels and devices users expect to find it, , whether that’s on the GOV.UK website or elsewhere. VS. We’re also looking at the role content plays in connecting all of this work and how our approach to content will change as a result. For this reason do not use an accordion for content which is essential to all users. When there are more than 2 options, radios should be stacked, like so: GOV.UK Elements has now been replaced by the GOV.UK Design System. To host a website on a platform other than GOV.UK, a government agency must be given an exemption to do so. The section headings can be mistaken for links, but are treated as buttons. An example could be an item of eligibility criteria that is relevant to your circumstances on a page about applying for funding, or a prerequisite task on a page about getting a licence. -- A deadline for submitting something is easy and needs little additional context. posted on A data architect will work to manage the content meta-data, linking it and making accessible the information required to users. But it still requires you to read through the whole page (or set of pages) in order to understand the information fully, and then interpret what is relevant to you and your personal circumstances. Guidance on using components and patterns now follow a simple, consistent format based on task-based research into what users need in order to follow and trust an approach. But, for the majority of GOV.UK at least, the smallest component of content is currently the single page. Late last year, around the time our components, such as GOV.UK Notify, GOV.UK Pay and GOV.UK PaaS, first started being used across government, we did a discovery to work out what the next GaaP components should be. Check the GOV.UK Design System for more. Great to see gov.uk leading by example on the structured data front. Investigate the problem of some users not seeing the plus and minus icons on the right, for example people using screen magnifiers. The UK government's design principles and examples of how they've been used. The accordion component uses JavaScript. With this said, unless the user experience is kept up-to-date with the latest user behaviours, then it can very quickly become obsolete. posted on Seriously though, don't believe the hype around AI. Please read our privacy notice to see how the GOV.UK blogging platform handles your information. The content available on gov.uk is not only expansive, covering a broad range of topics, but it is also some of the highest quality, most vetted content anywhere on the internet. You can configure the accordion component to stay open. Accordions hide content, so the labels need to be clear. Breaking content down into smaller chunks is only part of the picture, however. We’ve already made progress on this, through adding structured data markup to GOV.UK content, which has improved the way content appears in search results on Google, for instance. And we’re now, using artificial intelligence to increase our knowledge of the information on GOV.UK. And the. GDS common components have been built to meet the needs of all users, including Welsh language speakers. Nick Colley is a Frontend developer working on the GOV.UK Design System. The plus and minus icons used in this component are the most commonly used accordion controls in government services. However, more research is needed to find out how this compares to other approaches. We’ve added in our component styles and assets to … Subscribe to this blog for updates. Consider using an accordion instead of the details component if there are multiple related sections of content. But the direction of travel is about supporting people doing high-quality user centred design rather than replacing them with AI , Comment by The design for this component was originally created and tested by a team at the Government Digital Service (GDS) on the GOV.UK Service Manual and GOV.UK topic pages. Show an error message next to the field and in the error summary when there is a validation error The Government Digital Service (GDS) style guide covers style points for content. novi.digitalThis is the content for Writing well for the web.

", "

This is the content for Writing well for specialists.

", "

This is the content for Know your audience.

", "

This is the content for How people read.

", "accordion-with-summary-sections-heading-1", "govuk-accordion__section-summary govuk-body", "accordion-with-summary-sections-summary-1", "accordion-with-summary-sections-content-1", "accordion-with-summary-sections-heading-2", "accordion-with-summary-sections-summary-2", "accordion-with-summary-sections-content-2", "accordion-with-summary-sections-heading-3", "accordion-with-summary-sections-summary-3", "accordion-with-summary-sections-content-3", "accordion-with-summary-sections-heading-4", "accordion-with-summary-sections-summary-4", "accordion-with-summary-sections-content-4", Replace variables, functions and mixins from our old frameworks, Extending and modifying components in production, There is a problem with the service pages, WCAG 2.1 success criterion 1.3.1 Info and Relationships, share your research or feedback on GitHub. We’re now starting to explore how we might structure content differently, at scale, so pieces of information can be reused and accessed more easily, both across GOV.UK and beyond GOV.UK. - Explaining which visa you should have would need to have a lot of background context before being able to say "this is the visa you should have." This blog post features just a small fraction of the work we’ve done to make our components more accessible. See live examples of GOV.UK Frontend components, and guidance on when to use them in your service, in the GOV.UK Design System. The Government Digital Service (GDS) has led the digital transformation of government and is a model that is being copied internationally. For example GOV.UK Step by step navigation uses the words ‘Show’ and ‘Hide’ on the left side. Developing the, has provided greater ability to join up content across complex user journeys. The details component is less visually prominent than an accordion, so tends to work better for content which is not as important to users. The UK government’s new website, gov.uk, was many times cheaper than its predecessors and even won design of the year in 2013. We’ve helped government to realise more than £1 billion of benefits through scrutinising technology spending. Check the MOT history of a vehicle uses up and down arrows instead of plus and minus icons. Disabling controls is normally confusing for users. on 20 November 2020. posted on Many of these decisions and questions will need insight, feedback and collaboration from across government and I’m interested to hear from other teams who have been thinking about these areas. And we’re now using artificial intelligence to increase our knowledge of the information on GOV.UK, helping us start to understand those characteristics and relationships across hundreds of thousands of pieces of content. GDS worked with organisations across government to create the Digital Buying Guide. The more ambiguous an idea is the more "connections" it will have to other pieces of content, and the more context it would need. GOV.UK Frontend is maintained by a team at Government Digital Service. Quick start https://gds.blog.gov.uk/2020/11/05/new-approaches-to-gov-uk-content/. Consider if it’s better to: Do not use the accordion component if the amount of content it would need to contain will make the page slow to load. Simple markup not only enables search engines to prioritise said content and display it much more clearly in the search results, but it also forces content creators to think more openly in terms of the true purpose of the content being produced. And how can we continue to support them in their work on GOV.UK content? government portfolio design-systems govuk-design-system govuk-design-system-team HTML MIT 121 178 120 (4 issues need help) 16 Updated Nov 29, 2020 Comment by Some of this work has provided opportunities to apply a more modular approach to content, where information is built up using small content components that are designed to be used (and reused) in different ways based on context. Stacked radios. GOV.UK. HTML attributes (for example data attributes) to add to the accordion. And we’ve discussed some of the ways we are looking to support this, through building a more holistic picture of how users use government information and services, developing our data science capability, and introducing early thinking on the idea of a GOV.UK account. Users might need the sections they have opened to stay open if they leave and then return to the page. To host a website on a platform other than GOV.UK, a government agency must be given an exemption to do so. Comment by Do user research to find out the best order for the sections. Accordions push other sections down the page when they open, but tabs do not move which makes it easier to switch. The ‘Open all’ button reads out as ‘Open all sections’ for screen readers. Whether you’re navigating through a menu structure or searching for a term or phrase, GOV.UK helps you get to a page that is relevant to the thing you are looking for. It could provide better exposure of content to third parties, with benefits of search engine optimisation (SEO) and channel-agnostic publishing. If you’re outside of the UK government and have ideas, I’d love to hear from you too! On GOV.UK we use a gem called slimmer which adds our standard header and footer to every page. This is a new service – your feedback will help us to improve it. For example: You should also take into account the number of sections of content – accordions display vertically, so they can fit more sections than horizontal tabs. Happy to chat if it’s helpful? There are 2 ways to use the accordion component. Great way of using AI for content. The report was published in 2010 and work began that year to set up what would become GOV.UK and to build a team that would develop and support it. , helping us start to understand those characteristics and relationships across hundreds of thousands of pieces of content. You’ll find live examples supported with code so you can see how components and patterns work and paste them straight into your application. But the scale of information on GOV.UK, together with the complexity of users’ needs and their expectations when interacting with government, present new challenges that we are starting to work through. And the UK Transition (formerly Brexit) checker has gone even further in giving users a succinct, personalised view of information that spans multiple sets of user needs. Structuring information in the ways I’ve laid out isn’t a new concept: online shops and other commercial sites have been using and refining models of structured information for reuse, personalisation and more for years if not decades. (Deadline for visa applications for 2020 is Dec 19th.). Hundreds of thousands of pieces of content is, of course, the big challenge here. In other words, we can get you to the relevant page, but often it’s then up to you to find the relevant information to your situation. Accordions work best for simple content and links. Thanks to the work of GDS, the UK is consistently ranked as a world-leading digital government. I’m also particularly interested in what skills and capabilities will be needed to support these new content models and approaches. Comment by It’s also about understanding what characteristics each piece of content has and what similarities, differences and other relationships pieces of content have with each other. If you want to know more about how you can use them in your service please get in touch with the GOV.UK Design System team at GDS.