UW Canvas Case Study.png

UW Canvas Case Study

TL;DR

This project investigates accessibility challenges in the UW Canvas Student Portal, specifically for keyboard-only users. Prompted by real user feedback, the research used WAVE analysis, heuristic evaluations, and user task testing to identify critical usability issues. Based on the findings, three key redesign recommendations were proposed to improve navigation and inclusivity for all users, particularly those relying on assistive technology.

Timeline

September 2022 - December 2022

Genre

Website Case Study

Initiation

Identifying a research focus was initially difficult due to the perceived accessibility of many well-known platforms. The turning point came from a professor’s feedback about struggling to navigate a Canvas course using a mouse. This sparked the question: if mouse users face challenges, how much harder is it for keyboard users? This insight led to the selection of the UW Canvas Student Portal as the focus for accessibility research.

Research

Canvas supports over 30 million users worldwide, including more than 60,000 students across UW’s campuses. While the platform is widely used, students with disabilities—over 2,800 registered with UW DRS—may encounter unique challenges.The research combined WAVE accessibility analysis and keyboard navigation tests, revealing six key issues. These were paired with heuristic evaluations involving real UW students, who completed tasks like editing profiles, checking grades, and favoriting courses. The process simulated real-world use and captured accessibility and usability breakdowns.

During the accessibility analysis, we took the UW Canvas Student Portal website to the test and tried shaking it down to discover any flaws with keyboard navigation and with the WAVE Accessibility tool. Over the course of 2 days, we have discovered 6 potential flaws on the website that could affect the experience of the user, especially those who need to navigate with the keyboard. These are the 6 flaws, their findings, and their solutions to the flaws:

No Access to Canvas Calendar Feature & No Return to Week and Month Button*

Findings

  • Users that navigate with the keyboard cannot access the content inside the dates in the Default UI.
  • Once the UI is changed for accessibility, users cannot change back to the Default UI with keyboard navigation.
  • Keyboard navigation cannot access the Week button.

Solutions

  • Calendar UI Buttons - Change of Name and Purpose
           Month = Default
           Agenda = Accessibility
  • Add Buttons to Calendar Dates
  • Have the Month & Agenda buttons be accessible and intuitive in both UIs

No Access to Sign-In
with Other Accounts

Findings

  • While navigating with the keyboard, the user cannot choose whether to sign in with the UW or Google email. If one is selected, the other cannot be selected.

Solutions

  • With the analysis from the WAVE tool, it was reported that there is a missing field set that would contain the check or radio boxes so the solution would be to implement a field set that would contain the radio boxes and thus allow the user to navigate through the two radio button options to sign in.

Unannounced Friction Step

Findings

  • UW announced a 2FA security measure to protect UW data, users that navigate with the keyboard cannot access the text information leaving them without any indication that the text exists.

Solutions

  • Creating a section that covers the paragraph text and allows for screen reading technology to read the text inside the section.
  • Link up the “Lock down…” heading also key phrases in the paragraph with an embedded link that would direct the user to enable the 2FA needed.

History Tab Confusing Information

Findings

  • The navigation only flows through the links of the files or page and doesn’t include the information of the course it’s located in and the titles.

Solutions

  • Include a hyperlink underneath the title of the file/activity that would announce or highlight the information of the course that the file/activity is in and allows the user to access the Canvas course page.
  • Include the number of the course to let the user know which file is for which course.

Reset Navigation in Opening Messages from
Inbox Tab & Null Button in Messages*

Findings

  • Users are taken to the beginning of the navigation page once they have selected the recent message and need to navigate once again to where they were on the page.
  • When navigating, the user can highlight the button but when the ‘enter’ button is pressed, nothing occurs.
  • To open the message, the user must navigate through all the options inside the message box before being given the option to open the message.

Solutions

  • Having the web page be responsive and selecting the message that is selected helps ease the misdirection of the last destination that the user was at.
  • Changing the code from “aria-hidden=true” to “aria-hidden=false” according to WAVE so that the square button can be responsive, and the message can be highlighted and opened when the user highlights the button.

*Initially, the first and last flaws were presented as two separate flaws in the Accessibility Assessment presentation but after the second consideration later in the research phase, both were merged because they are on the same UI page.

Three UW students participated in task-based evaluations using the Canvas portal. Tasks included updating a profile photo, checking course grades, and managing course favorites. Sessions were conducted both virtually and in person to reflect Canvas’s flexible use environment.While all participants completed the tasks, they encountered confusion—especially in locating features buried deep in the interface. The most common reaction was surprise at the existence of certain features, highlighting a lack of discoverability and intuitive flow.

Results

Participants—mainly international students unfamiliar with Canvas—completed the first task quickly, but struggled with the latter two. Tasks took significantly longer to complete, and all participants reported confusion, frustration, and surprise at undiscoverable features. These insights underscored the need for improved visibility, clarity, and accessibility in the user interface.

Redesigns

Three redesigns were proposed to improve usability and accessibility:
‍Simplified Profile Access – Streamlining the photo upload process by reducing the number of clicks required from the Account tab.
‍Accessible Calendar Navigation – Addressing the lack of keyboard functionality in the Calendar UI and restoring access to Month/Week views.
‍Inclusive Interaction Design – Designing for keyboard users from the start, ensuring all interactive elements are reachable and understandable through non-mouse inputs.

Task 1 - Calendar Limitation

Starting with one of the accessibility issues that was uncovered, we looked at the issue of not having access to the Calendar in Canvas with keyboard navigation and not having access to the Month and Week button once the “accessibility” UI is selected. During the design thinking, I thought about the access that users should be able to receive and the design for inclusivity in keyboard navigation. If you wish to view the findings, visit the first bullet point in the Accessibility Assessment section. These are the design recommendations that I believe will help solve the issue and provide a better experience for the user:

Calendar UI Buttons - Change of Name and Purpose
        Month = Default       |     Agenda = Accessibility
An image of the changes between the old UI and the new recommended UI using the words Month and Agenda as Default and Accessibility
Have the Month & Agenda buttons be accessible and intuitive in both UIs
                                        Add Buttons to Calendar Dates
An image of the Canvas calendar with the recommended changes of the UI with the dates being clickable because of them being buttons

Buttons are accessible in keyboard navigation so having the dates in the Calendar be buttons would allow the users to access the Calendar space. Making the Month, Agenda, and Week intuitive and accessible regardless of the UI and lastly changing the name of the buttons from Month to Default and from Agenda to Accessibility.

Task 2 - View Grades Feature

The second design recommendation follows the second task that was conducted during the heuristic evaluation/user journey. The recommendations are influenced by the suggestions and comment that the participants as well as thoughts that came to mind when analyzing the data. The task was analyzed from the outcome of the participants and on the navigation from the keyboard. From the outcomes, it was noted that:

All 3 participants quoted that:
  “I didn’t know this feature existed.”
Participants rarely scroll down the Dashboard page.
“People tend to skip content not visible on the screen.”
The button color blends a bit with the background.
When navigating with the keyboard, it took many clicks to reach the button.

These findings were crucial in gaining from the evaluation because I was able to learn about the difficulty of its discovery and the issue with its placement and based on the findings, these are the design recommendations that I believe will help solve the issue of frustrations and purpose and improve the experience for the user:

New Location

  • Placement under the Courses Tab for easy access and visibility.
  • Having the View Grades button in the Dashboard has no purpose nor relates to the content around it.
An image demonstrating the Recent Feedback and View Grades feature within the Canvas page

The participants struggled to discover the feature based on its location, being in the Dashboard rather than an environment where its relatable made the feature difficult to discover and people don’t normally scroll down in the Dashboard page and thus is the cause for the long timespan of its discovery. Moving the location from the Dashboard to the Courses tab will make the feature visible and easily accessible by both the mouse and keyboard navigators.

Task 3 - Favorite/Unfavorite a Course

The third design recommendation focuses on the third task that was conducted during the heuristic evaluation/user journey. The ideal process that the participants should have taken was Dashboard/Homepage -> CoursesTab -> All Courses Button -> Click a Star to Favorite or Unclick a Star to Unfavorite. A 4-step process that resulted in participants taking additional steps which took more time than anticipated and left them with a negative experience. The results from the heuristic evaluation and the comments that were given by the participants like the second task left tremendous potential for improvements in the experience. The findings that were observed include:

All 3 participants quoted that:
“I didn’t know the feature existed.”
There was confusion at first with the purpose of the feature.
“A frustrating feature with no indication of purpose.”
Participants didn’t notice the effect when a course was starred and when unstarred until questions were asked.
The longest task to complete for participants.

Because these results were like the results from the second task, it was taken into consideration for redesigns to better improve the experience. These recommendations are designed to improve the issue of discovery and purpose and allow the user to have the task completed in a matter of seconds.

Star in Card

  • Instead of needing to navigate through the Dashboard, users should easily favorite a course by implementing a star inside the card of the course on the Dashboard page.
  • X removes the card from Dashboard if the star isn’t clicked.
An image showing the card feature in Canvas

Star in Course Page

  • Users should also be able to favorite or unfavorite a course if they are on the course page.
An image showing courses, term, Enrolled as, and Published information in the Canvas page

Participants struggled to find the feature which resulted in frustration and irritation. Participants passed by the button that would direct them to the feature which was the key issue. This feature seemed to be hidden from the users. The redesign of the star being placed inside the card of the course would allow users to find the feature in a matter of seconds and figure out its purpose as well. I would also consider placing the star inside the course page of a class for those who are on the course page. While the star will be available for favoriting, those who want to easily remove a course card in the Dashboard can do so by clicking on the X on the top left. This is only available when a course card doesn’t have the star selected.

Next Steps

Future phases will include A/B testing and usability sessions with both original and new participants to validate the redesigns. Sessions will focus on task completion time, ease of navigation, and emotional response. Both remote and in-person testing options will be provided to ensure accessibility. The collected data will inform final recommendations and reflect on whether the redesigns significantly improved the user experience.

Learning Outcomes

This project reshaped my understanding of accessibility in design. Designing for users who rely on assistive tools revealed how often they are overlooked in digital experiences. Platforms like Canvas, serving diverse student bodies, must prioritize inclusive design from the start. Through research, empathy, and intentional design, I’ve learned that accessibility isn’t just an add-on—it’s a foundational part of crafting effective, equitable user experiences.

Previous Project
Next Project