Accordions are another way to "chunk" page content. These can help reduce the length of a long page, lessen visual clutter, and provide a quick overview of the page, similar to a table of contents. The styles we are recommending here have a main (h2) heading introducing the accordion content and a subheading (h3) to start each section. This provides proper heading structure to augment the visual styling of the accordions, which will benefit those who can't see the page and navigate using a screen reader. Additionally, they are fully accessible, meaning they can be operated by a screen reader, a keyboard, a mouse, or by touch on a mobile device.
Plain Accordion
This style is simple and includes proper heading structure.
<h2>Heading Introducing the Content</h2>
<details>
<summary style="padding: 15px; font-size: 150%; border: 2px solid #BE0000;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details>
<summary style="padding: 15px; font-size: 150%; border: 2px solid #BE0000;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details>
<summary style="padding: 15px; font-size: 150%; border: 2px solid #BE0000;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
Accordion With Color
This is the same style using a dark background color and white text.
<h2>Heading Introducing the Content</h2>
<details>
<summary style="padding: 15px; font-size: 150%; background: #BE0000; color: #ffffff; border: 1px solid #890000;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details>
<summary style="padding: 15px; font-size: 150%; background: #BE0000; color: #ffffff; border: 1px solid #890000;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
<details>
<summary style="padding: 15px; font-size: 150%; background: #BE0000; color: #ffffff; border: 1px solid #890000;">Title</summary>
<h3>Subheading</h3>
<p style="margin-left: 10px;">Content here.</p>
</details>
Caution: Don't put too much content in each accordion
Remember not to put too much content in an accordion or combine this style with multimedia-heavy content. While this can shorten a page and make it look less cluttered, it does increase the interaction needed from the learner, so be mindful of that trade-off.
Modifications and Guidelines
- Change the background and border color.
- Adjust the title font size by changing the percentage.
- Change the cursor style.
- Add padding, line, or margin space.
0 Comments
Add your comment