Advancing Accessibility in Canvas: On the Path to Full WCAG 2.1 AA Compliance

PeterBudavari
Instructure Alumni
Instructure Alumni
10
6254

decorative image.png

 

What’s Changing: A More Accessible Canvas Experience

We’ve grouped our improvements into four major focus areas, each targeting common challenges and feedback from users and accessibility audits.

1. Clearer Visual Design

 

Axe DevTools results: no contrast or semantic HTML issues foundAxe DevTools results: no contrast or semantic HTML issues found

 

We’re refining the visual clarity of Canvas to better support users with low vision, color blindness, and other visual impairments:

  • Improved Color Contrast: Ensuring sufficient contrast between text and background for readability.

    • All active UI components will meet minimum contrast thresholds.

    • Text and images of text will provide adequate color contrast.

  • Component Upgrades:

    • Replacing legacy components like DateInput with DateInput2 for better keyboard and screen reader compatibility.

  • Semantic Use of HTML Elements:

    • Interactive elements performing page actions will be marked up with <button> tags.

    • Navigational elements will be correctly labeled using <a> tags.

2. Enhanced Structural Clarity

 

Screen reader announces the button's label, role, and selected state for improved accessibilityScreen reader announces the button's label, role, and selected state for improved accessibility

 

Canvas content will be easier to interpret and navigate for users of screen readers and other assistive tools, thanks to improvements in markup and element roles:

  • Valid ARIA Roles and States: Ensuring correct use of ARIA properties to convey information and interactivity accurately.

  • Accessible Custom Controls: Custom components will provide appropriate textual names, roles, and state indicators.

  • Status Message Support: Users will be notified of status updates programmatically—without requiring a change in focus.

  • Better Use of List Markup: Avoiding implicit lists and using proper semantic HTML for clarity.

3. Improved Error Feedback and Focus Handling

 

Screen reader announces the button's label, role, and selected state for improved accessibilityScreen reader announces the button's label, role, and selected state for improved accessibility

 

We’re making error states more visible and understandable—across all input types and interaction modes:

  • Accessible Error Messaging:

    • Forms and interactive elements will clearly indicate errors using accessible labels, focus states, and helper text.

    • Required fields will include visible indicators and input instructions (e.g., date format).

  • Focus Management:

    • Logical focus order will be enforced when dialogs open or close.

    • Specific fixes include the Profile Picture Dialog, which will now return focus predictably.

  • Zoom and Text Scaling Support:

    • Better support for content zoom without loss of functionality.

4. Streamlined Navigation and Keyboard Accessibility

 

Buttons meet accessibility standards with visible focus indicators and full keyboard operabilityButtons meet accessibility standards with visible focus indicators and full keyboard operability

 

We’re refining keyboard and screen reader navigation to create a consistent and intuitive user experience:

  • Keyboard Operability:

    • All interactive elements—like “Next” and “Previous” buttons—will be fully operable using only a keyboard.

  • Descriptive Headings and Labels:

    • All headings and input fields will be uniquely labeled and meaningful for screen reader users.

    • Redundant labels (e.g., unnecessary aria-labels) will be removed.

  • Reflow and Responsive Layout:

    • Pages will reflow gracefully at different screen sizes and zoom levels, avoiding two-dimensional scrolling.

  • Component Consistency:

    • Elements like Global Navigation tray triggers will be updated to use correct button semantics.

    • Redundant tabindex attributes will be removed to streamline keyboard navigation.

Stay Connected

 

We’ve been rolling out these accessibility updates gradually and will continue to keep you informed along the way. We’re excited to hear how these improvements are positively impacting the learner experience and invite you to share your insights. Whether through our new Accessibility User Group, support tickets, or direct conversations with our team, your feedback helps us shape a more inclusive and effective learning environment.

Thank you for being an essential part of the Canvas community and for partnering with us in our shared mission to make education more accessible for all.



10 Comments
kgrage
Community Explorer

Hello and thanks for all the work improving accessibility! Yesterday I noticed a background transition effect on some drop-down menus that can be a bit nauseating. 

For example, if you're in the "Import Content" area of a course, click the "Select Content Type" drop-down menu and then move your cursor up/down in the list quickly, you'll get a rainbow effect. While the hover effect enhances accessibility by providing some visual feedback as users go through the options, the transition effect poses an accessibility barrier for users with visual sensitivities and photosensitive epilepsy.

The same transition effect seems to be on drop-down menus in a lot of different places, such as:

  1. Courses:
    1. Modules (Un)Publish for all or individual modules (the button tags have the CSS transition: background 0.2s;)
    2. Assign To student/section drop-down
    3. Time drop-down (for Assign To, Announcements)
    4. Rubrics area > Actions three dots (also happening in the (sub-)accounts Rubrics area)
    5. Settings > Participation and Grading Scheme
    6. Grades: Gradebook view, Student Names, Assignment Names, Export drop-down (the transition effect on Export is on a span tag, not a button), Gradebook Settings > View Options > Arrange By, each column's three dots
  2. Admin:
    1. Courses > Term
    2. People > All Roles
    3. Settings > Integrations

However, the transition effect is not on all drop-down menus. For example, it's not on the three dots drop-down menus for content in courses (e.g., for an assignment, quiz, discussion, page, module, or file; the top of the Assignments and Modules areas) nor on the older style of drop-down menus when editing settings for content or most of the course Settings drop-downs.

Is that a change that was implemented with the updates yesterday, and if so, can it be removed (either by Canvas or easily in our own theme)? Thanks!

jenn_stevens
Community Contributor

Hi! We had questions about the first image in this post - it looks like it's not the actual modules page, so is it a page that is using tables? Is it the block editor? We weren't sure what that image was supposed to illustrate, and it wasn't a view of Canvas that we had seen before.

dbrace
Community Coach
Community Coach

@jenn_stevens, it looks like a Canvas page called "Modules" and that it is possibly setup as a table and has clickable images for each module in the course.

I believe the purpose of the image is to show that the web browser's developer tools (probably Chrome) are reporting 0 issues (as shown in the lower-left corner).

-Doug

Justin_Reynolds
Community Participant

Hi @PeterBudavari,

Do you have an ETA as to when Canvas will be in full compliance with WCAG 2.1 AA?  I'm curious to know when all the updates will be complete.  

Justin

kshepherd_canva
Community Participant

@jenn_stevens I'm also wondering what that page is - it's not the Modules page from within a specific course, and I've never seen one like it. How do you navigate to it?

dbrace
Community Coach
Community Coach

@kshepherd_canva, I believe it is a Canvas page that was created.  When they created it, they either called it "Modules" or created a header within the page (because there may have been other things in it) called "Modules".  Then they (probably) set as the "Front Page".  It is serving as a sort of table of contents page.

-Doug

S_Carter1
Community Explorer

Hi @PeterBudavari  

Great to see all these improvements. As this is written in the future tense, can we get a sense of which changes have been implemented and what the timeline looks like for the ones still in progress? 

-Sue

 

LauraF1
Community Participant

It would also be helpful to have more specifics about what has been fixed in the periodic release notes, rather than just a link back to this post; this is from the latest Canvas Deploy Notes 2025-07-16:

Accessibility Updates
Enhanced Experience for Assistive Technology Users
All Users
Summary

Updates enhance accessibility, usability, and equity, especially for users of assistive technology. Improvements include refined semantic structure, clearer error messaging, improved visual contrast, and enhanced keyboard and screen reader navigation to provide a more intuitive and consistent experience for all users.

Related Blog: Advancing Accessibility in Canvas: On the Path to Full WCAG 2.1 AA Compliance

ReLMacaulay
Community Member

Did these updates somehow affect the RCE highlighter colors? We recently noticed the default highlighter colors within the editor are extremely dark and inaccessible: https://community.canvaslms.com/t5/Canvas-Question-Forum/Default-colors-for-highlighting-changed/m-p... 

KatieProfeta
Community Explorer