The collection component is a versatile tool for your SiteNow website. It’s perfect for organizing related content or displaying long-form information in a tidy accordion format. However, like any component, it requires thoughtful application to maximize its potential and maintain a user-friendly and accessible site. By keeping a few key considerations in mind, you can ensure that your content remains well-structured, accessible, and engaging for all users.

Long-form text? Consider alternatives to a collection

The collection component is a great solution for condensing lengthy text. With the accordion feature, users can expand and collapse sections, making your content more interactive and organized. However, there are times when an accordion (and by extension a collection item) may not be the best choice.

If you’re dealing with a document that users need to view or print in full, such as a contract or a detailed report, consider providing the full text on the page or linking to a downloadable PDF. Regardless of the format, always ensure your content adheres to WCAG accessibility guidelines to ensure a smooth experience for all users. 

Maintain consistency in headings

Headings are the framework that organizes your content, and consistency is essential when using them in the collection component. If you start with an H2 for a primary section, follow the proper hierarchy for subheadings—H3, H4, H5, etc. This logical structure is not only important for content organization but also crucial for accessibility. Screen readers use headings to navigate a page, so maintaining a clear, hierarchical structure helps all users understand the flow of the content.

Limit the use of tables in the collection component

While tables can be useful in many contexts, they don’t always play well with the collection component. Since this feature groups text into collapsible sections, adding tables can quickly make the page feel cluttered and difficult to navigate. More importantly, tables within a collection component can create accessibility issues for users who rely on screen readers. To maintain a clean and efficient design, reserve the collection component for text-based content, limit use of tables and avoid embedding images or graphics in a table within a collection component.

The collection component is a powerful tool for organizing and presenting content efficiently. By following these best practices and keeping accessibility in mind, you can create a user-friendly and professional website. With careful attention to structure and design, the collection component can enhance both the functionality and accessibility of your site, ensuring a seamless experience for all users.