<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Accordions &#8211; Fountn</title>
	<atom:link href="https://fountn.design/resource-tags/accordions/feed/" rel="self" type="application/rss+xml" />
	<link>https://fountn.design</link>
	<description>Curated design resources. No clutter. Just flow.</description>
	<lastBuildDate>Thu, 22 May 2025 20:55:25 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.1</generator>

<image>
	<url>https://fountn.design/wp-content/uploads/2024/03/cropped-Default-150x150.png</url>
	<title>Accordions &#8211; Fountn</title>
	<link>https://fountn.design</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>NHS Digital Service Manual &#8211; Expander</title>
		<link>https://fountn.design/resource/nhs-digital-service-manual-expander/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:19:06 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3888</guid>

					<description><![CDATA[The NHS digital service manual provides guidance on using expanders, a UI component that allows users to reveal more detailed information on a page. Expanders are useful when the content is overwhelming, intended for a wide audience, and there is a clear user need. However, they should be avoided if only some users need the [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>GOV.UK Design System &#8211; Accordion</title>
		<link>https://fountn.design/resource/gov-uk-design-system-accordion/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:17:50 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3886</guid>

					<description><![CDATA[The GOV.UK Design System provides an accordion component allowing users to show and hide related content sections on a page. This component is useful when users need to see an overview of multiple sections, choose which sections are relevant to them, and compare information that might otherwise be spread across different pages. The accordion component [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>Ontario Design System &#8211; Accordion</title>
		<link>https://fountn.design/resource/ontario-design-system-accordion/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:16:39 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3884</guid>

					<description><![CDATA[Ontario Design System&#8217;s guidelines on accordions offer a valuable blueprint for effectively managing complex information on web pages. The key message is clear: start simple. Before resorting to accordions, explore opportunities to streamline and reduce content, split it across multiple pages, or organize it with clear headings. Accordions should be reserved for scenarios that enhance [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>Helsinki Design System &#8211; Accordion</title>
		<link>https://fountn.design/resource/helsinki-design-system-accordion/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:15:15 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3882</guid>

					<description><![CDATA[Accordions are versatile UI components that allow users to access and digest information quickly. The Helsinki Design System provides guidelines on properly using accordions to enhance the user experience. The design system also outlines various accordion variations, such as default, card-based, and with the close button hidden. Developers are encouraged to choose the right accordion [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>Carbon Design System &#8211; Accordion</title>
		<link>https://fountn.design/resource/carbon-design-system-accordion/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:14:09 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3880</guid>

					<description><![CDATA[At the heart of the accordion lies the concept of progressive disclosure, allowing users to access large amounts of content in a compact space. By presenting information in a vertically stacked format, with headers that reveal or hide associated sections, accordions enable users to focus on the most relevant details, reducing cognitive load and improving [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>BBC GEL &#8211; Accordion</title>
		<link>https://fountn.design/resource/bbc-gel-accordion/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:12:50 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3878</guid>

					<description><![CDATA[The BBC&#8217;s Accordion design pattern is a powerful tool for organizing and presenting content on web pages. At its core, an accordion is a vertical list of headers that users can interact with to reveal or hide content within them. This approach helps reduce page length and scrolling, making it easier for users to navigate [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>The Component Gallery &#8211; Accordion</title>
		<link>https://fountn.design/resource/the-component-gallery-accordion/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:11:32 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3876</guid>

					<description><![CDATA[Accordions are commonly used to reduce clutter and improve the organization of content, particularly on smaller screens where vertical space is limited. Styling the accordion is also discussed, with guidance on how to leverage the aria-expanded attribute to control the appearance of the component, as well as tips for overriding default browser styles. It also [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>Always Collapse Completed Accordion Checkout Steps into Summaries</title>
		<link>https://fountn.design/resource/always-collapse-completed-accordion-checkout-steps-into-summaries/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:10:22 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3874</guid>

					<description><![CDATA[Accordion-style checkout designs are becoming increasingly popular as they allow users to progress through individual expanding and collapsing sections of data entry. However, many of these designs fail to provide users with an efficient way to review their previously entered information. Without a separate order review step, users of accordion checkouts may hesitate to submit [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>Inclusive Components &#8211; Collapsible Sections</title>
		<link>https://fountn.design/resource/inclusive-components-collapsible-sections/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:08:35 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3872</guid>

					<description><![CDATA[&#8220;Inclusive Components &#8211; Collapsible Sections&#8221; explains how to build accessible collapsible sections for websites. It focuses on making sure that interactions like expanding or collapsing content work well for everyone, including people using screen readers. The guide is practical, covering how to structure the HTML and use JavaScript and ARIA attributes to ensure accessibility. It [&#8230;]]]></description>
		
		
		
			</item>
		<item>
		<title>Design better accordions</title>
		<link>https://fountn.design/resource/design-better-accordions/</link>
		
		<dc:creator><![CDATA[Ozan Öztaskiran]]></dc:creator>
		<pubDate>Mon, 16 Sep 2024 16:07:24 +0000</pubDate>
				<guid isPermaLink="false">https://backup.fountn.design/?post_type=resource&#038;p=3870</guid>

					<description><![CDATA[Accordions are a common UI component that organizes and presents content compactly and intuitively. The article outlines several best practices for designing effective accordions: Accordions introduce greater complexity for accessibility. They should be keyboard-navigated and screen-reader friendly. They need to be operated by clicking (mouse, trackpad), touch (mobile), keyboard (screen readers), etc.]]></description>
		
		
		
			</item>
	</channel>
</rss>
