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é

[makraft]

While we understand the need to fix the HTML hierarchy for accessibility compliance, as well as other technical reasons, this i seems rather clunky.  There is no content between "Listings" and "Browse Listings." It only makes sense to put two headers on a page when there is some content on the page that follows the heading besides another heading with very similar text. My knee jerk reaction is to fix this by hiding Listings or Browse Listings with some CSS, which would just reintroduce the problem you're fixing. 

Given the feedback about the tiles having the wrong heading tags, it seems to me the better solution would have been to set "Browse Listings" to H1. Then the tiles would be right with their H2 tags and their would not be this redundancy on the page (Listings > Browse Listings).

This change is seemingly minor, but I would also argue that the timing to communicate the change and implement it was insufficient given end of term, holiday schedules, and the new year via a blog post alone, which is not what I think of as a roadmap or release notes notification.

[matekiss]

Hello @makraft,

Thank you for your feedback—it’s been really helpful as we worked through this update. I wanted to let you know that with today’s release, we’ve addressed the concerns you raised:

• The listing tiles are now updated to H3, ensuring they are properly nested under the "Browse Listings" H2 heading.
• We’re still reviewing the redundancy between the "Listings" and "Browse Listings" headers, but this first step ensures accessibility compliance and a logical structure for now.

I also wanted to highlight that we included this update in our release notes to ensure the changes were clearly communicated. While we understand the timing may not have been ideal, we’re actively working on refining our communication process to give more lead time and ensure updates are shared through multiple channels—like the blog, release notes, and other direct notifications. Your point about the redundancy between the headers is valid, and we’ll continue exploring ways to improve the structure in future iterations. Your suggestion to promote "Browse Listings" to H1 is on the table as part of those discussions.

Thank you again for sharing your thoughts and for your patience as we worked to address them. If there’s anything else on your mind, don’t hesitate to reach out.

Best,
Máté