Canvas Catalog listings header changes coming January 6th

[matekiss]

We’re introducing two key changes to Canvas Catalog headers that will improve accessibility and enhance the structure of your Catalog. These changes may affect any custom JS/CSS code you’ve applied, so please review the details carefully to prepare for this update.

What’s changing?

1. New H1 title on the Homepage:
   A new H1 title with the text "Listings" will be added to the Homepage of Canvas Catalog. This ensures consistency and accessibility by providing a clear primary heading for the page.
   
   
2. "Browse Listings" title changes to H2:
   The current "Browse Listings" H1 title will be updated to an H2 heading. This adjustment improves semantic structure and aligns with accessibility best practices.
   
   

Why these changes matter

These updates are designed to enhance the accessibility and organization of Canvas Catalog, but they may impact custom JavaScript or CSS that references these specific headers. It’s essential to audit your customizations to ensure compatibility with the new structure.

Release date: January 6, 2025

These changes will go live on January 6, 2025, alongside the release of our exciting Canvas Catalog and Credentials integration, which introduces badges and pathways to your Catalog.

Action required: How to prepare

1. Audit your custom code:
   Review all custom JS/CSS to identify any code that targets the "Browse Listings" header or relies on its H1 structure. Plan to update any references to align with the new H2 designation.
   
   
2. Test in Beta:
   Use your Beta environment to test these changes ahead of the release. Verify that your customizations still function as expected with the updated header structure.
   
   
3. Update your code:
   Update your JS/CSS to reflect the new structure, including any changes needed to accommodate the new "Listings" H1 title.
   
   
4. Reach out for support:
   If you encounter issues or have questions, our support team is ready to assist.
   
   

Why are we making these changes?

This update reflects our ongoing commitment to web accessibility and best practices. By introducing a clear, accessible H1 title and restructuring the "Browse Listings" header, we’re ensuring Canvas Catalog remains an inclusive and user-friendly platform.

Get ready for January 6th

With these header updates and the exciting new integration of badges and pathways, January 6th will be a transformative day for Canvas Catalog. While these changes may require adjustments to custom code, they bring significant improvements to accessibility and usability.

Thank you for preparing ahead and partnering with us to make Canvas Catalog better for everyone. If you need assistance, don’t hesitate to reach out. Together, we’ll ensure a seamless transition.

Best,
Máté

[hechla]

Hello @matekiss - I was just checking this out in beta and I noticed that on the Catalogs admin tab/page -  {institutename}.beta.catalog.instructure.com/admin#/accounts - there's no H1 on that tab/page The Listings, Promotions, Analytics, Subcatalog Admins, Tags, Audit Log, and Integrations tabs/pages all have the new H1 header. 

[JenniferJWhite]

Good catch, @hechla! We're seeing the same as you on the beta pages you mentioned. The header on the {institutename}.beta.catalog.instructure.com/admin#/accounts page needs to be changed to H1 (as is the case on the Listings page - {institutename}.beta.catalog.instructure.com/listings).

[eric_silva]

Hello @matekiss, Are there any plans to make the listing tiles an H3 so that they're properly nested under the new "Browse Listings" heading? When the recommendation engine is turned on, the "Trending Listings" heading and listing tiles are all H2s as well.

Canvas Catalog Headings

[matekiss]

Hello @JenniferJWhite @hechla ,

Thank you both for taking the time to test these updates in the beta environment and for sharing your observations.  You both brought up a great point about the Admin page not appearing to have an H1 header. I checked with our development team, and here’s what we found:

While the Admin page does have an <h1> HTML element, the font size and styling differ from what you see on pages like Listings. This might make it look like there’s no H1 at first glance, but rest assured, the semantic structure is in place.

The Admin page is currently built on Ember, which uses slightly different design rules compared to other parts of the Catalog. This has led to some inconsistencies in how elements like headers are styled. That said, we’re planning to move away from Ember this year to a more modern framework. This will allow for a more unified design and a better overall experience for users. While the current focus is on accessibility and structure, these planned upgrades will address the visual and technical consistency you’ve flagged.

We’ll double-check the beta environment to ensure all pages meet accessibility standards and align with your expectations. As we transition to the new framework, we’ll prioritize consistent design across all pages.

If you’d like to confirm the presence of the H1, you can use your browser’s developer tools to inspect the page structure. But if something still seems off, please let us know—we’ll investigate further.

We really appreciate you flagging this! Let us know if you find anything else or have more questions.

Thanks again!
Máté

[matekiss]

Hello @eric_silva ,

Thank you for bringing this up! You’ve highlighted an excellent point about the heading hierarchy for the listing tiles. After reviewing this with our development team, we realized that the listing tiles should indeed be adjusted to H3 headings to ensure they are properly nested under the new "Browse Listings" H2 heading. We’re going to address this oversight and make the necessary adjustments.

We’ll prioritize this fix and please don’t hesitate to share any additional thoughts or questions in the meantime.

Best,
Máté