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

PeterBudavari
Instructure
Instructure
6
2113

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.



6 Comments