Essential Accessibility Updates: Review Your Beta Instances!

[KataKeri]

UPDATE: Production release day has been moved to July 22nd (Monday) to ensure institutions have enough time to check and adjust their customisations. 

In order to help institutions identify the changes, here's a summary of the changes we've made.

• one of the changes was about the user menu in the header
• one change about the listing card on cart checkout and bulk checkout pages
• one change about introducing pagination on the main page
• many changes about fixing the headers on all the pages: every page has a H1 heading and then the headings are in proper order
• many changes about fixing the landmarks on all the pages

In more detail here are the names of the bugs we needed to fix:

- Admin menu does not work well with KO navigation
- Cart/Checkout - nested interactive controls, SR blocked
- R only H2 on Home Page should be an H1
- Account Dropdown Menu - does not contain KO or SR focus
- Catalog enroll page needs proper landmarks
- Course Details page - Header and Main Landmarks are contained in other landmarks (also Header and Main)
- Create Account Page - Nested Main Landmarks
- Cart/Checkout - Nested Landmarks, 2 Main Landmarks
- All Pages - Landmarks are nested and duplicated
- Cart/Checkout - Page has 2 H1s, skips heading levels
- Checkout Timeout page - skipped heading levels
- All pages - Content title should be H1s
- Some pages have more than 1 H1
- Heading issues throughout Catalog
- Logo is set to H1 site-wide
- Heading hierarchy on course details page not WCAG compliant, 2 H1s
- Create Account Page - Does not have an H1
- SR UX of course "cards" on Home Page could be improved with UL and breaking up card details
- Infinite scroll/load on home page

Dear Canvas Catalog Users,

We’re excited to announce that on June 25, 2024 (Tuesday), we will release important accessibility-related bug fixes to the Canvas Catalog beta environment. This update will include changes to the HTML structure, which may impact your existing JS/CSS customisations.

To ensure a smooth transition in your production environment, please review your beta instances and verify that everything functions as expected. If any issues arise, please make sure to make the necessary adjustments.
Production release will happen on July 22, 2024 (Monday).

Key changes on the main page to note:

• all pages will have an H1 heading, including the main page
• on the main page there will be a pagination instead of  the Load more button
• user menu in the header will be changed - e.g. instead of <div id="user-nav" /> there will be <div id="header-menu-container" />

At Instructure, accessibility is a top priority. This update is a significant step towards making Catalog fully responsive and achieving our goal of a published VPAT. )

For any questions, please feel free to reach out.

Best regards,

The Catalog Team

[KathyPalm]

Thank you! Will there be any additional information about this in the release notes? Thanks!

[KataKeri]

@KathyPalm Since these considered as bug fixes, we won't do release notes for this (as we usually don't publish release notes for bugs, just new features or feature updates). 

[KathyPalm]

Thanks for the reply. I do understand that logic of it being a bug fix, but if there's such a risk that it could have widespread impact on our custom code it surpsies me that it isn't highlighted in release or deploy notes to ensure it's not missed. We'll be sure to take a look once it's available in beta.

[JenniferJWhite]

Hi, @KathyPalm - Yes, we looked this morning and have noted a number of impacts to our customized code in beta, and our developer will be out on leave for the next two weeks (summer hols!). We've asked for a delay in the push to prod, and I believe that has been granted (moved to 7/15/2024).

@KataKeri - I think you're going to update this post with the new push-to-production date of 15 July -- I'm just here at the moment and saw Kathy's post, so wanted to make mention of this!  🙂

[rpsloan]

@KataKeri I checked Beta and I did notice that the header logo got big, and for some of our logos with transparent backgrounds, it is going over where the feature region is. Is this as designed? Previously, the uploaded file gets restricted to the 120 pixels by 350 pixels? Does this mean subcatalogs would have to reuploaded their logos to this specific file size?

[KataKeri]

@rpsloan this was not intentional, and we're fixing it right away. sorry for the inconvenience.

@KathyPalm I understand your concern and I will let the new Catalog Product Manager know about this to discuss with the stakeholders how to handle bug fixes and the announcements for those. 

@JenniferJWhite Post has been updated with the new date. 

[jsowalsk]

@KataKeri Can you let us know when this is fixed since our banner size is huge?

[emily-mckeag]

@KataKeri looking at our beta instance, so far our customized JS and CSS seem to be fine. One thing I did notice is that the login and user navigation text is really hard to see with our background. Iowa's branding is black and gold with the banner being black. The login button is now a dark blue color in beta. Is this part of the accessibility update? Is there a way to change the color of this? The user nav color is supposed to be #d9aa00 which it shows as being correct in our custom CSS. I can see this being a pretty big visual accessibility barrier. Thanks!

[KataKeri]

@rpsloan @jsowalsk  - It's fixed. No more changes will be added to beta, so you can start testing.

@emily-mckeag Yes, the login button is originally blue. It was part of the accessibility change. Seems like your CSS is not working there anymore, because the HTML has been changed, so this needs to be adjusted on your side. 

As a heads up I updated the post with this for the header changes:

• e.g. instead of <div id="user-nav" /> there will be <div id="header-menu-container" />

[rpsloan]

Thanks @KataKeri!

[KataKeri]

Hello all,

I've extended the prod release date to July 22nd, and also added some information about the changes we've made (see Update).

Hope this will help identify the areas which needs to be checked.

[JenniferJWhite]

Thanks so much for the additional info and extra time, @KataKeri !!

[eric_silva]

Agreed, thanks for the additional info and time. This is a big help!

[jsowalsk]

Thank you!!!

[KathyPalm]

Thank you!